/* ═══════════════════════════════════════════════════════════════════
   迭代 16 · 联系区做成收口（老叶队列 ②）
   ───────────────────────────────────────────────────────────────────
   上一版实测出来的毛病，不是审美问题是结构问题：
     · 左栏内容写完还剩约 200px 空档，整块下半身是空的
     · 整页最后一个行动按钮缩在右侧栏、还压在二维码底下——
       最该被点的东西放在最难找的位置
     · 全站最硬的两条信任信号（公开参考价 5000 元 / 天、第一次沟通
       不收费）用 13px 挤在最右边
     · 文字 / 人像 / 侧栏三列轻重不分，读起来像挂了个边栏小组件，
       不像一页的结尾

   这一版的结构：
     ① 左边说话 + 行动，按钮放大成整页唯一的主 CTA，旁边一条次路
     ② 右边是「你要面对的是谁」：人像 + 二维码，两个并排
     ③ 三条事实提到通栏，做这一节的地板 —— 顺带和页面开头那条
        事实带首尾呼应（开篇一排数字，收尾一排事实）
     ④ 顶上一道金线 + 地平线余光，呼应首屏，让人知道「到底了」

   一个字的主张都没加。原有元素、链接、图片和 data-contact-open
   按钮全部原样保留，新增的只有一句导航式的次路链接。
   ═══════════════════════════════════════════════════════════════════ */

html body .qcta2{
  position:relative;
  padding:clamp(64px,7vw,112px) 0 clamp(44px,4.6vw,68px);
  background:
    radial-gradient(ellipse 88% 42% at 50% 0%,
      rgba(58,44,22,.34) 0%, rgba(20,16,9,.16) 46%, transparent 74%),
    linear-gradient(180deg, var(--xh-bg2) 0%, var(--xh-bg) 62%,
      var(--xh-bg) 100%);
  overflow:hidden}
/* 顶上那道金线：和首屏地平线同一种光，读到这儿知道是结尾 */
html body .qcta2::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,
    transparent 0%, rgba(196,151,73,.10) 16%,
    rgba(226,192,121,.50) 50%,
    rgba(196,151,73,.10) 84%, transparent 100%)}

/* ── ① 上半：说话 + 行动 ／ 人像 + 码 ─────────────────────────── */
html body .qcta2__top{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  gap:clamp(32px,5vw,84px);
  align-items:center}

html body .qcta2__say .eyebrow{margin-bottom:clamp(14px,1.6vw,22px)}
html body .qcta2__say h2{
  margin:0 0 clamp(18px,2vw,28px)!important;
  font-size:clamp(30px,4.1vw,56px)!important;
  line-height:1.24!important;
  word-break:auto-phrase;text-wrap:balance}
html body .qcta2__lede{
  margin:0 0 14px!important;
  font-size:clamp(15px,1.28vw,17.5px)!important;
  line-height:1.92!important;
  color:var(--xh-fg1)!important;
  max-width:44ch;word-break:auto-phrase}
html body .qcta2__by{
  margin:0!important;
  font-size:clamp(14px,1.15vw,16px)!important;
  line-height:1.8!important;
  color:var(--xh-fg2)!important}

/* ── ② 主 CTA：整页最后一个动作，给它该有的分量 ────────────────── */
html body .qcta2__act{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,2vw,30px);
  margin-top:clamp(28px,3.2vw,44px)}
html body .qcta2__act .btn.gold{
  padding:clamp(15px,1.5vw,20px) clamp(26px,2.8vw,42px)!important;
  font-size:clamp(15px,1.25vw,17px)!important;
  font-weight:600!important;
  letter-spacing:.02em;
  border:0!important;border-radius:2px!important;
  color:#17120A!important;
  background:linear-gradient(140deg,
    var(--xh-gold-hi) 0%, var(--xh-gold) 58%, #A87F35 100%)!important;
  box-shadow:0 2px 4px rgba(0,0,0,.28),
             0 14px 34px rgba(140,102,40,.22);
  transition:transform .38s cubic-bezier(.16,1,.3,1),
             box-shadow .38s cubic-bezier(.16,1,.3,1),
             filter .38s}
html body .qcta2__act .btn.gold:hover{
  transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 3px 6px rgba(0,0,0,.3),
             0 20px 46px rgba(140,102,40,.3)}
html body .qcta2__act .btn.gold:active{transform:translateY(0)}

html body .qcta2__alt{
  position:relative;
  font-size:clamp(14px,1.15vw,15.5px);
  color:var(--xh-fg2);text-decoration:none;
  padding-bottom:3px;
  transition:color .3s}
html body .qcta2__alt::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--xh-gold);
  transition:right .42s cubic-bezier(.16,1,.3,1)}
html body .qcta2__alt:hover{color:var(--xh-gold-hi)}
html body .qcta2__alt:hover::after{right:0}

/* ── ③ 右边：人像 + 码 并排，不再是竖着堆的侧栏 ─────────────────── */
html body .qcta2__who{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(18px,2.2vw,32px);
  align-items:end}
