/* Layout: one dark stage; a single bike fills the first screen, everything after it is a quiet column in the same gold. */
:root{
  --bg:#141416; --bg-2:#1d1d20; --card:#232326; --line:#34353a;
  --gold:#c9a35a; --gold-light:#e6cd8a; --gold-dark:#8e6f30;
  --fg:#e8e2d4; --fg-2:#b9b3a6; --fg-3:#8d8778;
  --display:'Cinzel',Georgia,serif; --body:'Manrope','Helvetica Neue',Arial,sans-serif;
  --t:all .35s cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:var(--gold-light)}
img{max-width:100%}
h1,h2,h3{margin:0;text-wrap:balance}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.k{font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;position:relative;overflow:hidden;text-decoration:none;color:#1a1710;font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;padding:16px 30px;border-radius:6px;border:0;cursor:pointer;font-family:inherit;background:linear-gradient(90deg,#8d6d33 0%,#d8b86e 22%,#f1dc9d 48%,#c9a35a 72%,#8f6f36 100%);box-shadow:0 8px 20px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.5);transition:var(--t)}
.btn::after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(60deg,transparent,rgba(255,255,255,.4),transparent);transform:rotate(30deg) translateX(-100%);transition:transform .8s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(201,163,90,.4),inset 0 1px 0 rgba(255,255,255,.6)}
.btn:hover::after{transform:rotate(30deg) translateX(100%)}
.btn.o{background:none;color:var(--gold-light);border:1px solid var(--gold);box-shadow:none}
.btn.o:hover{background:rgba(201,163,90,.12);border-color:var(--gold-light);color:#fff;box-shadow:0 0 15px rgba(201,163,90,.22)}
.btn:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

/* header */

.nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-block:10px}
.nav nav{display:flex;gap:28px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.nav nav a{color:var(--fg);text-decoration:none;position:relative;padding:6px 0}
.nav nav a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--gold);box-shadow:0 0 8px var(--gold);transition:var(--t)}
.nav nav a:hover{color:var(--gold-light)}.nav nav a:hover::after{width:100%}
.nav .r{justify-content:flex-end}
/* the logo clip is the header's backdrop: stone wall across the full width, the gold logo in the middle */
/* the header is the film's stone wall: a blurred frame of it spans the full width, the clip sits on top with wide feathered edges, so there is no seam */
header{background:#1b1c1e url(/img/hdr-wall.jpg) center/cover no-repeat;overflow:hidden}
header::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,20,22,.5) 0%,rgba(20,20,22,0) 22%,rgba(20,20,22,0) 78%,rgba(20,20,22,.5) 100%);pointer-events:none}
.hbg{position:absolute;inset:0;z-index:-1;pointer-events:none;display:flex;justify-content:center}
.hbg video,.hbg img{height:100%;width:auto;max-width:none;display:block;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 10%,rgba(0,0,0,.5) 20%,rgba(0,0,0,.85) 30%,#000 38%,#000 62%,rgba(0,0,0,.85) 70%,rgba(0,0,0,.5) 80%,rgba(0,0,0,.15) 90%,transparent 100%),linear-gradient(180deg,rgba(0,0,0,.6) 0%,#000 18%,#000 86%,rgba(0,0,0,.6) 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.15) 10%,rgba(0,0,0,.5) 20%,rgba(0,0,0,.85) 30%,#000 38%,#000 62%,rgba(0,0,0,.85) 70%,rgba(0,0,0,.5) 80%,rgba(0,0,0,.15) 90%,transparent 100%),linear-gradient(180deg,rgba(0,0,0,.6) 0%,#000 18%,#000 86%,rgba(0,0,0,.6) 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.hbg img{position:absolute;top:0;opacity:0;transition:opacity .4s ease}
.hbg.still video{display:none}.hbg.still img{opacity:1}
.hbg.dark img{opacity:0}
.nav .logo{display:block;height:130px;width:320px;max-width:100%}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;isolation:isolate;border-bottom:1px solid rgba(201,163,90,.3)}
.nav .cta{display:flex;justify-content:flex-end;align-items:center;gap:22px}
.nav .cta .btn{padding:11px 20px;font-size:12px}

