/* ======================================================
   home.css  首页专属样式
   容器宽统一用 common.css 的 --container(1520/94vw),此处不再覆盖
   ====================================================== */

/* ========== 首页通用(官网左对齐标题风格) ========== */
.sec {
  padding: 60px 0 66px
}

.sec-alt {
  background: #ffffff;
}

.sec-head-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 34px
}

.sec-head-row h2 {
  font-size: 22px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .5px
}

.sec-head-row .more {
  font-size: 13.5px;
  color: var(--muted);
  transition: color .2s;
  white-space: nowrap
}

.sec-head-row .more:hover {
  color: var(--orange)
}

.sec-head-l {
  text-align: left;
  margin-bottom: 38px
}

.sec-head-l h2 {
  font-size: 28px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .5px
}

/* ========== 轮播 Hero(官网同款浅色排版 + 渐变星空) ========== */
.hero-zone {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1050px 500px at 74% 16%, rgba(122, 154, 244, .14), rgba(122, 154, 244, 0) 66%),
    linear-gradient(180deg, #f9fbfe 0%, #f5f8fd 45%, #fcfdff 80%, #ffffff 100%)
}

.hero-zone .bg-glow {
  position: absolute;
  top: -190px;
  right: -170px;
  width: 1020px;
  height: 680px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(66, 112, 235, .18), rgba(66, 112, 235, 0))
}

.hero-zone .bg-glow.g2 {
  top: auto;
  bottom: -220px;
  left: -170px;
  width: 620px;
  height: 420px;
  background: radial-gradient(closest-side, rgba(116, 88, 255, .05), rgba(116, 88, 255, 0))
}

.hero-zone .bg-rays {
  position: absolute;
  top: -180px;
  right: -80px;
  width: 920px;
  height: 660px;
  pointer-events: none;
  opacity: .55;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0) 68%),
    repeating-conic-gradient(from 8deg at 66% 30%, rgba(255, 255, 255, .2) 0deg .45deg, transparent .45deg 7.5deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 12%, transparent 74%);
  mask-image: radial-gradient(closest-side, #000 12%, transparent 74%)
}

.bg-dots {
  position: absolute;
  left: calc(100% - 214px);
  top: 112px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  pointer-events: none;
  opacity: .7;
  box-shadow:
    -235px 44px 1px #b9c8ff8a,
    128px 200px 1px #b9c8ffa8,
    115px 47px 0 #b9c8ff99,
    -173px -120px 1px #ffffffdf,
    -58px -32px 0 #ffffffc9,
    370px 52px 1px #ffffff44,
    -338px 82px 1px #ffffff66,
    47px 0px 2px #b9c8ff6d,
    363px -6px 2px #b9c8ff69,
    -24px -1px 1px #ffffffbe,
    98px -88px 0 #ffffffcc,
    98px 235px 1px #ffffff7d,
    -217px 74px 0 #ffffffc0,
    128px 48px 1px #ffffffbd,
    1px 33px 0 #ffffff8c,
    -37px -51px 1px #b9c8ff5f,
    191px 127px 0 #b9c8ff81,
    373px 0px 1px #b9c8ff72,
    43px 106px 1px #ffffffaa,
    100px -4px 0 #ffffff41,
    83px -94px 0 #ffffff4e,
    11px 163px 0 #ffffffa6,
    -307px -116px 0 #ffffffcf,
    221px 200px 1px #ffffff69,
    -26px -250px 0 #ffffffb1,
    -44px 3px 0 #ffffff50,
    108px -16px 2px #ffffff80,
    179px -75px 1px #b9c8ff5c,
    97px 27px 1px #ffffffac,
    90px 28px 0 #ffffffbb,
    -98px 38px 0 #ffffff5c,
    -60px -18px 0 #ffffff56,
    -155px 172px 1px #ffffffa0,
    19px 2px 0 #b9c8ffb3,
    275px 22px 1px #ffffff4a,
    27px 19px 1px #b9c8ff9a,
    259px -116px 2px #b9c8ff55,
    -25px 24px 1px #b9c8ffd5,
    -297px 105px 1px #ffffff9e,
    -188px 106px 1px #ffffff4b,
    89px 49px 1px #ffffffb8,
    -23px -157px 1px #ffffff8c,
    -225px -16px 0 #ffffffa3,
    37px 186px 1px #ffffffc1,
    -385px 20px 0 #ffffff71,
    24px 49px 0 #ffffffad,
    115px -57px 2px #ffffff69,
    108px -191px 0 #ffffffd1,
    -125px -44px 0 #ffffff56,
    22px -10px 0 #ffffffdd,
    97px 108px 0 #b9c8ffd9,
    -169px 95px 2px #b9c8ff74,
    199px -14px 0 #ffffffc9,
    -230px -114px 0 #ffffff9e,
    5px -11px 0 #ffffff82,
    14px -75px 0 #b9c8ffc3,
    43px 23px 1px #b9c8ffac,
    288px -47px 0 #ffffffc8,
    -73px -198px 1px #ffffffb6,
    -21px 96px 2px #ffffffdc,
    78px 0px 2px #ffffffd5,
    286px -80px 0 #ffffff8a,
    11px -5px 1px #b9c8ff9e,
    117px -241px 1px #b9c8ff75,
    304px 135px 2px #ffffffd8,
    8px 108px 0 #ffffffe1,
    36px -87px 2px #ffffffcd,
    170px 60px 1px #ffffff85,
    90px -30px 0 #ffffff86,
    -292px -38px 0 #b9c8ff8d,
    185px -82px 2px #b9c8ffb2,
    -408px 11px 0 #ffffffbd,
    -335px -80px 1px #ffffffa9,
    136px -126px 0 #b9c8ffaf,
    182px -120px 0 #b9c8ffcc,
    -248px -23px 0 #ffffff83,
    169px 3px 1px #ffffffe0,
    -281px 125px 1px #ffffff53,
    200px 215px 1px #b9c8ff84,
    110px -35px 1px #ffffff91,
    327px -145px 1px #ffffff96,
    -21px 7px 0 #b9c8ff55,
    92px 8px 0 #ffffff41,
    -18px -69px 1px #b9c8ff51,
    161px 97px 0 #ffffffb6,
    15px -9px 2px #ffffff84,
    52px 50px 2px #ffffff98,
    50px 144px 1px #ffffffcd,
    -20px -217px 0 #ffffff74,
    91px -29px 0 #ffffffd2,
    21px 195px 0 #ffffff80,
    222px -53px 2px #ffffff54,
    -7px -11px 0 #ffffff9e,
    70px -91px 2px #b9c8ff93,
    -298px -3px 0 #ffffffc4,
    326px 31px 1px #ffffff95,
    53px 43px 0 #ffffff5c,
    -60px 177px 1px #b9c8ff4a,
    -322px 48px 0 #ffffff80,
    -60px 49px 0 #ffffff41,
    48px -45px 1px #ffffff7b,
    233px -77px 0 #ffffff94,
    271px -133px 2px #b9c8ffd0,
    232px -57px 0 #b9c8ff93,
    40px -70px 0 #b9c8ffbb,
    71px -103px 0 #ffffffd1,
    35px -204px 1px #ffffff62,
    40px -81px 0 #ffffff41,
    -175px -129px 0 #b9c8ff6c,
    -30px 60px 1px #ffffff9e
}

