/* ==========================================================
   口袋牛店 · 下载站样式（整理版）
   结构：变量 → 基础 → 顶部栏 → 按钮 → 首屏 → 字带 → 步骤 → 行动区
         → 页脚 → 弹窗 → 提示 → 子页 → 响应式（平板 / 手机）
   断点：≤560px 手机；561–900px 平板；>900px 电脑
   ========================================================== */

/* ---------- 变量 ---------- */
:root{
  --wine-0:#4a0e08;
  --wine:#5f120c;
  --wine-2:#7d2011;
  --wine-3:#8a2d1c;
  --cream:#f7efe6;
  --paper:#fffaf4;
  --ink:#2b1a16;
  --muted:#7a6660;
  --gold:#d8ad6a;
  --gold-2:#eccb8f;
  --line:#e2d0c2;
  --radius:14px;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC",STSong,serif;
  --sans:"PingFang SC","Microsoft YaHei","Hiragino Sans GB",system-ui,sans-serif;
}

/* ---------- 基础 ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);color:var(--ink);line-height:1.7;
  min-height:100vh;display:flex;flex-direction:column;background:var(--cream);
}
main{flex:1}
a{color:var(--wine-2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
button{font:inherit}
.wrap{width:min(1120px,90%);margin:0 auto}
.kicker{font-size:11px;letter-spacing:.34em;color:var(--gold);font-weight:700;margin-bottom:14px;text-transform:uppercase}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 顶部栏 ---------- */
.topbar{
  background:var(--wine);color:var(--cream);position:sticky;top:0;z-index:20;
  box-shadow:0 1px 0 rgba(216,173,106,.25);
}
.bar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;height:74px}
.brand{display:flex;align-items:center;gap:12px;color:var(--cream);min-width:0}
.brand:hover{text-decoration:none}
.brand-icon{
  width:46px;height:46px;flex:none;border-radius:12px;background:var(--wine-3);
  border:1px solid rgba(216,173,106,.5);display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.brand-icon img{width:100%;height:100%;object-fit:cover}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-name{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:.08em;white-space:nowrap}
.brand-slogan{font-size:11px;letter-spacing:.22em;color:var(--gold);margin-top:4px;white-space:nowrap}
.contact{display:flex;gap:8px;flex-wrap:nowrap}
.chip{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap;
  border:1px solid rgba(216,173,106,.6);background:transparent;color:var(--cream);
  border-radius:999px;padding:6px 14px;font-size:13px;transition:all .2s;
}
.chip b{font-weight:600}
.chip-label{color:var(--gold)}
.chip:hover,.chip.copied{background:var(--gold);border-color:var(--gold);color:var(--wine-0)}
.chip:hover .chip-label,.chip.copied .chip-label{color:var(--wine-0)}
.site-nav{display:flex;gap:18px;font-size:14px}
.site-nav a{color:var(--cream);opacity:.85}
.site-nav a:hover{opacity:1;color:var(--gold-2)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:52px;padding:0 30px;border-radius:999px;cursor:pointer;
  font-size:15px;font-weight:700;letter-spacing:.06em;border:1.5px solid transparent;transition:all .2s;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn.gold{background:var(--gold);color:var(--wine-0);box-shadow:0 10px 26px rgba(216,173,106,.35)}
.btn.gold:hover{background:var(--gold-2)}
.btn.outline{background:transparent;color:var(--cream);border-color:rgba(247,239,230,.5)}
.btn.outline:hover{border-color:var(--cream);background:rgba(247,239,230,.08)}
.btn.primary{background:var(--wine-2);color:#fff}
.btn.primary:hover{background:var(--wine)}
.btn.ghost{background:transparent;color:var(--wine-2);border-color:var(--wine-2)}
.btn.ghost:hover{background:var(--wine-2);color:#fff}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--cream);
  background:
    radial-gradient(circle at 80% 15%,rgba(216,173,106,.16),transparent 42%),
    linear-gradient(180deg,#8a2d1c 0%,#6b1b10 55%,#4a0e08 100%);
  padding:88px 0 104px;
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:repeating-linear-gradient(90deg,rgba(247,239,230,.035) 0 1px,transparent 1px 64px);
}
.hero-grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center}
.hero-copy{min-width:0}
.hero-label{
  display:block;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.2em;
  color:var(--gold);margin-bottom:14px;
}
.hero h1{font-family:var(--serif);font-weight:800;line-height:1.08;color:var(--cream);margin-bottom:22px}
.hero-title{display:block;font-size:clamp(42px,6vw,72px);letter-spacing:.02em}
.hero-title em{font-style:normal;color:var(--gold);position:relative;white-space:nowrap}
.hero-title em::after{
  content:"";position:absolute;left:0;right:0;bottom:.08em;height:.12em;background:var(--gold);opacity:.55;border-radius:2px;
}
.sub-line{font-size:15px;color:rgba(247,239,230,.82);margin-bottom:38px;letter-spacing:.04em;max-width:520px}
.sub-line span{color:var(--gold);margin:0 6px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px}

/* 邀请码票据 */
.ticket{
  position:relative;display:inline-flex;align-items:stretch;max-width:100%;
  background:var(--paper);color:var(--ink);border-radius:12px;overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.ticket-main{padding:11px 26px 11px 20px;display:flex;flex-direction:column;border-right:2px dashed #d8c4b2;position:relative}
.ticket-main::before,.ticket-main::after{
  content:"";position:absolute;right:-11px;width:22px;height:22px;border-radius:50%;background:var(--wine-0);
}
.ticket-main::before{top:-11px}
.ticket-main::after{bottom:-11px}
.ticket-label{font-size:10px;color:var(--muted);letter-spacing:.18em}
.ticket-code{font-family:var(--serif);font-size:26px;color:var(--wine-2);letter-spacing:.16em;line-height:1.2}
.ticket-copy{
  border:0;background:var(--wine-2);color:var(--cream);padding:0 22px;cursor:pointer;
  font-size:13px;font-weight:700;letter-spacing:.1em;margin-left:12px;transition:background .2s;
}
.ticket-copy:hover{background:var(--wine)}
.ticket-copy.copied{background:var(--gold);color:var(--wine-0)}

/* “口袋”造型 */
.hero-visual{position:relative;display:flex;justify-content:center;align-items:center}
.pocket{position:relative;width:380px;height:440px;margin:0 auto;zoom:1}
.pocket-phone{
  position:absolute;left:50%;top:6px;z-index:1;
  width:210px;height:360px;transform:translateX(-50%) rotate(-7deg);
  background:var(--paper);border-radius:30px;padding:9px;box-shadow:0 26px 50px rgba(0,0,0,.35);
}
.pocket-screen{
  position:relative;width:100%;height:100%;border-radius:22px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(170deg,#fffaf4 0%,#f3e6d6 100%);
}
.pocket-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pocket-tip{color:#9a7f70;font-size:12px;letter-spacing:.2em}
.pocket-front{
  position:absolute;left:0;right:0;bottom:0;height:270px;z-index:2;
  border-radius:14px 14px 40px 40px;
  background:linear-gradient(180deg,#b35a40 0%,#8f2c1b 55%,#7a2416 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.18),0 30px 50px rgba(0,0,0,.35);
}
.pocket-front::before{ /* 袋口 */
  content:"";position:absolute;left:-6px;right:-6px;top:-14px;height:34px;
  background:#6a1f12;border-radius:18px 18px 10px 10px;box-shadow:0 2px 0 rgba(255,255,255,.12) inset;
}
.pocket-front::after{ /* 袋身缝线 */
  content:"";position:absolute;left:34px;right:34px;top:58px;border-top:2px dashed rgba(236,203,143,.5);
}

/* ---------- 字带 ---------- */
.marquee{
  position:relative;overflow:hidden;white-space:nowrap;padding:22px 0 44px;
  background:linear-gradient(180deg,#4a0e08 0%,#5f120c 60%,#6b1b10 100%);
  color:var(--cream);
}
.marquee::after{ /* 底部短渐变，融入米色内容区 */
  content:"";position:absolute;left:0;right:0;bottom:0;height:44px;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,239,230,0) 0%,var(--cream) 100%);
}
.marquee-track{
  display:inline-flex;gap:16px;animation:scroll 28s linear infinite;
  font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:.22em;
}
.marquee-track i{font-style:normal;color:var(--gold)}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 步骤 ---------- */
.steps-sec{padding:96px 0 80px}
.sec-head{margin-bottom:56px}
.sec-head .kicker{color:var(--wine-3)}
.sec-head h2{font-family:var(--serif);font-size:40px;color:var(--wine);line-height:1.2}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.steps li{padding:40px 36px 0 0}
.steps li + li{padding-left:36px;border-left:1px solid var(--line)}
.big-no{
  display:block;font-family:var(--serif);font-size:96px;line-height:1;font-weight:800;
  color:transparent;-webkit-text-stroke:1.5px var(--wine-2);margin-bottom:26px;
}
.steps h3{font-size:20px;color:var(--ink);margin-bottom:8px;font-weight:700}
.steps p{color:var(--muted);font-size:15px}
.more{margin-top:48px;color:var(--muted);font-size:14px}
.more a{font-weight:600}

/* ---------- 行动区 ---------- */
.closing{background:var(--wine);color:var(--cream);padding:84px 0;position:relative;overflow:hidden}
.closing::after{
  content:"";position:absolute;right:-120px;top:-120px;width:360px;height:360px;border-radius:50%;
  border:40px solid rgba(216,173,106,.1);
}
.closing-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;position:relative;z-index:1}
.closing h2{font-family:var(--serif);font-size:40px;color:var(--cream);margin-bottom:8px;font-weight:800}
.closing p{color:rgba(247,239,230,.75);font-size:16px}

/* ---------- 页脚 ---------- */
.footer{background:#2b1a16;color:#cbbfb3;padding:28px 0;font-size:14px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.clock{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px;font-variant-numeric:tabular-nums}
.clock-label{color:#9c8a80;letter-spacing:.12em}
.clock-date{color:#cbbfb3}
.clock-time{font-family:var(--serif);font-size:20px;color:var(--gold);letter-spacing:.05em}
.sync-status{font-size:12px;color:#9c8a80;border:1px solid #5a4740;border-radius:999px;padding:1px 10px}
.sync-status.ok{color:#e9d3c9;border-color:#8a6a58}
.sync-status.fail{color:#e8c79a;border-color:#a88050}
.footer-links{display:flex;gap:16px;flex-wrap:wrap}
.footer-links a{color:#cbbfb3}
.copy{color:#9c8a80;font-size:13px}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px}
.modal[hidden]{display:none}
.modal-mask{position:absolute;inset:0;background:rgba(43,26,22,.6);backdrop-filter:blur(3px)}
.modal-box{
  position:relative;width:min(420px,100%);background:var(--paper);border-radius:18px;
  padding:36px 30px 30px;box-shadow:0 30px 70px rgba(0,0,0,.3);animation:pop .22s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.modal-close{position:absolute;right:14px;top:10px;border:0;background:none;font-size:26px;color:var(--muted);cursor:pointer;line-height:1}
.modal h2{font-family:var(--serif);font-size:24px;color:var(--wine);margin-bottom:8px}
.modal-desc{color:var(--muted);font-size:14px;margin-bottom:20px}
.modal-code{
  display:flex;align-items:center;gap:12px;background:var(--cream);border:1px dashed var(--gold);
  border-radius:var(--radius);padding:14px 16px;margin-bottom:22px;
}
.modal-code span{font-size:13px;color:var(--muted);letter-spacing:.1em}
.modal-code b{flex:1;font-family:var(--serif);font-size:24px;color:var(--wine-2);letter-spacing:.14em}
.modal-code .ticket-copy{margin:0;height:38px;padding:0 16px;border-radius:8px}
.modal-actions .btn{width:100%;height:50px}

/* ---------- 微信 / QQ 内打开的引导 ---------- */
.open-hint{position:fixed;inset:0;z-index:70;display:flex;justify-content:flex-end;align-items:flex-start;padding:0 18px}
.open-hint[hidden]{display:none}
.open-hint-mask{position:absolute;inset:0;background:rgba(43,26,22,.72)}
.open-hint-box{
  position:relative;width:min(340px,100%);margin-top:84px;margin-right:6px;
  background:var(--paper);border-radius:18px;padding:52px 24px 22px;text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.open-hint-arrow{position:absolute;right:-6px;top:-100px;width:60px;height:80px;color:var(--gold);animation:bob 1.1s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.open-hint h2{font-family:var(--serif);font-size:20px;color:var(--wine);margin-bottom:8px}
.open-hint p{font-size:14px;color:var(--muted)}
.open-hint-step{margin:14px 0 18px;color:var(--ink)!important;font-size:15px!important}
.open-hint-step b{color:var(--wine-2)}
.open-hint-ok{width:100%;height:46px}

/* ---------- 提示 ---------- */
.toast{
  position:fixed;left:50%;bottom:36px;transform:translate(-50%,20px);z-index:60;
  background:var(--ink);color:#fff;padding:10px 22px;border-radius:999px;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:88%;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 子页（安装说明） ---------- */
.doc{padding:60px 0 80px;max-width:820px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:12px}
.doc h1{font-family:var(--serif);font-size:40px;color:var(--wine);margin-bottom:34px;line-height:1.2}
.doc-sec{margin-bottom:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 30px}
.doc-sec h2{font-size:18px;color:var(--wine);margin-bottom:14px;padding-left:14px;border-left:3px solid var(--gold);font-family:var(--serif)}
.doc-sec ol{padding-left:22px;color:#3d2a25;font-size:15px}
.doc-sec li{margin-bottom:8px}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
table{width:100%;border-collapse:collapse;font-size:14px;min-width:460px;background:#fff}
th,td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{background:#efe3d4;color:var(--wine);font-weight:700}
tr:last-child td{border-bottom:0}
.faq dt{font-weight:700;margin-top:16px;color:var(--ink)}
.faq dd{color:var(--muted);font-size:14px;margin-top:4px}
.back-home{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;padding-top:30px;border-top:1px dashed var(--line)}
.back-home .btn{height:46px;padding:0 24px}

/* =========================================================
   响应式：平板（561–900px）
   ========================================================= */
@media (max-width:900px){
  .hero{padding:64px 0 80px}
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero-visual{order:2;margin-top:24px}
  .pocket{zoom:.86}
  .steps{grid-template-columns:1fr}
  .steps li{padding:30px 0}
  .steps li + li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .big-no{font-size:72px}
  .steps-sec{padding:64px 0 48px}
  .closing-inner{flex-direction:column;align-items:flex-start}
  .site-nav{display:none}
}

/* =========================================================
   响应式：手机（≤560px）— 上下堆叠，口袋居中在邀请码之下
   ========================================================= */
@media (max-width:560px){
  .bar-inner{height:auto;padding:12px 0;flex-wrap:wrap;gap:10px}
  .brand-name{font-size:21px}
  .brand-icon{width:42px;height:42px}
  .brand-slogan{font-size:10px;letter-spacing:.14em}
  .contact{width:100%;justify-content:space-between}
  .contact .chip{flex:1;justify-content:center;padding:6px 8px;font-size:12px}

  .hero{padding:44px 0 48px}
  .hero-label{font-size:13px;margin-bottom:10px}
  .hero-title{font-size:38px}
  .sub-line{font-size:14px;margin-bottom:22px}
  .actions{flex-wrap:nowrap;gap:10px;margin-bottom:18px}
  .actions .btn{flex:1;height:46px;font-size:14px;padding:0 10px;letter-spacing:.02em}
  .ticket{width:100%}
  .ticket-main{flex:1;padding:9px 16px}
  .ticket-code{font-size:22px;letter-spacing:.12em}
  .ticket-copy{padding:0 16px;font-size:12px}
  .hero-visual{margin:36px 0 0;order:0}
  .pocket{zoom:.62}

  .marquee{padding:16px 0 36px}
  .marquee-track{font-size:13px;letter-spacing:.18em}

  .steps-sec{padding:52px 0 40px}
  .sec-head{margin-bottom:26px}
  .sec-head h2{font-size:28px}
  .steps li{padding:26px 0}
  .big-no{font-size:64px;margin-bottom:14px}
  .more{margin-top:28px}
  .closing{padding:52px 0}
  .closing h2{font-size:30px}
  .closing-inner{flex-direction:column;align-items:stretch}
  .closing .btn{width:100%}

  .modal-box{padding:30px 22px 24px}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .doc h1{font-size:30px}
  .doc-sec{padding:20px 18px}
  .back-home .btn{flex:1}
  .toast{bottom:20px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;scroll-behavior:auto!important}
}