/* Iteration 5: a quiet white wordmark; the lenses sit inside the two g counters. */
.brand{gap:0;font-weight:800;font-size:22px;letter-spacing:-1.55px}
.brand .brand-word,.brand>span.brand-word>span,.brand .brand-word *{color:#fff}
.brand-word{display:inline-flex;align-items:baseline;line-height:1}
.brand-separator{color:#fff}
.camera-g{display:inline-block;position:relative;letter-spacing:0;padding:0}
.camera-g i{box-sizing:border-box;position:absolute;left:.24em;top:.18em;width:.34em;height:.34em;border:.07em solid #fff;border-radius:50%;background:#102543;box-shadow:0 0 0 .045em #287cf4}
.camera-g i:before{content:"";position:absolute;left:17%;top:14%;width:18%;height:18%;border-radius:50%;background:#dcecff}
.camera-g i:after{content:"";position:absolute;inset:29%;border-radius:50%;background:#06101e}
.brand-logo{display:block;width:250px;height:auto}
.mobile-break{display:none}

.hero-product .metric-universal{right:5%;left:auto;top:17%;bottom:auto;max-width:175px;padding:12px 14px;border-left:2px solid #247dff;background:#101b2cb8}
.hero-product .metric-universal span{display:block;color:#d6e7ff;font:500 9px var(--mono);letter-spacing:.1em;line-height:1.55;text-transform:uppercase}

.vehicle-visual{height:164px;opacity:1;display:flex;align-items:center;justify-content:center}
.vehicle-pictogram{display:block;width:95%;height:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 9px 14px #0005)}
.vehicle-card:hover .vehicle-pictogram{filter:drop-shadow(0 0 14px #2a83f766)}
.vehicle-visual::before,.vehicle-visual::after{content:none;display:none}
.vehicle-card h3{margin-top:160px}

/* Restore the blue technical gradient treatment for emphasised headline highlights. */
.hero h1 em,.intro h2 em,.platform h2 em,.how h2 em,.performance h2 em,.for-whom h2 em,.preorder h2 em,.faq h2 em,.updates h2 em,.contact-panel h2 em{font-family:var(--mono)!important;font-style:normal;font-weight:500;letter-spacing:-.1em;background:linear-gradient(105deg,#d6e7ff,#1878ff 45%,#9bc7ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;position:relative}
.hero h1 em::after,.intro h2 em::after,.platform h2 em::after,.how h2 em::after,.performance h2 em::after,.for-whom h2 em::after,.preorder h2 em::after,.faq h2 em::after,.updates h2 em::after,.contact-panel h2 em::after{display:block;content:"";position:absolute;left:3%;right:3%;bottom:-4px;height:1px;background:#75adff;opacity:.5}

/* The stage render is the single product source used throughout the page. */
.hero-product img{width:100%;max-height:101%;right:-1%;bottom:-2%;mix-blend-mode:normal;filter:drop-shadow(0 32px 36px #0008)}
.detail-visual{object-fit:contain;object-position:center bottom;background:radial-gradient(ellipse at center,#173b6826,transparent 67%)}

/* Product highlights use the same Manrope system as the wordmark and headings. */
.metric{display:grid;gap:3px;min-width:132px;padding:13px 15px 13px 17px;background:linear-gradient(115deg,#0f1e31e8,#0b1523c9);border:1px solid #82baff40;border-left:2px solid #78adff;box-shadow:0 12px 28px #02081255;backdrop-filter:blur(12px)}
.metric::before{content:"";width:24px;height:1px;background:#78adff;box-shadow:7px 4px 0 -0.25px #78adff80;grid-row:1;grid-column:1}
.metric b{font:700 29px/1 var(--sans);letter-spacing:-.075em;color:#fff;grid-row:2;grid-column:1}
.metric small{font:700 10px var(--sans);letter-spacing:-.02em;color:#a9cfff}
.metric span{font:700 9px/1.4 var(--sans);letter-spacing:.075em;color:#b8cce3;text-transform:uppercase;grid-row:3;grid-column:1}
.hero-product .metric-top{right:1%;top:25%}
.hero-product .metric-bottom{left:0;top:66%}
.hero-product .metric-universal{display:block;right:2%;top:10%;min-width:0;max-width:190px;padding:13px 15px 14px 17px}
.hero-product .metric-universal::before{display:block;content:"";width:24px;height:1px;margin-bottom:7px;background:#78adff;box-shadow:7px 4px 0 -0.25px #78adff80}
.hero-product .metric-universal span{display:block;color:#dceaff;font:700 9px/1.55 var(--sans);letter-spacing:.08em;text-transform:uppercase}

/* Quiet interaction cues: one motion language, intentionally subtle. */
.application-figure img{transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.application-figure:hover img{transform:scale(1.025);filter:saturate(1.08)}
.application-figure--motorcycle{aspect-ratio:3 / 2;background:#101b2b}
.application-figure--motorcycle img{width:100%;height:100%;object-fit:cover;object-position:center}
.vehicle-pictogram{transition:transform .38s cubic-bezier(.2,.8,.2,1),filter .38s ease}
.vehicle-card:hover .vehicle-pictogram{transform:translateY(-5px) scale(1.025)}
.button{position:relative;overflow:hidden;isolation:isolate}
.button::before{content:"";position:absolute;z-index:-1;inset:0;transform:translateX(-115%) skewX(-18deg);background:linear-gradient(90deg,transparent,#ffffff4d,transparent);transition:transform .55s ease}
.button:hover::before{transform:translateX(115%) skewX(-18deg)}
@media(prefers-reduced-motion:no-preference){.hero-product img{animation:console-float 5.2s ease-in-out infinite}.metric::before{transform-origin:left;animation:signal-pulse 3.4s ease-in-out infinite}.metric-bottom::before{animation-delay:.8s}.metric-universal::before{animation-delay:1.5s}}
@keyframes console-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes signal-pulse{0%,100%{transform:scaleX(1);opacity:.72}50%{transform:scaleX(1.36);opacity:1}}

.price-card{display:grid;grid-template-columns:1.18fr .82fr;gap:22px;max-width:455px;margin:29px 0 25px;padding:18px 20px;border:1px solid #71a9ee55;background:#07142466;box-shadow:inset 3px 0 0 var(--blue)}
.price-card span,.price-card small{display:block;font:500 9px var(--mono);letter-spacing:.09em;text-transform:uppercase;color:#9ab0c9}
.price-card strong{display:block;margin:4px 0;font:500 39px var(--serif);line-height:1;letter-spacing:-.07em;color:#fff}
.price-card small{color:#d2e1f2;letter-spacing:.04em;text-transform:none}
.price-comparison{padding-top:3px;border-left:1px solid #6a86a333;padding-left:18px}
.price-card del{display:block;margin:5px 0 8px;color:#8d9eaf;font-size:16px;font-weight:700;text-decoration-thickness:1px}
.price-card b{display:inline-block;padding:4px 6px;background:#163e32;color:#83f0bf;font:500 10px var(--mono);letter-spacing:.03em}

@media(max-width:800px){.brand{font-size:21px}.brand-logo{width:205px}.hero-product .metric-universal{right:11%;top:5%;max-width:145px}.vehicle-pictogram{height:145px}.price-card{max-width:100%;margin-top:25px}}
@media(max-width:520px){.mobile-break{display:block}.hero-actions{align-items:flex-start;flex-direction:column}.price-card{grid-template-columns:1fr;gap:14px}.price-comparison{border-left:0;border-top:1px solid #6a86a333;padding:14px 0 0}.price-card strong{font-size:35px}}

/* Portrait phones: keep the hero hierarchy clear before introducing the render. */
@media(max-width:520px){
  html,body{overflow-x:hidden}
  .site-header{padding:0 20px}
  .brand-logo{width:178px}
  .header-actions{gap:4px}
  .language{padding:8px 4px;font-size:9px}
  .menu-toggle{margin-left:9px}

  .hero{height:1060px;min-height:1060px;padding-top:118px}
  .hero h1{font-size:50px;line-height:.98;letter-spacing:-.06em}
  .hero-text{max-width:330px;margin:24px 0;font-size:15px;line-height:1.65}
  .hero-actions{gap:14px}
  .hero-actions .button{min-width:206px}
  .hero .legacy,.hero-footer,.hero-product .product-label{display:none}

  .hero-product{left:0;right:auto;top:600px;width:100%;height:445px}
  .hero-product img{width:106%;max-height:100%;right:-3%;bottom:-1%;object-position:center bottom;filter:drop-shadow(0 22px 28px #0009)}
  .hero-product .halo{width:88%;left:6%;top:13%}
  .hero-product .orbit-one{width:96%;left:2%;top:43%}
  .hero-product .orbit-two{width:70%;left:15%;top:61%}
  .hero-product .metric-universal{display:none}
  .hero-product .metric{min-width:108px;padding:9px 10px 10px 12px;gap:2px}
  .hero-product .metric::before{width:18px;box-shadow:5px 4px 0 -.25px #78adff80}
  .hero-product .metric b{font-size:24px}
  .hero-product .metric small{font-size:8px}
  .hero-product .metric span{font-size:8px;line-height:1.3;letter-spacing:.055em}
  .hero-product .metric-top{left:auto!important;right:2%!important;top:14%}
  .hero-product .metric-bottom{left:2%;top:70%}
}

@media(max-width:380px){
  .site-header{padding:0 17px}
  .brand-logo{width:164px}
  .hero{height:1035px;min-height:1035px}
  .hero h1{font-size:47px}
  .hero-product{top:585px;height:438px}
}