.hero-zone::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 62px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(205, 218, 250, 0) 0%, rgba(196, 212, 250, .16) 55%, rgba(180, 201, 246, .3) 100%)
}

.hero-zone::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(157, 181, 243, .08), rgba(150, 175, 242, .28) 28%, rgba(150, 175, 242, .28) 72%, rgba(157, 181, 243, .08))
}

.hero-zone .car-stage,
.hero-zone .feat-strip {
  position: relative;
  z-index: 1;
  background: transparent
}

.car-stage {
  position: relative;
  height: 392px;
  overflow: hidden
}

.car-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none
}

.car-slide.active {
  opacity: 1;
  pointer-events: auto
}

.car-slide.s1 {
  background: radial-gradient(620px 280px at 72% 26%, rgba(255, 255, 255, .26), transparent 62%)
}

.car-slide.s2 {
  background: radial-gradient(620px 280px at 72% 26%, rgba(255, 153, 64, .18), transparent 62%)
}

.car-slide.s3 {
  background: radial-gradient(620px 280px at 72% 26%, rgba(64, 160, 255, .2), transparent 62%)
}

.car-slide.s4 {
  background: radial-gradient(620px 280px at 72% 26%, rgba(52, 199, 123, .18), transparent 62%)
}

.slide-inner {
  max-width: var(--container);
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;

  position: relative
}

.slide-copy {
  max-width: 600px
}

.slide-copy h2 {
  font-size: 34px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 1px
}

.slide-copy .s-desc {
  font-size: 14px;
  line-height: 1.85;
  margin: 13px 0 22px;
  color: #5b6472;
  max-width: 500px
}

.grad {
  background: linear-gradient(90deg, #2f6bff, #8a4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.grad-orange {
  background: linear-gradient(90deg, #ff6a00, #ff9a3d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.slide-cta {
  display: flex;
  align-items: center;
  gap: 16px
}

.btn-blue {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: linear-gradient(135deg, #4a7dff, #2456f0);
  color: #fff;
  font-size: 14.5px;
  font-weight: 600;
  padding: 10px 26px;
  border-radius: 6px;
  transition: .2s
}

.btn-blue:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(36, 104, 242, .35)
}

.btn-plain {
  display: inline-block;
  background: #fff;
  border: 1px solid #e3e8ef;
  color: var(--ink);
  font-size: 14.5px;
  padding: 9px 25px;
  border-radius: 6px;
  transition: .2s
}

.btn-plain:hover {
  border-color: var(--blue);
  color: var(--blue)
}

/* 轮播入场动画(标题/描述/按钮/插画分层滑入) */
.slide-copy h2,
.slide-copy .s-desc,
.slide-copy .slide-cta,
.hero-art {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .7s ease, transform .7s ease
}

.slide-copy .s-desc {
  transition-delay: .18s
}

.slide-copy .slide-cta {
  transition-delay: .34s
}

.hero-art {
  transform: translateX(54px);
  transition-delay: .2s
}

.car-slide.active .slide-copy h2,
.car-slide.active .slide-copy .s-desc,
.car-slide.active .slide-copy .slide-cta,
.car-slide.active .hero-art {
  opacity: 1;
  transform: none
}

/* 窗口漂浮 + 加载扫光 + 光标闪烁 */
.win-main {
  animation: floatW 7s ease-in-out infinite
}

.win-back {
  animation: floatW 8.5s ease-in-out .9s infinite
}

@keyframes floatW {
  50% {
    transform: translateY(-9px)
  }
}

.win-body {
  position: relative;
  overflow: hidden
}

.win-body::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 42%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(90, 140, 255, .12), transparent);
  animation: sweep 3.4s ease-in-out infinite
}

