:root{
    --ink:#1c2246; --ink2:#5a6488; --ink3:#8e96b4;
    --line:#e8ecf7; --card:#ffffff;
    --g1:#003366; --g2:#4f46e5;      /* 主推强调（红橙，赚钱类醒目）*/
    --blue:#5578ff; --blue2:#7c5cff;
    --gold:#ff9f2e;                   /* 收益数字点缀 */
    --ok:#0f9c73;
  }
  *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
  body{
    font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    color:var(--ink); line-height:1.6;
    background:#eef1f8;
  }

  /* 手机竖屏容器 */
  .phone{
    margin:0 auto;
    background:#f5f7fb;min-height:100vh;
    position:relative;padding-bottom:32px;padding: 10px 10px 10px 10px;
  }
.top-banner-img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
    margin: 5px 0;
    background: #eef2f8;
    border: 2px dashed #ccd6e0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 16px;
}
 /* ========== 头部卡片 (全新设计) ========== */
    .wx-hero {
      background: linear-gradient(145deg, #FFFFFF 0%, #F0FBF3 100%);
      border-radius: 28px;
      padding: 28px 28px 24px;
      margin: 24px 0 16px;
      box-shadow: var(--wx-shadow);
      border: 1px solid var(--wx-green-light);
      display: flex;
      align-items: center;
      gap: 28px;
      position: relative;
      overflow: hidden;
    }

    .wx-hero::after {
      content: "";
      position: absolute;
      top: -30px;
      right: -30px;
      width: 160px;
      height: 160px;
      background: radial-gradient(circle, rgba(7,193,96,0.08) 0%, transparent 70%);
      border-radius: 50%;
      pointer-events: none;
    }

    .wx-hero-avatar {
      flex-shrink: 0;
      width: 140px;
      height: 140px;
      border-radius: 24px;
      overflow: hidden;
      border: 3px solid var(--wx-green);
      box-shadow: 0 10px 20px -8px rgba(7, 193, 96, 0.3);
      background: #ffffff;
    }

    .wx-hero-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .wx-hero-text h1 {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.3;
      color: #111;
      margin-bottom: 10px;
    }

    .wx-hero-text h1 em {
      font-style: normal;
      color: var(--g1);
      background: linear-gradient(120deg, var(--g1) 0%, var(--g2) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 800;
    }

    .wx-hero-text p {
      font-size: 15px;
      color: var(--wx-text-soft);
      margin-bottom: 6px;
      line-height: 1.6;
    }

    .wx-hero-text .wx-badge-group {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }

    .wx-hero-text .wx-badge-group span {
      background: var(--wx-green-soft);
      color: var(--wx-green-dark);
      padding: 4px 14px;
      border-radius: 30px;
      font-size: 13px;
      font-weight: 500;
    }

    @media (max-width: 768px) {
      .wx-hero {
        flex-direction: column;
        text-align: center;
        padding: 22px 18px;
        gap: 16px;
        margin: 16px 0 12px;
        border-radius: 24px;
      }
      .wx-hero-avatar {
        width: 120px;
        height: 120px;
      }
      .wx-hero-text h1 {
        font-size: 24px;
      }
      .wx-hero-text p {
        font-size: 14px;
      }
      .wx-hero-text .wx-badge-group {
        justify-content: center;
      }
    }

    @media (max-width: 420px) {
      .wx-hero-avatar {
        width: 100px;
        height: 100px;
      }
      .wx-hero-text h1 {
        font-size: 22px;
      }
    }
  /* 顶栏 */
  .topbar{
    position:sticky;top:0;z-index:20;
    background:rgba(255,255,255,.92);backdrop-filter:blur(8px);
    border-bottom:1px solid var(--line);
    padding:14px 16px;display:flex;align-items:center;gap:10px;
  }
  .topbar .logo{
    width:34px;height:34px;border-radius:10px;flex:0 0 34px;
    background:linear-gradient(135deg,var(--g1),var(--g2));
    display:flex;align-items:center;justify-content:center;
  }
  .topbar .logo svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .topbar .ttl{font-size:17px;font-weight:800;letter-spacing:-.01em;}
  .topbar .sub{font-size:11px;color:var(--ink3);margin-top:-2px;}

  /* 主推横幅 */
  .hero{
    margin:14px 12px 6px;border-radius:18px;overflow:hidden;
    background:linear-gradient(135deg,#ff6a45,#ff3d3d 60%,#e6302a);
    padding:22px 20px;color:#fff;position:relative;
  }
  .hero .badge{
    display:inline-flex;align-items:center;gap:5px;
    font-size:11px;font-weight:600;background:rgba(255,255,255,.22);
    padding:3px 10px;border-radius:999px;margin-bottom:12px;
  }
  .hero .badge svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .hero .h1{font-size:22px;font-weight:800;line-height:1.35;letter-spacing:-.01em;}
  .hero .h2{margin-top:8px;font-size:13px;opacity:.92;}
  .hero .nums{display:flex;gap:24px;margin-top:18px;}
  .hero .nums .n b{font-size:20px;font-weight:800;display:block;line-height:1.2;}
  .hero .nums .n span{font-size:11px;opacity:.85;}
  .hero .cta{
    margin-top:18px;display:inline-flex;align-items:center;gap:8px;
    background:#fff;color:#e6302a;font-size:15px;font-weight:800;
    padding:10px 22px;border-radius:12px;
  }
  .hero .cta svg{width:16px;height:16px;stroke:#e6302a;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  /* 区块标题 */
  .sec{
    display:flex;align-items:center;gap:8px;
    padding:22px 16px 10px;font-size:15px;font-weight:800;
  }
  .sec .bar{width:4px;height:16px;border-radius:2px;background:linear-gradient(var(--g1),var(--g2));}
  .sec .cnt{margin-left:auto;font-size:12px;color:var(--ink3);font-weight:500;}

  /* 应用列表 */
  .list{padding:0 12px;}
  .app{
    background:var(--card);border-radius:16px;
    padding:14px;display:flex;align-items:center;gap:12px;
    margin-bottom:12px;border:1px solid var(--line);
  }
  .app .ic{
    width:54px;height:54px;flex:0 0 54px;border-radius:14px;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:24px;font-weight:800;
    box-shadow:inset 0 -2px 6px rgba(0,0,0,.08);
  }
  .app .info{flex:1;min-width:0;}
  .app .name{font-size:17px;font-weight:700;line-height:1.4;}
  .app .desc{font-size:13px;color:var(--ink2);margin-top:3px;line-height:1.5;}
  .app .tags{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;}
  .app .tag{
    display:inline-block;font-size:11px;font-weight:500;color:#5578ff;
    background:#eef2ff;border:1px solid #dde5ff;border-radius:6px;padding:2px 8px;
  }
  .app .stars{display:inline-flex;align-items:center;gap:1px;vertical-align:-1px;}
  .app .stars svg{width:12px;height:12px;}
  .app .reward{margin-top:3px;font-size:13px;color:var(--ink2);}
  .app .reward b{color:#e6302a;font-weight:800;}
  .app .sell{margin-top:2px;font-size:12px;color:#e6302a;font-weight:600;}
  .app .btn{
    flex:0 0 auto;text-decoration:none;
    background:linear-gradient(135deg,var(--g1),var(--g2));
    color:#fff;font-size:13px;font-weight:700;
    padding:8px 16px;border-radius:10px;white-space:nowrap;
  }
  .app .btn.placeholder{
    background:#fff;color:var(--ink3);border:1px dashed #c4cbe2;
  }

  /* SEO 文案区块 */
  .seo{padding:8px 16px 0;}
  .seo h2{font-size:16px;font-weight:800;margin-top:20px;margin-bottom:6px;}
  .seo p{font-size:13px;color:var(--ink2);line-height:1.8;margin-bottom:4px;}

  footer{padding:24px 16px;text-align:center;font-size:12px;color:var(--ink3);line-height:1.8;}

  @media(min-width:820px){
    .phone{box-shadow:0 0 60px rgba(28,34,70,.12);}
    body{background:#e6eaf5;}
  }