/* LLSP 落地页模板 desire：手机 / PC 同一份样式，按 body.is-mobile / is-desktop 切换。
   stats/index.ejs 会改 html 的 font-size（rem 自适应），这里统一用 px / vw，不受它影响。 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body {
  background: #0c0719;
  color: #fff;
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

.lp {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(142, 60, 214, .45), transparent 60%),
    radial-gradient(ellipse at 20% 90%, rgba(236, 170, 40, .12), transparent 55%),
    linear-gradient(160deg, #1b0f3a 0%, #120a26 55%, #0c0719 100%);
}

/* 胶片条装饰 */
.lp-film {
  position: absolute;
  height: 120px;
  width: 140%;
  opacity: .22;
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.9) 14px 24px) top / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(255,255,255,.9) 14px 24px) bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, #3a2a5c 0 150px, #241840 150px 158px);
  pointer-events: none;
}
.lp-film--a { top: 6%; left: -20%; transform: rotate(-14deg); }
.lp-film--b { bottom: 4%; right: -30%; transform: rotate(-14deg); opacity: .12; }

/* 头部 */
.lp-header {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
}
.lp-brand { display: flex; align-items: center; gap: 10px; }
.lp-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; background: #f5b919; }
.lp-brand-name { font-size: 18px; font-weight: 700; letter-spacing: 1px; }
.lp-brand-desc { font-size: 12px; opacity: .75; margin-top: 2px; }
.lp-coop { display: flex; flex-direction: column; align-items: center; font-size: 12px; gap: 4px; cursor: pointer; }
.lp-coop-icon { width: 34px; height: 34px; }
.lp-brand-img { display: block; height: 50px; width: auto; }

/* 主体 */
.lp-main { position: relative; z-index: 1; display: flex; }

.lp-hero { position: relative; cursor: pointer; }
.lp-hero-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.lp-hero-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  border: 2px dashed rgba(245, 185, 25, .5); border-radius: 16px;
  color: rgba(255,255,255,.6); font-size: 18px; line-height: 1.6;
  background: rgba(255,255,255,.04);
}
.lp-hero-placeholder small { font-size: 13px; opacity: .8; }

/* 两侧竖排标签 */
.lp-tag {
  position: absolute;
  writing-mode: vertical-rl;
  padding: 10px 6px 14px;
  font-size: 15px; font-weight: 700; letter-spacing: 2px;
  color: #3a1d00;
  background: linear-gradient(180deg, #ffe38a 0%, #f5b919 60%, #e08a00 100%);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
}
.lp-tag--l { left: 4%; }
.lp-tag--r { right: 4%; }
.lp-tag--0 { top: 6%; }
.lp-tag--1 { top: 36%; }
.lp-tag--2 { top: 66%; }
.lp-tag--r.lp-tag--0 { top: 12%; }
.lp-tag--r.lp-tag--1 { top: 44%; }
.lp-tag--r.lp-tag--2 { top: 74%; }

/* 标题（设计稿原图） */
.lp-side { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lp-title { display: block; width: 100%; cursor: pointer; }

.lp-qr { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.lp-qr #qrcode { padding: 8px; background: #fff; border-radius: 8px; width: 128px; height: 128px; }
.lp-qr-tip { font-size: 13px; opacity: .85; }

.lp-btns { display: flex; justify-content: center; gap: 14px; margin-top: 20px; }
.lp-btn { display: block; flex: 1; max-width: 200px; cursor: pointer; transition: transform .15s; }
.lp-btn img { display: block; width: 100%; height: auto; }
.lp-btn:active { transform: translateY(2px); }
.lp-note { margin-top: 16px; font-size: 12px; line-height: 1.7; opacity: .6; max-width: 420px; }

/* ===== 手机 ===== */
.is-mobile .lp-main { flex-direction: column; align-items: center; padding: 0 16px 28px; }
.is-mobile .lp-hero { width: 100%; height: 62vh; max-height: 560px; }
.is-mobile .lp-side { margin-top: -20vh; position: relative; z-index: 2; width: 100%; }
.is-mobile .lp-title { max-width: 360px; }
.is-mobile .lp-brand-img { height: 42px; }
.is-mobile .lp-btns { width: 100%; }
.is-mobile .lp-hero-img { -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); }

/* ===== PC ===== */
.is-desktop .lp-header { padding: 24px 5vw; }
.is-desktop .lp-logo { width: 56px; height: 56px; }
.is-desktop .lp-brand-name { font-size: 22px; }
.is-desktop .lp-main { align-items: center; justify-content: center; gap: 3vw; padding: 0 5vw 40px; min-height: calc(100vh - 104px); }
.is-desktop .lp-hero { width: 38vw; max-width: 620px; height: 78vh; max-height: 760px; }
.is-desktop .lp-side { width: 36vw; max-width: 560px; }
.is-desktop .lp-title { max-width: 520px; }
.is-desktop .lp-brand-img { height: 60px; }
.is-desktop .lp-coop-icon { width: 40px; height: 40px; }
.is-desktop .lp-tag { font-size: 18px; }