.aiPage {
  background: #fff;
  padding-bottom: 1rem;
}

.aiHeading {
  text-align: center;
}

.aiHeading h2 {
  color: #000;
  font-size: clamp(26px, .32rem, 32px);
  font-weight: 700;
}

.aiHeading i {
  width: .3rem;
  height: .06rem;
  display: block;
  margin: .08rem auto .16rem;
  border-radius: .2rem;
  background: var(--blue);
}

.aiHeading p {
  color: #7B7B7B;
  font-size: clamp(14px, .2rem, 20px);
}

.aiIntro {
  padding: .55rem 0 .5rem;
}

.aiFeatureGrid {
  margin: .33rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .19rem;
}

.aiFeatureGrid article {
  width: 3.45rem;
  min-height: 3.45rem;
  padding: .45rem .42rem;
  text-align: center;
  border-radius: .1rem;
  background: #f1f5f8;
  transition: transform .25s ease, background .25s ease;
}

.aiFeatureGrid article:hover {
  background: #e7f1ff;
  transform: translateY(-.05rem);
}

.aiFeatureGrid b {
  width: .7rem;
  height: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--blue);
}

.aiFeatureGrid b img {
  width: .3rem;
  height: .3rem;
}

.aiFeatureGrid h3 {
  margin-top: .22rem;
  color: #000;
  font-size: clamp(16px, .22rem, 22px);
  font-weight: 700;
}

.aiFeatureGrid p {
  margin-top: .2rem;
  color: #7B7B7B;
  font-size: clamp(14px, .16rem, 16px);
  line-height: 1.55;
}

.aiWings {
  padding: .5rem 0 .74rem;
}

.wingsMap {
  height: 4.72rem;
  margin-top: .5rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wingsMap article {
  width: 4.57rem;
  min-height: 2.73rem;
  padding: .35rem;
  position: relative;
  border-radius: 10px;
  background: #FFF;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
}

.wingsMap article::before,
.wingsMap article::after {
  content: '';
  width: .16rem;
  height: .16rem;
  position: absolute;
  border-color: var(--blue);
  border-style: solid;
}

.wingsMap article::before {
  top: .1rem;
  left: .1rem;
  border-width: .06rem 0 0 .06rem;
}

.wingsMap article::after {
  right: .1rem;
  bottom: .1rem;
  border-width: 0 .06rem .06rem 0;
}

.wingsMap article .tit {
  display: flex;
  align-items: center;
  gap: .21rem;
}

.wingsMap article .icon {
  width: .6rem;
  height: .6rem;
  border-radius: 10px;
  background: #C3D1F6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wingsMap article .icon img {
  width: .34rem;
  height: .34rem;
  object-fit: contain;
}

.wingsMap article b {
  color: var(--blue);
  font-size: clamp(19px, .24rem, 24px);
  font-weight: 700;
}

.wingsMap article p {
  margin-top: .08rem;
  color: #000;
  font-size: clamp(14px, .16rem, 16px);
  line-height: 1.7;
}

.wingsCore {
  width: 4.32rem;
  height: 4.32rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: .2rem solid #C9E0F2;
  border-radius: 50%;
  background: url(../images/wingsCore.png) center center/cover no-repeat;
  box-shadow: 0 0 0 .2rem #F1F5F8;
  color: #fff;
}

.wingsCore span {
  color: #fff;
  font-size: clamp(39px, .96rem, 96px);
  font-weight: 700;
  line-height: 1;
}

.wingsCore b {
  color: #fff;
  font-size: clamp(21px, .48rem, 48px);
  font-weight: 700;
}

.aiLayout {
  padding: 0 0 .92rem;
}

.aiLayoutMap {
  margin-top: .28rem;
}

.aiIndustry {
  min-height: 8.8rem;
  overflow: hidden;
  position: relative;
  background: url(../images/aiIndustry.png) center center/cover no-repeat;
}

.industryMain {
  position: relative;
}

.industryVisual {
  width: 9.2rem;
  height: 8.8rem;
  position: relative;
}

.industryEyebrow {
  position: absolute;
  top: 1.65rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #fff;
  font-size: clamp(27px, .36rem, 36px);
  font-weight: 700;
}

.industryBase,
.industryPlatform,
.industryDataHub {
  position: absolute;
  height: auto;
  object-fit: contain;
}

.industryBase {
  width: 9.2rem;
  z-index: 1;
  top: 6.14rem;
  left: 50%;
  transform: translateX(-50%);
}

.industryPlatform {
  width: 6.7rem;
  z-index: 2;
  top: 2.01rem;
  left: 50%;
  transform: translateX(-50%);
}

.industryPlatform2 {
  top: 3.07rem;
}

.industryDataHub {
  width: 4.16rem;
  z-index: 3;
  top: 1.09rem;
  left: 50%;
  transform: translateX(-50%);
}

.industryTier {
  width: 6.7rem;
  position: absolute;
  left: 1.42rem;
  z-index: 4;
  color: #fff;
  font-size: clamp(25px, .35rem, 35px);
  font-weight: 700;
  text-align: center;
  text-shadow: 0 0 .16rem rgba(0, 210, 255, .85);
}

.industryTierCenter {
  top: 4.14rem;
}

.industryTierFoundation {
  top: 5.83rem;
}

.industryCopy {
  width: 5.32rem;
  height: 3.34rem;
  padding: .58rem .33rem .68rem .62rem;
  position: absolute;
  top: 2.88rem;
  right: .0rem;
}

.industryCopy>img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: fill;
}

