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

.lightHeading {
  text-align: center;
}

.lightHeading h2 {
  color: #111;
  font-size: clamp(26px, .34rem, 34px);
  font-weight: 700;
}

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

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

.lightIntro {
  padding: .82rem 0 .87rem;
}

.lightFeatureGrid {
  max-width: 12.2rem;
  margin: .46rem auto 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .12rem;
}

.lightFeatureGrid article {
  min-height: 2.7rem;
  padding: .25rem .18rem;
  text-align: center;
  background: #f1f5f8;
  border-radius: .1rem;
  transition: transform .25s ease, background .25s ease;
}

.lightFeatureGrid article:nth-child(5) {
  grid-column: 2;
}

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

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

.featureIcon img {
  width: .46rem;
  height: .46rem;
  object-fit: contain;
}

.lightFeatureGrid h3 {
  margin-top: .17rem;
  font-size: clamp(17px, .24rem, 24px);
  font-weight: 700;
}

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

.lightProduct {
  padding: .78rem 0;
  background: #fff;
}

.lightProductCard {
  max-width: 14.4rem;
  min-height: 4.32rem;
  margin: .46rem auto 0;
  padding: .25rem .38rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  border-radius: .1rem;
  background: #fff;
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .1);
}

.lightProductImage {
  width: 5.78rem;
  height: 3.75rem;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lightProductImage img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.lightProductText {
  flex: 1;
}

.lightProductText p {
  color: #444;
  font-size: clamp(14px, .16rem, 16px);
  line-height: 1.75;
}

.lightProductText p+p {
  margin-top: .16rem;
}

.lightFunctions {
  padding: .83rem 0 .66rem;
}

.functionMap {
  height: 4.72rem;
  margin-top: .42rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.functionVisual {
  width: 4.72rem;
  height: 4.72rem;
  padding: .2rem;
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: .2rem solid #f1f6fa;
  border-radius: 50%;
  background: #cce4f6;
}

.functionVisual img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.functionList {
  width: 4.57rem;
  position: absolute;
  top: .27rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.functionList.left {
  left: 0;
}

.functionList.right {
  right: 0;
}

.functionList article {
  height: .86rem;
  padding: .12rem .14rem;
  display: flex;
  align-items: center;
  gap: .2rem;
  border-radius: .1rem;
  background: #fff;
  box-shadow: 0 .04rem .16rem rgba(0, 0, 0, .1);
}

.miniIcon {
  width: .6rem;
  height: .6rem;
  flex: 0 0 auto;
  border-radius: .08rem;
  background: #c6d4f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.miniIcon img {
  width: .38rem;
  height: .38rem;
  object-fit: contain;
}

.functionList b {
  display: block;
  color: var(--blue);
  font-size: clamp(15px, .2rem, 20px);
  font-weight: 700;
}

.functionList small {
  display: block;
  margin-top: .04rem;
  color: #7b7b7b;
  font-size: clamp(13px, .16rem, 16px);
}

.lightPlatform {
  height: 8.8rem;
  padding-top: .64rem;
  background-image: url('../images/light-platform-background.png');
  background-size: 100% 100%;
}

.lightPlatform h2 {
  color: #fff;
  font-size: clamp(24px, .32rem, 32px);
  font-weight: 700;
  text-align: center;
}

.platformDiagram {
  height: 7.46rem;
  margin: .15rem auto 0;
  position: relative;
}

.platformSide {
  width: 1.6rem;
  height: 4.04rem;
  position: absolute;
  top: .91rem;
  left: .3rem;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.platformSide b {
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(14px, .24rem, 24px);
  font-weight: 400;
  line-height: 1.35;
  text-align: center;
}

.platformSide i {
  width: 0;
  height: .84rem;
  margin: 0;
}

.platformContent {
  position: absolute;
  inset: 0;
  text-align: center;
}

.platformContent strong {
  width: 6.8rem;
  height: .9rem;
  position: absolute;
  top: 1.27rem;
  left: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: clamp(16px, .32rem, 32px);
  font-weight: 400;
  line-height: 1.35;
  transform: translateX(-50%);
}

.platformContent div {
  position: absolute;
  display: grid;
  align-items: center;
  gap: .1rem;
}

.platformContent div:nth-of-type(1) {
  top: 3.95rem;
  left: 2.5rem;
  right: 0;
  grid-template-columns: repeat(5, 1fr);
}

.platformContent div:nth-of-type(2) {
  top: 5.83rem;
  left: .2rem;
  right: 0;
  grid-template-columns: repeat(6, 1fr);
}

.platformContent span {
  min-width: 0;
  color: #fff;
  font-size: clamp(14px, .24rem, 24px);
  text-align: center;
  white-space: nowrap;
}

.lightArchitecture {
  padding: 1.37rem 0 1.23rem;
  background: linear-gradient(180deg, #fff 0%, #effaff 100%);
}

.architectureCard {
  width: 100%;
  max-width: 14.4rem;
}

.architectureRow {
  display: grid;
  grid-template-columns: 1.61rem 1fr;
  gap: .12rem;
  margin-bottom: .12rem;
}

.architectureRow:last-child {
  margin-bottom: 0;
}

.architectureRow>b,
.architectureContent {
  border: .01rem solid #89add1;
  border-radius: .06rem;
  background: #f1f5f8;
}

.architectureRow>b {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: clamp(16px, .24rem, 24px);
  font-weight: 700;
  text-align: center;
}

.architectureContent {
  min-width: 0;
  color: var(--blue);
  font-size: clamp(16px, .24rem, 24px);
  font-weight: 700;
}

.userRow {
  height: 1.89rem;
}

.userRow .architectureContent {
  padding: .2rem .5rem;
}

.userRoles {
  height: .75rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .1rem;
}

.userRoles span,
.userAccess span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .16rem;
  background: #d9dee9;
  color: var(--blue);
  font-size: clamp(16px, .24rem, 24px);
  font-weight: 700;
  white-space: nowrap;
}

.userAccess {
  height: .53rem;
  margin-top: .18rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .14rem;
}

.userAccess span {
  border-radius: .06rem;
}

.appRow,
.edgeRow {
  height: .96rem;
}

.appRow>b,
.appRow .architectureContent {
  border-color: #4871bc;
  background: #c3d1f6;
}

.appRow .architectureContent {
  padding: .2rem .5rem;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .08rem;
}

.appRow span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .06rem;
  background: #003699;
  color: #fff;
  font-size: clamp(14px, .24rem, 24px);
  font-weight: 700;
  white-space: nowrap;
}

.edgeRow .architectureContent {
  padding: .15rem .5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .26rem;
}

.edgeRow span {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .16rem;
  background: #d9dee9;
  color: var(--blue);
  font-size: clamp(15px, .24rem, 24px);
  font-weight: 700;
  white-space: nowrap;
}

.terminalRow {
  height: 2.03rem;
}

.terminalRow .architectureContent {
  padding: .15rem .5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .16rem;
}

.terminalRow article {
  min-width: 0;
  padding: .17rem .22rem;
  border-radius: .16rem;
  background: #d9dee9;
}

.terminalRow h3 {
  padding-bottom: .11rem;
  border-bottom: .01rem solid #a5afc5;
  color: var(--blue);
  font-size: clamp(15px, .24rem, 24px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.terminalRow article>div {
  padding-top: .12rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: .08rem;
}

.terminalRow span {
  min-width: 0;
  color: var(--blue);
  font-size: clamp(13px, .22rem, 22px);
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.lightValue {
  padding: .97rem 0 .9rem;
}

.lightValueGrid {
  margin-top: .4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .31rem .33rem;
}

.lightValueGrid article {
  height: 2.48rem;
  padding: .55rem .26rem .3rem;
  text-align: center;
  background: #fff;
  border-radius: .1rem;
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .1);
  transition: transform .25s ease, box-shadow .25s ease;
}

.lightValueGrid article:hover {
  transform: translateY(-.05rem);
  box-shadow: 0 .1rem .25rem rgba(0, 54, 153, .14);
}

.valueIcon {
  width: .46rem;
  height: .46rem;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.lightValueGrid h3 {
  margin-top: .15rem;
  color: #111;
  font-size: clamp(17px, .2rem, 20px);
  font-weight: 700;
  line-height: 1.2;
}

.lightValueGrid p {
  max-width: 3.35rem;
  margin: .16rem auto 0;
  color: #7b7b7b;
  font-size: clamp(14px, .16rem, 16px);
  line-height: 1.75;
}

.lightValueGrid em {
  color: var(--blue);
  font-size: inherit;
  font-style: normal;
  font-weight: 700;
}

.lightCases {
  padding: .75rem 0;
  background: #fff;
}

.lightCaseGrid {
  margin-top: .4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .26rem;
}

.lightCaseGrid a {
  height: 3rem;
  position: relative;
  overflow: hidden;
}

.lightCaseGrid a::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 44%, rgba(0, 11, 35, .75));
}

.lightCaseGrid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.lightCaseGrid a:hover img {
  transform: scale(1.05);
}

.lightCaseGrid span {
  position: absolute;
  z-index: 1;
  left: 50%;
  transform: translateX(-50%);
  bottom: .17rem;
  color: #fff;
  font-size: clamp(16px, .2rem, 20px);
  font-weight: 700;
}

@media (max-width: 768px) {
  .lightPage { padding-bottom: .55rem; }
  .lightIntro, .lightProduct, .lightFunctions, .lightValue, .lightCases { padding: .5rem 0; }
  .lightFeatureGrid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-columns: minmax(0, 1fr);
    gap: .14rem;
    margin-top: .25rem;
  }

  .lightFeatureGrid article,
  .lightFeatureGrid article:nth-child(5) {
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    padding: .2rem .13rem;
    grid-column: auto;
    box-sizing: border-box;
  }
  /* .lightFeatureGrid article:nth-child(5) { grid-column: 1 / -1; } */
  .lightFeatureGrid h3 { font-size: clamp(15px, .19rem, 19px); }
  .lightFeatureGrid p {
    font-size: clamp(12px, .14rem, 14px);
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .lightProductCard { display: block; min-height: 0; padding: .18rem; margin-top: .25rem; }
  .lightProductImage { width: 100%; height: 2.5rem; }
  .lightProductText { margin-top: .2rem; }
  .lightProductText p { line-height: 1.65; }

  .functionMap { height: auto; margin-top: .28rem; display: flex; flex-direction: column; gap: .16rem; }
  .functionVisual { width: 2.5rem; height: 2.5rem; order: -1; }
  .functionList, .functionList.left, .functionList.right { width: 100%; position: static; display: grid; grid-template-columns: 1fr; gap: .12rem; }
  .functionList article { height: auto; min-height: .74rem; }

  .lightPlatform { height: auto; min-height: 5.5rem; padding: .48rem 0; background-size: cover; }
  .platformDiagram { height: auto; margin-top: .28rem; }
  .platformSide { display: none; }
  .platformContent { position: static; display: flex; flex-direction: column; gap: .15rem; }
  .platformContent strong { width: auto; height: auto; position: static; padding: .13rem; transform: none; font-size: clamp(17px, .22rem, 22px); }
  .platformContent div, .platformContent div:nth-of-type(1), .platformContent div:nth-of-type(2) { position: static; display: grid; grid-template-columns: repeat(2, 1fr); gap: .1rem; }
  .platformContent span { min-height: .54rem; padding: .08rem; border: .01rem solid rgba(255,255,255,.4); white-space: normal; font-size: clamp(13px, .16rem, 16px); }

  .lightArchitecture { padding: .5rem 0; overflow: hidden; }
  /* .architectureCard { min-width: 6.2rem; transform: scale(.82); transform-origin: top left; margin-bottom: -1.2rem; } */

  .lightValueGrid { grid-template-columns: repeat(2, 1fr); gap: .14rem; margin-top: .25rem; }
  .lightValueGrid article { height: auto; min-height: 2.2rem; padding: .28rem .13rem; }
  .lightValueGrid p { margin-top: .1rem; font-size: clamp(12px, .14rem, 14px); line-height: 1.55; }
  .lightCaseGrid { grid-template-columns: 1fr; gap: .16rem; margin-top: .25rem; }
  .lightCaseGrid a { height: 2.45rem; }
}