@keyframes sweep {

  55%,
  100% {
    left: 125%
  }
}

.win-body .ln {
  position: relative
}

.win-body .ln::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(100% + 7px);
  width: 7px;
  border-radius: 2px;
  background: #2468f2;
  animation: blink 1.1s steps(2) infinite
}

@keyframes blink {
  50% {
    opacity: 0
  }
}

/* 深色代码窗 */
.win-back {
  background: #0d1226;
  box-shadow: 0 26px 60px rgba(20, 40, 120, .3);
  overflow: hidden
}

.win-back::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(240px 140px at 80% 0%, rgba(90, 140, 255, .25), transparent 70%)
}

.win-back .code {
  position: absolute;
  left: 0;
  top: 0;
  width: 14px;
  height: 6px;
  border-radius: 2px;
  background: transparent;
  box-shadow:
    16px 14px 0 0 #ffd46694,
    42px 14px 0 0 #7ce38bb7,
    76px 14px 0 0 #7ce38b99,
    110px 14px 0 0 #7ce38bb9,
    132px 14px 0 0 #9d7dffba,
    154px 14px 0 0 #7aa2ff94,
    172px 14px 0 0 #ff7ab28e,
    16px 36px 0 0 #ffd46692,
    42px 36px 0 0 #9d7dffb1,
    60px 36px 0 0 #9d7dffa2,
    82px 36px 0 0 #9d7dffd9,
    108px 36px 0 0 #9d7dffa8,
    134px 36px 0 0 #9d7dff94,
    160px 36px 0 0 #ffb86bd5,
    190px 36px 0 0 #ffd466b9,
    16px 58px 0 0 #ffb86bdd,
    38px 58px 0 0 #7ce38bd0,
    72px 58px 0 0 #ffb86bc7,
    106px 58px 0 0 #7aa2ffb7,
    124px 58px 0 0 #7ce38bec,
    158px 58px 0 0 #ffd466c8,
    184px 58px 0 0 #7ce38be8,
    16px 80px 0 0 #ffd466ba,
    42px 80px 0 0 #7ce38b9b,
    64px 80px 0 0 #ffd46698,
    98px 80px 0 0 #ffb86bad,
    128px 80px 0 0 #5ad1e6c8,
    150px 80px 0 0 #ffb86bba,
    180px 80px 0 0 #7aa2ffcc,
    16px 102px 0 0 #ffb86bde,
    34px 102px 0 0 #ffb86bde,
    52px 102px 0 0 #9d7dffec,
    70px 102px 0 0 #5ad1e695,
    100px 102px 0 0 #ffd466b2,
    118px 102px 0 0 #7aa2ff93,
    140px 102px 0 0 #9d7dffa0,
    170px 102px 0 0 #7ce38ba2,
    200px 102px 0 0 #9d7dffc2,
    16px 124px 0 0 #5ad1e6c3,
    38px 124px 0 0 #7ce38b96,
    60px 124px 0 0 #7aa2ffb9,
    82px 124px 0 0 #5ad1e6e7,
    108px 124px 0 0 #9d7dffd2,
    130px 124px 0 0 #7aa2ffd2,
    160px 124px 0 0 #9d7dffaa,
    182px 124px 0 0 #7ce38bda
}

.win-back .code::after {
  content: '';
  position: absolute;
  left: 200px;
  top: 138px;
  width: 8px;
  height: 7px;
  border-radius: 2px;
  background: #7ce38b;
  animation: blink 1s steps(2) infinite
}

.hero-art {
  margin-left: auto;
  position: relative;
  width: 380px;
  height: 226px;
  flex: none
}

.win {
  position: absolute;
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 20px 50px rgba(40, 80, 180, .18)
}

.win-back {
  width: 218px;
  height: 130px;
  right: 22px;
  top: 0;
  opacity: .92
}

.win-main {
  width: 288px;
  height: 178px;
  right: 56px;
  top: 32px
}

.win-bar {
  height: 24px;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  gap: 5px;
  padding: 0 12px;
  align-items: center
}

.win-bar i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff5f57
}

.win-bar i:nth-child(2) {
  background: #febc2e
}

.win-bar i:nth-child(3) {
  background: #28c840
}

.win-body {
  padding: 14px 16px
}

.ln {
  height: 8px;
  border-radius: 4px;
  background: #e8edf5;
  margin-bottom: 9px
}

.ln.w80 {
  width: 82%
}

