:root{
  --bg:        #070b16;
  --bg-2:      #0b1222;
  --bg-3:      #0e1730;
  --surface:   rgba(255,255,255,.045);
  --surface-2: rgba(255,255,255,.07);
  --surface-3: rgba(255,255,255,.10);
  --border:    rgba(255,255,255,.10);
  --border-2:  rgba(255,255,255,.16);
  --gold:      #f5c451;
  --gold-2:    #e8b339;
  --gold-soft: rgba(245,196,81,.14);
  --blue:      #5b8cff;
  --teal:      #36e0c8;
  --text:      #e9edf6;
  --text-dim:  #9aa6c0;
  --text-mut:  #6b7793;
  --price:     #ffd166;
  --danger:    #ff6b81;
  --ok:        #2dd4a7;
  --radius:    16px;
  --radius-sm: 12px;
  --shadow:    0 18px 50px rgba(0,0,0,.55);
  --glow-gold: 0 0 0 1px rgba(245,196,81,.30), 0 8px 30px rgba(245,196,81,.16);
  --font: -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--font);
  color:var(--text);
  background:#f5f5f5;
  min-height:100vh;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* 通用应用容器（移动优先，最大 640）—— 内容区深色，外围由 body 灰色露出 */
.app, .main{
  max-width:640px;
  margin:0 auto;
  min-height:100vh;
  position:relative;
  padding-bottom:84px;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(245,196,81,.10), transparent 60%),
    radial-gradient(900px 600px at 8% 108%, rgba(91,140,255,.12), transparent 60%),
    linear-gradient(180deg,#070b16 0%, #0b1222 55%, #070b16 100%);
  background-attachment:fixed;
}

/* 顶部标题栏 */
.topbar{
  position:sticky; top:0; z-index:30;
  height:52px; line-height:52px; text-align:center;
  font-size:17px; font-weight:700; letter-spacing:.5px;
  color:var(--text);
  background:linear-gradient(180deg, rgba(11,18,34,.92), rgba(11,18,34,.66));
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.topbar .back{ position:absolute; left:14px; top:0; height:52px; line-height:52px; color:var(--text-dim); font-size:14px; }

/* 区块标题 */
.section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin:22px 16px 14px;
}
.section-title .title{
  font-size:18px; font-weight:800; letter-spacing:.5px;
  display:flex; align-items:center; gap:10px;
}
.section-title .title::before{
  content:""; width:4px; height:18px; border-radius:3px;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  box-shadow:var(--glow-gold);
}
.section-title .aside{ font-size:13px; color:var(--text-dim); }

/* 玻璃卡片 */
.card{
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}

/* 按钮 */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:46px; padding:0 22px; border-radius:999px;
  font-size:15px; font-weight:700; letter-spacing:.5px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn-primary{
  color:#fff;
  background:linear-gradient(135deg,var(--blue) 0%, #4878e0 100%);
  box-shadow:0 10px 26px rgba(91,140,255,.30);
}
.btn-secondary{
  color:var(--blue); border-color:rgba(91,140,255,.40);
  background:rgba(91,140,255,.06);
}
.btn-block{ display:flex; width:100%; }
.btn-lg{ height:52px; font-size:16px; }

/* 文字/工具 */
.gold{ color:var(--gold); }
.dim{ color:var(--text-dim); }
.muted{ color:var(--text-mut); }
.gradient-text{
  background:linear-gradient(120deg,#fff 0%, var(--gold) 55%, var(--gold-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.glow-line{ height:1px; background:linear-gradient(90deg,transparent, rgba(245,196,81,.5), transparent); border:0; margin:0; }

/* 页脚品牌 */
.brand-footer{
  text-align:center; color:var(--text-mut); font-size:12px; line-height:1.9;
  padding:26px 16px 30px;
}
.brand-footer a{ color:var(--text-dim); text-decoration:none; }
.brand-footer .sep{ opacity:.5; }

/* 底部固定操作条 */
.fixed-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  max-width:640px; margin:0 auto;
  display:flex; gap:12px; padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(7,11,22,0), rgba(7,11,22,.92) 38%);
  backdrop-filter:blur(10px);
}
.fixed-bar .btn{ flex:1; }

/* 灯箱 */
#img-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.86);
  display:none; align-items:center; justify-content:center; z-index:10001; cursor:zoom-out;
}
#img-lightbox img{ max-width:90%; max-height:90%; border-radius:10px; box-shadow:var(--shadow); }

