/* ============
       设计系统
       字号比例尺（全站只用这 8 档，避免大小不一）：
       --fs-display 30–48  H1 / 大数字
       --fs-h2      23–32   区块标题
       --fs-h3      18      卡片标题
       --fs-body    16      重点正文
       --fs-text    15      正文
       --fs-small   14      次要正文
       --fs-xs      13      标签 / 注释
       --fs-micro   12      极小标注
       ============ */
    :root {
      --fs-display: clamp(30px, 3.35vw, 48px);
      --fs-h2: clamp(23px, 2.35vw, 32px);
      --fs-h3: 18px;
      --fs-body: 16px;
      --fs-text: 15px;
      --fs-small: 14px;
      --fs-xs: 13px;
      --fs-micro: 12px;

      --ink: #0F1A2B;
      --sub: #55637A;
      --mute: #8E9BB0;
      --g1: #17BE7A;
      --g2: #0EA5A5;
      --grad: linear-gradient(120deg, #22D08A 0%, #17BE7A 44%, #0EA5A5 100%);
      --mint: #D8F7EA;
      --sky: #DCEEFF;
      --lilac: #E9E4FF;
      --amber: #FFF1D6;
      --coral: #FFE3DE;
      --mint-d: #12A66C;
      --sky-d: #2E86E0;
      --lilac-d: #7A5CF0;
      --amber-d: #C87F08;
      --blue2: #3B82F6;
      --line: #E6ECF3;
      --line2: #D3DEEA;
      --paper: #FBFCFF;
      --r: 24px;
      --rs: 18px;
      --sh1: 0 1px 2px rgba(15, 26, 43, .04), 0 14px 34px rgba(15, 26, 43, .06);
      --sh2: 0 4px 10px rgba(15, 26, 43, .06), 0 30px 64px rgba(15, 26, 43, .13);
      --wrap: 1120px;
      --head: 72px;
    }

    /* ============ 基础 ============ */
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 16px; }
    body {
      margin: 0; color: var(--ink); font-size: var(--fs-text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.8; -webkit-font-smoothing: antialiased;
      background-color: var(--paper);
      background-image:
        radial-gradient(720px 520px at 6% -8%, rgba(216, 247, 234, .9), rgba(216, 247, 234, 0) 62%),
        radial-gradient(660px 460px at 94% 0%, rgba(220, 238, 255, .9), rgba(220, 238, 255, 0) 60%);
      background-repeat: no-repeat;
    }
    h1, h2, h3 { margin: 0; line-height: 1.35; font-weight: 700; }
    p { margin: 0; }
    ul, ol { margin: 0; padding: 0; list-style: none; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
    :focus-visible { outline: 2px solid var(--g2); outline-offset: 3px; border-radius: 8px; }
    .wrap { width: min(100% - 40px, var(--wrap)); margin: 0 auto; }
    .num { font-variant-numeric: tabular-nums; }
    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 9px;
      padding: 14px 28px; border-radius: 999px; font-size: var(--fs-body); font-weight: 600;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease;
    }
    .btn-main { color: #fff; background: var(--grad); box-shadow: 0 14px 30px rgba(23, 190, 122, .28); }
    .btn-main:hover { transform: translateY(-2px); box-shadow: 0 20px 42px rgba(23, 190, 122, .36); }

    /* ============ 固定通栏导航 ============ */
    .top { position: static; background: rgba(255, 255, 255, .66); border-bottom: 1px solid var(--line); }
    .top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: var(--head); }
    
    .brand { display: flex; align-items: center; gap: 11px; }
    .brand-logo { display: block; flex: none; width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 8px 18px rgba(15, 26, 43, .18); }
    /* 品牌文字：与 logo 并排，字号/颜色与导航和谐 */
    .brand-text {
      font-size: 17px;
      font-weight: 700;
      letter-spacing: -0.2px;
      color: var(--ink);
      white-space: nowrap;
    }
    .brand-text b {
      background: var(--grad);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      font-weight: 700;
    }

    .top-nav { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--sub); }
    .top-nav a { padding: 8px 14px; border-radius: 999px; transition: background .2s ease, color .2s ease; }
    .top-nav a:hover { color: var(--g1); background: rgba(23, 190, 122, .08); }

    /* ============ Hero ============ */
    .hero { position: relative; overflow: hidden; padding: 56px 0 70px; }
    /* 纯装饰光斑：不参与鼠标命中，避免遮挡下方按钮的点击 */
    .hero::before {
      content: ""; position: absolute; left: -180px; top: -140px; width: 640px; height: 640px; border-radius: 50%; pointer-events: none;
      background: radial-gradient(closest-side, rgba(34, 208, 138, .2), rgba(34, 208, 138, 0) 70%);
    }
    .hero::after {
      content: ""; position: absolute; right: -160px; top: 20px; width: 600px; height: 600px; border-radius: 50%; pointer-events: none;
      background: radial-gradient(closest-side, rgba(59, 130, 246, .16), rgba(59, 130, 246, 0) 70%);
    }
    .hero-grid { position: relative; display: grid; grid-template-columns: 1fr 440px; gap: 56px; align-items: stretch; }
    .hero-copy { display: flex; flex-direction: column; justify-content: space-between; }
    .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; color: var(--g1); }
    .kicker i { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 4px rgba(34, 208, 138, .18); }
    .hero h1 { margin-top: 22px; font-size: var(--fs-display); font-weight: 800; line-height: 1.14; letter-spacing: -1.2px; }
    .hero h1 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .slogan { margin-top: 16px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .16em; color: var(--g2); }
    .hero-lead { margin-top: 16px; max-width: 520px; font-size: var(--fs-body); line-height: 1.9; color: var(--sub); }
    .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
    .hero-date { display: inline-flex; align-items: center; gap: 12px; font-size: var(--fs-xs); color: var(--mute); }
    .hero-date::before { content: ""; width: 1px; height: 14px; background: var(--line2); }
    .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    .chips li {
      display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px;
      font-size: var(--fs-xs); color: var(--sub); background: rgba(255, 255, 255, .8); border: 1px solid var(--line);
    }
    .chips svg { flex: none; }

    /* 图标底色（替代内联样式） */
    .ico-mint { background: var(--mint); }
    .ico-sky { background: var(--sky); }
    .ico-lilac { background: var(--lilac); }
    .ico-amber { background: var(--amber); }
    .ico-coral { background: var(--coral); }

    /* 右侧：软件库面板（普通描边，无斜向渐变描边；空间均匀分布） */
    .store {
      position: relative; display: flex; flex-direction: column; justify-content: space-between;
      height: 100%; padding: 18px 20px; border-radius: 22px; background: #fff;
      border: 1px solid var(--line2); box-shadow: 0 20px 48px rgba(15, 26, 43, .09);
    }
    .store-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
    .store-search {
      flex: 1; display: flex; align-items: center; gap: 9px; height: 36px; padding: 0 14px;
      font-size: var(--fs-xs); color: var(--mute); background: #F5F8FC; border-radius: 999px;
    }
    .store-search svg { flex: none; }
    .store-cat { flex: none; padding: 8px 13px; font-size: var(--fs-xs); font-weight: 600; color: var(--g1); background: rgba(23, 190, 122, .1); border-radius: 999px; }
    .store-tabs { display: flex; gap: 6px; margin-top: 12px; }
    .store-tabs span { padding: 5px 12px; font-size: var(--fs-micro); color: var(--mute); background: #F3F7FB; border-radius: 999px; }
    .store-tabs span.on { color: #fff; background: var(--grad); font-weight: 600; }
    .store-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
    .store-list li {
      display: flex; align-items: center; gap: 10px; padding: 10px 12px;
      background: #FCFDFF; border: 1px solid var(--line); border-radius: 14px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .store-list li:hover { border-color: var(--line2); box-shadow: 0 6px 16px rgba(15, 26, 43, .05); }
    .app-ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; }
    .app-ico svg { width: 16px; height: 16px; }
    .app-meta { min-width: 0; flex: 1; }
    .app-meta b { display: block; font-size: var(--fs-xs); font-weight: 600; }
    .app-meta small { display: block; font-size: var(--fs-micro); color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-btn { flex: none; padding: 5px 10px; font-size: var(--fs-micro); font-weight: 600; color: #fff; background: var(--grad); border-radius: 999px; }
    .app-btn.done { color: var(--mute); background: #F1F4F8; }
    .store-foot { padding: 13px 15px; border-radius: var(--rs); background: #F7FAFD; }
    .store-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--sub); }
    .store-row b { font-weight: 700; color: var(--g1); }
    .store-bar { display: block; height: 7px; margin-top: 9px; border-radius: 999px; background: #E7EEF6; overflow: hidden; }
    .store-bar i { display: block; height: 100%; width: 68%; border-radius: inherit; background: var(--grad); }
    .store-tip { display: flex; align-items: center; gap: 8px; margin-top: 11px; font-size: var(--fs-xs); color: var(--mute); }

    /* 数据模块：四张扁平的紧凑横条卡（图标 + 数字 + 标签，一行排完） */
    .figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
    .figure {
      display: flex; align-items: center; gap: 10px; padding: 12px 14px;
      border-radius: 14px; background: #fff; border: 1px solid var(--line);
      box-shadow: 0 1px 2px rgba(15, 26, 43, .03);
      transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .figure:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: var(--sh1); }
    .figure-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; }
    .figure-ico svg { width: 16px; height: 16px; }
    .figure b { font-size: 22px; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
    .figure b em { font-style: normal; font-size: var(--fs-xs); margin-left: 1px; }
    .figure-label { font-size: var(--fs-xs); color: var(--sub); }
    .fig-mint .figure-ico { background: var(--mint); }
    .fig-sky .figure-ico { background: var(--sky); }
    .fig-lilac .figure-ico { background: var(--lilac); }
    .fig-amber .figure-ico { background: var(--amber); }
    .fig-mint b { color: var(--mint-d); }
    .fig-sky b { color: var(--sky-d); }
    .fig-lilac b { color: var(--lilac-d); }
    .fig-amber b { color: var(--amber-d); }

    /* ============ 区块通用（标题左 / 说明右的双栏排版） ============ */
    .sec { padding: 88px 0; }
    .sec-head {
      display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
      gap: 12px 48px; align-items: end; padding-bottom: 22px; border-bottom: 1px solid var(--line);
    }
    .sec-kicker { display: inline-flex; align-items: center; gap: 8px; grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .14em; color: var(--g2); }
    .sec-kicker::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--grad); }
    .sec-head h2 { grid-column: 1; margin: 0; font-size: var(--fs-h2); letter-spacing: -.5px; }
    .sec-head h2 b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
    .sec-head p { grid-column: 2; margin: 0; font-size: var(--fs-text); color: var(--sub); }

    /* ============ 模块一：效率对照 ============ */
    .versus { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; align-items: stretch; }
    .vs-side { position: relative; display: flex; flex-direction: column; padding: 28px 30px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh1); }
    .vs-side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: var(--r) var(--r) 0 0; }
    .vs-a::before { background: linear-gradient(90deg, #C9D3E0, #AEBACB); }
    .vs-b::before { background: var(--grad); }
    .vs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .vs-head h3 { font-size: var(--fs-h3); }
    .vs-steps { flex: none; padding: 5px 13px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
    .vs-a .vs-steps { color: var(--sub); background: #EEF2F7; }
    .vs-b .vs-steps { color: var(--g1); background: rgba(23, 190, 122, .1); }
    .vs-side ol { flex: 1; margin-top: 18px; margin-bottom: 22px; counter-reset: vs; }
    .vs-side li { counter-increment: vs; padding: 0 0 11px 0; font-size: var(--fs-small); color: var(--sub); }
    .vs-side li:last-child { padding-bottom: 0; }
    .vs-side li::before {
      content: counter(vs, decimal-leading-zero);
      display: inline-block; width: 26px; margin-right: 4px;
      font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
      color: var(--mute);
    }
    .vs-time { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px dashed var(--line2); }
    .vs-time span { flex: none; white-space: nowrap; font-size: var(--fs-xs); color: var(--mute); }
    .vs-time b { flex: none; white-space: nowrap; font-size: var(--fs-h3); font-weight: 700; }
    .vs-a .vs-time b { color: var(--sub); }
    .vs-b .vs-time b { color: var(--g1); }
    .vs-track { display: block; height: 8px; margin-top: 12px; border-radius: 999px; background: #F0F3F8; overflow: hidden; }
    .vs-track i { display: block; height: 100%; border-radius: inherit; width: 0; transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
    .vs-a .vs-track i { background: linear-gradient(90deg, #C9D3E0, #AEBACB); }
    .vs-b .vs-track i { background: var(--grad); }
    .vs-a.in .vs-track i { width: 100%; }
    .vs-b.in .vs-track i { width: 26%; }
    .vs-sum {
      display: block; margin-top: 22px; padding: 18px 24px;
      border-radius: var(--rs); background: rgba(255, 255, 255, .9); border: 1px solid var(--line);
      font-size: var(--fs-small); line-height: 1.9; color: var(--sub);
    }
    .vs-sum b { color: var(--ink); }

    /* ============ 模块二：软件橱窗 ============ */
    .shelf-wrap { margin-top: 44px; }
    .shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
    .app-tile {
      display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 20px;
      background: #fff; border: 1px solid var(--line); box-shadow: var(--sh1);
      transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
    }
    .app-tile:hover { transform: translateY(-6px); border-color: var(--line2); box-shadow: var(--sh2); }
    .app-tile .app-ico { width: 44px; height: 44px; border-radius: 15px; }
    .app-tile b { display: block; font-size: var(--fs-text); font-weight: 600; }
    .app-tile small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--mute); }
    .cat-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
    .cat-chips li {
      padding: 9px 16px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; color: var(--sub);
      background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 16px rgba(15, 26, 43, .04);
      transition: transform .2s ease, color .2s ease, border-color .2s ease;
    }
    .cat-chips li:hover { transform: translateY(-3px); color: var(--g1); border-color: var(--line2); }

    /* ============ 模块三：电脑体检报告 ============ */
    .report { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 22px; margin-top: 44px; }
    .report-card {
      display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
      padding: 30px 26px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh1);
    }
    .ring { position: relative; width: 166px; height: 166px; }
    .ring svg { transform: rotate(-90deg); }
    .ring-bg { fill: none; stroke: #EEF3F8; stroke-width: 12; }
    .ring-fg { fill: none; stroke: url(#ringGrad); stroke-width: 12; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 26; }
    .js .report.in .ring-fg { animation: ringfill 1.5s cubic-bezier(.2, .8, .2, 1) both; }
    @keyframes ringfill { from { stroke-dashoffset: 327; } to { stroke-dashoffset: 26; } }
    .ring-val { position: absolute; inset: 0; display: grid; place-content: center; }
    .ring-val b { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
    .ring-val span { display: block; margin-top: 5px; font-size: var(--fs-xs); color: var(--mute); }
    .report-card > p { margin-top: 16px; font-size: var(--fs-xs); color: var(--sub); }
    .report-list { display: grid; gap: 12px; }
    .check-item {
      display: flex; align-items: center; gap: 16px; padding: 18px 22px; border-radius: 20px;
      background: #fff; border: 1px solid var(--line); box-shadow: var(--sh1);
      transition: transform .22s ease, box-shadow .22s ease;
    }
    .check-item:hover { transform: translateX(4px); box-shadow: var(--sh2); }
    .check-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; }
    .check-body { min-width: 0; flex: 1; }
    .check-body b { display: block; font-size: var(--fs-text); font-weight: 600; }
    .check-body small { display: block; margin-top: 3px; font-size: var(--fs-xs); color: var(--sub); }
    .check-state { flex: none; padding: 5px 12px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 700; }
    .st-ok { color: var(--mint-d); background: rgba(18, 166, 108, .1); }
    .st-fix { color: var(--amber-d); background: rgba(200, 127, 8, .12); }
    .st-info { color: var(--sky-d); background: rgba(46, 134, 224, .1); }

    /* ============ 模块四：能力轨道 ============ */
    .rail-wrap { position: relative; margin-top: 44px; }
    .rail { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 16px; scrollbar-width: none; }
    .rail::-webkit-scrollbar { display: none; }
    .rail-card {
      position: relative; overflow: hidden; flex: 0 0 min(330px, 76vw); scroll-snap-align: start;
      padding: 26px 24px 24px; border-radius: var(--r); background: #fff; border: 1px solid var(--line); box-shadow: var(--sh1);
      transition: transform .26s ease, box-shadow .26s ease;
    }
    .rail-card:hover { transform: translateY(-6px); box-shadow: var(--sh2); }
    .rail-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; }
    .rail-card.r1::before { background: linear-gradient(90deg, #22D08A, #12A66C); }
    .rail-card.r2::before { background: linear-gradient(90deg, #6FB6FF, #2E86E0); }
    .rail-card.r3::before { background: linear-gradient(90deg, #A98CFF, #7A5CF0); }
    .rail-card.r4::before { background: linear-gradient(90deg, #FFC24D, #C87F08); }
    .rail-card.r5::before { background: linear-gradient(90deg, #FF8E86, #E8615A); }
    .rail-card.r6::before { background: linear-gradient(90deg, #4FD9D9, #0EA5A5); }
    .rail-no { position: absolute; right: 22px; top: 18px; font-size: 38px; font-weight: 800; letter-spacing: -2px; color: rgba(15, 26, 43, .06); }
    .rail-card h3 { margin-top: 16px; font-size: var(--fs-h3); }
    .rail-card p { margin-top: 10px; font-size: var(--fs-small); color: var(--sub); }
    .rail-tag { display: inline-block; margin-top: 16px; padding: 4px 12px; font-size: var(--fs-xs); font-weight: 600; border-radius: 999px; color: var(--g1); background: rgba(23, 190, 122, .1); }
    .rail-btns { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
    .rail-btn {
      display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
      background: #fff; border: 1px solid var(--line2); box-shadow: var(--sh1); font-size: 17px; color: var(--g1);
      transition: transform .2s ease, background .2s ease, color .2s ease;
    }
    .rail-btn:hover { transform: translateY(-2px); background: var(--grad); color: #fff; border-color: transparent; }

    /* ============ 模块五：常见问答 ============ */
    .qa-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 44px; align-items: start; }
    .qa-card {
      position: relative; padding: 26px 26px 24px 26px; border-radius: var(--r);
      background: #fff; border: 1px solid var(--line); box-shadow: var(--sh1);
      transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    }
    .qa-card:hover { transform: translateY(-5px); box-shadow: var(--sh2); border-color: var(--line2); }
    .qa-card::before { content: ""; position: absolute; left: 26px; right: 26px; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
    .qa-card:hover::before { transform: scaleX(1); }
    .qa-no {
      display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 9px;
      font-size: var(--fs-xs); font-weight: 700; color: var(--g1); background: rgba(23, 190, 122, .1); border-radius: 10px;
    }
    .qa-card h3 { margin-top: 14px; font-size: var(--fs-h3); }
    .qa-card p { margin-top: 10px; font-size: var(--fs-small); color: var(--sub); }

    /* ============ 模块六：下载区 ============ */
    .cta { position: relative; padding: 0 0 92px; }
    .cta-inner {
      position: relative; overflow: hidden; display: grid; grid-template-columns: 1.24fr .76fr; gap: 40px; align-items: center;
      padding: 50px 52px; border-radius: 30px;
      background: linear-gradient(120deg, #FFFFFF 0%, #F4FBF8 46%, #EEF6FF 100%);
      border: 1px solid var(--line); box-shadow: 0 34px 74px rgba(15, 26, 43, .1);
    }
    .cta-inner::before { content: ""; position: absolute; right: -110px; bottom: -140px; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(34, 208, 138, .24), rgba(34, 208, 138, 0) 70%); }
    .cta-inner::after { content: ""; position: absolute; right: 120px; top: -150px; width: 380px; height: 380px; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(122, 92, 240, .16), rgba(122, 92, 240, 0) 70%); }
    .cta-main { position: relative; }
    .cta-main h2 { font-size: var(--fs-h2); letter-spacing: -.5px; }
    .cta-main p { margin-top: 14px; max-width: 520px; font-size: var(--fs-text); color: var(--sub); }
    .cta-files { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
    .cta-files li { padding: 9px 15px; font-size: var(--fs-xs); font-weight: 600; color: var(--sub); background: rgba(255, 255, 255, .92); border: 1px solid var(--line); border-radius: 999px; }
    .cta-side { position: relative; text-align: center; }
    .cta-side .btn { width: 100%; }
    .cta-side small { display: block; margin-top: 14px; font-size: var(--fs-xs); line-height: 1.7; color: var(--mute); }

    /* ============ 页脚 ============ */
    .foot { padding: 30px 0 44px; border-top: 1px solid var(--line); }
    .foot .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
    .foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: var(--fs-small); color: var(--sub); }
    .foot-links a:hover { color: var(--g1); }
    .foot-copy { font-size: var(--fs-xs); color: var(--mute); }

    /* ============ 渐显（仅在有 JS 时隐藏） ============ */
    .js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
    .js .reveal.in { opacity: 1; transform: none; }

    /* ============ 响应式 ============ */
    @media (max-width: 1024px) {
      .hero-grid { grid-template-columns: 1fr; gap: 44px; }
      .store { max-width: 460px; height: auto; }
      .report { grid-template-columns: 1fr; }
    }
    @media (max-width: 900px) {
      .hero { padding-top: 36px; padding-bottom: 54px; }
      .sec-head { grid-template-columns: 1fr; gap: 10px; align-items: start; }
      .sec-head h2, .sec-head p { grid-column: 1; }
      .figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .versus { grid-template-columns: 1fr; }
      .shelf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .cta-inner { grid-template-columns: 1fr; padding: 40px 32px; }
      .sec { padding: 70px 0; }
    }
    @media (max-width: 720px) {
      .top-nav a { display: none; }
      .brand-text { font-size: 15px; }

      .hero-lead { font-size: var(--fs-text); }
      .store { padding: 18px; }
      .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .qa-grid { grid-template-columns: 1fr; }
      .figure b { font-size: 20px; }
      .vs-side { padding: 24px 22px; }
      .report-card { padding: 26px 22px; }
      .ring { width: 148px; height: 148px; }
      .rail-btns { justify-content: center; }
      .cta-inner { padding: 30px 22px; border-radius: 24px; }
      .sec { padding: 56px 0; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      .js .reveal, .js .reveal.in { opacity: 1; transform: none; transition: none; }
      .js .report.in .ring-fg { animation: none; }
      .vs-track i { transition: none; }
      .shelf, .app-tile, .rail-card, .check-item, .qa-card, .btn { transition: none; }
    }