.ln.w60 {
  width: 60%
}

.ln.w40 {
  width: 42%
}

.win-chip {
  position: absolute;
  left: -30px;
  top: 52px;
  background: #eaf1ff;
  color: #2468f2;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(36, 104, 242, .15);
  white-space: nowrap
}

.art-pill {
  position: absolute;
  right: 12px;
  bottom: 0;
  background: #fff;
  border-radius: 999px;
  padding: 6px 14px 6px 7px;
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 11.5px;
  color: #454b53;
  box-shadow: 0 14px 34px rgba(40, 80, 180, .16);
  white-space: nowrap
}

.pill-badge {
  background: #e8f0ff;
  color: #2468f2;
  font-weight: 700;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 10.5px;
  flex: none
}

.chip-f {
  position: absolute;
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: 12px;
  padding: 11px 16px;
  box-shadow: 0 14px 34px rgba(40, 80, 180, .12);
  animation: floatY 6s ease-in-out infinite
}

.chip-f b {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink)
}

.chip-f span {
  display: block;
  font-size: 11px;
  color: #98a1ab;
  margin-top: 4px
}

.chip-f.c1 {
  right: 22px;
  top: 6px
}

.chip-f.c2 {
  right: 150px;
  top: 96px;
  animation-delay: 1.4s
}

.chip-f.round {
  width: 126px;
  height: 126px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  right: 20px;
  bottom: 2px
}

.chip-f.round b {
  font-size: 30px;
  font-weight: 800;
  color: var(--orange)
}

.chip-f.round b i {
  font-style: normal;
  font-size: 14px
}

.chip-f.round span {
  font-size: 11px;
  color: var(--muted)
}

.car-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 5
}

.car-dot {
  width: 20px;
  height: 4px;
  border-radius: 2px;
  background: #c9d4ea;
  cursor: pointer;
  transition: .25s;
  border: 0
}

.car-dot.active {
  background: var(--blue);
  width: 34px
}

.car-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  background: #fff;
  color: #454b53;
  font-size: 19px;
  line-height: 1;
  box-shadow: 0 6px 18px rgba(31, 35, 41, .14);
  transition: .2s
}

.car-arrow:hover {
  color: var(--orange)
}

.car-arrow.prev {
  left: 22px
}

.car-arrow.next {
  right: 22px
}

@keyframes floatY {
  50% {
    transform: translateY(-10px)
  }
}

/* ========== 四栏图标导购条(官网同款) ========== */
.feat-strip {
  background: transparent;
  padding-bottom: 30px
}

.feat-grid {
  display: flex
}

.feat-item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  gap: 12px;
  padding: 21px  0;
  align-items: flex-start;
  transition: background .2s;
  cursor: pointer
}

.feat-item.active b {
  color: var(--orange)
}

.feat-item.active {
  background: rgba(255, 255, 255, .65)
}

.feat-item:hover {
  background: rgba(255, 255, 255, .55)
}

.feat-item+.feat-item {
  border-left: 1px solid rgba(36, 104, 242, .12);
  padding-left: 28px
}

/* 首项贴最左、末项标题居左,副标题两端对齐:左缘与标题对齐、右缘贴最右,分隔线稳定在 1/4、1/2、3/4 等分点 */
.feat-item:last-child>div {
  flex: 1;
  min-width: 0
}

.feat-item:last-child span {
  text-align: justify;
  text-align-last: justify
}

.feat-ico {
  color: var(--blue);
  flex: none;
  margin-top: 1px
}

.feat-item b {
  display: block;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5
}

.feat-item span {
  display: block;
  font-size: 12.5px;
  color: #98a1ab;
  margin-top: 6px;
  line-height: 1.7
}

/* ========== 更强模型(左标题+工作台面板,右应用列表) ========== */
.sec-rounded {
  position: relative;
  z-index: 1;
  border-radius: 24px 24px 0 0;
  margin-top: -22px;
  background:
    radial-gradient(880px 540px at 81% 47%, rgba(122, 154, 244, .2), rgba(122, 154, 244, 0) 66%),
    linear-gradient(180deg, #fdfdff 0%, #fcfdff 55%, #ffffff 100%)
}

.strong-left {
  position: sticky;
  top: calc(var(--nav-h) + 48px)
}

.strong-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px
}

/* 左栏(标题+4条)与右栏(6条)底部对齐：左栏拉伸后列表均分剩余高度 */
.strong-left-news {
  display: flex;
  flex-direction: column
}

.strong-left-news .app-list {
  flex: 1;
  justify-content: space-between
}

.strong-copy h2 {
  font-size: 38px;
  line-height: 1.5;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: 1px
}

.strong-copy .btn-blue {
  margin-top: 28px
}

.strong-panel {
  margin-top: 40px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e8edf6;
  box-shadow: 0 30px 70px rgba(40, 80, 180, .14);
  overflow: hidden
}

.wbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 13px 18px;
  border-bottom: 1px solid #f0f2f7;
  background: #fbfcff
}

.wdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff5f57
}

.wdot:nth-of-type(2) {
  background: #febc2e
}

.wdot:nth-of-type(3) {
  background: #28c840
}

