:root {
  --card-icon-code:url("iot-multiplatform-v2.webp");
  --semantic-icon:url("about-digital-v2.webp");
}
/* Independent raster assets, bound to each card's meaning (not sprite offsets). */
.about-identity-grid article:nth-child(1){--semantic-icon:url("about-digital-v2.webp")}
.about-identity-grid article:nth-child(2){--semantic-icon:url("home-geo-v2.webp")}
.about-identity-grid article:nth-child(3){--semantic-icon:url("website-custom-v2.webp")}
.about-identity-grid article:nth-child(4){--semantic-icon:url("about-support-v2.webp")}
.about-values-grid article:nth-child(1){--semantic-icon:url("about-security-v2.webp")}
.about-values-grid article:nth-child(2){--semantic-icon:url("icon-renewal-v1.webp")}
.about-values-grid article:nth-child(3){--semantic-icon:url("about-support-v2.webp")}
.smslogo-pain-grid article:nth-child(1){--semantic-icon:url("icon-phone-warning-v1.webp")}
.smslogo-pain-grid article:nth-child(2){--semantic-icon:url("icon-mail-warning-v1.webp")}
.smslogo-pain-grid article:nth-child(3){--semantic-icon:url("home-baike-v2.webp")}
.smslogo-pain-grid article:nth-child(4){--semantic-icon:url("about-security-v2.webp")}
.smslogo-feature-grid article:nth-child(1){--semantic-icon:url("mini-showcase-v2.webp")}
.smslogo-feature-grid article:nth-child(2){--semantic-icon:url("mini-public-account-zh-v3.webp")}
.smslogo-feature-grid article:nth-child(3){--semantic-icon:url("icon-phone-warning-v1.webp")}
.caller-feature-grid article:nth-child(1){--semantic-icon:url("caller-id-identity-v2.webp")}
.caller-feature-grid article:nth-child(2){--semantic-icon:url("home-baike-v2.webp")}
.caller-feature-grid article:nth-child(3){--semantic-icon:url("about-support-v2.webp")}
.caller-feature-grid article:nth-child(4){--semantic-icon:url("icon-phone-warning-v1.webp")}
.cross-mode-grid article:nth-child(1){--semantic-icon:url("website-template-v2.webp")}
.cross-mode-grid article:nth-child(2){--semantic-icon:url("home-cross-border-v2.webp")}
.cross-mode-grid article:nth-child(3){--semantic-icon:url("icon-network-domain-v1.webp")}
.compliance-advantage-grid article:nth-child(1){--semantic-icon:url("home-geo-v2.webp")}
.compliance-advantage-grid article:nth-child(2){--semantic-icon:url("iot-device-access-v2.webp")}
.compliance-advantage-grid article:nth-child(3){--semantic-icon:url("iot-live-data-v2.webp")}
.compliance-advantage-grid article:nth-child(4){--semantic-icon:url("icon-renewal-v1.webp")}
.baike-types article:nth-child(1){--semantic-icon:url("about-digital-v2.webp")}
.baike-types article:nth-child(2){--semantic-icon:url("home-baike-v2.webp")}
.baike-types article:nth-child(3){--semantic-icon:url("iot-device-access-v2.webp")}
.baike-types article:nth-child(4){--semantic-icon:url("website-template-v2.webp")}
.development-mini .development-cards article { --semantic-icon:url("mini-showcase-v2.webp"); }
.development-mini .development-cards article:nth-child(2) { --semantic-icon:url("mini-shop-zh-v3.webp"); }
.development-mini .development-cards article:nth-child(3) { --semantic-icon:url("mini-booking-v2.webp"); }
.development-mini .development-cards article:nth-child(4) { --semantic-icon:url("mini-members-v2.webp"); }
/* Ordered steps use their meaningful sequence number rather than unrelated art. */
body :is(.smslogo-process li>b,.caller-process li>b,.cross-process li>b,.compliance-flow li>b,.contact-ready ol li>span,.local-process article>i) {
  width:42px;height:42px;min-width:42px;padding:0;align-items:center;justify-content:center;border-radius:12px;box-shadow:none;font-size:13px;
}
body :is(.smslogo-process li>b,.caller-process li>b,.cross-process li>b,.compliance-flow li>b,.contact-ready ol li>span,.local-process article>i)::before { display:none; }

