/* M17 Moto Shop — zajednički stil za stranice modela.
   Hero gradijent je po modelu i ide u <style> blok svake stranice:
   .hero{background:linear-gradient(...)} */

:root{--nav:56px;--m17:#0080FF;--hair:rgba(255,255,255,.2);--hair-soft:rgba(255,255,255,.09);
  --ease:cubic-bezier(.22,.61,.36,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;background:#000;color:#fff;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--m17);outline-offset:3px}
.wrap{max-width:960px;margin:0 auto}

/* NAV */
.nav{position:fixed;inset:0 0 auto 0;height:var(--nav);z-index:60;display:flex;align-items:center;
  gap:18px;padding:0 20px;font-size:12px;font-weight:300;background:rgba(0,0,0,.66);
  backdrop-filter:saturate(180%) blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav__back{color:rgba(255,255,255,.55);letter-spacing:.02em;transition:color .3s var(--ease)}
.nav__back:hover{color:#fff}
.nav__model{font-family:"Barlow Condensed",sans-serif;letter-spacing:.2em;font-size:12px;
  color:rgba(255,255,255,.5)}
.nav__price{margin-left:auto;font-family:"Barlow Condensed",sans-serif;font-size:15px;font-weight:600;
  letter-spacing:.04em}
.nav__cta{border:1px solid rgba(255,255,255,.34);padding:6px 15px;border-radius:999px;
  transition:background .3s var(--ease),color .3s var(--ease)}
.nav__cta:hover{background:#fff;color:#000}
@media(max-width:640px){.nav__model,.nav__price{display:none}}

/* HERO */
.hero{position:relative;min-height:100svh;padding:calc(var(--nav) + 52px) 20px 44px;color:#111;
  display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
.eyebrow{font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.34em;
  color:rgba(0,0,0,.45);margin-bottom:16px}
.title{font-size:clamp(38px,8.4vw,80px);font-weight:200;letter-spacing:-.025em;line-height:1}
.title b{font-weight:500}
.sub{margin-top:13px;font-size:clamp(14px,1.6vw,16.5px);font-weight:300;color:rgba(0,0,0,.55);max-width:46ch}
.stage{flex:1;width:100%;max-width:1000px;margin-top:2px;display:flex;align-items:center;justify-content:center}
.stage img{mix-blend-mode:multiply;width:100%;object-fit:contain;transition:opacity .42s var(--ease)}
.stage img.swapping{opacity:0}
.rise{opacity:0;transform:translateY(16px);animation:rise .9s var(--ease) forwards}
.r1{animation-delay:.05s}.r2{animation-delay:.16s}.r3{animation-delay:.27s}
.r4{animation-delay:.54s}.r5{animation-delay:.64s}
@keyframes rise{to{opacity:1;transform:none}}
.bikein{opacity:0;transform:scale(1.045);filter:blur(7px);animation:bikein 1.35s var(--ease) .3s forwards}
@keyframes bikein{to{opacity:1;transform:none;filter:blur(0)}}
.swatches{display:flex;gap:10px;margin:4px 0 16px}
.sw{width:27px;height:27px;border-radius:50%;border:1px solid rgba(0,0,0,.28);cursor:pointer;padding:0;
  outline-offset:3px;transition:transform .28s var(--ease),box-shadow .28s var(--ease)}
.sw:hover{transform:scale(1.14)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px #111}
.swname{font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.2em;
  color:rgba(0,0,0,.5);margin-bottom:16px;min-height:14px;transition:opacity .28s var(--ease)}
.swname.swapping{opacity:0}
.btns{display:flex;gap:11px;flex-wrap:wrap;justify-content:center}
.btn{border-radius:999px;padding:12px 26px;font-size:13.5px;font-weight:400;cursor:pointer;
  border:1px solid transparent;transition:transform .25s var(--ease),background .25s var(--ease),
  border-color .25s var(--ease),color .25s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn--solid{background:#111;color:#fff}
.btn--wire{background:transparent;border-color:rgba(0,0,0,.26);color:#111}
.btn--wire:hover{border-color:#111}
.price{margin-top:18px;font-family:"Barlow Condensed",sans-serif;font-size:13px;letter-spacing:.18em;
  color:rgba(0,0,0,.5)}
.price em{font-style:normal;color:#111;font-size:24px;font-weight:600;letter-spacing:.03em}

/* SPEC STRIP */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;
  background:rgba(255,255,255,.1)}
.strip div{background:#000;padding:30px 18px;text-align:center}
.strip dt{font-family:"Barlow Condensed",sans-serif;font-size:10px;letter-spacing:.24em;
  color:rgba(255,255,255,.42);margin-bottom:9px}
.strip dd{font-family:"Barlow Condensed",sans-serif;font-size:33px;font-weight:600}
.strip dd small{font-size:14px;font-weight:400;color:rgba(255,255,255,.45);margin-left:3px}

/* SECTION */
.sec{padding:104px 20px}
.shead{text-align:center;max-width:580px;margin:0 auto 52px}
.shead h2{font-size:clamp(24px,3.6vw,37px);font-weight:200;letter-spacing:-.015em}
.shead p{margin-top:14px;font-size:14.5px;font-weight:300;color:rgba(255,255,255,.45);line-height:1.7}

/* TECH RIG */
.rig{position:relative}
.rig__img{overflow:hidden;border-radius:3px}
.rig__img img{width:100%;filter:brightness(.6) contrast(1.06) saturate(.85)}
.ring{position:absolute;top:50%;left:50%;border:1px solid var(--hair-soft);border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%) scale(.86);opacity:0;
  transition:transform 1.1s var(--ease),opacity 1.1s var(--ease)}
.ring--a{width:46%;aspect-ratio:1}
.ring--b{width:66%;aspect-ratio:1;border-style:dashed;transition-delay:.14s}
.inview .ring{opacity:1;transform:translate(-50%,-50%) scale(1)}
.inview .ring--b{opacity:.5}
.cross{position:absolute;background:var(--hair-soft);pointer-events:none;transition:transform 1.15s var(--ease) .1s}
.cross--h{left:0;right:0;top:50%;height:1px;transform:scaleX(0)}
.cross--v{top:0;bottom:0;left:50%;width:1px;transform:scaleY(0)}
.inview .cross--h{transform:scaleX(1)}
.inview .cross--v{transform:scaleY(1)}
.tag{position:absolute;font-family:"Barlow Condensed",sans-serif;line-height:1.15;z-index:2;
  opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.inview .tag{opacity:1;transform:none}
.tag__v{display:block;font-size:21px;font-weight:600}
.tag__l{display:block;font-size:10px;letter-spacing:.24em;color:rgba(255,255,255,.5);margin-top:3px}
.tag--tl{top:9%;left:3%;padding-left:11px;border-left:1px solid var(--hair);transform:translateX(-12px);transition-delay:.5s}
.tag--bl{bottom:11%;left:3%;padding-left:11px;border-left:1px solid var(--hair);transform:translateX(-12px);transition-delay:.62s}
.tag--tr{top:9%;right:3%;text-align:right;padding-right:11px;border-right:1px solid var(--hair);transform:translateX(12px);transition-delay:.56s}
.tag--br{bottom:11%;right:3%;text-align:right;padding-right:11px;border-right:1px solid var(--hair);transform:translateX(12px);transition-delay:.68s}
@media(max-width:700px){.tag__v{font-size:15px}.tag__l{font-size:8.5px;letter-spacing:.16em}}

/* ALTERNATING BLOCKS */
.blocks{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.1)}
.block{background:#000;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0}
.block:nth-child(even) .block__img{order:2}
.block__img{overflow:hidden}
.block__img img{width:100%;aspect-ratio:5/4;object-fit:cover;filter:brightness(.88);
  transition:transform 1s var(--ease),filter 1s var(--ease)}
.block:hover .block__img img{transform:scale(1.04);filter:brightness(1)}
.block__txt{padding:44px 40px}
.block__txt h3{font-family:"Barlow Condensed",sans-serif;font-size:12px;letter-spacing:.24em;
  font-weight:500;color:rgba(255,255,255,.5);margin-bottom:14px}
.block__txt p{font-size:16px;font-weight:300;line-height:1.68;color:rgba(255,255,255,.82)}
@media(max-width:760px){
  .block{grid-template-columns:1fr}
  .block:nth-child(even) .block__img{order:0}
  .block__txt{padding:30px 24px 38px}
  .block__txt p{font-size:15px}
}

/* SPEC TABLE */
.table{border-top:1px solid rgba(255,255,255,.12)}
.tgroup{padding:34px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.tgroup h3{font-family:"Barlow Condensed",sans-serif;font-size:11px;letter-spacing:.26em;
  color:rgba(255,255,255,.42);margin-bottom:20px}
.trow{display:flex;justify-content:space-between;gap:24px;padding:9px 0;font-size:14.5px;font-weight:300}
.trow dt{color:rgba(255,255,255,.5)}
.trow dd{text-align:right;color:#fff}

/* CTA */
.cta{padding:104px 20px;text-align:center;background:#0a0a0a;border-top:1px solid rgba(255,255,255,.1)}
.cta h2{font-size:clamp(24px,3.6vw,36px);font-weight:200;letter-spacing:-.015em}
.cta p{margin:14px auto 30px;font-size:15px;font-weight:300;color:rgba(255,255,255,.5);max-width:44ch}
.tels{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.tels a{font-family:"Barlow Condensed",sans-serif;font-size:27px;font-weight:600;letter-spacing:.02em;
  transition:color .3s var(--ease)}
.tels a:hover{color:var(--m17)}
.cta .btn--wire{border-color:rgba(255,255,255,.36);color:#fff}
.cta .btn--wire:hover{background:#fff;color:#000;border-color:#fff}
.cta .btn--solid{background:#fff;color:#000}

.foot{padding:52px 20px 60px;border-top:1px solid rgba(255,255,255,.1);text-align:center;
  font-size:13px;font-weight:300;color:rgba(255,255,255,.45);line-height:2}
.note{background:#161616;border-top:1px solid rgba(255,255,255,.1);padding:20px;
  font-size:12.5px;line-height:1.75;color:rgba(255,255,255,.5);text-align:center}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::after{animation:none!important;transition:none!important}
  .rise,.bikein{opacity:1!important;transform:none!important;filter:none!important}
  .ring{opacity:1!important;transform:translate(-50%,-50%)!important}
  .tag{opacity:1!important;transform:none!important}
  .cross--h{transform:scaleX(1)!important}.cross--v{transform:scaleY(1)!important}
}