.industryCopy h3 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(22px, .32rem, 32px);
  font-weight: 700;
}

.industryCopy p {
  margin-top: .13rem;
  position: relative;
  z-index: 1;
  color: #d8efff;
  font-size: clamp(14px, .2rem, 2px);
  line-height: 1.45;
}

.aiCases {
  padding: .82rem 0 1.26rem;
}

.aiCaseRows {
  display: flex;
  flex-direction: column;
  gap: .36rem;
}

.aiCaseRows article {
  min-height: 4.93rem;
  padding: .28rem;
  display: flex;
  gap: .78rem;
  border-radius: .1rem;
  background: #fff;
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .1);
  transition: all .3s ease-in-out;
}

.aiCaseRows article:hover {
  transform: translateY(-.1rem);
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .2);
}

.aiCaseRows article.reverse {
  flex-direction: row-reverse;
}

.aiCaseRows img {
  width: 6.76rem;
  height: 4.39rem;
  object-fit: contain;
  background: #f1f5f8;
}

.aiCaseRows article>div {
  width: 5.6rem;
  /* flex: 1; */
  padding-top: .71rem;
}

.aiCaseRows h3 {
  color: #000;
  font-size: clamp(21px, .32rem, 32px);
  font-weight: 700;
}

.aiCaseRows p {
  margin-top: .22rem;
  color: #000;
  font-size: clamp(14px, .16rem, 16px);
  line-height: 1.75;
}

.aiSolutions {
  min-height: 8.8rem;
  background: url(../images/aiIndustry.png) center center / cover no-repeat;
}

.solutionFlow {
  min-height: 8.8rem;
  position: relative;
}

.solutionIntro {
  width: 5.32rem;
  height: 3.34rem;
  padding: .56rem .53rem .4rem;
  position: absolute;
  top: 2.36rem;
  left: -.04rem;
}

.solutionIntro>img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: fill;
}

.solutionIntro h3 {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: clamp(24px, .28rem, 28px);
  font-weight: 700;
}

.solutionIntro p {
  margin-top: .32rem;
  position: relative;
  z-index: 1;
  color: #e8f7ff;
  font-size: clamp(14px, .16rem, 16px);
  line-height: 1.52;
}

.solutionPills {
  width: 8.49rem;
  position: absolute;
  top: 1.53rem;
  right: 0;
  display: grid;
  grid-template-columns: repeat(2, 4.19rem);
  grid-auto-rows: 1.07rem;
  column-gap: .11rem;
  row-gap: .4rem;
}

.solutionPills span {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: url(../images/ai-22.png) center / 100% 100% no-repeat;
  color: #fff;
  font-size: clamp(20px, .26rem, 26px);
  font-weight: 700;
  text-shadow: 0 0 .12rem rgba(0, 180, 255, .8);
}

