/* === Reset & Base === */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  background:#f5e6d3;display:flex;justify-content:center;
  -webkit-font-smoothing:antialiased;min-height:100vh
}
.page{
  max-width:375px;width:100%;background:#fff;
  min-height:100vh;position:relative;padding-bottom:80px
}

/* === HERO (page1) === */
.hero{
  background:linear-gradient(135deg,#e85d26 0%,#FF8C42 100%);
  padding:36px 24px 28px;text-align:center
}
.logo-tag{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,0.2);padding:4px 14px 4px 6px;
  border-radius:20px;margin-bottom:16px;backdrop-filter:blur(4px)
}
.logo-dot{
  width:28px;height:28px;border-radius:50%;background:#fff;color:#e85d26;
  font-size:14px;font-weight:800;display:flex;align-items:center;justify-content:center
}
.logo-text{color:#fff;font-size:13px;font-weight:600;letter-spacing:1px}
.hero h1{font-size:36px;color:#fff;font-weight:900;letter-spacing:6px;margin-bottom:8px}
.hero h1 .hl{color:#ffe066}
.hero .subtitle{font-size:15px;color:rgba(255,255,255,0.9);margin-bottom:10px}
.hero .subtitle strong{color:#ffe066;font-size:20px}
.target-badge{
  display:inline-block;background:rgba(0,0,0,0.2);color:#fff;
  padding:4px 16px;border-radius:12px;font-size:12px;font-weight:600;letter-spacing:1px
}

/* === CARDS === */
.cards{display:flex;gap:8px;padding:16px 14px 10px}
.card{
  flex:1;background:#fff5e6;border-radius:12px;padding:12px 8px;
  text-align:center
}
.card-icon{font-size:22px;display:block;margin-bottom:4px}
.card-text{font-size:11px;color:#888;line-height:1.4}
.card-text strong{color:#2d3436;font-size:12px}

/* === BUTTON === */
.btn-area{padding:10px 14px 20px}
.btn-primary{
  width:100%;padding:14px 0;border:none;border-radius:30px;
  background:linear-gradient(135deg,#e85d26,#FF8C42);
  color:#fff;font-size:17px;font-weight:700;letter-spacing:2px;
  cursor:pointer;box-shadow:0 4px 20px rgba(232,93,38,0.35);
  transition:transform 0.15s
}
.btn-primary:active{transform:scale(0.97)}
.btn-primary::after{content:" →"}

/* === QR PLACEHOLDER === */
.qr-placeholder{
  position:absolute;right:14px;bottom:60px;
  width:200px;height:200px;background:#f9f0e8;
  border:2px dashed #e85d26;border-radius:12px;
  display:flex;align-items:center;justify-content:center
}
.qr-inner{text-align:center;color:#e85d26}
.qr-icon{font-size:36px;display:block;margin-bottom:6px}
.qr-label{font-size:12px;font-weight:600}

/* === FOOTER === */
.footer-info{
  text-align:center;padding:16px 14px;
  font-size:11px;color:#999;line-height:1.7;
  margin-top:40px
}

/* ============ PAGE 2 ============ */
.back-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 14px;border-bottom:1px solid #f0e0d0
}
.btn-back{
  border:none;background:none;font-size:14px;color:#e85d26;
  cursor:pointer;font-weight:600;padding:4px 0
}
.bar-title{font-size:15px;font-weight:700;color:#2d3436}

/* offer card */
.offer-card{
  background:#fff5e6;margin:12px 14px 0;border-radius:14px;
  padding:18px 20px;box-shadow:0 2px 8px rgba(0,0,0,0.04)
}
.offer-title{font-size:16px;font-weight:700;color:#2d3436;margin-bottom:8px}
.offer-price{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.price-now{font-size:34px;font-weight:900;color:#e85d26}
.price-now small{font-size:15px;font-weight:400;color:#888}
.price-old{font-size:14px;color:#bbb;text-decoration:line-through}
.offer-desc{font-size:13px;color:#636e72;margin-bottom:4px}
.price-compare{font-size:12px;color:#888;margin-top:4px}
.price-compare strong{color:#e85d26}

/* section */
.section{padding:14px 14px 0}
.sec-title{font-size:14px;font-weight:700;color:#2d3436;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.section.highlight{background:#fff5e6;margin:14px 14px 0;border-radius:12px;padding:14px}

/* rules */
.rule-list{list-style:none}
.rule-list li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;color:#555;padding:5px 0;line-height:1.5
}
.rule-list .dot{
  width:6px;height:6px;border-radius:50%;background:#e85d26;
  flex-shrink:0;margin-top:6px
}
.rule-list li strong{color:#2d3436}

/* reward */
.reward-text{font-size:14px;color:#e85d26;font-weight:600;line-height:1.8}
.reward-text strong{color:#d63031;font-size:16px}

/* timeline */
.timeline{padding:4px 0 4px 20px;position:relative}
.tl-item{display:flex;align-items:flex-start;gap:12px}
.tl-dot{
  width:14px;height:14px;border-radius:50%;background:#ddd;
  flex-shrink:0;margin-top:3px;margin-left:-20px;position:relative;z-index:2
}
.tl-dot.active{background:#e85d26;box-shadow:0 0 0 4px rgba(232,93,38,0.15)}
.tl-content{padding-bottom:12px}
.tl-label{font-size:14px;font-weight:600;color:#2d3436;display:block}
.tl-desc{font-size:12px;color:#888;margin-top:2px}
.tl-line{
  width:2px;background:#f0e0d0;margin-left:-7px;height:20px
}

/* address */
.address-text{font-size:13px;color:#555;line-height:1.8}

/* contact */
.contact-box{padding-bottom:14px}
.contact-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.contact-label{font-size:14px;font-weight:600;color:#2d3436}
.contact-phone{font-size:16px;font-weight:700;color:#e85d26;text-decoration:none}
.contact-hint{font-size:11px;color:#bbb;margin-top:4px}

/* action bar */
.action-bar{
  position:fixed;bottom:0;left:50%;transform:translateX(-50%);
  max-width:375px;width:100%;background:#fff;
  border-top:1px solid #f0e0d0;padding:10px 12px;
  display:flex;align-items:center;gap:8px;z-index:100
}
.btn-share{
  width:44px;height:44px;border-radius:50%;border:1px solid #ddd;
  background:#fff;font-size:16px;cursor:pointer;flex-shrink:0
}
.btn-alone{
  flex:1;padding:10px 0;border-radius:10px;border:1px solid #ddd;
  background:#fff;font-size:12px;color:#888;cursor:pointer;text-align:center
}
.btn-alone small{display:block;font-size:10px;color:#bbb;margin-top:1px}
.btn-group{
  flex:1.2;padding:10px 0;border-radius:10px;border:none;
  background:linear-gradient(135deg,#e85d26,#FF8C42);
  color:#fff;font-size:14px;font-weight:700;cursor:pointer;text-align:center;
  box-shadow:0 4px 12px rgba(232,93,38,0.3)
}
.btn-group small{display:block;font-size:11px;font-weight:400;opacity:0.85;margin-top:1px}