/* L2 introduction: copy first, with a native four-configuration ADAS diagram. */
.offline-l2-hero > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 32vw, 380px);
  gap: clamp(24px, 5vw, 64px);
  align-items: center;
}
.offline-l2-hero .l2-hero-copy {
  min-width: 0;
  overflow-wrap: break-word;
}
.offline-l2-hero .l2-adas {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  justify-self: end;
  width: 100%;
  max-width: 380px;
  min-width: 0;
  min-height: 320px;
  aspect-ratio: 1;
  overflow: hidden;
}
.offline-l2-hero .l2-adas::before,
.offline-l2-hero .l2-adas::after {
  content: "";
  position: absolute;
  z-index: -2;
  top: 40%;
  left: 72%;
  width: 156%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(65, 189, 231, .12);
  border-radius: 50%;
  pointer-events: none;
}
.offline-l2-hero .l2-adas::after { width: 202%; }
.offline-l2-hero .l2-adas__orbit {
  position: absolute;
  z-index: -1;
  top: 52%;
  left: 50%;
  width: 92%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(65, 189, 231, .26);
  border-radius: 50%;
}
.offline-l2-hero .l2-adas__orbit--middle {
  width: 74%;
  border-style: dashed;
  border-color: rgba(65, 189, 231, .32);
}
.offline-l2-hero .l2-adas__orbit--inner {
  width: 53%;
  border-color: rgba(65, 189, 231, .22);
}
.offline-l2-hero .l2-adas__center {
  position: absolute;
  top: 52%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 28%;
  min-width: 84px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(125, 239, 243, .5);
  border-radius: 50%;
  color: #e3fbff;
  background: linear-gradient(135deg, rgba(30, 130, 204, .55), rgba(29, 227, 210, .18));
  box-shadow: 0 0 65px rgba(18, 180, 212, .15);
  font-size: clamp(22px, 2.3vw, 29px);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.offline-l2-hero .l2-adas__nodes {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.offline-l2-hero .l2-adas__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 5px;
  box-sizing: border-box;
  width: 34%;
  min-width: 0;
  padding: 14px 10px;
  border: 1px solid rgba(58, 191, 228, .34);
  border-radius: 10px;
  color: #e4f5ff;
  background: #0b2a44;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
  overflow-wrap: break-word;
}
.offline-l2-hero .l2-adas__node b {
  font-size: 21px;
  font-weight: 750;
  line-height: 1.15;
}
.offline-l2-hero .l2-adas__node span {
  color: #98c2d7;
  font-size: 11px;
  line-height: 1.45;
}
.offline-l2-hero .l2-adas__node--1v { top: 8%; left: 0; }
.offline-l2-hero .l2-adas__node--1r1v { top: 28%; right: 0; }
.offline-l2-hero .l2-adas__node--3r1v { bottom: 6%; left: 0; }
.offline-l2-hero .l2-adas__node--5r1v { bottom: 12%; right: 0; }
@media (max-width: 850px) {
  html[lang^="zh"] .offline-l2-hero h1 {
    font-size: clamp(32px, 10vw, 64px);
  }
  .offline-l2-hero > .wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }
  .offline-l2-hero .l2-adas { justify-self: center; }
}
@media (max-width: 400px) {
  .offline-l2-hero .l2-adas__node { padding: 12px 10px; }
  .offline-l2-hero .l2-adas__node b { font-size: 19px; }
}