.puainta-about-standards {
  --about-bg: rgb(var(--color-background));
  --about-text: rgb(var(--color-text));
  --about-muted: rgb(var(--color-light-text));
  --about-line: rgb(var(--color-entry-line));
  --about-accent: rgb(var(--color-button-background));
  --about-card: rgb(var(--color-media-background));
  position: relative;
  overflow: hidden;
  color: var(--about-text);
  background: var(--about-bg);
}
.puainta-about-standards::after { position: absolute; right: -80px; bottom: -100px; width: 310px; height: 310px; background: color-mix(in srgb, var(--about-accent) 10%, var(--about-bg)); border-radius: 58% 42% 44% 56%; opacity: .58; content: ""; }
.puainta-about-standards__inner { max-width: var(--about-content-width, 1220px); margin-inline: auto; padding-block: var(--about-space-top, 100px) var(--about-space-bottom, 100px); }
.puainta-about-standards__header { max-width: 980px; margin: 0 auto; text-align: center; }
.puainta-about-standards__header > p {
  margin: 0 0 13px;
  color: var(--about-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}
.puainta-about-standards__header h2 {
  margin: 0;
  font-size: clamp(35px, 4.4vw, 62px);
  line-height: 1.17;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
}
.puainta-about-standards__header > span {
  display: block;
  max-width: 48em;
  margin: 20px auto 0;
  color: var(--about-muted);
  font-size: 17px;
  line-height: 1.85;
}

.puainta-about-standards__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 58px;
}

.puainta-about-standards__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 360px;
  padding: 32px 24px 26px;
  background: var(--about-card);
  border: 1px solid var(--about-line);
  border-radius: 22px;
  text-align: center;
  box-shadow: 0 15px 40px rgb(85 48 30 / 6%);
}

.puainta-about-standards__badge {
  display: grid;
  place-items: center;
  width: 126px;
  height: 126px;
}
.puainta-about-standards__badge a { display: grid; place-items: center; width: 100%; height: 100%; }
.puainta-about-standards__badge-image { display: block; max-width: 120px; max-height: 120px; object-fit: contain; }

.puainta-about-standards__fallback {
  display: grid;
  place-items: center;
  align-content: center;
  width: 112px;
  height: 112px;
  color: var(--about-text);
  background: color-mix(in srgb, var(--about-accent) 10%, var(--about-bg));
  border: 1px solid color-mix(in srgb, var(--about-accent) 24%, var(--about-line));
  border-radius: 28px;
  box-shadow: inset 0 0 0 5px var(--about-bg);
  transform: rotate(-2deg);
}
.puainta-about-standards__fallback svg {
  width: 43px;
  height: 43px;
  stroke: var(--about-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.puainta-about-standards__fallback strong { margin-top: 4px; font-size: 11px; letter-spacing: .1em; }
.puainta-about-standards__card h3 { margin: 18px 0 0; font-family: "Noto Sans TC", "PingFang TC", sans-serif; font-size: 19px; font-weight: 800; line-height: 1.35; }
.puainta-about-standards__card p { margin: 12px 0 0; color: var(--about-muted); font-size: 14px; line-height: 1.75; }
.puainta-about-standards__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
  padding-top: 18px;
  color: var(--about-accent);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}
.puainta-about-standards__link:hover { text-decoration: underline; }

.puainta-about-standards__note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 920px;
  margin: 26px auto 0;
  padding: 16px 19px;
  color: var(--about-muted);
  background: rgb(var(--color-media-background));
  border: 1px solid var(--about-line);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.7;
}
.puainta-about-standards__note svg {
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  stroke: var(--about-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
}

@media (max-width: 1099px) {
  .puainta-about-standards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 599px) {
  .puainta-about-standards__inner { padding-block: var(--about-mobile-space-top, 52px) var(--about-mobile-space-bottom, 52px); }
  .puainta-about-standards__header { text-align: left; }
  .puainta-about-standards__header h2 { font-size: 31px; }
  .puainta-about-standards__header > span { font-size: 14px; line-height: 1.75; }
  .puainta-about-standards__grid { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .puainta-about-standards__card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    min-height: 0;
    padding: 17px 18px;
    border-radius: 14px;
    text-align: left;
  }
  .puainta-about-standards__badge { grid-column: 1; grid-row: 1 / span 3; width: 68px; height: 68px; }
  .puainta-about-standards__badge-image { max-width: 62px; max-height: 62px; }
  .puainta-about-standards__fallback { width: 62px; height: 62px; border-width: 1px; box-shadow: inset 0 0 0 3px var(--about-bg); }
  .puainta-about-standards__fallback svg { width: 25px; height: 25px; }
  .puainta-about-standards__fallback strong { margin-top: 1px; font-size: 8px; }
  .puainta-about-standards__card h3 { grid-column: 2; margin: 0; font-size: 16px; }
  .puainta-about-standards__card p { grid-column: 2; margin-top: 7px; font-size: 12px; line-height: 1.55; }
  .puainta-about-standards__link { grid-column: 2; margin-top: 8px; padding-top: 0; font-size: 11px; }
  .puainta-about-standards__note { margin-top: 22px; }
}