/* =====================================================================
   众声官网 — 样式
   设计稿：Figma「IM聊天软件推广官网」PC 1920 / 内容 1240，H5 375（@2x）
   ===================================================================== */
:root {
    --blue: #008bff;
    --blue-ink: #0c7afa;
    --ios-blue: #007aff;
    --text: #333;
    --text-2: #666;
    --text-3: #828282;
    --page: #f6f9fe;
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    /* PC 插画缩放系数：窄屏时整体等比缩小 */
    --s: 1;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: var(--text);
    background: var(--page);
    overflow-x: hidden;
}
img { display: block; max-width: none; -webkit-user-drag: none; user-select: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.num, .stat-num { font-family: Inter, 'SF Pro Display', -apple-system, 'Helvetica Neue', Arial, sans-serif; font-variant-numeric: tabular-nums; }

.pc-only { display: block; }
.mobile-only { display: none; }

.container { width: min(1240px, calc(100% - 80px)); margin: 0 auto; }

/* 按压反馈：所有可点击元素 */
.pressable { transition: transform 160ms var(--ease-out), box-shadow 200ms ease, background-color 200ms ease; }
.pressable:active { transform: scale(0.97); }

.section-title { font-size: 32px; line-height: 45px; font-weight: 600; color: var(--text); }
.section-desc { font-size: 18px; line-height: 25px; color: var(--text-2); }

/* ==================== 导航 ==================== */
.site-header {
    position: fixed; inset: 0 0 auto 0; z-index: 100; height: 64px;
    transition: background-color 240ms ease, box-shadow 240ms ease;
}
.site-header::before {
    /* 滚动后出现的毛玻璃底：单独一层做 opacity 过渡，避免 backdrop-filter 闪烁 */
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: 0 1px 0 rgba(0, 122, 255, 0.06);
    transition: opacity 240ms ease;
}
.site-header.scrolled::before { opacity: 1; }
.header-inner { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.header-logo img { height: 40px; width: auto; }
.header-nav { display: flex; align-items: center; gap: 40px; font-size: 14px; line-height: 20px; letter-spacing: -0.2px; }
.nav-link { color: var(--text); transition: color 200ms ease; }
.nav-btn {
    display: inline-flex; align-items: center; height: 32px; padding: 0 15px; border-radius: 20px;
    background: var(--blue); color: #fff; box-shadow: 0 4px 8px rgba(10, 102, 255, 0.25);
}
.nav-announcement {
    background: #fff; color: var(--blue-ink); border: 1px solid rgba(0, 139, 255, 0.25);
    box-shadow: none;
}

/* ==================== 首屏 ==================== */
.hero { position: relative; height: 640px; }
.hero-bg {
    position: absolute; inset: 0;
    background: url(/static/img/top-banner/banner-bg.webp) center top / cover no-repeat;
}
.hero-inner { position: relative; height: 100%; }
.hero-copy { position: relative; z-index: 2; padding-top: 147px; width: 576px; }
.hero-badge {
    display: inline-flex; align-items: center; height: 28px; padding: 0 20px; border-radius: 18px;
    background: #e7f3fe; border: 1px solid #d8eafd; color: var(--blue-ink); font-size: 12px; line-height: 17px;
}
.hero-title { margin-top: 10px; font-size: 48px; line-height: 67px; font-weight: 600; letter-spacing: 0; }
.hero-summary { margin-top: 10px; width: 468px; font-size: 18px; line-height: 25px; color: var(--text-2); }
/* 首屏下载按钮：箭头互换 + 圆形扩散（改编自 Uiverse.io by ryota1231，配色换成品牌蓝） */
.hero-btn {
    position: relative; overflow: hidden; isolation: isolate;
    margin-top: 30px; display: inline-flex; align-items: center; height: 46px; padding: 0 36px; border-radius: 100px;
    background: var(--blue); color: #fff; font-size: 16px; line-height: 22px; font-weight: 500;
    box-shadow: 0 0 0 2px rgba(0, 139, 255, 0.22), 0 6px 20px rgba(0, 139, 255, 0.25);
    transition: border-radius 600ms var(--ease-out), box-shadow 600ms var(--ease-out), scale 160ms var(--ease-out);
}
.hb-arr {
    position: absolute; top: 50%; width: 20px; height: 20px; margin-top: -10px; z-index: 2; fill: #fff;
    transition: left 800ms var(--ease-out), right 800ms var(--ease-out);
}
.hb-arr-1 { right: 14px; }
.hb-arr-2 { left: -25%; }
.hb-text { position: relative; z-index: 1; transform: translateX(-12px); transition: transform 800ms var(--ease-out); }
.hb-circle {
    position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; border-radius: 50%;
    background: #0a6fdc; opacity: 0; transform: translate(-50%, -50%);
    transition: width 800ms var(--ease-out), height 800ms var(--ease-out), opacity 800ms var(--ease-out);
}
.hero-btn:active { scale: 0.95; box-shadow: 0 0 0 4px rgba(0, 139, 255, 0.3), 0 4px 12px rgba(0, 139, 255, 0.25); }

.stats { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.stat-num { font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: 0.4px; color: var(--blue); white-space: nowrap; }
.stat-label { font-size: 14px; line-height: 20px; letter-spacing: -0.2px; color: var(--text-2); }
.stat-divider { width: 1px; height: 48px; background: rgba(0, 122, 255, 0.1); }

/* ---------- 首屏插画（611×470，坐标取自 Figma 分层） ---------- */
.stage-wrap {
    position: absolute; z-index: 1;
    right: calc(87px * var(--s)); top: calc(82px * var(--s) + (1 - var(--s)) * 120px);
    width: calc(611px * var(--s)); height: calc(470px * var(--s));
}
.stage {
    position: absolute; left: 0; top: 0; width: 611px; height: 470px;
    transform: scale(var(--s)); transform-origin: 0 0;
}
.stage .layer, .stage .float, .orbit-ball { position: absolute; will-change: transform; }
.stage-glow {
    position: absolute; left: 116px; top: 420px; width: 384px; height: 61px; border-radius: 50%;
    background: #b3d3f9; filter: blur(23px);
}
.l-earth { left: 100px; top: 118px; width: 245px; height: 245px; }
.l-earth-fade { opacity: 0.6; }
.l-base  { left: 107px; top: 386px; width: 397px; height: 84px; }
.l-phone { left: 207px; top: 7px;   width: 235px; height: 431px; }
.l-track { left: 30px;  top: 178px; width: 526px; height: 219px; pointer-events: none; }
/* 光带沿椭圆长轴一分为二：后半圈在手机后，前半圈压在手机上（互补裁切，避免重叠处发光叠加）。
   长轴由 track 切图像素拟合：中心 (274.3, 104.2)，半轴 248.1 × 64.1，倾角 -13.32°，两端点 (32.9,161.3) / (515.7,47.1) */
.l-track-back  { clip-path: polygon(0 0, 526px 0, 526px 44.7px, 0 169.1px); }
.l-track-front { clip-path: polygon(0 169.1px, 526px 44.7px, 526px 219px, 0 219px); }
.orbit-ball { left: 0; top: 0; width: 47px; height: 46px; margin: -23px 0 0 -23.5px; transform: translate(546px, 226px); }
.orbit-ball img { width: 100%; height: 100%; }
.orbit-back { opacity: 0; }

.f-ball1 { left: 144px; top: 41px;  width: 41px; height: 41px; }
.f-ball2 { left: 45px;  top: 388px; width: 38px; height: 38px; }
.f-logo  { left: 490px; top: 13px;  width: 82px; height: 82px; }
/* 带投影的切图四周各留 ~50px 阴影余量 */
.f-pdf   { left: 34.5px; top: 114.25px; width: 247px; height: 157.5px; }
.f-other { left: 51.25px; top: 179px;   width: 322.5px; height: 166px; }
.f-own   { left: 396px; top: 109px; width: 189px; height: 79px; }
.f-voice { left: 422px; top: 232px; width: 170px; height: 80px; }
.f-pic   { left: 439px; top: 326px; width: 69px;  height: 70px; }

/* ==================== 5 大特性 ==================== */
.five { position: relative; z-index: 3; margin-top: -54px; padding-bottom: 44px; }
.five-card {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 38px;
    padding: 30px; border-radius: 24px;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: 0 8px 20px rgba(199, 226, 254, 0.2);
}
.five-intro { flex: 0 0 256px; }
.five-intro .section-desc { margin-top: 24px; }
.five-arrow { margin-top: 24px; width: 34px; height: 10px; transition: transform 240ms var(--ease-out); }
.five-card:hover .five-arrow { transform: translateX(6px); }
.five-list { display: flex; gap: 16px; }
.five-item {
    width: 160px; height: 213px; padding: 26px 16px; border-radius: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
    background: linear-gradient(180deg, #fff 0%, #f6fafe 100%);
    border: 1px solid rgba(0, 122, 255, 0.1);
    transition: transform 240ms var(--ease-out), box-shadow 240ms ease, border-color 240ms ease;
}
.five-item img { width: 64px; height: 64px; transition: transform 320ms var(--ease-out); }
.five-name { font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.4px; }
.five-desc { font-size: 12px; line-height: 17px; color: var(--text-2); }

/* ==================== 强大功能 ==================== */
.power { background: #fefefe; }
.power-inner { position: relative; display: flex; justify-content: space-between; height: 476px; }
.power-copy { padding-top: 75px; }
.power-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 260px); gap: 12px; }
.power-item {
    display: flex; align-items: center; gap: 10px; height: 84px; padding: 12px; border-radius: 16px;
    transition: transform 240ms var(--ease-out), box-shadow 240ms ease;
}
.power-item img { width: 60px; height: 60px; flex: none; transition: transform 320ms var(--ease-out); }
.power-name { font-size: 20px; line-height: 28px; font-weight: 500; }
.power-desc { font-size: 12px; line-height: 17px; color: var(--text-2); }
.pi-yellow { background: linear-gradient(90deg, #fff9e6, #fffae9); }
.pi-blue   { background: linear-gradient(90deg, #ecf1ff, #f2f5ff); }
.pi-green  { background: linear-gradient(90deg, #e4f7f0, #e2fef8); }
.pi-purple { background: linear-gradient(90deg, #eaebfd, #f8f1f8); }
.pi-orange { background: linear-gradient(90deg, #fff1e6, #fff8f2); }
.pi-red    { background: linear-gradient(90deg, #ffe6e6, #fff2f2); }

.power-art-wrap {
    position: relative; flex: none; margin-top: 9px;
    width: calc(415px * var(--s)); height: calc(415px * var(--s));
}
/* 473 画板 → 设计稿中缩放到 415 */
.power-art {
    position: absolute; left: 0; top: 0; width: 473px; height: 473px;
    transform: scale(calc(0.8774 * var(--s))); transform-origin: 0 0;
}
.pa { position: absolute; will-change: transform; }
.pa-bg   { left: -5px;  top: 78px;  width: 473px; height: 336px; z-index: 0; }
.pa-coin { left: 326px; top: 339px; width: 63px;  height: 59px;  z-index: 1; }
.pa-air2 { left: 191px; top: 52px;  width: 73px;  height: 56px;  z-index: 2; }
.pa-air1 { left: 261px; top: 33px;  width: 101px; height: 101px; z-index: 3; }
.pa-pic1 { left: 24px;  top: 105px; width: 263px; height: 228px; z-index: 4; }
.pa-pic2 { left: 50px;  top: 169px; width: 405px; height: 256px; z-index: 5; }

/* ==================== 聊天之外 + 下载 ==================== */
.more {
    /* 底部 113px：设计稿「不带footer」版本中，下载卡片下方留白 + 雪山背景铺到页面底部。
       恢复页脚时改回 33px（原设计稿里下面紧接 80px 高的页脚） */
    position: relative; isolation: isolate; overflow: hidden; padding: 40px 0 113px;
    background-color: #f7f9ff;
}
/* 背景图单独放一层并整体上移 16px：Figma 导出的切图顶部自带一条约 10px 的灰色阴影，
   上移后被 overflow 裁掉，重新导出替换图片也不会再露出来 */
.more::before {
    content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: -16px; bottom: 0;
    background: url(/static/img/download/bg.webp?v=3) center top / cover no-repeat;
}
.more-inner { display: flex; align-items: center; gap: 102px; }
.more-art {
    position: relative; flex: none;
    width: calc(470px * var(--s)); height: calc(436px * var(--s));
}
.more-art .ma { position: absolute; will-change: transform; }
/* 坐标取自 Figma「3」分层，统一乘以 --s */
.ma-sl    { left: calc(10px * var(--s));  top: calc(58px * var(--s));  width: calc(267px * var(--s)); rotate: -0.4deg; }
.ma-sr    { left: calc(275px * var(--s)); top: calc(63px * var(--s));  width: calc(183px * var(--s)); rotate: 0.7deg; }
.ma-phone { left: calc(129px * var(--s)); top: calc(4px * var(--s));   width: calc(214px * var(--s)); }
.ma-hb    { left: calc(25px * var(--s));  top: calc(225px * var(--s)); width: calc(160px * var(--s)); }
.ma-usdt  { left: calc(265px * var(--s)); top: calc(320px * var(--s)); width: calc(93px * var(--s)); }
.ma-zz2   { left: calc(34px * var(--s));  top: calc(57px * var(--s));  width: calc(134px * var(--s)); rotate: -0.3deg; }
.ma-zz1   { left: calc(287px * var(--s)); top: calc(153px * var(--s)); width: calc(142px * var(--s)); }
.ma-c4    { left: calc(388px * var(--s)); top: calc(102px * var(--s)); width: calc(26px * var(--s)); }
.ma-c3    { left: calc(99px * var(--s));  top: calc(184px * var(--s)); width: calc(35px * var(--s)); rotate: -1.1deg; }
.ma-c1    { left: calc(360px * var(--s)); top: calc(311px * var(--s)); width: calc(45px * var(--s)); }
.ma-c2    { left: calc(350px * var(--s)); top: calc(70px * var(--s));  width: calc(33px * var(--s)); }

.more-copy { flex: 1; min-width: 0; }
.more-copy .section-desc { margin-top: 12px; }
.more-points { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 20px 68px; }
.more-point { display: flex; align-items: center; gap: 10px; }
.more-point img { width: 44px; height: 44px; flex: none; }
.mp-name { font-size: 16px; line-height: 22px; font-weight: 600; }
.mp-desc { font-size: 12px; line-height: 17px; color: var(--text-2); }

.download-card {
    position: relative; margin-top: 40px; min-height: 200px; padding: 20px 36px;
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    border-radius: 24px; border: 1px solid #fff;
    background: rgba(218, 240, 255, 0.67);
    -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
    scroll-margin-top: 120px;
}
.dl-brand { display: flex; align-items: center; gap: 20px; flex: none; }
.dl-logo { width: 100px; height: 100px; }
.dl-title { font-size: 32px; line-height: 40px; font-weight: 700; }
.dl-title span { color: var(--blue); }
.dl-sub { font-size: 16px; line-height: 28px; color: var(--text-2); }
.platforms { display: flex; gap: 16px; }
.platform {
    position: relative; display: flex; align-items: center; gap: 10px; width: 128px; height: 62px; padding: 0 10px;
    border-radius: 8px; background: #fefefe; text-align: left;
}
.p-ic { font-size: 24px; width: 24px; line-height: 1; flex: none; text-align: center; }
.p-ios { color: #000; } .p-android { color: #3ddc84; } .p-win { color: #0078d4; } .p-mac { color: #f6a623; }
.p-text { display: flex; flex-direction: column; }
.p-text b { font-size: 12px; line-height: 17px; font-weight: 600; color: #041427; }
.p-text small { font-size: 10px; line-height: 14px; letter-spacing: 0.1px; color: var(--text-2); white-space: nowrap; }
/* 桌面端未上线：去色 + 弱化，保留可点击以弹出提示 */
.platform.is-soon { cursor: default; }
.platform.is-soon .p-ic { filter: grayscale(1); opacity: 0.45; }
.platform.is-soon .p-text b { color: #8a94a3; }
.platform.is-soon .p-text small { color: #a5adb8; }
.platform.is-soon:active { transform: scale(0.99); }

/* 扫码浮层：从按钮方向缩放弹出（origin-aware） */
.qr-pop {
    position: absolute; left: 50%; bottom: calc(100% + 8px); width: 128px; height: 128px; padding: 8px;
    border-radius: 8px; background: #fefefe; box-shadow: 0 0 14px rgba(113, 165, 221, 0.25);
    opacity: 0; pointer-events: none;
    transform: translateX(-50%) translateY(4px) scale(0.96); transform-origin: 50% 100%;
    transition: opacity 160ms ease-out, transform 200ms var(--ease-out);
}
.qr-pop::after {
    content: ''; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px;
    background: #fefefe; transform: rotate(45deg); border-radius: 2px;
}
.platform.qr-open .qr-pop { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.qr-box, .dl-qr-box { display: block; width: 100%; height: 100%; }
.qr-box img, .qr-box canvas, .dl-qr-box img, .dl-qr-box canvas { width: 100% !important; height: 100% !important; display: block; }
.dl-qr { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; font-size: 16px; line-height: 28px; color: var(--text-2); }
.dl-qr-box { width: 130px; height: 130px; padding: 13px; border-radius: 8px; background: #fff; }

/* ==================== 页脚 ==================== */
.site-footer { background: #151f2c; color: #fff; }
.footer-inner { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 40px; height: 40px; }
.footer-brand b { font-size: 24px; line-height: 34px; font-weight: 500; letter-spacing: -0.4px; }
.footer-brand span { font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.6); }
.footer-legal { display: flex; align-items: center; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, 0.85); }
.footer-legal span + span::before { content: ''; display: inline-block; width: 1px; height: 12px; margin: 0 20px; background: rgba(255, 255, 255, 0.2); vertical-align: -1px; }

/* ==================== Hover（仅精确指针设备） ==================== */
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover { color: var(--blue); }
    .nav-btn:hover { background: #0a80f0; }
    .nav-announcement:hover { background: #eaf5ff; }
    .hero-btn:hover { border-radius: 12px; box-shadow: 0 0 0 12px rgba(0, 139, 255, 0), 0 8px 24px rgba(0, 139, 255, 0.3); }
    .hero-btn:hover .hb-arr-1 { right: -25%; }
    .hero-btn:hover .hb-arr-2 { left: 14px; }
    .hero-btn:hover .hb-text { transform: translateX(12px); }
    .hero-btn:hover .hb-circle { width: 220px; height: 220px; opacity: 1; }
    .five-item:hover { transform: translateY(-4px); border-color: rgba(0, 122, 255, 0.18); box-shadow: 0 12px 28px rgba(0, 101, 214, 0.08); }
    .five-item:hover img { transform: scale(1.06); }
    .power-item:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 60, 140, 0.06); }
    .power-item:hover img { transform: scale(1.05) rotate(-3deg); }
    .platform:not(.is-soon):hover { box-shadow: 0 6px 16px rgba(0, 101, 214, 0.1); }
    .platform.has-qr:hover .qr-pop { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ==================== PC 窄屏适配 ==================== */
@media (max-width: 1279px) and (min-width: 768px) {
    :root { --s: 0.82; }
    .container { width: calc(100% - 48px); }
    .hero-copy { width: 52%; }
    .hero-summary { width: auto; max-width: 468px; }
    .hero-title { font-size: 40px; line-height: 56px; }
    .five-card { flex-direction: column; gap: 24px; }
    .five-intro { flex-basis: auto; }
    .five-intro .section-title br { display: none; }
    .five-arrow { display: none; }
    .five-list { width: 100%; }
    .five-item { flex: 1; width: auto; height: auto; min-height: 213px; }
    .power-grid { grid-template-columns: repeat(2, minmax(0, 260px)); }
    .power-inner { height: auto; padding-bottom: 40px; align-items: center; }
    .more-inner { gap: 40px; }
    .download-card { flex-wrap: wrap; justify-content: center; padding: 28px; }
}
@media (max-width: 1023px) and (min-width: 768px) {
    :root { --s: 0.66; }
    .hero-title { font-size: 34px; line-height: 48px; }
    .platforms { flex-wrap: wrap; justify-content: center; }
    .power-art-wrap { display: none; }
    .power-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .power-copy { width: 100%; }
    .footer-inner { flex-direction: column; justify-content: center; height: auto; padding: 20px 0; }
}

/* =====================================================================
   H5（< 768px）：1rem = 设计稿 100px（375 基准）
   ===================================================================== */
@media (max-width: 767px) {
    html { font-size: calc(min(100vw, 540px) / 3.75); }
    body { background: #f5f9fe; }
    .pc-only { display: none; }
    .mobile-only { display: block; }

    .m-page { position: relative; max-width: 3.75rem; margin: 0 auto; overflow: hidden; font-size: .14rem; }
    .m-bg {
        position: absolute; left: 0; top: 0; width: 100%; height: 7.21rem;
        background: url(/static/img/top-banner/banner-bg-h5.webp) center top / 100% auto no-repeat;
    }
    .m-hero { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: .23rem; }
    .m-announcement {
        position: absolute; top: .27rem; right: .16rem; z-index: 3;
        display: inline-flex; align-items: center; justify-content: center;
        min-height: .32rem; padding: 0 .11rem; border: 1px solid rgba(0, 139, 255, 0.25);
        border-radius: .18rem; background: rgba(255, 255, 255, 0.9);
        color: var(--blue-ink); font-size: .12rem; font-weight: 500;
    }
    .m-logo { height: .40rem; width: auto; }
    .m-badge {
        margin-top: .09rem; padding: .045rem .08rem; border-radius: 1rem;
        background: rgba(0, 122, 255, 0.1); color: var(--ios-blue); font-size: .11rem; line-height: .155rem;
    }
    .m-title { margin-top: .11rem; font-size: .23rem; line-height: .32rem; font-weight: 600; letter-spacing: -.0065rem; }
    .m-summary { margin-top: .05rem; width: 2.84rem; font-size: .12rem; line-height: .17rem; color: var(--text-3); }

    .m-stage-wrap { position: relative; margin-top: .14rem; width: 3.75rem; height: 2.88rem; }
    .stage-m { transform: scale(var(--ms, 0.6137)); }

    .m-btn {
        position: relative; margin-top: .41rem; display: inline-flex; align-items: center; justify-content: center; gap: .02rem;
        width: 1.40rem; height: .44rem; border-radius: .38rem; background: var(--blue); color: #fff;
        font-size: .15rem; line-height: .21rem; font-weight: 500;
        box-shadow: 0 .075rem .115rem -.025rem rgba(7, 142, 255, 0.25), inset 0 .035rem .05rem rgba(255, 255, 255, 0.25);
        -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; touch-action: manipulation;
    }
    .m-btn .iconfont { font-size: .20rem; line-height: 1; }
    /* 无 GSAP 时的兜底按压反馈（有 GSAP 时由 motion.js 接管，带回弹） */
    .m-btn { transition: transform 160ms var(--ease-out); }
    .m-btn:active { transform: scale(0.95); }

    .m-stats { margin-top: .22rem; gap: .10rem; text-align: left; }
    .m-stats .stat-num { font-size: .18rem; line-height: .22rem; letter-spacing: 0; color: var(--text); }
    .m-stats .stat-label { font-size: .09rem; line-height: .12rem; letter-spacing: 0; }
    .m-stats .stat-divider { height: .285rem; }

    .m-hint { margin: .40rem auto 0; display: flex; flex-direction: column; align-items: center; gap: .05rem; font-size: .14rem; line-height: .195rem; font-weight: 500; color: var(--text); }
    .m-hint-arrow { width: .24rem; height: .24rem; }

    .m-guide { margin-top: .35rem; padding-bottom: .36rem; display: flex; flex-direction: column; gap: .30rem; scroll-margin-top: .2rem; }
    .m-guide img { width: 100%; height: auto; }

    .m-five { margin-top: .40rem; padding: 0 .22rem; text-align: center; }
    .m-section-title { font-size: .23rem; line-height: .32rem; font-weight: 600; }
    .m-section-desc { margin-top: .05rem; font-size: .12rem; line-height: .17rem; color: var(--text-2); }
    .m-five-list { margin-top: .30rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .10rem .08rem; }
    .m-five-item {
        width: 1.05rem; min-height: 1.30rem; padding: .13rem .08rem; border-radius: .08rem;
        display: flex; flex-direction: column; align-items: center; gap: .06rem;
        background: linear-gradient(180deg, #fff 0%, #f6fafe 100%); border: 1px solid rgba(0, 122, 255, 0.1);
    }
    .m-five-item img { width: .32rem; height: .32rem; }
    .m-five-item b { font-size: .12rem; line-height: .17rem; font-weight: 500; }
    .m-five-item span { font-size: .09rem; line-height: .125rem; color: var(--text-2); }

    /* 强大功能（H5）：插画 + 两列功能卡 */
    .m-power { margin-top: .44rem; padding: 0 .16rem; text-align: center; }
    .m-power-art-wrap { position: relative; width: 2.60rem; height: 2.38rem; margin: .04rem auto 0; }
    .m-power-art-wrap .power-art { transform: scale(var(--ms, 0.5497)); }
    .m-power-grid { margin-top: .04rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .08rem; text-align: left; }
    .m-power-item { display: flex; align-items: center; gap: .08rem; min-height: .60rem; padding: .10rem; border-radius: .12rem; }
    .m-power-item img { width: .40rem; height: .40rem; flex: none; }
    .m-power-item b { display: block; font-size: .13rem; line-height: .18rem; font-weight: 500; }
    .m-power-item span { display: block; margin-top: .02rem; font-size: .09rem; line-height: .125rem; color: var(--text-2); }

    /* 聊天之外（H5）：插画 + 三个卖点 */
    .m-more { margin-top: .44rem; padding: 0 .16rem; text-align: center; }
    .m-more-art-wrap { display: flex; justify-content: center; margin-top: .14rem; }
    .m-more-points { margin-top: .16rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .08rem; }
    .m-more-point {
        display: flex; flex-direction: column; align-items: center; gap: .04rem; padding: .12rem .04rem;
        border-radius: .12rem; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(0, 122, 255, 0.08);
    }
    .m-more-point img { width: .36rem; height: .36rem; margin-bottom: .02rem; }
    .m-more-point b { font-size: .12rem; line-height: .17rem; font-weight: 600; white-space: nowrap; }
    .m-more-point span { font-size: .09rem; line-height: .125rem; color: var(--text-2); }

    .m-footer {
        display: flex; flex-wrap: wrap; justify-content: center; gap: .04rem .16rem;
        padding: .12rem .16rem calc(.12rem + env(safe-area-inset-bottom)); background: #151f2c; color: #fff;
        font-size: .09rem; line-height: .14rem;
    }

    /* 下载中状态 */
    .m-btn.downloading { pointer-events: none; opacity: 0.85; }
    .m-btn .btn-spinner {
        display: none; position: absolute; top: 50%; left: 50%; width: .22rem; height: .22rem;
        margin: -.11rem 0 0 -.11rem; border: 2.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%;
        animation: btn-spin 0.7s linear infinite;
    }
    .m-btn.downloading .btn-spinner { display: block; }
    .m-btn.downloading .btn-label, .m-btn.downloading .iconfont { opacity: 0.35; }
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ==================== Toast ==================== */
.dl-toast {
    position: fixed; top: 50%; left: 50%; z-index: 9999;
    transform: translate(-50%, -50%) scale(0.96);
    background: rgba(0, 0, 0, 0.8); color: #fff; padding: 16px 26px; border-radius: 12px;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: 14px; line-height: 1.6; text-align: center; max-width: 80vw; word-break: break-word;
    opacity: 0; pointer-events: none;
    transition: opacity 200ms ease-out, transform 240ms var(--ease-out);
}
.dl-toast.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }
.dl-toast.toast-err { background: rgba(220, 50, 50, 0.88); }
.dl-toast.toast-ok  { background: rgba(34, 160, 66, 0.88); }
.dl-toast .toast-retry {
    display: inline-block; margin-top: 10px; padding: 6px 20px; border-radius: 20px;
    background: #fff; color: var(--blue); font-size: 13px; font-weight: 500;
}

/* 页脚临时隐藏：备案信息未下发，PC（.site-footer）和 H5（.m-footer）都挂了这个类。
   恢复时删掉 index.html 里两个 footer 上的 footer-hidden 类即可，这条规则可以保留 */
.footer-hidden { display: none !important; }

/* 入场前隐藏（由 motion.js 接管） */
.motion [data-hero-in], .motion [data-stage] > * { opacity: 0; }

/* ==================== 减少动态效果 ==================== */
@media (prefers-reduced-motion: reduce) {
    .pressable, .five-item, .power-item, .five-arrow, .hb-arr, .hb-text, .hb-circle, .hero-btn { transition-property: opacity, background-color, box-shadow; }
    .hero-btn:active { scale: none; }
    .pressable:active { transform: none; }
}