/* Light is the default. Hero motion starts on entry, without a manual switch. */
:root{color-scheme:light;--theme-raised:#eef3f7;--theme-shadow:#becbd5;--theme-highlight:#fff}
:root[data-theme=dark]{color-scheme:dark;background:#0c1523;color:#e6effa;--ink:#e6effa;--muted:#aabbd0;--line:#33465c;--soft:#203148;--white:#152337;--green:#65baff;--theme-raised:#19293d;--theme-shadow:#060d17;--theme-highlight:#2b415b}
.theme-switch{display:inline-flex;gap:9px;align-items:center;border:1px solid var(--line);border-radius:28px;padding:7px 12px;min-height:44px;flex-shrink:0;background:var(--theme-raised);color:var(--ink);box-shadow:4px 4px 10px var(--theme-shadow),-4px -4px 10px var(--theme-highlight);cursor:pointer}
.theme-switch:focus-visible{outline:3px solid #42acdc;outline-offset:4px}
.theme-track{position:relative;width:62px;height:32px;overflow:hidden;border-radius:20px;background:#d5edff;box-shadow:inset 2px 2px 5px #64869e33;transition:background .45s}
.theme-thumb{position:absolute;left:4px;top:4px;width:24px;height:24px;display:grid;place-items:center;background:#ffde7d;border-radius:50%;box-shadow:0 2px 5px #18345130;transition:transform .48s cubic-bezier(.2,.9,.3,1),background .4s}
.theme-sun,.theme-moon{position:absolute;font-size:20px;line-height:1;transition:opacity .35s,transform .48s;color:#77510b}
.theme-moon{opacity:0;transform:rotate(-90deg) scale(.4);color:#234969}
.theme-stars{position:absolute;left:7px;top:5px;color:#d9eeff;font-size:15px;opacity:0;transform:translateY(10px);transition:opacity .4s,transform .4s}
.theme-label{font-size:11px;font-weight:700;min-width:38px}
.theme-switch[aria-checked=true] .theme-track{background:#163955}
.theme-switch[aria-checked=true] .theme-thumb{transform:translateX(30px);background:#deefff}
.theme-switch[aria-checked=true] .theme-sun{opacity:0;transform:rotate(90deg) scale(.4)}
.theme-switch[aria-checked=true] .theme-moon{opacity:1;transform:rotate(0) scale(1)}
.theme-switch[aria-checked=true] .theme-stars{opacity:1;transform:translateY(0)}
.theme-floating{position:fixed;left:18px;bottom:calc(94px + env(safe-area-inset-bottom));z-index:65}.auth-form>.theme-switch,.legal-page>.theme-switch{display:flex;margin:0 0 22px auto}
.public-home{--green:#096d92;--muted:#546e7d;--ink:#122e42;background:radial-gradient(ellipse 70% 450px at 50% 0,#e2f6fb,transparent),#f7fafb}
.hero.hero-centered{display:block;text-align:center;min-height:0;padding:44px 24px 22px;max-width:1050px;color:var(--ink)}
.hero-centered .hero-copy>p{max-width:610px;margin:24px auto;color:var(--muted)}
.hero-centered .hero-copy>.row{justify-content:center}
.hero-centered h1{font-size:clamp(42px,5.4vw,68px);line-height:1.06;letter-spacing:-3px;font-weight:700}
.hero-centered h1 em{color:#087ea7}
.hero-copy>h1{animation:journey-enter .55s both}.hero-copy>p{animation:journey-enter .6s both}
.hero-animation{max-width:1120px;margin:0 auto;padding:0 24px}
.hero-drive-scene{position:relative;height:240px;overflow:hidden;border-radius:28px;background:linear-gradient(120deg,#082a40,#0b4054 60%,#125a61);isolation:isolate;color:#7de4f6}
.route-grid{position:absolute;inset:0;background-image:linear-gradient(#8acfd80b 1px,transparent 1px),linear-gradient(90deg,#8acfd80b 1px,transparent 1px);background-size:36px 36px;transform:rotate(-8deg) scale(1.3)}
.route-aura{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 25%,#21c6c633,transparent 65%);animation:route-breathe 5s ease-in-out infinite alternate}
.route-circuit{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke-linecap:round}
.route-shadow{stroke:#081e31;stroke-width:25}.route-base{stroke:#498b9e;stroke-width:2;stroke-dasharray:5 8}
.route-signal{stroke:#7debe0;stroke-width:5;stroke-dasharray:5 95;animation:route-signal 7s linear infinite;filter:drop-shadow(0 0 6px #7debe0)}
.route-node{position:absolute;top:75px;display:flex;flex-direction:column;align-items:center;gap:12px;transform:translateX(-50%);color:#ddf6ff}
.route-node>span{width:46px;height:46px;display:grid;place-items:center;background:#154c62;border:1px solid #84d8dc77;border-radius:16px;color:#83f0dc;font-size:26px;box-shadow:0 8px 24px #061b2b44}
.route-node b{font-size:12px;letter-spacing:.3px;white-space:nowrap}.node-drive{left:16%}.node-sync{left:50%;top:68px}.node-care{left:84%}
.route-road{position:absolute;bottom:17px;left:6%;right:6%;height:42px;border-bottom:1px solid #8cd9e34d}
.route-car{position:absolute;width:68px;bottom:-2px;animation:route-car 11s linear infinite;color:#c3f57b}
.route-car svg{display:block;width:100%}
@keyframes route-car{0%{left:0;opacity:0}5%{opacity:1}90%{opacity:1}100%{left:calc(100% - 68px);opacity:0}}
@keyframes route-signal{to{stroke-dashoffset:-100}}
@keyframes route-breathe{to{opacity:.35;transform:translateX(60px)}}
.hero-animation-caption{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 4px 20px;color:var(--muted)}
.hero-animation-caption p{margin:0;font-size:12px}
.hero-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:20px;background:var(--white);overflow:hidden}
.hero-paths a{padding:24px;display:flex;flex-direction:column;gap:11px}
.hero-paths a+a{border-left:1px solid var(--line)}
.hero-paths a:hover{background:var(--soft)}
.hero-paths span{font-size:10px;font-weight:750;letter-spacing:1px;color:var(--green)}
.hero-paths strong{font-size:17px;letter-spacing:-.4px}.hero-paths small{color:var(--muted);line-height:1.6}
.public-home .section{padding:64px 32px;max-width:1120px}.public-home .section h2{font-size:clamp(28px,4vw,42px)}
.public-home .cta-band{max-width:1072px;margin:0 auto;background:#e2f2ee;padding:34px;color:#173e43}
.dongle-shop{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(120deg,#eaf7ff,#e9faf3);border-color:#b6dbe5}
.dongle-shop p{margin-bottom:0;max-width:580px}.dongle-shop .btn{flex-shrink:0}
[data-page-hidden=true] .hero-drive-scene *{animation-play-state:paused!important}
[data-theme=dark] .public-home{--muted:#adc2d4;--ink:#e6effa;--green:#7dd9ef;background:radial-gradient(ellipse 70% 450px at 50% 0,#153342,transparent),#0c1523}
[data-theme=dark] .hero-centered h1 em{color:#78d9e8}
[data-theme=dark] .public-home .cta-band,[data-theme=dark] .dongle-shop{background:#183943;color:#e6effa}
[data-theme=dark] .cta-band p{color:#b7d6da}
[data-theme=dark] .live-car{background:linear-gradient(145deg,#142d41,#1a3335);color:#e6effa;border-color:#33465c}[data-theme=dark] .live-metrics strong{color:#93d5ff}[data-theme=dark] .live-metrics span,[data-theme=dark] .live-status{color:#b3cede}
/* Semantic surfaces, not an inversion filter: charts, car photos and maps stay accurate. */
[data-theme=dark] body,[data-theme=dark] .app-shell{background:#0c1523;color:#e6effa;--ink:#e6effa;--green:#65baff;--muted:#aabbd0;--line:#33465c;--soft:#203148}
[data-theme=dark] :is(.card,.stat-card,.metric,.modal,.auth-main,.sidebar,.topbar,.mobile-bottom,.icon-btn,.btn.secondary,.vehicle-mini,.device-card,.notice,.feature-card,.support-window,.support-message,.support-chat-row,.legal-page){background:#152337;color:#e6effa;border-color:#33465c}
[data-theme=dark] :is(input:not([type=checkbox]),select,textarea){background:#0e1c2c;color:#e6effa;border-color:#425870}
[data-theme=dark] :is(.stat-top,.stat-value,.vehicle-mini h4,.profile-info strong,.model-photo figcaption,.nav-item,.breadcrumb,.security-list strong,.support-message small){color:#c5d8ef}
[data-theme=dark] :is(.muted,.hint,.label,.vehicle-vin,.portal-footer,.support-status){color:#aabbd0}
[data-theme=dark] .btn:not(.secondary):not(.danger):not(.ghost){background:#1178cd;color:#fff}
[data-theme=dark] .btn.lime{background:#c9f36a!important;color:#112638!important}
[data-theme=dark] :is(.nav-item.active,.mobile-bottom a.active,.empty-icon,.subtle-banner,.support-message.role-CUSTOMER,.support-chat-row.selected){background:#213e5c;color:#b8e7ff}
[data-theme=dark] .app-shell .stat-card:nth-child(2){background:#143d3a}[data-theme=dark] .app-shell .stat-card:nth-child(3){background:#302744}[data-theme=dark] .app-shell .stat-card:nth-child(4){background:#43351f}
[data-theme=dark] :is(.support-window>header,.welcome-journey){background:linear-gradient(120deg,#15344f,#193c40);color:#e6effa}
[data-theme=dark] :is(.journey-steps a,.support-options button){background:#1c344b;color:#d9efff;border-color:#537a99}
[data-theme=dark] .welcome-journey summary span,[data-theme=dark] .journey-steps b{color:#86d9f0}
[data-theme=dark] .support-message.role-SUPPORT{background:#174338}
[data-theme=dark] .badge.green{background:#194234;color:#b6f2d0}[data-theme=dark] .badge.amber{background:#493817;color:#ffe0a0}[data-theme=dark] .badge.red{background:#502a32;color:#ffc2c9}
[data-theme=dark] .data-table :is(th,td){color:#d3e1f2;border-color:#33465c}[data-theme=dark] .data-table th{background:#1a2c40}
[data-theme=dark] .hero-drive-scene{background:linear-gradient(145deg,#13354b,#172c51,#175254);color:#28b2eb}
[data-theme=dark] .hero-glow{background:#5dccff44}
[data-theme=dark] .site-header>.brand{background:none;font-size:21px;gap:9px;width:auto}[data-theme=dark] .site-header>.brand>img,[data-theme=dark] .site-header>.brand>span{display:block}
[data-theme=dark] :is(.form-error,.alert){background:#453520;color:#ffdfae}[data-theme=dark] .form-error{background:#482931;color:#ffbfc6}

@media(max-width:800px){.site-header nav a[href="#features"]{display:none}.hero.hero-centered{padding-top:42px}.hero-paths a{padding:18px}.dongle-shop{align-items:flex-start;flex-direction:column}}
@media(max-width:640px){.theme-switch{padding:6px 8px;gap:5px}.topbar-actions .theme-label,.site-header .theme-label{display:none}.hero-animation{padding:0 16px}.hero-paths{grid-template-columns:1fr}.hero-paths a+a{border-left:0;border-top:1px solid var(--line)}.hero-paths a{gap:7px}.hero-animation-caption{align-items:flex-start}.hero-animation-caption p{max-width:170px}.hero-centered h1{letter-spacing:-2px}.route-node b{font-size:10px}.route-node>span{width:38px;height:38px;font-size:23px}.public-home .section{padding:48px 20px}.public-home .cta-band{margin:0 16px;padding:24px}.site-header nav{gap:12px}.theme-floating{left:12px}}
@media(max-width:420px){.site-header{padding:16px}.site-header>.brand{width:130px;height:45px}.site-header nav{gap:8px}.site-header nav .btn{padding:10px 10px;font-size:12px}[data-theme=dark] .site-header>.brand{font-size:17px;gap:6px}[data-theme=dark] .site-header>.brand>img{width:30px;height:30px}.hero-centered h1{font-size:42px}.hero-copy .row>.btn{width:100%}}
@media(prefers-reduced-motion:reduce){:root *,:root *::before,:root *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Phone-specific composition: a shallow lane, not a squeezed desktop circuit. */
@media(max-width:640px){
 .hero-drive-scene{height:112px;border-radius:20px}
 .route-circuit{display:none}
 .route-node,.node-sync{top:17px;gap:0}
 .route-node>span{display:none}
 .route-node b{font-size:11px;font-weight:600;letter-spacing:0}
 .node-drive{left:18%}.node-care{left:82%}
 .route-road{bottom:20px;height:30px;left:7%;right:7%;border-bottom:0;background:repeating-linear-gradient(90deg,#a8dbe34d 0 16px,transparent 16px 30px) left bottom/100% 1px no-repeat}
 .route-car{width:48px;animation-name:route-car-mobile;animation-duration:8s}
 .hero-animation-caption{justify-content:center;padding:10px 0 18px}
 .hero-animation-caption p{max-width:none;text-align:center;font-size:11px}
}
@keyframes route-car-mobile{0%{left:0;opacity:0}7%{opacity:1}90%{opacity:1}100%{left:calc(100% - 48px);opacity:0}}
/* Reduced-motion visitors receive a short, non-travelling welcome instead. */
@media(prefers-reduced-motion:reduce){
 :root .hero-drive-scene .route-car{left:42%;animation:route-welcome 1.6s ease-out both!important}
 :root .hero-drive-scene .route-signal{stroke-dashoffset:-45;animation:route-welcome 1.6s ease-out both!important}
}
@keyframes route-welcome{from{opacity:.25}to{opacity:1}}