.wtitle {
  flex: 1;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #3d478f
}

.wtitle i {
  font-style: normal;
  color: #c9d2e6;
  margin: 0 6px
}

.wbody {
  display: grid;
  grid-template-columns: 96px 1fr 186px;
  gap: 14px;
  padding: 14px;
  min-height: 352px;
  background: linear-gradient(160deg, #e6edff, #dbe5ff)
}

.wside {
  background: #fff;
  border-radius: 10px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px
}

.witem {
  font-size: 11px;
  color: #5b6472;
  padding: 8px 9px;
  border-radius: 7px;
  white-space: nowrap
}

.witem.active {
  background: #e8f0ff;
  color: #2468f2;
  font-weight: 700
}

.wavs {
  display: flex;
  align-items: center;
  margin-bottom: 11px
}

.wavs .add {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px dashed #b9c8e6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8fa3c8;
  font-size: 13px;
  flex: none
}

.wavs i {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-left: -9px;
  border: 2px solid #fff;
  flex: none
}

.wavs i:nth-of-type(1) {
  background: linear-gradient(135deg, #ffd466, #ff9a3d)
}

.wavs i:nth-of-type(2) {
  background: linear-gradient(135deg, #ff9db0, #f472b6)
}

.wavs i:nth-of-type(3) {
  background: linear-gradient(135deg, #7aa2ff, #4a6cf0)
}

.wavs i:nth-of-type(4) {
  background: linear-gradient(135deg, #34d399, #0d9488)
}

.winput {
  background: #fff;
  border: 1px solid #e3e9f4;
  border-radius: 10px;
  padding: 12px 12px;
  font-size: 11.5px;
  color: #a4abb5;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 86px
}

.wcount {
  font-size: 10px;
  color: #b9c2d4
}

.wrow {
  display: flex;
  gap: 6px;
  margin: 11px 0
}

.wbtn {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: #5b6472;
  background: #fff;
  border: 1px solid #e3e9f4;
  border-radius: 7px;
  padding: 7px 0
}

.wbtn.active {
  background: #e8f0ff;
  border-color: #b9cffc;
  color: #2468f2;
  font-weight: 700
}

.wbtn.on {
  background: #2468f2;
  border-color: #2468f2;
  color: #fff
}

.wchips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 13px
}

.wchips span {
  font-size: 11px;
  color: #454b53;
  background: #fff;
  border: 1px solid #e3e9f4;
  border-radius: 7px;
  padding: 5px 12px
}

.wfoot {
  display: flex;
  align-items: center
}

.mic {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e3e9f4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex: none
}

.gen {
  flex: 1;
  text-align: center;
  margin-left: 12px;
  background: #2468f2;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 9px 0
}

.wshots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1.35fr;
  gap: 12px
}

.wshot {
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px
}

.wshot.s1 {
  background: linear-gradient(135deg, #cfe0ff, #a8c3ff)
}

.wshot.s2 {
  background: linear-gradient(135deg, #ffe0c2, #ffc290)
}

.wposter {
  border-radius: 10px;
  grid-column: 1/3;
  background: linear-gradient(160deg, #ffd9c2, #ff9d9d);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #8a2c2c;
  letter-spacing: 3px;
  line-height: 1.8
}

.app-list {
  display: flex;
  flex-direction: column
}

.app-row {
  display: flex;
  justify-content: space-between;
  gap: 26px;
  padding: 24px 10px;
  transition: .2s;
  cursor: pointer;
  align-items: center;
  border-radius: 12px
}

.app-row+.app-row {
  border-top: 1px solid rgba(36, 104, 242, .08)
}

.app-row:hover {
  background: rgba(255, 255, 255, .7)
}

.app-ico {
  color: var(--blue);
  flex: none
}

.app-txt {
  flex: 1;
  min-width: 0
}

.app-t {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  flex-wrap: wrap
}

.app-badge {
  background: #e8f0ff;
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap
}

.app-d {
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.7
}

/* 右栏「最新文章」列表(数据来自文章库，简约行式布局) */
.app-row--news .app-ico {
  color: inherit;
  flex: none;
  margin-top: 4px
}

.app-row--news .app-t {
  align-items: flex-start
}

.app-row--news .app-tt {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: normal;
}

.app-row--news .app-d {
  margin-top: 7px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.app-empty {
  padding: 40px 10px;
  text-align: center;
  font-size: 13px;
  color: var(--muted)
}

.app-thumb {
  width: 200px;
  height: 122px;
  border-radius: 14px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  padding: 10px;
  background: linear-gradient(135deg, var(--c1), var(--c2))
}

.app-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(140px 70px at 82% 0%, rgba(255, 255, 255, .45), transparent 65%)
}

.thumb-card {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 9px;
  box-shadow: 0 10px 26px rgba(40, 80, 180, .16);
  padding: 9px 11px;
  width: 86%
}

.thumb-cap {
  font-size: 10.5px;
  color: #333a45;
  line-height: 1.5;
  padding-right: 22px
}

.thumb-send {
  position: absolute;
  right: 7px;
  bottom: 7px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #2468f2;
  color: #fff;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center
}

.thumb-lines i {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: #e8edf5;
  margin-top: 4px
}

.fan {
  position: relative;
  z-index: 1;
  height: 54px;
  width: 100%;
  margin-bottom: 2px
}

.fan-card {
  position: absolute;
  width: 44px;
  height: 50px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 18px rgba(40, 80, 180, .18);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 15px
}

.fan-card i {
  font-style: normal;
  font-size: 7.5px;
  color: #5b6472;
  white-space: nowrap
}

.fan-card.f1 {
  left: 8px;
  top: 9px;
  transform: rotate(-9deg)
}

.fan-card.f2 {
  left: 42px;
  top: 3px
}

.fan-card.f3 {
  left: 76px;
  top: 9px;
  transform: rotate(9deg)
}

.mini-sites {
  display: flex;
  gap: 6px;
  margin-top: 2px;
  position: relative;
  z-index: 1;
  width: 100%
}

.mini-sites i {
  flex: 1;
  height: 24px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(40, 80, 180, .12)
}

.thumb-bars {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 30px;
  margin-bottom: 7px;
  width: 100%
}

.thumb-bars i {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #7aa2ff, #4a6cf0)
}

.mini-docs {
  display: flex;
  gap: 6px;
  margin-bottom: 7px;
  width: 100%
}

.mini-docs i {
  flex: 1;
  height: 26px;
  border-radius: 5px;
  background: #f0f4fb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-style: normal
}

.doc-h {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px
}

.doc-h .dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--blue)
}

/* ---- Font Awesome 图标尺寸与配色 ---- */
.q-ico,
.qi-ico,
.m-ico,
.s-ico {
  color: #fff
}

.q-ico .fa-solid {
  font-size: 15px
}

.q-ico .fa-brands {
  font-size: 17px
}

.qi-ico .fa-solid {
  font-size: 13px
}

.m-ico .fa-solid {
  font-size: 17px
}

.m-ico .fa-brands {
  font-size: 17px
}

.s-ico .fa-solid {
  font-size: 19px
}

.witem .fa-solid {
  font-size: 10px;
  color: #8fa3c8;
  width: 13px;
  text-align: center
}

.mic .fa-solid {
  font-size: 11px;
  color: #454b53
}

.wshot .fa-solid {
  font-size: 28px;
  color: #fff;
  opacity: .9
}

.fan-card .fa-glasses {
  font-size: 14px;
  color: #3d478f
}

.fan-card .fc-t {
  font-size: 7.5px;
  color: #5b6472;
  white-space: nowrap;
  font-style: normal
}

.thumb-send .fa-solid {
  font-size: 8px;
  color: #fff
}

.mini-docs .fa-solid {
  font-size: 11px;
  color: var(--blue)
}

.wm-label .wm-loc {
  color: var(--blue);
  font-size: 12px
}

/* ========== 千问大模型专区(官方同款浅色) ========== */
.sec-head-l {
  text-align: left;
  margin-bottom: 38px
}

.sec-head-l h2 {
  font-size: 28px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: .5px
}

.qwen-wrap {
  display: grid;
  grid-template-columns: 0.92fr 1.58fr;
  gap: 20px;
  align-items: stretch
}

.qwen-hero {
  padding: 16px 0 0;
  color: var(--ink);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

.qwen-hero h3 {
  font-size: 24px;
  font-weight: 800;
  color: var(--ink)
}

.qwen-hero .q-sub {
  font-size: 13px;
  color: var(--muted);
  margin-top: 10px
}

.qwen-hero ul {
  margin: 20px 0 24px
}

.qwen-hero li {
  font-size: 13px;
  color: var(--text);
  line-height: 2.3;
  display: flex;
  align-items: flex-start;
  gap: 9px
}

.qwen-hero li .li-t {
  flex: 1;
  min-width: 0
}

.qwen-hero li .ck {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #dfeaff;
  flex: none;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center
}

.qwen-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.qwen-card {
  display: block;
  text-decoration: none;
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  box-shadow: 0 4px 18px rgba(60, 90, 160, .06);
  transition: .22s;
  cursor: pointer
}

.qwen-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(40, 80, 180, .14)
}

.qwen-card h4 {
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 10px
}

.qwen-card h4 .q-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, #4a9df2, #1d59d8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex: none
}

.qwen-card p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.9;
  margin-top: 11px
}

.qwen-card .q-tag {
  display: inline-block;
  background: #e8f0ff;
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  margin-top: 12px
}

/* ========== 增值服务 · 定制服务 ========== */
.vas-sec {
  background:
    radial-gradient(760px 420px at 88% -80px, rgba(122, 154, 244, .16), rgba(122, 154, 244, 0) 70%),
    linear-gradient(180deg, #f2f6fc 0%, #f6f8fc 100%)
}

.sec-head-l .sec-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin-top: 12px;
  letter-spacing: 1px
}

.qwen-hero li b {
  font-weight: 700;
  color: var(--ink)
}

.qwen-card .q-arr {
  font-size: 11px;
  color: #9db4d8;
  margin-left: auto;
  transition: .22s
}

.qwen-card:hover .q-arr {
  color: var(--blue);
  transform: translate(2px, -2px)
}

/* 左栏插画(官方同款浮动卡片,自适应填满剩余高度) */
.q-illus {
  position: relative;
  flex: 1;
  min-height: 210px;
  width: 100%;
  margin-top: 14px
}

.qi-card {
  position: absolute;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(40, 80, 180, .15);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  animation: floatY 6s ease-in-out infinite
}

.qi-card.c1 {
  left: 4%;
  top: 30px
}

.qi-card.c2 {
  right: 5%;
  top: 2px;
  animation-delay: 1.3s
}

.qi-card.c3 {
  right: 13%;
  bottom: 12px;
  animation-delay: .6s
}

.qi-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #4a9df2, #1d59d8);
  color: #fff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none
}

.qi-t {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap
}

.qi-t b {
  color: var(--blue);
  font-weight: 800;
  margin-right: 4px
}

.qi-ln {
  margin-top: 6px
}

.qi-ln i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #e8edf5;
  margin-top: 5px
}

