.smart-mobility {
  width: 100%;
  overflow: hidden;
  background: #fff;
  color: #000;
  font-family: "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.smart-mobility *,
.smart-mobility *::before,
.smart-mobility *::after {
  box-sizing: border-box;
}

.smart-mobility__banner {
  position: relative;
  height: 550px;
  overflow: hidden;
  background: #17202a;
}

.smart-mobility__banner-picture,
.smart-mobility__banner-image,
.smart-mobility__product-picture,
.smart-mobility__product-image,
.smart-mobility__card-picture {
  display: block;
  width: 100%;
  height: 100%;
}

.smart-mobility__banner-picture,
.smart-mobility__product-picture {
  position: absolute;
  inset: 0;
}

.smart-mobility__banner-image {
  object-fit: contain;
}

.smart-mobility__banner-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.smart-mobility__banner-content {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 32px;
  color: #fff;
  text-align: center;
}

.smart-mobility__banner-title { margin: 0; font-size: 64px; font-weight: 700; line-height: 1.2; }
.smart-mobility__banner-en { margin: 18px 0 0; background: linear-gradient(90deg, #f3910a 0%, #fff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 24px; font-weight: 700; line-height: 1.25; }
.smart-mobility__banner-accent { width: 30px; height: 5px; margin-top: 25px; border-radius: 3px 0 3px 0; background: #e68812; }
.smart-mobility__banner-slogan { display: flex; align-items: center; justify-content: center; gap: 0.35em; margin: 15px 0 0; font-size: 20px; line-height: 1.5; }
.smart-mobility__banner-logo { display: block; width: auto; height: 1em; }

.smart-mobility__product { position: relative; height: 800px; overflow: hidden; background: #444; color: #fff; }
.smart-mobility__product-image { object-fit: contain; }
.smart-mobility__product-image--v2 { object-position: center 55%; }
.smart-mobility__product-image--v3 { object-position: center 50%; }
.smart-mobility__product-mask { position: absolute; inset: 0; pointer-events: none; }
.smart-mobility__product-mask--v2,
.smart-mobility__product-mask--v3 { background: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.22) 31%, rgba(0, 0, 0, 0) 62%); }
.smart-mobility__product-content { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; align-items: flex-start; padding: 92px 0 80px 6.98%; }
.smart-mobility__product-heading { display: flex; align-items: baseline; gap: 10px; }
.smart-mobility__product-model { font-family: Inter, Arial, Helvetica, sans-serif; font-size: 114px; font-weight: 400; line-height: 1; }
.smart-mobility__product-type { font-size: 54px; font-weight: 700; line-height: 1.2; }
.smart-mobility__product-title { margin: 58px 0 0; font-size: 68px; font-weight: 700; line-height: 1.3; }
.smart-mobility__product-link { display: inline-flex; width: 267px; height: 80px; margin-top: auto; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 40px; color: #fff; font-size: 32px; line-height: 1; text-decoration: none; transition: background-color 0.25s ease, color 0.25s ease; }
.smart-mobility__product-link:hover,
.smart-mobility__product-link:focus-visible { background: #fff; color: #222; }

.smart-mobility__showcase { position: relative; height: 950px; overflow: hidden; padding-top: 73px; }
.smart-mobility__showcase--scenes { background: #f6f7f9; }
.smart-mobility__showcase--cases { background: #fff; }
.smart-mobility__showcase-title { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.35; text-align: center; }
.smart-mobility__carousel { width: 100%; margin-top: 56px; overflow: visible; }
.smart-mobility__carousel-track { align-items: flex-start; }
.smart-mobility__card { text-align: center; opacity: 0.58; transition: opacity 0.35s ease, transform 0.35s ease; }
.smart-mobility__card-image { display: block; width: 100%; height: 526px; border-radius: 20px; object-fit: cover; transition: box-shadow 0.35s ease; }
.smart-mobility__carousel--scenes .smart-mobility__card-image { object-position: center; }
.smart-mobility__carousel--cases .smart-mobility__card-image { height: 550px; }
.smart-mobility__card-title { margin: 30px 0 0; font-size: 24px; font-weight: 700; line-height: 1.4; }
.smart-mobility__card-description { max-width: 920px; margin: 24px auto 0; font-size: 14px; line-height: 1.75; }
.smart-mobility__card:not(.swiper-slide-active) .smart-mobility__card-title,
.smart-mobility__card:not(.swiper-slide-active) .smart-mobility__card-description { visibility: hidden; opacity: 0; }
.smart-mobility__card.swiper-slide-active { z-index: 2; opacity: 1; }
.smart-mobility__card.swiper-slide-active .smart-mobility__card-image { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
.smart-mobility__carousel-button { position: absolute; top: 263px; z-index: 5; display: flex; width: 100px; height: 60px; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); cursor: pointer; transform: translateY(-50%); }
.smart-mobility__carousel-button--previous { left: 5%; }
.smart-mobility__carousel-button--next { right: 5%; }
.smart-mobility__carousel-arrow { display: block; width: 32px; height: 32px; }
.smart-mobility__carousel-arrow--previous { transform: rotate(180deg); }

@media (max-width: 1200px) {
  .smart-mobility__banner-title { font-size: 50px; }
  .smart-mobility__product-model { font-size: 88px; }
  .smart-mobility__product-type { font-size: 40px; }
  .smart-mobility__product-title { font-size: 54px; }
}

@media (max-width: 768px) {
  .smart-mobility__banner { height: 240px; margin-top: 80px; }
  .smart-mobility__banner-image { position: static; height: 100%; min-height: 0; object-fit: contain; object-position: center; }
  .smart-mobility__banner-content { padding-top: 0; }
  .smart-mobility__banner-title { font-size: 26px; }
  .smart-mobility__banner-en { margin-top: 3px; font-size: 20px; }
  .smart-mobility__banner-accent { width: 12px; height: 3px; margin-top: 13px; }
  .smart-mobility__banner-slogan { margin-top: 8px; font-size: 14px; }
  .smart-mobility__product { height: 520px; }
  .smart-mobility__product-image { object-fit: contain; }
  .smart-mobility__product-image--v2 { object-position: 51% center; }
  .smart-mobility__product-image--v3 { object-position: 57% center; }
  .smart-mobility__product-mask--v2 { background: linear-gradient(180deg, rgba(43, 65, 35, 0.9) 0%, rgba(46, 77, 42, 0.78) 30%, rgba(159, 166, 105, 0) 48%); }
  .smart-mobility__product-mask--v3 { background: linear-gradient(145deg, rgba(38, 43, 24, 0.82) 0%, rgba(38, 43, 24, 0.55) 26%, rgba(159, 166, 105, 0) 58%); }
  .smart-mobility__product-content { padding: 28px 0 36px 5.3%; }
  .smart-mobility__product-heading { gap: 6px; }
  .smart-mobility__product-model { font-size: 49px; }
  .smart-mobility__product-type { font-size: 23px; }
  .smart-mobility__product-title { margin-top: 18px; font-size: 32px; line-height: 1.46; }
  .smart-mobility__product-link { width: 138px; height: 42px; border-width: 1px; font-size: 18px; }
  .smart-mobility__showcase { height: 437px; padding-top: 46px; }
  .smart-mobility__showcase--scenes { height: auto; padding-bottom: 40px; }
  .smart-mobility__showcase--cases { height: 577px; }
  .smart-mobility__showcase-title { font-size: 27px; font-weight: 400; }
  .smart-mobility__carousel { margin-top: 34px; }
  .smart-mobility__card-image,
  .smart-mobility__carousel--cases .smart-mobility__card-image { height: 268px; border-radius: 12px; }
  .smart-mobility__carousel--cases .smart-mobility__card-image { height: 280px; }
  .smart-mobility__card-title { margin-top: 16px; font-size: 20px; }
  .smart-mobility__card-description { margin-top: 12px; padding: 0 4px; font-size: 13px; line-height: 1.55; }
  .smart-mobility__carousel-button { top: 134px; width: 74px; height: 42px; }
  .smart-mobility__carousel-button--previous { left: 2%; }
  .smart-mobility__carousel-button--next { right: 2%; }
  .smart-mobility__carousel-arrow { width: 24px; height: 24px; }
}

@media (max-width: 420px) {
  .smart-mobility__product-title { font-size: 30px; }
  .smart-mobility__card-description { font-size: 12px; }
}

/* Let the artwork determine the height of the banner and product panels. */
.smart-mobility__banner,
.smart-mobility__product { height: auto; }
.smart-mobility__banner-picture,
.smart-mobility__product-picture { position: relative; inset: auto; height: auto; }
.smart-mobility__banner-image,
.smart-mobility__product-image { height: auto; min-height: 0; }
.smart-mobility__banner-content,
.smart-mobility__product-content { position: absolute; inset: 0; }

@media (min-width: 769px) {
  .smart-mobility__product-content { padding-top: min(92px, 4.7917vw); padding-bottom: min(80px, 4.1667vw); }
  .smart-mobility__product-heading { gap: min(10px, .5208vw); }
  .smart-mobility__product-model { font-size: min(114px, 5.9375vw); }
  .smart-mobility__product-type { font-size: min(54px, 2.8125vw); }
  .smart-mobility__product-title { margin-top: min(58px, 3.0208vw); font-size: min(68px, 3.5417vw); }
  .smart-mobility__product-link { flex-shrink: 0; width: min(267px, 13.9063vw); height: min(80px, 4.1667vw); font-size: min(32px, 1.6667vw); }
}

@media (max-width: 768px) {
  .smart-mobility__banner { height: 240px; }
  .smart-mobility__banner-picture { height: 100%; }
  .smart-mobility__banner-image { height: 100%; object-fit: cover; object-position: center; }
}

@media (prefers-reduced-motion: reduce) {
  .smart-mobility__card,
  .smart-mobility__card-image,
  .smart-mobility__product-link { transition: none; }
}