.theme-control{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:11px;color:var(--ink,#183c35)}.theme-control>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.theme-control select{width:auto;max-width:118px;font:600 12px Manrope,Arial,sans-serif;padding:9px 20px 9px 10px;border-radius:22px;border:1px solid var(--line,#d7e1d9);background:var(--paper,#f7f8f4);color:inherit;cursor:pointer;min-height:38px}.theme-control select:focus-visible{outline:2px solid var(--teal,#087c70);outline-offset:3px}
html[data-theme=dark]{--paper:#111d1a;--ink:#e4eee8;--muted:#b0c3b9;--teal:#86d1bb;--mint:#192b24;--line:#3a5045;--lime:#d9f6b7;color-scheme:dark}
html[data-theme=dark] body{background:var(--paper);color:var(--ink)}
html[data-theme=dark] :is(.hero-visual,.model-card.e4,.model-card.victorya,.calculator,.request-section form,.request-telegram,.map-card,.segmented,.header-telegram,.steps article>span){background:#20332b;color:var(--ink);border-color:var(--line)}
html[data-theme=dark] .color-stage{background:#253b33!important}
html[data-theme=dark] :is(.model-content,.request-summary){background:#192b24}
html[data-theme=dark] :is(select,.request-section input:not([type=hidden]),.skip){background:#14251e;color:var(--ink);border-color:var(--line)}
html[data-theme=dark] :is(.segmented input:checked+span,.battery-options input:checked+span,.color-choices button[aria-pressed=true],.battery-card){background:#355648;color:#edf8f0;border-color:#86d1bb}
html[data-theme=dark] :is(.primary,.light){background:#86d1bb;color:#112a20}
html[data-theme=dark] .primary:hover{background:#a1e1ca}
html[data-theme=dark] .summary{background:#12261e;color:#edf8f0}
html[data-theme=dark] .summary .primary{background:#d9f6b7;color:#183c35}
html[data-theme=dark] .language-switch a[aria-current]{background:#86d1bb;color:#112a20}
html[data-theme=dark] :is(.image-note,.request-telegram span span){color:var(--muted)}
html[data-theme=dark] :is(.model-card,.pill,.battery-options label>span,.language-switch,.all-rates,td,th,.legal-links){border-color:var(--line)!important}
html[data-theme=dark] :is(.mobile-contact,.mobile-quote.ready){background:#15261ff5;color:var(--ink);border-color:var(--line)}
html[data-theme=dark] .mobile-contact a{background:#294439;color:var(--ink)}
html[data-theme=dark] :is(.mobile-contact a:last-child,.mobile-quote a){background:#86d1bb;color:#112a20}
html[data-theme=dark] .contact-section{background:#152a21}
html[data-theme=dark] body:not(:has(.header)) main{background:#20332b;color:#e4eee8}
html[data-theme=dark] body:not(:has(.header)) a{color:#86d1bb}
html[data-theme=dark] .notice{background:#294439}
@media(max-width:1100px){.header{flex-wrap:wrap;height:auto;min-height:96px;padding-block:14px;gap:10px}.header nav{order:4;width:100%;justify-content:space-between;margin:0}.header-telegram{margin-left:auto}.language-switch{margin-left:0}}
@media(max-width:600px){.header .brand img{width:110px}.theme-control select{max-width:95px;font-size:11px;padding:8px 4px}.header .header-telegram{display:none}.header .language-switch{margin-left:auto}.header nav{font-size:11px}.header{gap:7px}}
@media print{.theme-control{display:none}html[data-theme=dark] body,html[data-theme=dark] main{background:white!important;color:black!important}}
.compare-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}.compare-controls button{padding:12px 20px;border-radius:28px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}.compare-controls button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.comparison{border-top:1px solid var(--line)}.comparison table{min-width:500px}.comparison td{width:33%}.comparison #compare-note{margin-bottom:24px;max-width:860px}.back-top{position:fixed;right:22px;bottom:24px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);border:1px solid var(--line);z-index:110;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s;font-size:23px;box-shadow:0 4px 18px #00000015}.back-top.visible{opacity:1;visibility:visible;transform:none}@media(max-width:760px){.back-top{bottom:105px;right:16px;width:38px;height:38px}}@media(hover:hover) and (prefers-reduced-motion:no-preference){.compare-controls button,.text-link{transition:background .2s,transform .2s}.compare-controls button:hover{transform:translateY(-2px)}.button:active{transform:scale(.98)}.steps article{transition:border-color .25s}.steps article:hover{border-color:var(--teal)}}

/* Keep the current price legible while mobile visitors configure their scooter. */
@media(max-width:760px){
 .mobile-quote.ready{padding:10px 16px calc(10px + env(safe-area-inset-bottom));gap:12px;align-items:center}
 .mobile-quote .quote-main{min-width:0}
 .mobile-quote .quote-model{font-size:11px;letter-spacing:0;margin:0 0 2px;color:var(--muted)}
 .mobile-quote .quote-total{display:flex;align-items:baseline;gap:7px;white-space:nowrap}
 .mobile-quote .quote-total strong{font-size:29px;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-1px}
 .mobile-quote .quote-total span{font-size:11px}
 .mobile-quote .quote-deposit{font-size:11px;letter-spacing:0;margin:3px 0 0;color:var(--muted)}
 .mobile-quote a{flex-shrink:0;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;font-size:12px;font-weight:700}
 body:has(.mobile-quote.ready){padding-bottom:calc(120px + env(safe-area-inset-bottom))}
 body:has(.mobile-quote.ready) .back-top{bottom:calc(120px + env(safe-area-inset-bottom))}
 .config{padding:20px}
 .config fieldset{margin-bottom:18px}
 .config legend{margin-bottom:9px}
 .config .segmented label span{padding:10px 8px}
 .config .battery-options label>span{padding:10px 8px}
 .config .battery-card{display:none}
 .config #extra-note{font-size:12px;line-height:1.5;margin-bottom:0}
}
@media(max-width:359px){.mobile-quote.ready{padding-inline:12px;gap:8px}.mobile-quote a{padding-inline:12px}.mobile-quote .quote-total strong{font-size:26px}.mobile-quote .quote-total span{font-size:10px}}

.arrow-icon{display:inline-block;width:1em;height:1em;vertical-align:-.12em;flex-shrink:0;overflow:visible;pointer-events:none}
/* Mobile colour picker: keep the swatches close to their preview. */
@media(max-width:760px){
 .color-copy .color-note{display:none}
 .color-section{gap:14px}
 .color-copy h2{margin-bottom:14px}
 .color-choices{gap:8px;margin:16px 0 12px}
 .color-choices button{min-height:44px;padding:9px 11px;gap:7px}
 .color-copy #color-request-link{font-size:12px}
 .color-stage img{height:clamp(210px,32svh,280px);padding:8px}
 .color-stage figcaption{padding:12px 16px}
}
/* Soft light and restrained motion, shared by touch and pointer layouts. */
.hero-visual,.color-stage{isolation:isolate}
.hero-visual::before,.color-stage::before{content:"";position:absolute;inset:8% 0 20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,color-mix(in srgb,var(--scooter-glow,#70cab9) 35%,transparent),transparent 68%);opacity:.7}
.color-stage::before{inset:0 0 12%}
html[data-theme=dark] :is(.hero-visual,.color-stage)::before{opacity:.95}
@keyframes scooter-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes scooter-float-mobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(prefers-reduced-motion:no-preference){
 .hero-visual>img{animation:scooter-float 6s ease-in-out infinite;animation-play-state:paused}
 .hero-visual.fx-visible>img{animation-play-state:running}
 html.fx-hidden .hero-visual>img{animation-play-state:paused}
 body,.hero-visual,.model-card,.calculator,.summary,.color-stage,.mobile-contact,.mobile-quote,select{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
 .arrow-icon{transition:transform .22s ease}
 a.primary,a.light,button,.mobile-contact a,.mobile-quote a{transition:transform .18s ease,background-color .25s ease,box-shadow .25s ease}
 :is(a.primary,a.light,button,.mobile-contact a,.mobile-quote a):active{transform:scale(.97)}
 a:active .arrow-icon,a:focus-visible .arrow-icon{transform:translate(2px,-2px)}
 @media(hover:hover) and (pointer:fine){a:hover .arrow-icon{transform:translate(3px,-3px)}a.primary:hover,.mobile-quote a:hover{box-shadow:0 6px 20px #087c7020}}
 @media(max-width:760px){.hero-visual>img{animation-name:scooter-float-mobile;animation-duration:7s}.hero-visual::before,.color-stage::before{opacity:.55}}
}
@media(prefers-reduced-motion:reduce){.hero-visual>img,.color-stage,.arrow-icon,button,a{animation:none!important;transition:none!important}.hero-visual>img{translate:none!important;transform:none!important}}