.qi-ln i:first-child {
  width: 92%
}

.qi-ln i:last-child {
  width: 58%
}

/* ========== MaaS 平台 ========== */
.maas-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr;
  gap: 18px
}

.maas-big {
  border-radius: 16px;
  padding: 32px 34px;
  position: relative;
  overflow: hidden;
  background: radial-gradient(380px 240px at 90% 10%, rgba(90, 140, 255, .16), transparent 60%), linear-gradient(140deg, #eaf1ff, #dbe7ff)
}

.maas-big h3 {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink)
}

.maas-big p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.9;
  margin: 12px 0 22px
}

.maas-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px 28px;
  transition: .22s
}

.maas-card:hover {
  box-shadow: 0 16px 34px rgba(31, 35, 41, .08);
  transform: translateY(-3px);
  border-color: #ffd9b8
}

.maas-card .m-ico {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 6px 14px rgba(31, 35, 41, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  margin-bottom: 16px;
  color: var(--blue)
}

.maas-card h3 {
  font-size: 16.5px;
  color: var(--ink)
}

.maas-card p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.8;
  margin: 10px 0 14px
}

.link-more {
  font-size: 13px;
  color: var(--orange)
}

.link-more:hover {
  text-decoration: underline
}

.maas-big .link-more {
  color: var(--blue);
  font-weight: 600
}