/* hero */
.hero{position:relative;height:clamp(540px,42vw,760px);display:grid;align-items:center;overflow:hidden;isolation:isolate}
.stage{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 55% at 50% 30%,#2f2a1f 0%,#1a1a1c 55%,#101012 100%)}
/* bikes: the scroll parallax sits on .bike (transform only); the change between bikes is a two-phase fade on the image itself,
   out first, then in, with a slight drift and defocus, so two silhouettes never overlap */
.stage .bike{position:absolute;inset:0;transition:transform .1s ease-out;will-change:transform;transform-origin:62% 70%;pointer-events:none}
/* launch: the bike pulls away to the right under throttle (slow start, hard acceleration, horizontal motion blur);
   arrive: the next one comes in from the left with momentum, overshoots a touch and settles */
.stage .bike img{opacity:0;will-change:opacity,transform;transform-origin:50% 60%;backface-visibility:hidden}
.stage .bike.on img{opacity:1}
.stage .bike.out img{animation:launch 1.4s cubic-bezier(.55,0,.85,.3) forwards}
.stage .bike.in img{animation:arrive 1.9s cubic-bezier(.12,.8,.2,1) forwards}
/* compositor-only: translate, scale and opacity. The motion smear is a horizontal stretch, no filter, so it stays at 60 fps. */
@keyframes launch{0%{opacity:1;transform:translate3d(0,0,0) scale3d(1,1,1)}25%{opacity:1;transform:translate3d(-14px,0,0) scale3d(1.01,1.01,1)}70%{opacity:.7;transform:translate3d(30vw,0,0) scale3d(1.03,1.03,1)}100%{opacity:0;transform:translate3d(80vw,0,0) scale3d(1.05,1.05,1)}}
@keyframes arrive{0%{opacity:0;transform:translate3d(-60vw,0,0) scale3d(1.04,1.04,1)}45%{opacity:1;transform:translate3d(30px,0,0) scale3d(1.01,1.01,1)}75%{transform:translate3d(-6px,0,0) scale3d(1,1,1)}100%{opacity:1;transform:translate3d(0,0,0) scale3d(1,1,1)}}
/* wind: thin air wisps at different heights sweep with the launch, a soft haze trails behind; transform and opacity only */
.stage .wind{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stage .wind i{position:absolute;left:-30%;width:28%;height:2px;border-radius:2px;opacity:0;background:linear-gradient(90deg,transparent,rgba(230,205,138,.55) 40%,rgba(255,255,255,.75) 70%,transparent);will-change:transform,opacity;transform:translate3d(0,0,0) scaleX(.4)}
.stage .wind i:nth-child(1){top:22%;width:22%}.stage .wind i:nth-child(2){top:31%;width:34%;height:1px}.stage .wind i:nth-child(3){top:44%;width:26%}.stage .wind i:nth-child(4){top:53%;width:38%;height:3px;opacity:0}.stage .wind i:nth-child(5){top:63%;width:24%;height:1px}.stage .wind i:nth-child(6){top:72%;width:32%}.stage .wind i:nth-child(7){top:80%;width:20%;height:1px}
.stage .wind b{position:absolute;left:-40%;top:30%;width:60%;height:45%;border-radius:50%;opacity:0;background:radial-gradient(ellipse,rgba(201,163,90,.18),transparent 65%);will-change:transform,opacity}
.stage .wind.go i{animation:wisp 1.5s cubic-bezier(.5,0,.8,.3) forwards}
.stage .wind.go i:nth-child(2){animation-delay:.08s}.stage .wind.go i:nth-child(3){animation-delay:.16s;animation-duration:1.3s}.stage .wind.go i:nth-child(4){animation-delay:.05s;animation-duration:1.7s}.stage .wind.go i:nth-child(5){animation-delay:.22s}.stage .wind.go i:nth-child(6){animation-delay:.12s;animation-duration:1.4s}.stage .wind.go i:nth-child(7){animation-delay:.3s;animation-duration:1.2s}
.stage .wind.go b{animation:haze 2.4s ease-out forwards}
@keyframes wisp{0%{opacity:0;transform:translate3d(0,0,0) scaleX(.4)}20%{opacity:.9}100%{opacity:0;transform:translate3d(520%,0,0) scaleX(2.6)}}
@keyframes haze{0%{opacity:0;transform:translate3d(0,0,0) scale3d(.8,.8,1)}25%{opacity:.8}100%{opacity:0;transform:translate3d(240%,-6%,0) scale3d(1.6,1.1,1)}}
@media (prefers-reduced-motion:reduce){.stage .wind.go i,.stage .wind.go b{animation:none}}
.stage .streaks{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity,transform;background:repeating-linear-gradient(180deg,transparent 0 23px,rgba(230,205,138,.22) 23px 24px,transparent 24px 61px),repeating-linear-gradient(180deg,transparent 0 41px,rgba(255,255,255,.14) 41px 42px,transparent 42px 97px);-webkit-mask:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%);mask:linear-gradient(90deg,transparent 0%,#000 30%,#000 100%)}
.stage .streaks.go{animation:streak 1.6s cubic-bezier(.6,0,.9,.35) forwards}
@keyframes streak{0%{opacity:0;transform:translate3d(-30%,0,0) scale3d(.6,1,1)}30%{opacity:.9}100%{opacity:0;transform:translate3d(60%,0,0) scale3d(2.2,1,1)}}
@media (prefers-reduced-motion:reduce){.stage .bike.out img,.stage .bike.in img,.stage .streaks.go{animation:none}.stage .bike.in img{opacity:1}}
.stage .bike img{position:absolute;right:-6%;top:-4%;height:124%;width:auto;max-width:none;object-fit:cover;object-position:right top;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 8%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.25) 26%,rgba(0,0,0,.55) 36%,rgba(0,0,0,.85) 44%,#000 50%,#000 70%,rgba(0,0,0,.75) 82%,rgba(0,0,0,.3) 92%,transparent 100%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 8%,#000 20%,#000 74%,rgba(0,0,0,.5) 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,transparent 8%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.25) 26%,rgba(0,0,0,.55) 36%,rgba(0,0,0,.85) 44%,#000 50%,#000 70%,rgba(0,0,0,.75) 82%,rgba(0,0,0,.3) 92%,transparent 100%),linear-gradient(180deg,transparent 0%,rgba(0,0,0,.5) 8%,#000 20%,#000 74%,rgba(0,0,0,.5) 90%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,16,18,.96) 0%,rgba(16,16,18,.82) 26%,rgba(16,16,18,.45) 44%,rgba(16,16,18,0) 60%),linear-gradient(270deg,rgba(16,16,18,.55) 0%,rgba(16,16,18,0) 18%),linear-gradient(0deg,rgba(16,16,18,.7) 0%,rgba(16,16,18,0) 26%)}
.stage .dust{position:absolute;left:0;right:0;top:0;height:200%;pointer-events:none;background-image:radial-gradient(circle,rgba(230,205,138,.55) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(230,205,138,.35) 0 1px,transparent 1.5px);background-size:260px 260px,170px 170px;background-position:0 0,80px 40px;opacity:.35;will-change:transform;animation:dust 40s linear infinite}
@keyframes dust{to{transform:translate3d(0,-50%,0)}}
.hero .wrap{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;padding-block:72px;width:100%}
.hero .copy{display:flex;flex-direction:column;gap:22px;max-width:36rem}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(34px,5.2vw,68px);line-height:1.04;letter-spacing:.03em;text-transform:uppercase;color:var(--gold-light);background:linear-gradient(135deg,#f0d59e,#c9a35a 55%,#9e7d3b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero .rule{width:90px;height:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.hero p{margin:0;color:var(--fg-2);font-size:17px;max-width:30rem}
.vin{display:flex;gap:10px;flex-wrap:wrap}
.vin label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.vin input{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;letter-spacing:.06em;color:var(--fg);background:rgba(20,20,22,.85);border:1px solid #8a7445;border-radius:6px;padding:15px 18px;transition:var(--t)}
.vin input::placeholder{color:var(--fg-3)}
.vin input:focus{outline:none;border-color:var(--gold-light);box-shadow:0 0 15px rgba(201,163,90,.22)}
.hero .links{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:14px}
.hero .links a.plain{color:var(--fg-2);text-decoration:none;border-bottom:1px solid transparent;transition:var(--t)}
.hero .links a.plain:hover{color:var(--gold-light);border-color:var(--gold)}
.hero .model{position:absolute;right:max(16px,env(safe-area-inset-right,0px));bottom:28px;display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}
.hero .model b{color:var(--gold-light);font-weight:600}
.hero .dots{display:flex;gap:8px}
.hero .dots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold);background:transparent;padding:0;cursor:pointer;transition:var(--t)}
.hero .dots button.on{background:var(--gold);box-shadow:0 0 8px var(--gold)}

/* brands marquee */
.brands{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2);overflow:hidden;padding-block:18px}
.brands .track{display:flex;gap:56px;width:max-content;animation:marq 38s linear infinite;font-family:var(--display);font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-2);white-space:nowrap}
.brands .track span::after{content:"◆";margin-left:56px;color:var(--gold);font-size:9px;vertical-align:middle}
@keyframes marq{to{transform:translateX(-50%)}}

/* sections */
section.s{padding-block:88px}
.head{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;margin-bottom:44px}
.head h2{font-family:var(--display);font-weight:500;font-size:clamp(26px,3.4vw,42px);letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light)}
.head .div{width:80px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.head p{margin:0;color:var(--fg-2);max-width:40rem}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
/* Warp frame: chamfered corners, a hairline edge, a comet along the top edge. On hover the card lifts, the edge brightens, the comet speeds up. */
.card{position:relative;background:linear-gradient(180deg,rgba(30,30,35,.96),rgba(19,19,23,.98));border:0;border-radius:4px;box-shadow:0 24px 50px rgba(0,0,0,.5);transition:var(--t);--cut:18px;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.card::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(135deg,rgba(201,163,90,.85),rgba(201,163,90,.14) 40%,rgba(201,163,90,.14) 60%,rgba(201,163,90,.85));clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut),0 var(--cut),1px calc(var(--cut) + .5px),1px calc(100% - 1px),calc(100% - var(--cut) - .5px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--cut) - .5px),calc(100% - 1px) 1px,calc(var(--cut) + .5px) 1px,0 var(--cut));transition:var(--t);opacity:.9}
.card::after{content:"";position:absolute;top:0;left:var(--cut);width:90px;height:3px;z-index:1;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(230,205,138,.9) 70%,#fff);border-radius:2px;transform:translate3d(0,0,0) scaleX(0);transform-origin:0 50%;opacity:0;animation:warp 3.4s cubic-bezier(.6,0,.2,1) infinite;animation-play-state:paused;will-change:transform,opacity}
.card.vis::after{animation-play-state:running}
.card:nth-child(2)::after{animation-delay:-.9s}.card:nth-child(3)::after{animation-delay:-1.8s}.card:nth-child(4)::after{animation-delay:-2.7s}
/* the card a menu link points to (Сервиз, Части, Наем) lights up, so it is clear which one is meant */
.grid6 .card:target{background:linear-gradient(180deg,rgba(201,163,90,.2),rgba(19,19,23,.98) 70%);animation:hit 1.6s ease-out}
.grid6 .card:target::before{background:linear-gradient(135deg,#f7e6ad,var(--gold) 50%,#f7e6ad);opacity:1}
@keyframes hit{0%,40%{transform:translateY(-6px)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.grid6 .card:target{animation:none}}
.card:hover{transform:translateY(-6px);box-shadow:0 36px 70px rgba(0,0,0,.65),0 0 36px rgba(201,163,90,.14)}
.card:hover::before{opacity:1;background:linear-gradient(135deg,rgba(240,215,150,1),rgba(201,163,90,.35) 40%,rgba(201,163,90,.35) 60%,rgba(240,215,150,1))}
.card:hover::after{animation-duration:1.2s}
@keyframes warp{0%{transform:translate3d(0,0,0) scaleX(0);opacity:0}10%{opacity:1}45%{transform:translate3d(calc(var(--w,300px) - 90px),0,0) scaleX(1);opacity:1}55%{opacity:0}100%{transform:translate3d(calc(var(--w,300px) - 90px),0,0) scaleX(0);opacity:0}}
@media (prefers-reduced-motion:reduce){.card::after{animation:none}.card:hover{transform:none}}
.dir{padding:34px 26px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;min-height:100%}
.dir .ico{width:92px;height:92px;display:grid;place-items:center}
.dir .ico img{max-height:92px;width:auto;filter:drop-shadow(0 0 10px rgba(201,163,90,.3))}
.dir .ico svg{width:64px;height:64px;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 8px rgba(201,163,90,.3))}
.dir h3{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light)}
.dir p{margin:0;color:var(--fg-2);font-size:14px;flex:1}
.dir a{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-decoration:none}
.dir a::after{content:" ◇"}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;position:relative}
.steps::before{content:"";position:absolute;left:16%;right:16%;top:36px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);transform:scaleX(0);transform-origin:left;transition:transform 1.4s ease}
.steps.in::before{transform:scaleX(1)}
.step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.step .n{width:72px;height:72px;border-radius:50%;border:1px solid var(--gold);background:var(--bg);display:grid;place-items:center;font-family:var(--display);font-size:28px;color:var(--gold-light);box-shadow:0 0 0 6px var(--bg),0 0 0 7px #3b3428}
.step h3{font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fg)}
.step p{margin:0;color:var(--fg-2);font-size:15px;max-width:22rem}

