:root{--navy:#0a1a4a;--blue:#0aa5ff;--dark:#061224;--bg:#f4f9fd;--txt:#4a5568;--r:14px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,sans-serif;color:var(--txt);background:var(--bg);line-height:1.55}
img{max-width:100%;display:block}a{text-decoration:none;color:inherit}
h1,h2,h3{font-family:'Exo 2',Inter,sans-serif;color:var(--navy);line-height:1.1}
.wrap{max-width:1240px;margin:0 auto;padding:0 20px}
.hd{background:var(--dark);position:sticky;top:0;z-index:50}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{height:32px;width:auto;display:block}
.logo-f img{height:26px}
@media(max-width:1000px){.logo img{height:27px}}
@media(max-width:420px){.logo img{height:24px}.logo-f img{height:22px}}
.nav{display:flex;gap:24px;align-items:center}.nav a{color:#fff;font-size:14px;font-weight:500;padding:22px 0;border-bottom:2px solid transparent}
.nav a.on,.nav a:hover{color:var(--blue);border-color:var(--blue)}
.acts{display:flex;gap:10px}.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:8px;font-weight:600;font-size:14px;border:1.5px solid var(--blue);cursor:pointer;background:var(--blue);color:#fff;font-family:inherit}
.btn:hover{filter:brightness(1.1)}.btn.o{background:transparent;border-color:var(--navy);color:var(--navy);border-radius:30px}
.btn.w{background:transparent;border-color:#fff;color:#fff}.hd .btn{padding:9px 16px;font-size:13px}
.btn svg{width:16px;height:16px}.tg{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}
svg.i{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.kick{letter-spacing:5px;font-size:13px;font-weight:600;color:#555;margin-bottom:10px}.dk .kick{color:#cbd5e1}
h1{font-size:clamp(34px,5vw,58px);font-weight:800;text-transform:uppercase}h1 span,h2 span{color:var(--blue)}
.hero h4{font-family:'Exo 2';font-size:20px;color:var(--navy);text-transform:uppercase;margin:8px 0}.dk h4{color:#fff}
.hero p{margin:14px 0 20px;font-size:17px}.mini{display:flex;flex-wrap:wrap;gap:0;margin-top:22px}
.mini div{text-align:center;font-size:12px;font-weight:600;color:var(--navy);padding:0 16px;border-left:1px solid #cbd5e1;text-transform:uppercase}.mini div:first-child{border:0;padding-left:0}
.dk .mini div{color:#fff;border-color:#334}.mini svg{margin:0 auto 6px}
.bt{display:flex;gap:12px;flex-wrap:wrap}
.sec{padding:44px 0}h2{font-size:clamp(24px,3vw,34px);font-weight:800;text-transform:uppercase}
.st{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:26px;text-align:center}.st:before,.st:after{content:"";height:1.5px;width:60px;background:var(--blue)}
.g{display:grid;gap:18px}.g4{grid-template-columns:repeat(4,1fr)}.g5{grid-template-columns:repeat(5,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr 1fr}
.card{background:#fff;border-radius:var(--r);padding:20px;box-shadow:0 4px 18px #0a1a4a12}
.ft{text-align:center;padding:10px}.ft h3{font-size:16px;margin:8px 0 4px}.ft p{font-size:14px}
.ic{width:56px;height:56px;border-radius:50%;background:#d9f0ff;color:var(--blue);display:grid;place-items:center;margin:0 auto 6px}
.mc{text-align:center}.mc img{height:190px;margin:0 auto;object-fit:contain}.mc .n{font-family:'Exo 2';font-size:32px;font-weight:800;color:var(--navy)}
.sc{font-family:'Kaushan Script',cursive;font-size:32px;display:block;margin-top:-6px}
.dots{display:flex;gap:10px;justify-content:center;margin:12px 0}
.sp{display:flex;justify-content:space-around;font-size:12px;border-top:1px solid #e5edf5;border-bottom:1px solid #e5edf5;padding:10px 0;margin-top:10px;text-align:center}
.sp b{display:block;color:var(--navy);font-size:13px}
.ov{position:relative;border-radius:var(--r);overflow:hidden;min-height:260px;display:flex;align-items:center;color:#fff}
.ov>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.ov:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061224ee 30%,#06122455);z-index:1}
.ov .tx{position:relative;z-index:2;padding:34px;max-width:560px}.ov h2{color:#fff;margin-bottom:10px}
.thumb{border-radius:10px;height:110px;width:100%;object-fit:cover;margin-bottom:10px}
.bar{background:var(--dark);color:#fff;padding:26px 0}.bar .g{align-items:center}.bar img{height:110px;width:100%;object-fit:cover;border-radius:10px}.bar h3{color:#fff;font-size:16px}.bar p{font-size:13px;color:#b6c2d3}
.bar .it{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center}
.tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:22px}.tabs button{border:0;background:#e7f0f8;padding:10px 20px;border-radius:8px;font-family:inherit;cursor:pointer;font-size:14px}.tabs .on{background:var(--blue);color:#fff}
.dl img,.nw img{width:100%;height:150px;object-fit:cover;border-radius:10px 10px 0 0}.dl,.nw{padding:0;overflow:hidden}.dl .b,.nw .b{padding:14px}
.dl h3,.nw h3{font-size:14px;margin-bottom:6px}.dl p{font-size:13px}.dl .btn{width:100%;justify-content:center;margin-top:10px;padding:8px;font-size:12px}
.nw small{color:#64748b;font-size:12px}.nw a.rm{color:var(--blue);font-weight:700;font-size:13px}
.fld{display:flex;align-items:center;gap:10px;background:#f7fafd;border:1px solid #d5e0ea;border-radius:8px;padding:0 14px;margin-bottom:12px;color:var(--navy)}
.fld svg{width:18px;height:18px;flex:none}.fld input,.fld select,.fld textarea{flex:1;border:0;background:none;padding:14px 0;font-family:inherit;font-size:14px;outline:0;color:#333;width:100%}
.frm .btn{width:100%;justify-content:center;padding:15px}.msg{display:none;background:#d9f7e6;color:#116a3a;padding:12px;border-radius:8px;margin-top:10px;font-weight:600}
details{background:#fff;border:1px solid #dbe5ee;border-radius:8px;margin-bottom:8px;padding:12px 16px;font-size:14px;color:var(--navy)}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between}summary:after{content:"+";font-size:18px}details[open] summary:after{content:"–"}details p{margin-top:8px;color:var(--txt)}
.nums{display:flex;gap:30px;margin-top:14px}.nums b{font-family:'Exo 2';font-size:28px;color:var(--navy);display:block}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;text-align:center;position:relative}.tl h3{font-size:20px}
.sub{background:linear-gradient(90deg,#061a3c,#0a2f66);color:#fff;border-radius:var(--r);padding:28px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.sub h2{color:#fff}.sub form{display:flex;gap:10px;flex:1;min-width:280px;max-width:560px}.sub input{flex:1;padding:14px;border-radius:8px;border:0;font-family:inherit}
.ev{display:flex;gap:14px;align-items:center;padding:10px 0;border-bottom:1px solid #e5edf5;font-size:14px;color:var(--navy);font-weight:600}.ev i{font-style:normal;border:1.5px solid var(--blue);border-radius:6px;padding:4px 10px;text-align:center;font-size:12px;line-height:1.2}.ev i b{font-size:18px;display:block}
.ci{display:flex;gap:14px;padding:12px 0;border-bottom:1px solid #eef3f8;font-size:14px}.ci b{color:var(--navy);display:block}.ci .ic{margin:0;flex:none;width:48px;height:48px}
.soc{display:flex;gap:12px}.soc a{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:14px}
.of{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center;padding:8px 0}.of img{height:60px;width:110px;object-fit:cover;border-radius:6px}.of b{color:var(--navy);font-size:14px}.of span{font-size:13px}
.ft2{background:var(--dark);color:#9fb0c6;padding:34px 0;font-size:14px}.ft2 .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}.ft2 a{margin-right:16px}.ft2 a:hover{color:var(--blue)}
@media(max-width:1000px){.tg{display:block}.nav{display:none;position:absolute;top:66px;left:0;right:0;background:var(--dark);flex-direction:column;gap:0;padding:10px 20px}.nav.open{display:flex}.nav a{padding:12px 0;width:100%}.acts .btn{display:none}
.g4,.g5{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr 1fr}.tl{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.g4,.g5,.g3,.g2,.tl{grid-template-columns:1fr}.ov .tx{padding:22px}.bar .it{grid-template-columns:90px 1fr}.st:before,.st:after{width:24px}.mini div{padding:0 10px}}

/* ---- full-width hero banners ---- */
.hero{position:relative;overflow:hidden;background:#f4f9fd;aspect-ratio:var(--ar,3/1);min-height:340px;max-height:620px;display:flex;align-items:center}
.hero>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.hero>.wrap{position:relative;width:100%}
.hero .tx{max-width:min(560px,calc(var(--tw,38)*1vw));padding:30px 0}
.hero h1{font-size:clamp(26px,calc(var(--tw,38)*.085vw),56px)}
.hero.dk{background:var(--dark)}.hero.dk h1,.hero.dk .tx,.hero.dk p{color:#fff}
.hero.dk .btn.o{color:#fff;border-color:#fff}
.hero p{font-size:clamp(14px,1.2vw,17px)}
.hero.home{min-height:0;display:block;background:var(--dark)}
.hero.home>.bg{position:static;display:block;width:100%;height:auto}
.hero.home .bt{position:absolute;left:5.2%;top:61%;gap:12px}
.hero.home .btn{padding:clamp(8px,1.1vw,15px) clamp(14px,2.1vw,30px);font-size:clamp(12px,1.05vw,15px)}
/* ---- swatches ---- */
.sw{width:24px;height:24px;border-radius:50%;border:1px solid #b8c4d2;cursor:pointer;padding:0;transition:transform .2s,box-shadow .2s}
.sw:hover{transform:scale(1.15)}.sw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue);transform:scale(1.1)}
.dots{gap:12px}.mc img.bike{transition:opacity .25s}.bike.fade{opacity:.15}
/* ---- model detail ---- */
.det{position:relative;overflow:hidden;background:linear-gradient(180deg,#e6f1fb 0%,#f8fbff 70%,#fff 100%);border-bottom:1px solid #e3ecf5}
.det:after{content:"";position:absolute;left:0;right:0;bottom:0;height:62%;background:url(../images/skyline.svg) bottom center/cover no-repeat;opacity:.75;pointer-events:none}
.det .wm{position:absolute;right:2%;top:6%;font-family:'Exo 2';font-weight:800;font-style:italic;font-size:clamp(60px,12vw,190px);color:#0a1a4a;opacity:.045;letter-spacing:4px;white-space:nowrap;z-index:1}
.det .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.25fr;gap:10px;align-items:center;padding-top:34px;padding-bottom:40px}
.det h1{font-size:clamp(34px,4.6vw,64px);margin:6px 0}.det h4{font-family:'Exo 2';letter-spacing:3px;text-transform:uppercase;color:var(--navy);font-size:15px;margin-bottom:12px}
.det p{max-width:460px}.bc{font-size:13px;color:#64748b;margin-bottom:26px}.bc a:hover{color:var(--blue)}
.det .mini{gap:0}.det .mini div{padding:0 12px;font-size:12px}.det .mini div b{font-size:13px}
.swrow{display:flex;align-items:center;gap:16px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--navy)}
.dbike img{width:100%;max-height:480px;object-fit:contain;filter:drop-shadow(0 18px 18px #0a1a4a30);transition:opacity .25s}
.zoom{height:110px;border-radius:10px;background-repeat:no-repeat;background-size:240% auto,cover;background-position:60% 45%,center}
.bar .it img{object-fit:cover}
@media(max-width:1000px){
 .hero{aspect-ratio:auto;max-height:none;min-height:0;flex-direction:column;align-items:stretch}
 .hero>.bg{position:static;order:2;height:230px;object-position:78% center}
 .hero .tx{max-width:none;padding:28px 0}
 .hero h1{font-size:clamp(30px,7vw,46px)}
 .hero.home{display:block}.hero.home>.bg{height:auto;order:0}
 .hero.home .bt{position:static;padding:16px 20px;background:var(--dark);justify-content:center}
 .hero.home .btn{padding:12px 22px;font-size:14px}
 .det .wrap{grid-template-columns:1fr}.det .mini{flex-wrap:wrap;row-gap:14px}.dbike{order:-1}
}
@media(max-width:640px){.hero>.bg{height:190px}.det .mini div{width:33%;border:0;padding:0 4px}.swrow{flex-wrap:wrap}}
.btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.det .mini{display:grid;grid-template-columns:repeat(3,1fr);row-gap:16px;max-width:460px}
.det .mini div:nth-child(3n+1){border-left:0;padding-left:0}
@media(max-width:640px){.det .mini div{width:auto}}

.mini svg{display:block}.hero .mini{flex-wrap:nowrap}.hero .mini div{padding:0 clamp(8px,1.1vw,16px);font-size:clamp(9px,.8vw,12px)}
@media(max-width:1000px){.hero h1{font-size:clamp(30px,7vw,46px)}.hero .mini{flex-wrap:wrap;row-gap:12px}}

html{scroll-padding-top:84px}
/* ---- home sections ---- */
.stats{margin-top:-40px;position:relative;z-index:3}.stats .card{padding:22px 10px}
.stat{text-align:center;border-left:1px solid #e3ecf5}.stat:first-child{border:0}
.stat b{display:block;font-family:'Exo 2';font-size:clamp(22px,3vw,36px);color:var(--navy);line-height:1.1}.stat span{font-size:13px}
.th{background:linear-gradient(135deg,#061224,#0a2a5c);color:#c7d7ec;padding:64px 0;margin-top:20px}
.th .wrap{display:grid;grid-template-columns:1fr 1.1fr;gap:44px;align-items:center}
.th h2{color:#fff}.th h2 span{display:block}.th .kick{color:#7cc9ff}
.th ul{list-style:none;margin:20px 0 26px}.th li{display:flex;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid #ffffff1a}
.th li svg{color:var(--blue);flex:none}.th li b{color:#fff;display:block;font-size:15px}.th li span{font-size:13px}
.thi{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:1fr 1fr;gap:14px}
.thi img{width:100%;height:100%;object-fit:cover;border-radius:14px}.thi img:first-child{grid-row:span 2;min-height:340px}
.sv .wrap,.ab .wrap{display:grid;gap:44px;align-items:center}.sv .wrap{grid-template-columns:1fr 1.15fr}.ab .wrap{grid-template-columns:1.1fr 1fr}
.svi{position:relative}.svi img,.abi img{width:100%;height:430px;object-fit:cover;border-radius:16px;box-shadow:0 10px 30px #0a1a4a22}
.badge{position:absolute;left:16px;bottom:16px;background:#fff;border-radius:12px;padding:12px 18px;box-shadow:0 6px 20px #0003;color:var(--navy);line-height:1.3}.badge b{font-family:'Exo 2';font-size:26px;color:var(--blue)}
.svg6,.abp{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.svit{display:flex;gap:12px;align-items:center;padding:14px;background:#fff;border-radius:12px;box-shadow:0 4px 14px #0a1a4a10}.svit b{display:block;color:var(--navy);font-size:14px}.svit span{font-size:12.5px;display:block}
/* ---- dealers ---- */
.dinfo{text-align:center;margin:-6px 0 18px;color:var(--navy);font-weight:600;min-height:1.4em}
.dl .btn{cursor:pointer}.dl a{color:inherit}
.mapmodal{position:fixed;inset:0;background:#000b;z-index:200;display:none;align-items:center;justify-content:center;padding:16px}.mapmodal.open{display:flex}
.mm{background:#fff;border-radius:16px;width:min(920px,100%);padding:20px;position:relative}.mm h3{font-size:20px;padding-right:30px}.mm p{font-size:14px}
.mm iframe{width:100%;height:min(58vh,470px);border:0;border-radius:10px;margin:12px 0;background:#e9eef3}
.mx{position:absolute;right:14px;top:6px;border:0;background:none;font-size:34px;cursor:pointer;color:var(--navy);line-height:1}
.become{position:relative;overflow:hidden;background:#061224;color:#fff;padding:60px 0}
.become>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
.become:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#061224f5 45%,#061224a0 100%);z-index:1}
.become .wrap{position:relative;z-index:2}
.bform{max-width:780px;padding:6px}.bform h2{color:#fff}
.bf-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;margin:22px 0 8px}.bform .fld{background:#fff}
.bform .btn{padding:15px 38px;font-size:15px}.bform .msg{margin-top:14px}
.bform.flash{animation:fl 1.6s}@keyframes fl{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 6px #0aa5ff88;border-radius:16px}}
@media(max-width:1000px){.th .wrap,.sv .wrap,.ab .wrap{grid-template-columns:1fr;gap:28px}.svi img,.abi img{height:300px}.thi img:first-child{min-height:240px}.abi{order:-1}}
@media(max-width:640px){.bf-grid,.svg6,.abp{grid-template-columns:1fr}.stat{border:0}.stats{margin-top:-20px}.become{padding:44px 0}}
.mc{display:flex;flex-direction:column}.mc>p{min-height:3.1em}.mc .btn{margin-top:auto;align-self:center}
.become:before{background:linear-gradient(90deg,#061224f5 42%,#06122455 100%)}
.ft2 a{display:inline-block;margin:0 16px 8px 0}.ft2 .wrap>div{max-width:100%}html,body{overflow-x:hidden}

.mmap{position:relative;margin:12px 0}.mmap iframe{margin:0!important;display:block}
.mload{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#e9eef3;border-radius:10px;z-index:2;color:var(--navy);font-size:15px}
.mload.hide{display:none}
.spin{width:46px;height:46px;border:4px solid #cfe3f5;border-top-color:var(--blue);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}