/* =========================================================
   首页 Hero 二维码引流 · 微信小程序 / 抖音
   设计要点：
   1) 放在 .hero-inner 已有的第二列（0.9fr 空列），不新增布局结构
   2) justify-self:end 与文字列右边界对齐；margin-top 对齐左侧主标题顶线
   3) 毛玻璃卡片 + 白色托底（backdrop-filter 实时透出插画，识别率不打折）
   4) 三端：桌面 132px 卡片 / 平板 112px 落文字下方 / 手机隐藏
   5) 点击放大弹窗：高密度抖音码在小卡片下模块不足 4px，扫码必须在弹窗内完成
   ========================================================= */

.hero-qr{
  justify-self:end;
  align-self:start;
  /* 真机实测（1440 视口，Chrome 渲染线上真CSS）：
     .hero-inner 顶 y=153，主标题 h1 顶 y=205 → 需下移 52px 才能与标题顶线齐平。
     原设计稿按 80px 版心 padding 估算为 57px，线上实际 padding-top=24px，故修正为 52px。 */
  margin-top:52px;
  display:flex;
  gap:14px;
  z-index:2;
}

.hero-qr-item{
  width:132px;
  padding:12px 10px 10px;
  text-align:center;
  cursor:zoom-in;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.85);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(38,74,124,.14);
  transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s;
  font:inherit;
}

.hero-qr-item:hover,
.hero-qr-item:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(38,74,124,.2);
  outline:none;
}
.hero-qr-item:focus-visible{ border-color:#2E7CF6; }

.hero-qr-item img{
  display:block;
  width:106px;
  height:106px;
  margin:0 auto;
  border-radius:10px;
  background:#fff;
}

.hero-qr-item .t{
  display:block;
  margin-top:9px;
  font-size:13px;
  font-weight:500;
  color:#1A2A4A;
  letter-spacing:.2px;
}

.hero-qr-item::after{
  content:"点击放大";
  display:block;
  margin-top:3px;
  font-size:11px;
  color:#7B8CA8;
  opacity:0;
  transition:opacity .2s;
}
.hero-qr-item:hover::after,
.hero-qr-item:focus-visible::after{ opacity:1; }

/* 平板 / 小屏：Hero 变单列，二维码落到文字下方一行并缩小 */
@media(max-width:1100px){
  .hero-qr{ justify-self:center; margin-top:28px; gap:12px; }
  .hero-qr-item{ width:112px; padding:10px 8px 9px; border-radius:16px; }
  .hero-qr-item img{ width:88px; height:88px; border-radius:8px; }
  .hero-qr-item .t{ font-size:12px; margin-top:7px; }
  .hero-qr-item::after{ display:none; }
}

/* 手机：用户已在手机上，无法扫自己的屏幕 → 整体隐藏 */
@media(max-width:768px){
  .hero-qr{ display:none; }
}

/* ---------- 点击放大弹窗 ---------- */
.qr-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(12,22,40,.62);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.qr-modal.on{ display:flex; }

.qr-modal-box{
  position:relative;
  max-width:92vw;
  padding:28px 32px 22px;
  text-align:center;
  background:#fff;
  border-radius:20px;
  box-shadow:0 30px 70px rgba(10,25,50,.35);
}

.qr-modal-box h3{ margin:0 0 4px; font-size:18px; font-weight:600; color:#1A2A4A; }
.qr-modal-box .sub{ margin:0 0 18px; font-size:13px; color:#6E7E98; }

.qr-modal-items{ display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.qr-modal-items figure{ margin:0; }
.qr-modal-items img{
  width:220px;              /* 抖音高密度码 ≥200px 才能稳定扫 */
  height:220px;
  border-radius:12px;
  background:#fff;
  box-shadow:0 6px 18px rgba(30,60,100,.12);
}
.qr-modal-items figcaption{ margin-top:10px; font-size:13px; color:#1A2A4A; }

.qr-modal-close{
  position:absolute;
  top:14px; right:16px;
  width:32px; height:32px;
  border:0;
  border-radius:50%;
  background:#F0F4F9;
  color:#8C9CB8;
  font-size:18px;
  line-height:1;
  cursor:pointer;
}
.qr-modal-close:hover{ background:#E3EBF5; }

.qr-modal .hint{ margin-top:18px; font-size:12px; color:#93A1B8; }

@media(max-width:768px){
  .qr-modal-items img{ width:150px; height:150px; }
  .qr-modal-box{ padding:22px 20px 18px; }
}

@media(prefers-reduced-motion:reduce){
  .hero-qr-item{ transition:none; }
  .hero-qr-item:hover{ transform:none; }
}