/* ========== 产品体系 ========== */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.prod-card {
  background: var(--bg-soft);
  border-radius: 14px;
  padding: 24px;
  transition: .22s;
  display: flex;
  flex-direction: column
}

.prod-card:hover {
  background: #fff;
  box-shadow: 0 16px 34px rgba(31, 35, 41, .09);
  transform: translateY(-3px)
}

.prod-card h3 {
  font-size: 15.5px;
  color: var(--ink);
  line-height: 1.4
}

.prod-card h3 em {
  font-style: normal;
  font-size: 10.5px;
  color: var(--blue);
  background: #eef3ff;
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 8px;
  vertical-align: 2px;
  font-weight: 700
}

.prod-card p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.8;
  margin: 10px 0 16px;
  flex: 1
}

.prod-card .p-links {
  display: flex;
  gap: 16px
}

.prod-card .p-links a {
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
  transition: color .15s
}

.prod-card .p-links a:hover {
  color: var(--orange)
}

.prod-card .p-links a.hl {
  color: var(--orange)
}

/* ========== AI 解决方案(浅色) ========== */
.sol-sec {
  background: #fff;
  padding: 70px 0 76px;
  border-top: 1px solid var(--line)
}

.sol-sec .sec-head-row h2 {
  color: var(--ink)
}

.sol-sec .sec-head-row .more {
  color: var(--muted)
}

.sol-sec .sec-head-row .more:hover {
  color: var(--orange)
}

.sol-sec .sec-lead {
  color: var(--muted);
  font-size: 14px;
  margin: -18px 0 34px
}

.sol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px
}

.sol-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  transition: .25s
}

.sol-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(31, 35, 41, .08);
  border-color: #ffd9b8
}

.sol-card .s-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  font-size: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  margin-bottom: 16px
}

.sol-card h3 {
  font-size: 16px;
  color: var(--ink);
  line-height: 1.5
}

.sol-card p {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.9;
  margin: 11px 0 18px
}

.sol-card .s-links {
  display: flex;
  gap: 18px;
  align-items: center
}

.sol-card .s-links .l1 {
  font-size: 12.5px;
  color: var(--orange);
  font-weight: 600
}

.sol-card .s-links .l1:hover {
  text-decoration: underline
}

.sol-card .s-links .l2 {
  font-size: 12.5px;
  color: #454b53;
  border: 1px solid #dcdfe4;
  border-radius: 6px;
  padding: 6px 14px;
  transition: .2s
}

.sol-card .s-links .l2:hover {
  border-color: var(--orange);
  color: var(--orange)
}

/* ========== 超值权益 ========== */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px
}

.benefit-card {
  background: var(--bg-soft);
  border-radius: 12px;
  padding: 20px;
  min-height: 118px;
  transition: .22s;
  cursor: pointer
}

.benefit-card:hover {
  background: #fff;
  box-shadow: 0 14px 30px rgba(31, 35, 41, .09);
  transform: translateY(-3px)
}