body :is(
  .about-identity-grid article>i,
  .about-values-grid article>i,
  .development-cards article>span,
  .smslogo-pain-grid article>b,
  .smslogo-feature-grid article>span,
  .caller-feature-icon,
  .cross-mode-grid article>b,
  .smslogo-process li>b,
  .caller-process li>b,
  .cross-process li>b,
  .compliance-flow li>b,
  .compliance-board-list li>b,
  .contact-ready ol li>span,
  .compliance-advantage-grid article>span,
  .local-process article>i,
  .baike-number
) {
  position:relative;
  box-sizing:border-box;
  width:74px;
  height:74px;
  min-width:74px;
  padding:0 7px 6px 0;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  border:1px solid #d4e1f7;
  border-radius:21px;
  color:#2463df;
  background:linear-gradient(145deg,#fff 0%,#edf4ff 100%);
  font-size:9px;
  font-style:normal;
  font-weight:900;
  line-height:1;
  letter-spacing:.3px;
  box-shadow:0 15px 34px rgba(33,92,196,.14),inset 0 1px 0 #fff;
}
body :is(
  .about-identity-grid article>i,
  .about-values-grid article>i,
  .development-cards article>span,
  .smslogo-pain-grid article>b,
  .smslogo-feature-grid article>span,
  .caller-feature-icon,
  .cross-mode-grid article>b,
  .smslogo-process li>b,
  .caller-process li>b,
  .cross-process li>b,
  .compliance-flow li>b,
  .compliance-board-list li>b,
  .contact-ready ol li>span,
  .compliance-advantage-grid article>span,
  .local-process article>i,
  .baike-number
)::before {
  content:"";
  position:absolute;
  inset:5px 7px 9px 5px;
  background-image:var(--semantic-icon);
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}


body .service-number {
  position:absolute;
  top:27px;
  right:27px;
  width:auto;
  height:auto;
  min-width:0;
  padding:0;
  border:0;
  color:#d8e2f2;
  background:none;
  box-shadow:none;
  font-size:25px;
  line-height:1;
}
body .service-number::before { content:none; }

.development-app .development-cards article>span { width:74px;height:74px;min-width:74px; }
.development-app .development-cards article:nth-child(1)>span::before {
  background-image:none;background-color:#111827;
  -webkit-mask:url("platform-apple.png") center/contain no-repeat;mask:url("platform-apple.png") center/contain no-repeat;
}
.development-app .development-cards article:nth-child(2)>span::before {
  background-image:none;background-color:#3ddc84;
  -webkit-mask:url("platform-android.png") center/contain no-repeat;mask:url("platform-android.png") center/contain no-repeat;
}
.development-app .development-cards article:nth-child(3)>span::before {
  background-image:none;background-color:#2468ee;
  -webkit-mask:url("platform-harmonyos.png") center/contain no-repeat;mask:url("platform-harmonyos.png") center/contain no-repeat;
}
.development-app .development-cards article:nth-child(4)>span::before { background-image:var(--card-icon-code);background-size:contain;background-position:center; }

body :is(.development-cards,.smslogo-pain-grid,.smslogo-feature-grid,.caller-feature-grid,.cross-mode-grid,.compliance-advantage-grid,.about-identity-grid,.about-values-grid,.baike-types) article> :is(span,b,i):first-child { margin-inline:auto; }
body :is(.development-cards,.smslogo-pain-grid,.smslogo-feature-grid,.caller-feature-grid,.cross-mode-grid,.compliance-advantage-grid,.about-identity-grid,.about-values-grid,.baike-types) article>h3 { text-align:center; }
body :is(.development-cards,.smslogo-pain-grid,.smslogo-feature-grid,.caller-feature-grid,.compliance-advantage-grid,.about-identity-grid,.about-values-grid) article>p { text-align:left; }
.development-cards article>span,.smslogo-pain-grid article>b,.baike-number,.cross-mode-grid article>b { margin-bottom:22px; }
.cross-mode-grid h3,.compliance-advantage-grid h3 { margin-top:0; }
.about-identity-grid h3,.about-values-grid h3 { margin-top:22px; }
.compliance-advantage-grid article>span { z-index:2; }

/* Desktop: center the image icon and bold heading; keep descriptive copy left aligned. */
body :is(
  .reason-grid article,.features .feature,.web-plans .web-plan,.web-base .base-item,
  .adv-list .adv-item,.email-feature-grid article,.local-benefit-grid article,
  .gaode-right-grid article,.cross-capability-grid article,.compliance-grid .compliance-card,
  .baike-reason-grid article,.pain-grid article,.about-capability-grid article,
  .contact-service-grid article,.home-principles article,.home-service-grid article
) > :is(.icon,.benefit-icon,.pain-visual,.about-icon,.home-principle-icon,span):first-child {
  margin-left:auto;
  margin-right:auto;
}
body :is(
  .reason-grid article,.features .feature,.web-plans .web-plan,.web-base .base-item,
  .adv-list .adv-item,.email-feature-grid article,.local-benefit-grid article,
  .gaode-right-grid article,.cross-capability-grid article,.compliance-grid .compliance-card,
  .baike-reason-grid article,.pain-grid article,.about-capability-grid article,
  .contact-service-grid article,.home-principles article,.home-service-grid article
) h3 { text-align:center; }
body :is(
  .reason-grid article,.features .feature,.web-plans .web-plan,.web-base .base-item,
  .adv-list .adv-item,.email-feature-grid article,.local-benefit-grid article,
  .gaode-right-grid article,.cross-capability-grid article,.compliance-grid .compliance-card,
  .baike-reason-grid article,.pain-grid article,.about-capability-grid article,
  .contact-service-grid article,.home-principles article,.home-service-grid article
) p { text-align:left; }
.local-benefit-grid article > span { display:block; text-align:center; }
.contact-service-top { position:relative; justify-content:center; }
.contact-service-top .contact-service-icon { margin-inline:auto; }
.contact-service-top > b { position:absolute; top:0; right:0; }


body :is(.development-process,.geo-process,.baike-process)>li::before,.steps>.step::before {
  box-sizing:border-box;width:66px;height:66px;padding:0 6px 6px 0;display:flex;align-items:flex-end;justify-content:flex-end;
  border:1px solid #d4e1f7;border-radius:19px;color:#2463df;background-color:#f1f6ff;
  background-image:none;font-size:14px;line-height:1;align-items:center;justify-content:center;padding:0;
  box-shadow:0 13px 28px rgba(31,91,198,.13);
}

/* Sequence badges remain readable numbers, not repeated unrelated illustrations. */
body :is(.smslogo-process li>b,.caller-process li>b,.cross-process li>b,.compliance-flow li>b,.compliance-board-list li>b,.contact-ready ol li>span,.local-process article>i) {
  width:42px;height:42px;min-width:42px;padding:0;align-items:center;justify-content:center;border-radius:12px;box-shadow:none;font-size:13px;
}
body :is(.smslogo-process li>b,.caller-process li>b,.cross-process li>b,.compliance-flow li>b,.compliance-board-list li>b,.contact-ready ol li>span,.local-process article>i)::before { content:none; }
.web-base .base-item strong { text-align:center; }
body :is(.icon,.benefit-icon,.contact-channel-icon,.caller-status-icon,.email-feature-grid article>span) img { object-fit:contain;object-position:center; }

@media(max-width:620px){
  .web-base .base-item strong { text-align:left; }
  body :is(
    .about-identity-grid article>i,.about-values-grid article>i,.development-cards article>span,
    .smslogo-pain-grid article>b,.smslogo-feature-grid article>span,.caller-feature-icon,
    .cross-mode-grid article>b,.smslogo-process li>b,.caller-process li>b,.cross-process li>b,
    .compliance-flow li>b,.compliance-board-list li>b,.contact-ready ol li>span,
    .compliance-advantage-grid article>span,.local-process article>i,.baike-number
  ) { width:60px;height:60px;min-width:60px;border-radius:17px; }
  body :is(.development-cards,.smslogo-pain-grid,.smslogo-feature-grid,.caller-feature-grid,.cross-mode-grid,.compliance-advantage-grid,.about-identity-grid,.about-values-grid,.baike-types) article> :is(span,b,i):first-child { margin-inline:0; }
  body :is(.development-cards,.smslogo-pain-grid,.smslogo-feature-grid,.caller-feature-grid,.cross-mode-grid,.compliance-advantage-grid,.about-identity-grid,.about-values-grid,.baike-types) article>h3,
  body :is(.development-cards,.smslogo-pain-grid,.smslogo-feature-grid,.caller-feature-grid,.compliance-advantage-grid,.about-identity-grid,.about-values-grid) article>p { text-align:left; }
  body :is(
    .reason-grid article,.features .feature,.web-plans .web-plan,.web-base .base-item,
    .adv-list .adv-item,.email-feature-grid article,.local-benefit-grid article,
    .gaode-right-grid article,.cross-capability-grid article,.compliance-grid .compliance-card,
    .baike-reason-grid article,.pain-grid article,.about-capability-grid article,
    .contact-service-grid article,.home-principles article,.home-service-grid article
  ) > :is(.icon,.benefit-icon,.pain-visual,.about-icon,.home-principle-icon,span):first-child {
    margin-left:0;
    margin-right:0;
  }
  body :is(
    .reason-grid article,.features .feature,.web-plans .web-plan,.web-base .base-item,
    .adv-list .adv-item,.email-feature-grid article,.local-benefit-grid article,
    .gaode-right-grid article,.cross-capability-grid article,.compliance-grid .compliance-card,
    .baike-reason-grid article,.pain-grid article,.about-capability-grid article,
    .contact-service-grid article,.home-principles article,.home-service-grid article
  ) h3,
  .local-benefit-grid article > span { text-align:left; }
  .contact-service-top { justify-content:space-between; }
  .contact-service-top .contact-service-icon { margin-inline:0; }
  .contact-service-top > b { position:static; margin-left:auto; }
  body :is(.development-process,.geo-process,.baike-process)>li::before,.steps>.step::before { width:48px;height:48px;border-radius:14px; }
  .steps>.step { grid-template-columns:48px minmax(0,1fr); }
  .step:not(:last-child)::after { left:23px;top:60px; }
  body :is(.smslogo-process li>b,.caller-process li>b,.cross-process li>b,.compliance-flow li>b,.compliance-board-list li>b,.contact-ready ol li>span,.local-process article>i) { width:36px;height:36px;min-width:36px;border-radius:10px;font-size:12px; }
}