.aiValueGrid {
  margin-top: .34rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .25rem;
}

.aiValueGrid article {
  min-height: 3.11rem;
  padding: .28rem .24rem .2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: .1rem;
  background: #fff;
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .1);
  transition: all .3s ease-in-out;
}

.aiValueGrid article:hover {
  transform: translateY(-.1rem);
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .2);
}

.aiValueGrid b {
  width: 1.2rem;
  height: 1.2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #fff;
  font-size: clamp(16px, .2rem, 20px);
  line-height: 1.2;
  font-weight: 700;
}

.aiValueGrid b img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: contain;
}

.aiValueGrid b span {
  position: relative;
  z-index: 1;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.aiValueGrid h3 {
  margin-top: .14rem;
  font-size: clamp(17px, .2rem, 20px);
  font-weight: 700;
  color: #000;  
}

.aiValueGrid p {
  margin-top: .19rem;
  color: #7B7B7B;
  font-size: clamp(14px, .16rem, 16px);
  line-height: 1.5;
}

@media (max-width: 768px) {
  .aiPage { padding-bottom: .55rem; }
  .aiIntro, .aiWings, .aiIndustry, .aiCases, .aiValue { padding: .5rem 0; }
  .aiHeading h2 { font-size: clamp(22px, .3rem, 30px); }
  .aiHeading p { line-height: 1.6; }
  .aiFeatureGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .14rem; margin-top: .25rem; }
  .aiFeatureGrid article { width: auto; min-height: 2.45rem; padding: .25rem .16rem; }
  .aiFeatureGrid h3 { margin-top: .14rem; font-size: clamp(15px, .19rem, 19px); }
  .aiFeatureGrid p { margin-top: .11rem; font-size: clamp(12px, .14rem, 14px); }

  .wingsMap { height: auto; margin-top: .28rem; display: grid; grid-template-columns: 1fr; gap: .2rem; }
  .wingsMap article { width: 100%; min-height: 0; padding: .25rem; }
  .wingsCore { width: 2.4rem; height: 2.4rem; order: -1; justify-self: center; border-width: .12rem; box-shadow: 0 0 0 .12rem #f1f5f8; }
  .wingsCore b { font-size: clamp(18px, .22rem, 22px); }

  .aiLayout { padding: .5rem 0; }
  .aiLayoutMap { min-height: 0; padding: .28rem .2rem; background-size: cover; }
  .industryMain { display: block; }
  .industryVisual { width: 100%; height: 2.9rem; transform: none; }
  .industryCopy { width: 100%; margin-top: .24rem; padding: 0; }
  .industryCopy > img { display: none; }
  .industryTier { transform: scale(.82); transform-origin: top center; }

  .aiCaseRows { gap: .25rem; }
  .aiCaseRows article, .aiCaseRows article.reverse { display: block; min-height: 0; padding: .16rem; }
  .aiCaseRows img { width: 100%; height: 2.65rem; }
  .aiCaseRows article > div { width: 100%; padding: .22rem .05rem .08rem; }
  .aiCaseRows h3 { font-size: clamp(19px, .25rem, 25px); }
  .aiCaseRows p { margin-top: .12rem; line-height: 1.65; }

  .aiSolutions, .solutionFlow { min-height: 0; }
  .aiSolutions { padding: .45rem 0; background-position: center; }
  .solutionFlow { display: flex; flex-direction: column; gap: .25rem; }
  .solutionIntro { width: 100%; height: auto; min-height: 2rem; padding: .36rem .28rem; position: relative; top: auto; left: auto; }
  .solutionPills { width: 100%; position: static; grid-template-columns: repeat(2, 1fr); grid-auto-rows: .64rem; gap: .12rem; }
  .solutionPills span { font-size: clamp(14px, .18rem, 18px); }

  .aiValueGrid { grid-template-columns: repeat(2, 1fr); gap: .14rem; margin-top: .25rem; }
  .aiValueGrid article { min-height: 2.55rem; padding: .2rem .12rem; }
  /* .aiValueGrid b { width: .84rem; height: .84rem; } */
  .aiValueGrid p { margin-top: .1rem; font-size: clamp(12px, .14rem, 14px); }
}