.benefit-card h4 {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5
}

.benefit-card p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 8px
}

.benefit-card h4 b {
  color: var(--orange)
}


/* ========== 全球基础设施(地域) ========== */
.infra-stats {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 56px;
  margin: 0 0 22px
}

.infra-stats>div {
  text-align: center
}

.infra-stats b {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  font-size: 32px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
  font-variant-numeric: tabular-nums
}

.infra-stats b i {
  font-style: normal;
  font-size: 15px;
  font-weight: 700
}

.infra-stats span {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 6px;
  display: block
}

.region-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px
}

.region-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 10px 19px;
  font-size: 13.5px;
  color: #2b3038;
  transition: .2s
}

.region-chip:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(31, 35, 41, .1);
  color: var(--orange)
}

.region-chip .flag {
  font-size: 18px;
  line-height: 1
}

.region-chip .lat {
  color: #12b76a;
  font-size: 12px;
  font-weight: 700
}

.infra-certs {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  margin-top: 44px
}

.infra-certs .cert {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 10.5px;
  color: var(--muted);
  line-height: 1.5;
  padding: 10px;
  transition: .2s
}

.infra-certs .cert:hover {
  color: var(--ink);
  box-shadow: 0 10px 22px rgba(31, 35, 41, .08)
}

/* ---- 平面点阵世界地图 ---- */
.world-map {
  margin: 2px 0 0;
  position: relative;
  overflow: hidden;
  background: transparent;
  padding: 0;
  border: 0
}

.wm-canvas {
  position: relative
}

.wm-canvas svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  margin: 0 auto
}

.wm-dot {
  fill: #c3d4f2;
  opacity: .8
}

.wm-node {
  fill: #2468f2
}

.wm-ring {
  fill: none;
  stroke: #2468f2;
  stroke-width: 1.6;
  opacity: .5;
  opacity: .45;
  transform-box: fill-box;
  transform-origin: center;
  animation: wmPulse 2.6s ease-out infinite
}

.wm-ring.on {
  r: 10;
  stroke-width: 2.2;
  opacity: .85
}

@keyframes wmPulse {
  0% {
    transform: scale(.5);
    opacity: .6
  }

  75% {
    transform: scale(1.5);
    opacity: 0
  }

  100% {
    transform: scale(1.5);
    opacity: 0
  }
}

.wm-arc {
  fill: none;
  stroke: #2468f2;
  stroke-width: 1.5;
  opacity: .55
}

.wm-arc.dash {
  stroke-dasharray: 5 6;
  animation: wmdash 1.1s linear infinite
}

@keyframes wmdash {
  to {
    stroke-dashoffset: -22
  }
}

.wm-label {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #e6ebf5;
  border-radius: 999px;
  padding: 7px 15px 7px 10px;
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 14px 34px rgba(40, 80, 180, .18);
  white-space: nowrap;
  transition: left 1s cubic-bezier(.4, 0, .2, 1), top 1s cubic-bezier(.4, 0, .2, 1)
}

.wm-label .wm-flag {
  font-size: 16px;
  line-height: 1
}

.wm-label b {
  font-size: 12.5px;
  color: var(--ink)
}

.wm-label i {
  font-style: normal;
  color: #12b76a;
  font-size: 11.5px;
  font-weight: 700;
  margin-left: 2px
}


/* ========== 响应式(首页) ========== */
@media (max-width:1180px) {
  .slide-copy h2 {
    font-size: 34px
  }

  .hero-art {
    transform: scale(.82);
    transform-origin: right center
  }

  .strong-wrap {
    grid-template-columns: 1fr
  }

  .feat-grid {
    flex-wrap: wrap
  }

  .feat-item {
    flex: 1 1 50%
  }

  .feat-item+.feat-item {
    border-left: 0
  }

  .qwen-wrap {
    grid-template-columns: 1fr
  }

  .maas-grid {
    grid-template-columns: 1fr 1fr
  }

  .prod-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .sol-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .benefit-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

@media (max-width:920px) {
  .maas-grid {
    grid-template-columns: 1fr
  }

  .infra-stats {
    gap: 36px
  }
}

@media (max-width:640px) {
  .car-stage {
    height: 310px
  }

  .hero-art {
    display: none
  }

  .slide-copy h2 {
    font-size: 28px
  }

  .strong-wrap {
    grid-template-columns: 1fr
  }

  .strong-copy h2 {
    font-size: 30px
  }

  .prod-grid {
    grid-template-columns: 1fr
  }

  .qwen-grid {
    grid-template-columns: 1fr
  }

  .sol-grid {
    grid-template-columns: 1fr
  }

  .benefit-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .feat-grid {
    flex-direction: column
  }

  .feat-item {
    flex: 1 1 auto
  }

  .feat-item+.feat-item {
    padding-left: 0
  }

  .feat-item:last-child {
    justify-content: flex-start;
    text-align: left
  }

  .qi-card.c1 {
    left: 0;
    top: 4px
  }

  .qi-card.c2 {
    right: 0;
    top: 74px
  }

  .qi-card.c3 {
    left: 16%;
    right: auto;
    bottom: 8px
  }
}