/* ============================================================
   TEEZE · 页脚样式（Site Footer）
   修复记录：
   - 修复「二维码弹层宽度」不生效：弹层由 grid 改为 flex + width:max-content，
     让图片 max-width:100% 相对确定宽度解析（原 grid 绝对定位下百分比坍缩）。
   - 新增：鼠标悬浮弹层保持可见（移除 pointer-events:none + 悬浮桥 + :hover 保持）。
   ============================================================ */
.tz-footer {
  --tz-black: #000;
  --tz-white: #fff;
  --tz-yellow: #efa333;
  --tz-yellow2: #f6b650;
  --tz-bg: #000000;
  --tz-body: #c8c8c8;
  --tz-muted: #8b8b8b;
  --tz-line: rgba(255, 255, 255, .13);
  --tz-display: "Arial Narrow", "Helvetica Neue Condensed", "Helvetica Neue", Arial, sans-serif;
  --tz-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tz-mono: Consolas, "SFMono-Regular", "Liberation Mono", monospace;
  --tz-max: 1220px;
  --tz-gutter: clamp(18px, 3vw, 40px);
  --tz-section: clamp(72px, 9vw, 124px);
  --tz-pad-top: 0px;
  --tz-ease: cubic-bezier(.16, 1, .3, 1);
}
.tz-footer, .tz-footer *, .tz-footer *::before, .tz-footer *::after { box-sizing: border-box; }
.tz-footer {
  background: var(--tz-bg);
  color: var(--tz-white);
  font-family: var(--tz-sans);
  line-height: 1.55;
  padding-top: calc(var(--tz-section) + var(--tz-pad-top));
}
.tz-footer a { color: inherit; text-decoration: none; }
.tz-footer a:focus-visible { outline: 2px solid var(--tz-white); outline-offset: 3px; box-shadow: 0 0 0 3px var(--tz-yellow); }
.tz-footer .tz-container { width: min(100% - var(--tz-gutter) * 2, var(--tz-max)); margin: auto; }
.tz-footer .tz-footer-cta { display: grid; grid-template-columns: 1fr auto; align-items: end; padding-bottom: var(--tz-section); }
.tz-footer .tz-footer-cta .tz-eyebrow { grid-column: 1/-1; margin-bottom: 20px; }
.tz-footer .tz-eyebrow { margin: 0; color: var(--tz-yellow); font: 700 11px/1.3 var(--tz-mono); letter-spacing: .1em; text-transform: uppercase; }
.tz-footer h2 { font-family: var(--tz-display); text-transform: uppercase; margin: 0; font-size: clamp(42px, 5vw, 70px); font-weight: 600; letter-spacing: -.03em; line-height: .96; }
.tz-footer h2 span { color: var(--tz-yellow); }
.tz-footer .tz-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 24px; border: 1px solid transparent; background: none; color: inherit; font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: transform .15s ease; }
.tz-footer .tz-button:hover { transform: translateY(-2px); }
.tz-footer .tz-button--primary { background: var(--tz-yellow); color: var(--tz-black); }
.tz-footer .tz-button--primary:hover { background: var(--tz-yellow2); }
.tz-footer .tz-footer-main { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 42px; padding-block: 50px; border-top: 1px solid var(--tz-yellow); border-bottom: 1px solid var(--tz-line); }
.tz-footer .tz-footer-brand p { max-width: 330px; margin: 26px 0 38px; color: var(--tz-body); }
.tz-footer .tz-footer-brand small { color: var(--tz-muted); font: 700 10px var(--tz-mono); }
/* ---- 图片通用：一律保持原图，不做任何暗色/滤镜处理 ---- */
.tz-footer .tz-brand-logo,
.tz-footer .tz-social-img,
.tz-footer .tz-sitem-qr,
.tz-footer .tz-qr-icon,
.tz-footer .tz-qr-img { display: block; width: var(--tz-img-w, auto); height: auto; max-width: 100%; object-fit: contain; filter: none; opacity: 1; }
.tz-footer .tz-img-fixed { height: var(--tz-img-h); object-fit: contain; }
.tz-footer .tz-brand { display: inline-flex; align-items: center; min-height: 28px; font-size: 23px; font-weight: 800; letter-spacing: .23em; }
.tz-footer .tz-brand b { color: var(--tz-yellow); }
.tz-footer .tz-links { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.tz-footer .tz-links h3 { margin: 0 0 12px; color: var(--tz-yellow); font: 700 11px var(--tz-mono); }
.tz-footer .tz-links a { color: var(--tz-body); font-size: 13px; }
.tz-footer .tz-links a:hover { color: var(--tz-yellow); }
.tz-footer .tz-footer-bottom { min-height: 90px; display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--tz-muted); font: 600 9px var(--tz-mono); letter-spacing: .06em; }
.tz-footer .tz-footer-social-group { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.tz-footer .tz-social { display: flex; gap: 6px; flex-wrap: wrap; }
.tz-footer .tz-social-item { display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 4px; color: var(--tz-yellow); border: 1px solid var(--tz-line); transition: border-color .2s ease; }
.tz-footer .tz-social-item:hover { border-color: var(--tz-yellow); }
.tz-footer .tz-social-text { font: 700 10px var(--tz-mono); letter-spacing: .08em; }
/* ---- 社交平台条目：图标 + 悬浮二维码（统一位置与样式）---- */
.tz-footer .tz-sitem { position: relative; display: flex; }
.tz-footer .tz-sitem-link { display: grid; place-items: center; min-width: 40px; min-height: 40px; padding: 4px; color: var(--tz-yellow); border: 1px solid var(--tz-line); transition: border-color .2s ease; }
.tz-footer .tz-sitem-link:hover { border-color: var(--tz-yellow); }
.tz-footer .tz-sitem:hover .tz-sitem-link { border-color: var(--tz-yellow); }
.tz-footer .tz-sitem-pop { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 20; display: flex; flex-direction: column; align-items: center; width: max-content; gap: 9px; padding: 13px; background: #fff; border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .22s var(--tz-ease), transform .22s var(--tz-ease), visibility .22s; }
.tz-footer .tz-sitem-pop::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.tz-footer .tz-sitem-pop::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 14px; }
.tz-footer .tz-sitem:hover .tz-sitem-pop,
.tz-footer .tz-sitem:focus-within .tz-sitem-pop,
.tz-footer .tz-sitem-pop:hover { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tz-footer .tz-sitem-caption { color: #111; font: 700 8px/1.4 var(--tz-mono); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
/* ---- 二维码悬浮入口（旧 block 兼容层，新数据走 .tz-sitem）---- */
.tz-footer .tz-qr { position: relative; }
.tz-footer .tz-qr-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; min-height: 40px; background: none; border: 1px solid var(--tz-line); color: var(--tz-yellow); font: 700 9px/1 var(--tz-mono); letter-spacing: .09em; text-transform: uppercase; cursor: pointer; transition: border-color .2s ease; }
.tz-footer .tz-qr-trigger:hover { border-color: var(--tz-yellow); }
.tz-footer .tz-qr:focus-within .tz-qr-trigger { border-color: var(--tz-yellow); }
.tz-footer .tz-qr-pop { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 20; display: flex; flex-direction: column; align-items: center; width: max-content; gap: 9px; padding: 13px; background: #fff; border-radius: 10px; box-shadow: 0 18px 44px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translate(-50%, 8px); transition: opacity .22s var(--tz-ease), transform .22s var(--tz-ease), visibility .22s; }
.tz-footer .tz-qr-pop::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.tz-footer .tz-qr-pop::before { content: ""; position: absolute; top: 100%; left: 0; width: 100%; height: 14px; }
.tz-footer .tz-qr:hover .tz-qr-pop,
.tz-footer .tz-qr:focus-within .tz-qr-pop,
.tz-footer .tz-qr-pop:hover { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.tz-footer .tz-qr-caption { color: #111; font: 700 8px/1.4 var(--tz-mono); letter-spacing: .1em; text-transform: uppercase; }
.tz-footer .tz-qr-ph { display: grid; place-items: center; width: var(--tz-img-w, 120px); aspect-ratio: 1; background: #efefef; color: #9a9a9a; font: 700 11px var(--tz-mono); border-radius: 6px; }
.tz-footer .tz-reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s var(--tz-ease), transform .65s var(--tz-ease); }
.tz-footer .tz-reveal.tz-visible { opacity: 1; transform: none; }
@media (max-width: 1050px) {
  .tz-footer .tz-footer-cta { grid-template-columns: 1fr; gap: 28px; }
  .tz-footer .tz-footer-main { grid-template-columns: repeat(2, 1fr); }
  .tz-footer .tz-footer-brand { grid-column: 1/-1; }
}
@media (max-width: 767px) {
  .tz-footer .tz-footer-main { grid-template-columns: 1fr; }
  .tz-footer .tz-footer-brand { grid-column: auto; }
  .tz-footer .tz-footer-bottom { align-items: flex-start; flex-direction: column; padding-block: 26px; }
  .tz-footer .tz-sitem-pop,
  .tz-footer .tz-qr-pop { left: 0; transform: translate(0, 8px); max-width: min(72vw, 320px); }
  .tz-footer .tz-sitem:hover .tz-sitem-pop,
  .tz-footer .tz-sitem:focus-within .tz-sitem-pop,
  .tz-footer .tz-sitem-pop:hover,
  .tz-footer .tz-qr:hover .tz-qr-pop,
  .tz-footer .tz-qr:focus-within .tz-qr-pop,
  .tz-footer .tz-qr-pop:hover { transform: translate(0, 0); }
  .tz-footer .tz-sitem-pop::after,
  .tz-footer .tz-qr-pop::after { left: 18px; margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tz-footer .tz-reveal { opacity: 1; transform: none; transition: none; }
  .tz-footer .tz-sitem-pop,
  .tz-footer .tz-qr-pop { transition: none; }
}