html body .qcta2__who .qcta__face{
  margin:0!important;position:relative;
  border:1px solid var(--xh-hair);
  background:var(--xh-bg3);
  overflow:hidden}
html body .qcta2__who .qcta__face img{
  display:block;width:100%;height:auto;
  filter:saturate(.94) contrast(1.03)}
html body .qcta2__who .qcta__face figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px clamp(10px,1.2vw,16px);
  font-size:12px;letter-spacing:.04em;
  color:var(--xh-fg1);
  background:linear-gradient(180deg,
    rgba(10,9,6,0) 0%, rgba(10,9,6,.86) 58%, rgba(10,9,6,.94) 100%)}

html body .qcta2__who .qcta__qr{
  margin:0!important;
  padding:clamp(12px,1.4vw,18px);
  border:1px solid var(--xh-hair);
  background:var(--xh-bg3);
  text-align:center}
html body .qcta2__who .qcta__qr img{
  display:block;width:100%;height:auto;max-width:186px;margin:0 auto;
  background:#fff;padding:6px;border-radius:2px}
html body .qcta2__who .qcta__qr figcaption{
  margin-top:10px;font-size:12px;letter-spacing:.06em;
  color:var(--xh-fg2)}

/* ── ④ 地板：三条事实通栏，和开篇那条事实带首尾呼应 ────────────── */
html body .qcta2__facts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin:clamp(44px,5vw,76px) 0 0;
  border-top:1px solid var(--xh-hair)}
html body .qcta2__facts > div{
  position:relative;
  padding:clamp(24px,2.8vw,38px) clamp(20px,2.4vw,36px)
          clamp(6px,.8vw,12px) 0}
html body .qcta2__facts > div + div{
  padding-inline-start:clamp(20px,2.4vw,36px)}
html body .qcta2__facts > div + div::before{
  content:"";position:absolute;left:0;top:26%;bottom:14%;width:1px;
  background:linear-gradient(180deg,
    transparent 0%, var(--xh-hair) 24%,
    var(--xh-hair) 76%, transparent 100%)}
html body .qcta2__facts dt{
  margin:0 0 10px!important;
  font-family:var(--xh-mono,'JetBrains Mono','SF Mono',Menlo,monospace);
  font-size:10.5px!important;letter-spacing:.2em!important;
  text-transform:uppercase;
  color:var(--xh-gold)!important}
html body .qcta2__facts dd{
  margin:0!important;
  font-size:clamp(14.5px,1.2vw,16.5px)!important;
  line-height:1.7!important;
  color:var(--xh-fg1)!important;
  word-break:auto-phrase}
/* 公开参考价那个数字是这一段最硬的东西，让它站出来 */
html body .qcta2__facts dd b{
  font-family:var(--xh-serif);font-weight:400;
  font-size:clamp(19px,1.7vw,24px);
  color:var(--xh-gold-hi);
  letter-spacing:.01em}

/* ── ⑤ 进场：滚动驱动，无 JS；不支持的浏览器直接停在可见态 ──────── */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    @keyframes qctaRise{
      from{opacity:0;transform:translateY(24px)}
      to  {opacity:1;transform:none}
    }
    html body .qcta2__facts > div{
      animation:qctaRise .01s linear both;
      animation-timeline:view();
      animation-range:entry 6% entry 86%}
    html body .qcta2__facts > div:nth-child(2){
      animation-range:entry 12% entry 90%}
    html body .qcta2__facts > div:nth-child(3){
      animation-range:entry 18% entry 94%}
  }
}

/* ── ⑥ 窄屏 ─────────────────────────────────────────────────────── */
@media (max-width:1000px){
  html body .qcta2__top{
    grid-template-columns:1fr!important;
    gap:clamp(30px,5vw,44px)}
  html body .qcta2__who{
    grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
  html body .qcta2__lede{max-width:none}
  html body .qcta2__facts{
    grid-template-columns:1fr!important}
  html body .qcta2__facts > div,
  html body .qcta2__facts > div + div{
    padding:clamp(20px,4vw,26px) 0 clamp(4px,1vw,10px)!important;
    border-top:1px solid var(--xh-hair)}
  html body .qcta2__facts > div:first-child{border-top:0}
  html body .qcta2__facts > div + div::before{display:none}
}
@media (max-width:560px){
  html body .qcta2__who{grid-template-columns:1fr;gap:20px}
  html body .qcta2__who .qcta__qr img{max-width:156px}
  html body .qcta2__act{gap:16px}
  html body .qcta2__act .btn.gold{width:100%;text-align:center}
}

/* 2026-08-26 修：原来这几条的终点写在 cover 区间里，而收口那一节下面只剩 953px 页脚，
   永远滚不到终点 —— 实测三项 opacity 卡在 0.88/0.78/0.69 不动。终点改到 entry 区间内，
   元素一进满视口动画就跑完，后面还有多少页都不影响。 */