/* ========== 联系方式：微信名片卡 ========== */

.ct-card {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 780px;
  margin-top: 38px;
  padding: 46px 48px;
  color: var(--side-text);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(227, 196, 125, .08), transparent 55%),
    var(--green-ink);
  overflow: hidden;
  isolation: isolate;
}
/* 内衬金线 */
.ct-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(200, 174, 106, .32);
  pointer-events: none;
}
/* 右下角的水纹 */
.ct-ripple {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: -1;
  width: 380px;
  height: 380px;
  color: var(--gold-line);
  opacity: .2;
  pointer-events: none;
}

/* 二维码：米白底板 + 四个金色取景角 */
.ct-qr {
  --k: 0px;
  position: relative;
  padding: 12px;
  background: #FBFAF6;
  border-radius: 14px;
  box-shadow: 0 28px 46px -26px rgba(0, 0, 0, .7);
}
.ct-qr img { display: block; width: 236px; height: auto; border-radius: 4px; }
.ct-qr i {
  position: absolute;
  width: 24px;
  height: 24px;
  border: 2px solid var(--gold);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.ct-qr i:nth-child(1) { left: -11px; top: -11px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; transform: translate(calc(var(--k) * -1), calc(var(--k) * -1)); }
.ct-qr i:nth-child(2) { right: -11px; top: -11px; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; transform: translate(var(--k), calc(var(--k) * -1)); }
.ct-qr i:nth-child(3) { right: -11px; bottom: -11px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; transform: translate(var(--k), var(--k)); }
.ct-qr i:nth-child(4) { left: -11px; bottom: -11px; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; transform: translate(calc(var(--k) * -1), var(--k)); }
.ct-card:hover .ct-qr { --k: 4px; }

/* 右侧文字 */
.ct-who { display: flex; align-items: center; gap: 16px; }
.ct-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--green-ink), 0 0 0 3px var(--gold-line);
}
.ct-who strong {
  display: block;
  font-family: var(--serif);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.25;
  letter-spacing: .06em;
  color: var(--logo);
}
.ct-who span { display: block; margin-top: 4px; font-size: 14px; letter-spacing: .08em; color: var(--gold); font-variant-numeric: tabular-nums; }
.ct-say {
  position: relative;
  margin: 28px 0 0;
  padding-top: 22px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.5;
  color: var(--side-text);
}
.ct-say::before { content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 1px; background: var(--gold-line); }
.ct-tip { margin: 10px 0 0; font-size: 14px; line-height: 1.8; color: var(--side-muted); }
.ct-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 7px 18px;
  font-size: 14px;
  letter-spacing: .1em;
  color: var(--gold);
  text-decoration: none;
  border: 1px solid rgba(227, 196, 125, .55);
  border-radius: 999px;
  transition: background-color .25s, color .25s;
}
.ct-save::before {
  content: "";
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v7M3 5.5 6 8.5 9 5.5M1.5 11h9' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v7M3 5.5 6 8.5 9 5.5M1.5 11h9' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ct-save:hover { color: var(--green-ink); background: var(--gold); }
.ct-save:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.ct-more { margin-top: 22px; font-size: 15px; color: var(--muted); }
.ct-more a { margin: 0 4px; color: var(--link); text-decoration: none; border-bottom: 1px solid var(--gold-line); }
.ct-more a:hover { color: var(--gold-ink); }

@media (max-width: 760px) {
  .ct-card { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 34px; padding: 40px 24px 34px; text-align: center; }
  .ct-qr img { width: min(236px, 62vw); }
  .ct-who { flex-direction: column; gap: 10px; }
  .ct-say::before { left: 50%; margin-left: -18px; }
  .ct-ripple { width: 300px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .ct-qr i { transition: none; }
}