.puainta-about-values {
  --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-values::before { position: absolute; top: -90px; right: -70px; width: 280px; height: 280px; background: color-mix(in srgb, var(--about-accent) 14%, var(--about-bg)); border-radius: 46% 54% 58% 42%; opacity: .52; content: ""; }

.puainta-about-values__inner { max-width: var(--about-content-width, 1180px); margin-inline: auto; padding-block: var(--about-space-top, 108px) var(--about-space-bottom, 108px); }
.puainta-about-values__header { max-width: 800px; margin: 0 auto; text-align: center; }
.puainta-about-values__header > p {
  margin: 0 0 13px;
  color: var(--about-accent);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .12em;
}
.puainta-about-values__header h2 {
  margin: 0;
  font-size: clamp(35px, 4.2vw, 58px);
  line-height: 1.2;
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
}
.puainta-about-values__header > span {
  display: block;
  max-width: 43em;
  margin: 20px auto 0;
  color: var(--about-muted);
  font-size: 17px;
  line-height: 1.85;
}

.puainta-about-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 52px;
}

.puainta-about-values__card {
  position: relative;
  min-height: 270px;
  padding: 34px 30px 30px;
  background: var(--about-card);
  border: 1px solid var(--about-line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 42px rgb(99 56 35 / 7%);
}
.puainta-about-values__card:nth-child(2) { background: color-mix(in srgb, var(--about-bg) 91%, var(--about-accent) 9%); }
.puainta-about-values__card:nth-child(3) { background: color-mix(in srgb, var(--about-bg) 95%, var(--about-accent) 5%); }

.puainta-about-values__number {
  position: absolute;
  top: 34px;
  right: 28px;
  color: var(--about-accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
}
.puainta-about-values__icon { display: grid; width: 62px; height: 62px; place-items: center; color: var(--about-accent); background: color-mix(in srgb, var(--about-accent) 12%, var(--about-bg)); border-radius: 20px; transform: rotate(-3deg); }
.puainta-about-values__card:nth-child(2) .puainta-about-values__icon { background: color-mix(in srgb, var(--about-accent) 16%, var(--about-bg)); }
.puainta-about-values__card:nth-child(3) .puainta-about-values__icon { background: color-mix(in srgb, var(--about-accent) 9%, var(--about-bg)); }
.puainta-about-values__icon svg { width: 38px; height: 38px; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.puainta-about-values__card h3 { margin: 26px 0 0; font-size: 22px; line-height: 1.35; }
.puainta-about-values__card h3 { font-family: "Noto Sans TC", "PingFang TC", sans-serif; font-weight: 800; letter-spacing: -.01em; }
.puainta-about-values__card p { margin: 14px 0 0; color: var(--about-muted); font-size: 16px; line-height: 1.8; }
.puainta-about-values__card::after {
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 112px;
  height: 112px;
  border: 12px solid color-mix(in srgb, var(--about-accent) 7%, transparent);
  border-radius: 50%;
  content: "";
}

@media (max-width: 959px) {
  .puainta-about-values__grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
  .puainta-about-values__card { min-height: 0; }
}

@media (max-width: 599px) {
  .puainta-about-values__inner { padding-block: var(--about-mobile-space-top, 52px) var(--about-mobile-space-bottom, 52px); }
  .puainta-about-values__header { text-align: left; }
  .puainta-about-values__header h2 { font-size: 31px; }
  .puainta-about-values__header > span { font-size: 14px; line-height: 1.75; }
  .puainta-about-values__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 30px;
  }
  .puainta-about-values__card { min-height: 178px; padding: 19px 17px; border-radius: 15px; }
  .puainta-about-values__card:first-child { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
  .puainta-about-values__card:nth-child(n + 4) { grid-column: 1 / -1; }
  .puainta-about-values__number { top: 17px; right: 15px; font-size: 10px; }
  .puainta-about-values__icon { width: 45px; height: 45px; border-radius: 14px; }
  .puainta-about-values__icon svg { width: 28px; height: 28px; }
  .puainta-about-values__card h3 { margin-top: 15px; font-size: 17px; }
  .puainta-about-values__card p { margin-top: 9px; font-size: 12.5px; line-height: 1.62; }
  .puainta-about-values__card::after { right: -48px; bottom: -48px; width: 96px; height: 96px; }
}