/* ========================================================================
   ⑥ 下载引导
   粉紫渐变面板：App 图标 + 标题 + 商店下载按钮（App Store / Google Play）+ 右侧博主照片。
   电脑上鼠标移到按钮会弹出二维码；手机上只显示按钮。
   ======================================================================== */

/* ---- 面板 ---- */
.download{padding-block:clamp(40px,6vw,80px)}
.dl-panel{position:relative;overflow:hidden;padding:clamp(44px,7vw,104px) clamp(24px,6vw,88px);border-radius:clamp(26px,3vw,40px);color:var(--dusk-ink);
  background:radial-gradient(60% 90% at 85% 115%,#f4bccb 0%,transparent 62%),linear-gradient(180deg,#bba9e6 0%,#dcc1e5 46%,#f7d7ce 100%)}
.dl-panel .eyebrow{color:var(--rose-deep)}
.dl-panel .h2{position:relative;z-index:1;max-width:11em}
.dl-panel .sub{position:relative;z-index:1;margin:20px 0 0;max-width:28em;font-size:17px;color:var(--dusk-mute)}
.dl-panel{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:center}

/* ---- 标题旁的 App 图标 ---- */
.dl-brand{display:flex;align-items:center;gap:14px}
.dl-brand img{width:56px;height:56px;border-radius:14px;box-shadow:0 10px 24px -8px rgba(120,30,70,.45)}

/* ---- 右侧三张叠放的博主照片 + 小玻璃球 ---- */
.dl-stack{position:relative;height:clamp(300px,32vw,440px)}
.dl-stack img{position:absolute;top:50%;width:clamp(110px,12vw,170px);max-width:none;aspect-ratio:9/16;height:auto;object-fit:cover;border-radius:20px;border:3px solid rgba(255,255,255,.85);box-shadow:0 30px 50px -20px rgba(80,30,90,.55)}
.dl-stack img:nth-child(1){left:6%;transform:translateY(-50%) rotate(-9deg)}
.dl-stack img:nth-child(2){left:50%;z-index:2;transform:translate(-50%,-54%)}
.dl-stack img:nth-child(3){right:6%;transform:translateY(-50%) rotate(9deg)}
.dl-panel .p3{width:44px;height:44px;right:5%;top:10%;animation:float 6s ease-in-out -1s infinite}

/* ---- 商店下载按钮（App Store / Google Play）---- */
.get{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.get-item{position:relative}
.store-badge{display:inline-flex;align-items:center;gap:14px;height:62px;min-width:200px;padding:0 24px 0 20px;border-radius:14px;border:1px solid rgba(255,255,255,.7);color:#1d1b18;text-decoration:none;box-shadow:0 12px 26px -14px rgba(80,30,90,.45);transition:transform .2s,box-shadow .2s}
.store-badge:hover{transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(80,30,90,.55)}
.badge-apple{background:#ebe8cc}
.badge-play{background:#f7f3ec}
.store-logo{width:28px;height:28px;flex:none}
.badge-apple .store-logo{color:#111}
.store-text{display:grid;line-height:1.15;white-space:nowrap}
.store-text small{font-size:12.5px;letter-spacing:.04em;opacity:.78}
.store-text b{font-size:20px;font-weight:500;letter-spacing:-.01em}

/* ---- 二维码弹窗：鼠标移到按钮上（或键盘聚焦）时，从按钮上方浮出 ---- */
.qr-pop{position:absolute;left:50%;bottom:calc(100% + 14px);z-index:3;display:grid;justify-items:center;gap:6px;padding:12px 12px 10px;border-radius:16px;background:#fff;box-shadow:0 20px 40px -16px rgba(60,20,70,.45);opacity:0;transform:translate(-50%,8px);pointer-events:none;transition:opacity .25s,transform .25s}
.qr-pop::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;background:#fff;transform:translate(-50%,-6px) rotate(45deg)}
.qr-pop img{display:block;width:112px;height:112px}
.qr-pop small{font-size:12px;color:var(--dusk-mute);white-space:nowrap}
.get-item:hover .qr-pop,.get-item:focus-within .qr-pop{opacity:1;transform:translate(-50%,0)}
.scan-hint{position:relative;z-index:1;margin:14px 0 0;font-size:13px;color:var(--dusk-mute)}

/* ---- 响应式：窄屏单栏；触屏和手机不显示二维码（手机直接点按钮下载） ---- */
@media (max-width:860px){.dl-panel{grid-template-columns:1fr}.dl-stack{height:300px}}
@media (hover:none),(max-width:760px){.qr-pop,.scan-hint{display:none}}
@media (max-width:760px){.get-item{flex:1 1 180px}.store-badge{width:100%;justify-content:center}}