/* listings strip */
.strip{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-color:var(--gold-dark) transparent}
.strip .card{flex:0 0 min(78vw,320px);scroll-snap-align:start}
.strip img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.strip .b{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.strip .b b{font-size:16px;color:var(--fg)}
.strip .b span{font-size:13px;color:var(--fg-3)}
.badge{position:absolute;top:14px;left:14px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);background:rgba(20,20,22,.8);border:1px solid var(--gold);padding:5px 10px;border-radius:999px}
.strip .b .row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.strip .b .row b{font-size:18px}
.strip .b .row a{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none}

/* care */
.care{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.care .card{padding:30px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.care img{height:120px;width:auto;filter:drop-shadow(0 0 10px rgba(201,163,90,.3))}
.care h3{font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light)}
.care p{margin:0;color:var(--fg-2);font-size:14px;flex:1}

/* request */
.req .card{max-width:760px;margin:0 auto;padding:40px 32px;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.seg{display:flex;width:min(100%,380px);padding:4px;border:1px solid #6b5a35;border-radius:999px;background:#1a1a1d}
.seg label{flex:1;display:flex;align-items:center;justify-content:center;min-height:42px;font-size:14px;font-weight:500;color:var(--fg-2);border-radius:999px;cursor:pointer;transition:var(--t)}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg input:checked+label{color:#1a1710;font-weight:700;background:linear-gradient(180deg,#f3dda2,#c9a35a 55%,#9e7c3c)}
.seg input:focus-visible+label{outline:2px solid var(--gold-light)}

footer{border-top:1px solid var(--line);background:#111113;padding-block:44px 32px;text-align:center;color:var(--fg-3);font-size:13px;letter-spacing:.08em;text-transform:uppercase}
footer img{height:64px;width:auto;margin-bottom:14px;opacity:.9}

/* reveal */
.rv{opacity:1;transform:none;transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.js .rv{opacity:0;transform:translateY(26px)}
.js .rv.in{opacity:1;transform:none}

@media (max-width:980px){.nav{grid-template-columns:auto 1fr}.nav nav.l{display:none}.nav .logo{grid-column:1;justify-self:start;height:84px;width:200px;margin-left:14px}.nav .cta{grid-column:2}.hbg{justify-content:flex-start;margin-left:-26px}}@media (max-width:480px){.nav .logo{height:68px;width:160px;margin-left:10px}.nav .cta{gap:8px}}
@media (max-width:980px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.care{grid-template-columns:1fr}.steps{grid-template-columns:1fr;gap:40px}.steps::before{display:none}.hero .wrap{grid-template-columns:1fr}.stage .bike img{right:-30%;top:auto;bottom:0;height:70%;opacity:.6}.stage::after{background:linear-gradient(180deg,rgba(16,16,18,.85) 0%,rgba(16,16,18,.3) 55%,rgba(16,16,18,0) 100%)}}
@media (max-width:560px){.grid4{grid-template-columns:1fr}.nav .cta .plain{display:none}.hero .model{position:static;margin-top:28px}}
@media (prefers-reduced-motion:reduce){.stage .dust,.brands .track{animation:none}.js .rv{opacity:1;transform:none}.btn::after{display:none}.steps::before{transform:none}}
.langsw{padding:9px 12px;font-size:12px;letter-spacing:.06em;white-space:nowrap}
@media (max-width:560px){.langsw{padding:8px 10px}}

/* the request form */
.ask{width:100%;display:flex;flex-direction:column;gap:16px;text-align:left}
.ask .f2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ask label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-2)}
.ask input,.ask select,.ask textarea{font:inherit;font-size:16px;letter-spacing:normal;text-transform:none;font-weight:400;color:var(--fg);background:rgba(20,20,22,.85);border:1px solid #6b5a35;border-radius:6px;padding:13px 14px;min-width:0;transition:var(--t)}
.ask textarea{resize:vertical;min-height:120px}
.ask input:focus,.ask select:focus,.ask textarea:focus{outline:none;border-color:var(--gold-light);box-shadow:0 0 15px rgba(201,163,90,.22)}
.ask [aria-invalid="true"]{border-color:#c46a5a}
.ask .btn{align-self:center;min-width:220px}
.ask .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ask .note{margin:0;text-align:center;color:var(--fg-2);min-height:1.6em}
.ask .note.ok{color:var(--gold-light)}.ask .note.err{color:#e09a8c}
.vin button.btn{font-family:inherit}
/* who we are: two people, four rules, diagnostics and software, the road ahead */
.team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.who{padding:38px 32px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-height:100%}
.who .mono svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.who .mono{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:38px;color:var(--gold-light);border:1px solid var(--gold);background:radial-gradient(circle at 35% 30%,#3a3222,#17171a 70%);box-shadow:0 0 0 6px var(--bg-2),0 0 0 7px #3b3428}
.who h3{font-family:var(--display);font-weight:500;font-size:26px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light)}
.who .role{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.who p{margin:0;color:var(--fg-2);font-size:15px;max-width:30rem}
.who ul{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--fg)}
.who li::before{content:"◆";color:var(--gold);font-size:9px;margin-right:10px;vertical-align:middle}
.rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.rule-i{display:flex;flex-direction:column;gap:10px;padding:24px 20px;border-top:1px solid var(--gold)}
.rule-i b{font-family:var(--display);font-size:30px;font-weight:500;color:var(--gold-light);line-height:1}
.rule-i h3{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.rule-i p{margin:0;color:var(--fg-2);font-size:14px}
.diag{margin-top:72px}
.diag-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:40px 36px}
.diag-in h3{font-family:var(--display);font-weight:500;font-size:clamp(24px,2.8vw,34px);letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light);margin:10px 0 14px}
.diag-in p{margin:0;color:var(--fg-2)}
.diag .facts{display:grid;gap:22px;margin:0}
.diag .facts div{display:flex;align-items:baseline;gap:16px}
.diag .facts dt{font-family:var(--display);font-size:clamp(36px,4vw,48px);line-height:1;color:var(--gold-light);min-width:2.4em;text-align:right}
.diag .facts dd{margin:0;color:var(--fg-2);font-size:15px}
.road{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;position:relative}
.road::before{content:"";position:absolute;left:0;right:0;top:11px;height:1px;background:linear-gradient(90deg,var(--gold),rgba(201,163,90,.15))}
.road li{position:relative;padding-top:36px;display:flex;flex-direction:column;gap:8px}
.road li::before{content:"";position:absolute;top:4px;left:0;width:14px;height:14px;transform:rotate(45deg);border:1px solid var(--gold);background:var(--bg-2)}
.road li:first-child::before{background:var(--gold);box-shadow:0 0 12px var(--gold)}
.road b{font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.road h3{font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light)}
.road p{margin:0;color:var(--fg-2);font-size:15px}
.trust{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0;padding:0;list-style:none;font-size:13px;color:var(--fg-2)}
.trust li::before{content:"✓";color:var(--gold-light);margin-right:8px}
@media (max-width:980px){.team,.diag-in{grid-template-columns:1fr}.rules{grid-template-columns:repeat(2,minmax(0,1fr))}.road{grid-template-columns:1fr;gap:28px}.road::before{left:6px;right:auto;top:0;bottom:0;width:1px;height:auto;background:linear-gradient(180deg,var(--gold),rgba(201,163,90,.15))}.road li{padding:0 0 0 36px}.road li::before{top:6px}}
@media (max-width:560px){.rules{grid-template-columns:1fr}.who{padding:32px 20px 26px}.diag-in{padding:30px 20px}.diag .facts dt{min-width:2em}}

/* social links in the footer: Facebook, Instagram, YouTube  */
footer .social{display:flex;justify-content:center;gap:14px;margin:4px 0 16px}
footer .social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(201,163,90,.45);border-radius:50%;color:var(--gold-light);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s}
footer .social a:hover,footer .social a:focus-visible{transform:translateY(-2px);border-color:var(--gold-light)}
footer .social svg{width:20px;height:20px;fill:currentColor}

.btn{white-space:nowrap}
@media (max-width:420px){.nav .cta .btn{padding:10px 12px;letter-spacing:.04em}}
@media (max-width:560px){.ask .f2{grid-template-columns:1fr}.req .card{padding:32px 18px}}
/* header: the five links stay on one line; on narrower screens they tighten before the menu folds away at 980px */
.nav nav{white-space:nowrap;gap:clamp(16px,1.9vw,28px)}
/* the logo's wings in the header film reach about 130px either side of the centre: below 1480px the links shrink to keep clear of them */
@media (max-width:1480px){.nav nav{font-size:11px;letter-spacing:.12em;gap:clamp(14px,1.5vw,22px)}.nav .cta{gap:14px}}
@media (max-width:1180px){.nav nav{font-size:10.5px;letter-spacing:.1em;gap:14px}}
@media (max-width:1060px){.nav nav{font-size:10px;letter-spacing:.08em;gap:12px}}
/* buttons: corners cut like the cards, a brushed-gold face with a bevel, a sheen on hover and a diamond that slides.
   Hover moves only transform and opacity. */
.btn{--c:10px;border-radius:0;clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 46%,rgba(0,0,0,.06) 54%,rgba(0,0,0,0)),linear-gradient(90deg,#86672d 0%,#d6b56a 20%,#f7e6ad 46%,#d9bb72 60%,#b08a43 80%,#7d5f28 100%);
  box-shadow:inset 0 1px 0 rgba(255,250,225,.75),inset 0 -2px 0 rgba(84,60,18,.6),inset 1px 0 0 rgba(255,240,200,.25),inset -1px 0 0 rgba(84,60,18,.35);
  text-shadow:0 1px 0 rgba(255,244,210,.5);padding:16px 30px 16px 32px;gap:.8em}
.btn::before{content:"";flex:none;order:2;width:7px;height:7px;background:currentColor;opacity:.75;transform:rotate(45deg);transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .35s}
.btn:hover::before{transform:translateX(5px) rotate(45deg);opacity:1}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,250,225,.9),inset 0 -2px 0 rgba(84,60,18,.6),inset 1px 0 0 rgba(255,240,200,.35),inset -1px 0 0 rgba(84,60,18,.35)}
/* outline buttons: a gold hairline that follows the cut corners, a faint gold wash that deepens on hover */
.btn.o{background:linear-gradient(90deg,rgba(201,163,90,.16),rgba(201,163,90,.04));color:var(--gold-light);text-shadow:none;box-shadow:none}
.btn.o::after{top:0;left:0;width:100%;height:100%;transform:none;opacity:1;transition:none;
  background:linear-gradient(135deg,#f0d79a,rgba(201,163,90,.4) 42%,rgba(201,163,90,.4) 58%,#f0d79a);
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c),0 var(--c),1px calc(var(--c) + .5px),1px calc(100% - 1px),calc(100% - var(--c) - .5px) calc(100% - 1px),calc(100% - 1px) calc(100% - var(--c) - .5px),calc(100% - 1px) 1px,calc(var(--c) + .5px) 1px,0 var(--c))}
.btn.o:hover::after{transform:none}
.btn.o:hover{background:linear-gradient(90deg,rgba(201,163,90,.3),rgba(201,163,90,.1));color:#fff;box-shadow:none}
.langsw::before{display:none}
.langsw{--c:7px;padding:10px 14px}
.nav .cta .btn:not(.langsw){padding:12px 20px 12px 22px}
@media (prefers-reduced-motion:reduce){.btn::before{transition:none}}
/* header B: "Меню" on the left opens a full-screen list; on the right only the language and one button. Same on phones. */
.nav{grid-template-columns:1fr auto 1fr}
.menu-btn{justify-self:start;display:flex;align-items:center;gap:14px;min-height:44px;background:none;border:0;padding:8px 0;color:var(--fg);font:600 12px/1 var(--body);letter-spacing:.24em;text-transform:uppercase;cursor:pointer}
.menu-btn i{position:relative;width:26px;height:12px;display:block}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;height:1px;background:var(--gold-light);transition:transform .4s cubic-bezier(.16,1,.3,1),width .4s}
.menu-btn i::before{top:0;width:26px}.menu-btn i::after{bottom:0;width:18px}
.menu-btn:hover i::after{width:26px}
.menu-btn[aria-expanded="true"] i::before{transform:translateY(5.5px) rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{width:26px;transform:translateY(-5.5px) rotate(-45deg)}
.menu-btn:hover{color:var(--gold-light)}
.nav .cta{display:flex;justify-content:flex-end;align-items:center;gap:20px}
.lng{display:flex;align-items:center;gap:6px;font-size:12px;letter-spacing:.16em;color:var(--fg-3)}
.lng button{background:none;border:0;padding:8px 2px;min-height:36px;font:600 12px/1 var(--body);letter-spacing:.16em;color:var(--fg-3);cursor:pointer}
.lng button.on{color:var(--gold-light)}.lng button:hover{color:var(--fg)}
.sheet{position:fixed;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,6vh,56px);
  padding:calc(var(--hh,130px) + 24px) max(16px,env(safe-area-inset-right,0px)) calc(32px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse 70% 60% at 50% 40%,rgba(47,42,31,.96),rgba(14,14,16,.985) 70%);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;overflow-y:auto}
.sheet.open{opacity:1;visibility:visible;transition:opacity .35s ease}
.sheet nav{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2.2vh,20px)}
.sheet nav a{display:flex;align-items:baseline;gap:18px;font-family:var(--display);font-weight:500;font-size:clamp(28px,4.6vw,50px);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light);text-decoration:none;opacity:0;transform:translate3d(0,16px,0);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1),color .3s}
.sheet nav a small{font:600 12px/1 var(--body);letter-spacing:.2em;color:var(--fg-3)}
.sheet nav a:hover,.sheet nav a:focus-visible,.sheet nav a.on{color:#fff}
.sheet.open nav a{opacity:1;transform:none}
.sheet.open nav a:nth-child(2){transition-delay:.04s}.sheet.open nav a:nth-child(3){transition-delay:.08s}.sheet.open nav a:nth-child(4){transition-delay:.12s}.sheet.open nav a:nth-child(5){transition-delay:.16s}.sheet.open nav a:nth-child(6){transition-delay:.2s}
.sheet .foot{display:flex;flex-direction:column;align-items:center;gap:12px;font-size:13px;letter-spacing:.08em;color:var(--fg-3)}
.sheet .foot a{color:var(--gold-light);text-decoration:none}
.sheet .foot a.btn{color:#1a1710;margin:6px 0}
.sheet .social{display:flex;gap:14px}
.sheet .social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(201,163,90,.45);border-radius:50%}
.sheet .social svg{width:20px;height:20px;fill:currentColor}
body.menu-open{overflow:hidden}
@media (max-width:980px){.nav{grid-template-columns:1fr auto 1fr}.nav .logo{grid-column:auto;justify-self:center;margin-left:0}.hbg{justify-content:center;margin-left:0}}
@media (max-width:560px){.menu-btn .ml{display:none}}
@media (prefers-reduced-motion:reduce){.sheet,.sheet nav a,.menu-btn i::before,.menu-btn i::after{transition:none}}

/* phones: the header keeps only the menu and the logo; the language and the button move into the menu */
.sheet .foot .lng{margin-top:4px}
@media (max-width:980px){.nav .cta{display:none}}
@media (min-width:981px){.sheet .foot .lng,.sheet .foot .btn{display:none}}

/* desktop: the links sit in a strip under the logo, always visible; the menu button is only for phones and tablets.
   On the left of the logo, the social links balance the language and the button on the right. */
.strip{position:relative;display:flex;justify-content:center;gap:clamp(26px,3.4vw,52px);padding:10px 16px 12px;border-top:1px solid rgba(201,163,90,.22);background:linear-gradient(180deg,rgba(14,14,16,.82),rgba(14,14,16,.94))}
.strip a{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 2px 6px;font-family:var(--display);font-weight:500;font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);text-decoration:none;transition:color .3s}
.strip a small{font:600 9px/1 var(--body);letter-spacing:.2em;color:var(--fg-3)}
.strip a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);transform:scaleX(0);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.strip a:hover,.strip a.on{color:#fff}.strip a:hover::after,.strip a.on::after{transform:scaleX(1)}
.hsoc{justify-self:start;display:flex;gap:10px}
.hsoc a{width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(201,163,90,.4);border-radius:50%;color:var(--gold-light);transition:transform .35s cubic-bezier(.16,1,.3,1),border-color .35s}
.hsoc a:hover{transform:translateY(-2px);border-color:var(--gold-light)}
.hsoc svg{width:16px;height:16px;fill:currentColor}
@media (min-width:981px){.menu-btn{display:none}}
@media (max-width:980px){.strip,.hsoc{display:none}}
@media (min-width:981px){header .hbg{bottom:auto;height:150px}}
html{scroll-padding-top:calc(var(--hh,150px) + 8px)}

/* footer: the logo on the left, contacts in the middle, social links on the right; stacked on phones */
footer .wrap.frow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
footer .frow > img{justify-self:start;margin:0}
footer .frow .ft{display:flex;flex-direction:column;gap:10px}
footer .frow .social{justify-self:end;margin:0}
@media (max-width:760px){footer .wrap.frow{grid-template-columns:1fr;justify-items:center}footer .frow > img,footer .frow .social{justify-self:center}}

/* who we are, as a story: a lead line with a drop cap, two short paragraphs, a quote between gold rules */
.story{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:20px;text-align:left}
.story p{margin:0;color:var(--fg-2);font-size:17px;line-height:1.8}
.story .lead{font-size:clamp(19px,2vw,22px);line-height:1.6;color:var(--fg)}
.story .lead::first-letter{float:left;font-family:var(--display);font-size:3.4em;line-height:.9;padding:6px 12px 0 0;color:var(--gold-light)}
.story blockquote{margin:18px 0;padding:26px 8px;border-top:1px solid rgba(201,163,90,.45);border-bottom:1px solid rgba(201,163,90,.45);text-align:center;font-family:var(--display);font-weight:500;font-size:clamp(20px,2.4vw,27px);line-height:1.45;letter-spacing:.02em;color:var(--gold-light)}
.story .end{text-align:center;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}

/* the picture over the story: hands (a cylinder and a spanner) and memory (the plan on a tablet), joined by the hub */
.duo{margin:0 auto 34px;max-width:720px;display:flex;flex-direction:column;align-items:center;gap:10px}
.duo svg{width:100%;height:auto;filter:drop-shadow(0 0 14px rgba(201,163,90,.18))}
.duo figcaption{width:100%;display:grid;grid-template-columns:1fr 1fr;font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.duo figcaption span:first-child{justify-self:start;padding-left:4%}.duo figcaption span:last-child{justify-self:end;padding-right:4%}
@media (max-width:560px){.duo figcaption{font-size:10px;letter-spacing:.12em}}

/* the whole life of a motorcycle: six steps joined by a gold line, two columns on phones */
.story .sub{margin-top:18px;text-align:center;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.life{list-style:none;margin:8px auto 34px;padding:0;max-width:1100px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;position:relative;counter-reset:none}
.life::before{content:"";position:absolute;left:8%;right:8%;top:9px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent)}
.life li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:30px}
.life li::before{content:"";position:absolute;top:3px;left:50%;width:12px;height:12px;margin-left:-6px;transform:rotate(45deg);border:1px solid var(--gold);background:var(--bg-2)}
.life b{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-light)}
.life span{font-size:14px;line-height:1.55;color:var(--fg-2)}
@media (max-width:980px){.life{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:30px}.life::before{display:none}}
@media (max-width:560px){.life{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* "choose your motorcycle" in the first screen: model, version (years), kilometres, then the plan below */
.pick{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) auto;gap:10px;align-items:end;max-width:36rem}
.pick label:first-child{grid-column:1/-1}
.pick label{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-3)}
.pick select,.pick input{font:inherit;font-size:15px;letter-spacing:normal;text-transform:none;font-weight:500;color:var(--fg);background:rgba(20,20,22,.88);border:1px solid #8a7445;border-radius:2px;padding:13px 14px;min-width:0;width:100%;height:49px;transition:border-color .3s}
.pick select{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px;background-repeat:no-repeat}
.pick select:disabled{opacity:.5}
.pick select:focus,.pick input:focus{outline:none;border-color:var(--gold-light)}
.pick .btn{height:47px}
.pick-note{margin:0!important;font-size:13px!important;color:var(--fg-3)!important}
.pick-note a{color:var(--gold-light)}
/* the way to the model pages: under the picker and under each plan */
a.more{align-self:flex-start;display:inline-flex;gap:8px;align-items:center;padding:6px 0;color:var(--gold-light);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(201,163,90,.45);transition:var(--t)}
a.more:hover,a.more:focus-visible{color:#fff;border-color:var(--gold-light)}
.plan-s a.more{display:flex;width:max-content;margin:22px auto 0}
@media (max-width:560px){.pick{grid-template-columns:1fr 1fr}.pick .btn{grid-column:1/-1}}
/* the plan */
.plan-s{background:linear-gradient(180deg,#191917,var(--bg));border-bottom:1px solid var(--line)}
.pl-pic{position:relative;margin:0 auto 30px;max-width:600px;border:1px solid rgba(201,163,90,.35);background:#141417;overflow:hidden}
.pl-pic img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.pl-pic img.ph{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 24%);mask-image:linear-gradient(to bottom,transparent 0,#000 24%)}
.pl-pic figcaption{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);padding:5px 12px;border-radius:999px;background:rgba(14,14,17,.8);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.pl-pic figcaption:empty{display:none}
.specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,42%),1fr));gap:14px;margin:0 0 30px}
.specs div{padding:16px 18px;border:1px solid rgba(201,163,90,.28);background:rgba(30,30,35,.6);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.specs dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.specs dd{margin:6px 0 0;font-size:15px;color:var(--fg);line-height:1.5}
.tw{overflow-x:auto;border:1px solid rgba(201,163,90,.35);background:#1a1a1d}
table.pl{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.pl th,.pl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.pl th{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.pl td{color:var(--fg-2)}.pl td:first-child{color:var(--fg);font-weight:600}
.pl td small{display:block;margin-top:4px;font-size:13px;color:var(--fg-3);font-weight:400}
.pl tr:last-child td{border-bottom:0}
.pl .soon{color:var(--gold-light);font-weight:700}
.pl-note{margin:14px 0 0;font-size:13px;color:var(--fg-3)}
.pl-acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:30px}
/* six directions instead of four */
.grid6{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:980px){.grid6{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid6{grid-template-columns:1fr}}
/* how to buy a motorcycle through us */
.buy{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;counter-reset:b}
.buy li{counter-increment:b;display:flex;flex-direction:column;gap:10px;padding:26px 22px;border-top:1px solid var(--gold)}
.buy li::before{content:counter(b);font-family:var(--display);font-size:34px;line-height:1;color:var(--gold-light)}
.buy b{font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
.buy span{font-size:15px;color:var(--fg-2)}
@media (max-width:980px){.buy{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.buy{grid-template-columns:1fr}}
/* contact always at hand: the form, and Viber once the number is set */
.fab{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:7;display:flex;flex-direction:column;gap:10px}
.fab a{width:54px;height:54px;display:grid;place-items:center;color:#1a1710;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 46%),linear-gradient(90deg,#86672d,#d6b56a 22%,#f7e6ad 48%,#d9bb72 62%,#b08a43 84%,#7d5f28);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.fab a:hover{transform:translateY(-3px)}
.fab a[hidden]{display:none}
.fab .fab-v{background:#7360f2;color:#fff}
.fab svg{width:24px;height:24px}.fab .fab-m svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}.fab .fab-v svg{fill:currentColor}
body.menu-open .fab{display:none}
@media (prefers-reduced-motion:reduce){.fab a{transition:none}}

/* plain Cyrillic letters: the fonts would otherwise switch to the Bulgarian (cursive-like) forms for lang="bg" */
body{font-feature-settings:"locl" 0}

/* the first screen grows with the picker instead of cutting it under the brands strip */
.hero{height:auto;min-height:clamp(540px,42vw,760px)}
.hero .wrap{padding-block:64px 88px}
.pick .btn{height:49px}
@media (min-width:981px){.stage .bike img{height:clamp(670px,52vw,942px)}}  /* the bike keeps the size it had when the screen was fixed-height */

/* the consent line under the send button, and the Turnstile box */
.ask .consent{margin:0;text-align:center;font-size:12px;color:var(--fg-3)}
.ask .consent a{color:var(--gold-light)}
.ask .ts:empty{display:none}.ask .ts{align-self:center}

/* a lower header on desktop: the logo row 116px instead of 150, a slimmer link strip */
@media (min-width:981px){.nav .logo{height:96px;width:240px}header .hbg{height:116px}.strip{padding:4px 16px 6px}.strip a{font-size:14px;padding:5px 2px}html{scroll-padding-top:calc(var(--hh,116px) + 8px)}}


/* the title on one line on screens wide enough for it; it may run past the text column, over the picture */
@media (min-width:761px){.hero h1{white-space:nowrap;width:max-content;max-width:none;font-size:clamp(34px,5.2vw,72px)}}

/* the three points one under the other */
.hero .trust{flex-direction:column;gap:6px}

/* "remind me" under the plan */
.remind{margin:40px auto 0;max-width:640px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:30px 24px;border:1px solid rgba(201,163,90,.35);background:rgba(30,30,35,.55)}
.remind p{margin:0;color:var(--fg-2)}
.remind .rrow{display:flex;gap:10px;width:100%;max-width:480px}
.remind input[type=email]{flex:1;min-width:0;font:inherit;font-size:15px;color:var(--fg);background:rgba(20,20,22,.88);border:1px solid #8a7445;border-radius:2px;padding:13px 14px}
.remind input[type=email]:focus{outline:none;border-color:var(--gold-light)}
.remind .cb{display:flex;gap:10px;align-items:flex-start;text-align:left;font-size:12px;line-height:1.5;color:var(--fg-3);max-width:480px}
.remind .cb input{margin-top:2px;accent-color:#c9a35a}
.remind .cb a{color:var(--gold-light)}
.remind .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.remind .note{min-height:1.4em;font-size:14px}.remind .note.ok{color:var(--gold-light)}.remind .note.err{color:#e09a8c}
@media (max-width:560px){.remind .rrow{flex-direction:column}}

/* approved tyres in the plan */
.ty-h{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:34px 0 12px}
table.ty td small{display:block;color:var(--fg-3);font-weight:400;font-size:13px;margin-top:2px}
.ty-notes{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:4px}
.ty-notes li{font-size:13px;color:var(--fg-3);line-height:1.5}.ty-notes b{color:var(--gold-light);margin-right:6px}

/* an icon for each spec: the shape as a mask, painted in the brushed gold of the buttons */
.specs div{position:relative;padding-left:66px}
.specs div::before{content:"";position:absolute;left:18px;top:50%;width:32px;height:32px;margin-top:-16px;background:linear-gradient(135deg,#f7e6ad,#c9a35a 50%,#8e6f30);-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.specs [data-i="oil"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%209.5h8l2-2h3.5l2%202-3%202v7.5H3.5z%22/%3E%3Cpath%20d%3D%22M7.5%209.5V6.5h3.5%22/%3E%3Cpath%20d%3D%22M20.5%2013c0%201.3%201.5%202.3%201.5%203.4a1.5%201.5%200%200%201-3%200c0-1.1%201.5-2.1%201.5-3.4z%22/%3E%3C/svg%3E")}
.specs [data-i="plug"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v3%22/%3E%3Crect%20x%3D%229%22%20y%3D%225%22%20width%3D%226%22%20height%3D%223%22/%3E%3Cpath%20d%3D%22M8%208h8v4.5H8z%22/%3E%3Cpath%20d%3D%22M10%2012.5h4v4.5l-2%202-2-2z%22/%3E%3Cpath%20d%3D%22M12%2019v3%22/%3E%3C/svg%3E")}
.specs [data-i="oilf"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%226%22%20y%3D%225.5%22%20width%3D%2212%22%20height%3D%2215%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M6%209.5h12M6%2016.5h12M9%202.5h6v3H9z%22/%3E%3C/svg%3E")}
.specs [data-i="airf"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%226%22%20width%3D%2219%22%20height%3D%2212%22%20rx%3D%221.5%22/%3E%3Cpath%20d%3D%22M5.5%209l2.2%206%202.2-6%202.1%206%202.2-6%202.1%206%202.2-6%22/%3E%3C/svg%3E")}
.specs [data-i="drive"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.6%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226.5%22/%3E%3Cpath%20d%3D%22M12%202.5v3M12%2018.5v3M2.5%2012h3M18.5%2012h3M5.3%205.3l2.1%202.1M16.6%2016.6l2.1%202.1M5.3%2018.7l2.1-2.1M16.6%207.4l2.1-2.1%22/%3E%3C/svg%3E")}
.specs [data-i="battery"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%222.5%22%20y%3D%227.5%22%20width%3D%2219%22%20height%3D%2212%22%20rx%3D%221.5%22/%3E%3Cpath%20d%3D%22M6.5%207.5v-2h3v2M14.5%207.5v-2h3v2M6.5%2013.5h3.5M14%2013.5h3.5M15.75%2011.75v3.5%22/%3E%3C/svg%3E")}
.specs [data-i="tyre"]{--i:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%229.5%22/%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22/%3E%3Cpath%20d%3D%22M12%202.5v3M12%2018.5v3M2.5%2012h3M18.5%2012h3M5.3%205.3l2.1%202.1M16.6%2016.6l2.1%202.1M5.3%2018.7l2.1-2.1M16.6%207.4l2.1-2.1%22/%3E%3C/svg%3E")}

/* motorcycles to order: a strip of cards that scrolls sideways, as in the design */
.lst{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;scrollbar-color:var(--gold-dark) transparent}
.lst .card{flex:0 0 min(78vw,320px);scroll-snap-align:start}
.lst img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.lst .b{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px}
.lst .b b{font-size:16px;color:var(--fg)}
.lst .b span{font-size:13px;color:var(--fg-3);letter-spacing:.06em;text-transform:uppercase}
.lst .b .row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;gap:10px}
.lst .b .row b{font-size:14px;color:var(--gold-light)}
.lst .b .row a{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.lstw{position:relative}
.lnav{position:absolute;top:calc(50% - 30px);z-index:3;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;background:rgba(14,14,17,.88);color:var(--gold-light);font-size:22px;line-height:1;cursor:pointer;transition:var(--t);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.lnav:hover{background:var(--gold);color:#111}
.lnav:disabled{opacity:0;pointer-events:none}
.lnav.p{left:-14px}.lnav.n{right:-14px}
.lnote{margin:10px 0 0;font-size:13px;color:var(--fg-3);text-align:center}
@media (hover:none),(max-width:760px){.lnav{display:none}}
.lst .badge{position:absolute;top:14px;left:14px;z-index:2;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-light);background:rgba(20,20,22,.8);border:1px solid var(--gold);padding:5px 10px;border-radius:999px}
/* the cookie choice (analytics.js): a quiet bar at the bottom while the choice is pending */
.consent{position:fixed;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:9;max-width:720px;margin:0 auto;display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:14px 16px;background:rgba(18,18,21,.96);border:1px solid rgba(201,163,90,.45);box-shadow:0 18px 40px rgba(0,0,0,.5)}
.consent p{flex:1 1 280px;margin:0;font-size:13px;color:var(--fg-2)}
.consent div{display:flex;gap:10px;flex-wrap:wrap}

/* the inner pages: a model, the list of models, privacy, 404 */
.doc .pl-pic{margin:6px 0 26px}
.doc{padding-block:56px 96px}
.doc .wrap{max-width:980px}
.doc .crumbs{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin-bottom:26px}
.doc .crumbs a{color:var(--gold-light);text-decoration:none}
.doc h1{font-family:var(--display);font-weight:500;font-size:clamp(32px,4.6vw,54px);letter-spacing:.03em;text-transform:uppercase;line-height:1.08;color:var(--gold-light);margin:10px 0 16px}
.doc h2{font-family:var(--display);font-weight:500;font-size:clamp(20px,2.4vw,28px);letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light);margin:44px 0 16px}
.doc p,.doc li{color:var(--fg-2);font-size:16px;line-height:1.75;max-width:62ch}
.doc ul{padding-left:1.2em}.doc li::marker{color:var(--gold)}
.doc a{color:var(--gold-light)}
.doc a.btn{color:#1a1710}.doc a.btn.o{color:var(--gold-light)}
.doc .lead{font-size:18px;color:var(--fg)}
.doc .ver{border-top:1px solid rgba(201,163,90,.3);margin-top:40px}
.doc .ver h2{margin-top:30px}
.doc .cta{margin-top:56px;padding:34px 28px;border:1px solid rgba(201,163,90,.4);background:rgba(30,30,35,.6);text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.doc .cta h2{margin:0}.doc .cta p{margin:0}
.doc .acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:10px}
.models{columns:3 220px;column-gap:40px;margin-top:20px}
.models section{break-inside:avoid;margin-bottom:26px}
.models h3{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 8px}
.models a{display:block;padding:5px 0;color:var(--fg);text-decoration:none;border-bottom:1px solid rgba(201,163,90,.12)}
.models a:hover{color:var(--gold-light)}.models a small{color:var(--fg-3);margin-left:6px}
.faq{display:flex;flex-direction:column;border-top:1px solid rgba(201,163,90,.25)}
.faq details{border-bottom:1px solid rgba(201,163,90,.25)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:16px 4px;font-weight:600;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--gold-light);font-size:20px;line-height:1;transition:transform .3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 4px 16px}
.doc .ty-h{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:30px 0 12px}
table.ty td small{display:block;color:var(--fg-3);font-weight:400;font-size:13px;margin-top:2px}
.doc .ty-notes{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-direction:column;gap:4px}
.doc .ty-notes li{font-size:13px;color:var(--fg-3);line-height:1.5}.doc .ty-notes b{color:var(--gold-light);margin-right:6px}
.doc .ty-src{font-size:12px;color:var(--fg-3);margin-top:8px}
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:20px}
.guides a{display:flex;flex-direction:column;gap:8px;padding:24px 22px;border:1px solid rgba(201,163,90,.35);background:rgba(30,30,35,.55);text-decoration:none;transition:border-color .3s}
.guides a:hover{border-color:var(--gold-light)}.guides b{font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-light)}
.guides span{color:var(--fg-2);font-size:15px;line-height:1.6}
.doc ul b{color:var(--fg)}
.rel{display:flex;flex-wrap:wrap;gap:10px}
.rel a{padding:10px 14px;border:1px solid rgba(201,163,90,.35);color:var(--fg);text-decoration:none;font-size:14px}
.rel a:hover{border-color:var(--gold-light);color:var(--gold-light)}.rel a small{color:var(--fg-3);margin-left:6px}