/* 小屏微调 */
@media (max-width:380px){
  .section-title .title{ font-size:16px; }
}


/* 顶部 / 底部 固定悬浮条（max-width 640 居中 + 金色发光） */
.fixed-bar-top{
  position:fixed; top:0; left:0; right:0; z-index:50;
  max-width:640px; margin:0 auto;
  background: linear-gradient(135deg, #f2361a 0%, #6b0519 100%);
  color:#fff;
  text-align:center; font-size:15px; font-weight:800;
  line-height:58px; letter-spacing:.5px;
  box-shadow:0 6px 26px rgba(0,0,0,.55), 0 0 26px rgba(245,196,81,.22);
}
.fixed-bar-top::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(245,196,81,.85) 50%, transparent 100%);
  box-shadow:0 0 14px rgba(245,196,81,.75);
}
.fixed-bar-top a{ color:#fff; font-size: 16px;font-weight: 700;letter-spacing: 3px;text-decoration:none; display:block;
  text-shadow:0 0 14px rgba(245,196,81,.55); }
.fixed-bar-bottom{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-width:640px; margin:0 auto;
  background: linear-gradient(135deg, #f2361a 0%, #6b0519 100%);
  color:#fff;
  text-align:center; font-size:16px; font-weight:800;
  line-height:52px; letter-spacing:.5px;
  box-shadow:0 -6px 26px rgba(0,0,0,.6), 0 0 26px rgba(245,196,81,.22);
}
.fixed-bar-bottom::before{
  content:''; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg, transparent 0%, rgba(245,196,81,.85) 50%, transparent 100%);
  box-shadow:0 0 14px rgba(245,196,81,.75);
}
.fixed-bar-bottom a{ color:#fff; font-size: 16px;font-weight: 700;letter-spacing: 3px;text-decoration:none; display:block;
  text-shadow:0 0 14px rgba(245,196,81,.55); }

/* newban 主图 */
.banner-wrap{ padding-top:58px; }
.banner-img{ width:100%; display:block; }

/* Hero 区 */
.hero{
  position:relative; overflow:hidden;
  padding:30px 22px 24px; text-align:center;
}
.hero .halo{
  position:absolute; inset:-30% -20% auto -20%; height:420px;
  background:radial-gradient(closest-side, rgba(245,196,81,.18), transparent 70%);
  filter:blur(8px); pointer-events:none;
}
.hero-svg{ width:180px; height:180px; margin:6px auto 14px; display:block; filter:drop-shadow(0 18px 40px rgba(245,196,81,.22)); }
.hero h1{ margin:0 0 12px; font-size:28px; font-weight:900; letter-spacing:1px; }
.hero h2{ margin:0 auto; max-width:320px; font-size:14px; font-weight:500; color:var(--text-dim); letter-spacing:.5px; }
.hero .cta{ margin-top:20px; }

/* 功能三列 */
.features{ padding:4px 16px 4px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.feature{
  padding:18px 10px; text-align:center;
  background:linear-gradient(180deg,var(--surface-2),var(--surface));
  border:1px solid var(--border); border-radius:var(--radius-sm);
  backdrop-filter:blur(12px);
}
.feature .ico{ width:40px; height:40px; margin:0 auto 10px; }
.feature .t{ font-size:14px; font-weight:700; color:var(--text); }
.feature .s{ font-size:11px; color:var(--text-mut); margin-top:4px; line-height:1.5; }

/* 品牌横幅 */
.band{ margin:20px 16px 0; padding:18px; border-radius:var(--radius);
  background:linear-gradient(135deg, rgba(245,196,81,.12), rgba(91,140,255,.08));
  border:1px solid rgba(245,196,81,.22); text-align:center; }
.band .t{ font-size:15px; font-weight:700; }
.band .s{ font-size:12px; color:var(--text-dim); margin-top:6px; }

/* 页脚（给底部固定条留空间，覆盖 .brand-footer 的默认内边距） */
.page-footer{ padding:20px 16px 68px; }

@media (max-width:360px){
  .features{ gap:8px; }
  .feature{ padding:14px 6px; }
  .hero h1{ font-size:25px; }
  .hero-svg{ width:150px; height:150px; }
}