:root {
  --ink: #172233;
  --muted: #68768a;
  --line: #dfe8f1;
  --paper: #f7fbff;
  --white: #ffffff;
  --blue: #2368f4;
  --blue-deep: #1550ce;
  --cyan: #15badb;
  --lime: #b7eb38;
  --pale-blue: #edf5ff;
  --shell: 1180px;
  font-family: Inter, "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--paper); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell { width: min(var(--shell), calc(100% - 48px)); margin-inline: auto; }

.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: 78px; color: var(--ink); border-bottom: 1px solid rgba(216,227,238,.7); background: rgba(255,255,255,.82); backdrop-filter: blur(18px); transition: .25s ease; }
.site-header.scrolled { height: 68px; background: rgba(255,255,255,.96); box-shadow: 0 7px 28px rgba(35,69,105,.08); }
.nav-shell { width: min(var(--shell), calc(100% - 48px)); height: 100%; margin: auto; display: flex; align-items: center; gap: 42px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); font-size: 20px; font-weight: 700; letter-spacing: -.04em; white-space: nowrap; }
.brand img { width: 36px; height: 36px; border-radius: 11px; object-fit: cover; box-shadow: 0 6px 18px rgba(0,116,255,.18); }
.brand b { color: var(--blue); font-weight: 850; }
nav { display: flex; align-items: center; gap: 34px; margin-left: auto; }
nav a { position: relative; color: #68778c; font-size: 14px; font-weight: 680; transition: .2s; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -9px; height: 2px; border-radius: 4px; background: var(--blue); transition: .22s; }
nav a:hover { color: var(--blue); }
nav a:hover::after { right: 0; }
.nav-cta { display: inline-flex; align-items: center; gap: 10px; padding: 11px 17px; border-radius: 11px; color: var(--white); background: var(--blue); box-shadow: 0 9px 22px rgba(35,104,244,.2); font-size: 13px; font-weight: 780; transition: .2s; }
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(35,104,244,.28); }
.nav-cta span { color: #c9f3ff; }
.menu-toggle { display: none; width: 42px; height: 42px; margin-left: auto; padding: 0; border: 1px solid #d8e4ef; border-radius: 11px; color: var(--ink); background: #fff; }
.menu-toggle i { display: block; width: 18px; height: 1.5px; margin: 5px auto; background: currentColor; transition: .2s; }

.boot-state { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: #708198; background: var(--paper); }
.boot-state span { width: 32px; height: 32px; border: 2px solid #d9e8f5; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
.boot-state p { margin: 0; font-size: 13px; }
@keyframes spin { to { transform: rotate(360deg); } }
.load-error { min-height: 70vh; display: grid; place-items: center; margin: 0; color: #a43c4d; }

.hero { position: relative; min-height: 790px; padding: 136px 0 72px; overflow: hidden; color: var(--ink); background: linear-gradient(126deg, #f8fcff 3%, #edf6ff 57%, #f8fdff 100%); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .55; background-image: linear-gradient(rgba(76,137,190,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(76,137,190,.055) 1px, transparent 1px); background-size: 68px 68px; mask-image: linear-gradient(to bottom, #000 12%, transparent 82%); }
.hero::after { content: ""; position: absolute; width: 580px; height: 580px; right: -180px; top: -280px; border: 1px solid rgba(36,118,219,.15); border-radius: 50%; box-shadow: 0 0 0 70px rgba(36,118,219,.045), 0 0 0 140px rgba(36,118,219,.025); }
.hero-glow { position: absolute; left: 45%; top: 8%; width: 760px; height: 680px; border-radius: 50%; background: radial-gradient(circle, rgba(38,155,244,.19), rgba(91,202,241,.07) 42%, transparent 70%); filter: blur(14px); }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 28px; align-items: stretch; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 25px; padding: 9px 13px; border: 1px solid #cde4f4; border-radius: 999px; color: #2871c3; background: rgba(255,255,255,.75); font-size: 12px; font-weight: 740; letter-spacing: .04em; box-shadow: 0 7px 20px rgba(57,106,151,.06); }
.eyebrow svg { color: #74bf22; }
.hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: min(600px, 100%); margin: 0 0 30px; overflow: visible; }
.hero-stat { position: relative; min-height: 167px; padding: 18px 20px 17px; overflow: hidden; border: 1px solid #c4dbea; border-radius: 17px; background: linear-gradient(135deg, rgba(255,255,255,.99), rgba(239,248,255,.96)); box-shadow: 0 12px 27px rgba(45,104,153,.12); }.hero-stat b, .hero-stat strong, .hero-stat span, .hero-stat em { display: block; }.hero-stat b { color: #173b63; font-size: 18px; line-height: 1.15; font-weight: 800; letter-spacing: -.045em; }.hero-stat strong { margin-top: 11px; color: var(--blue-deep); font-size: 30px; line-height: 1; font-weight: 800; letter-spacing: -.05em; }.hero-stat span { margin-top: 9px; color: #5e7187; font-size: 12px; font-weight: 650; white-space: nowrap; }.hero-stat-note { margin-top: 6px; color: #7890a5; font-size: 11px; font-style: normal; font-weight: 600; white-space: nowrap; }.hero-stat::after { content: ""; position: absolute; left: 20px; right: 20px; bottom: 0; height: 4px; border-radius: 4px 4px 0 0; background: var(--cyan); }.hero-stat:nth-child(2) b { color: #07556d; }.hero-stat:nth-child(2) strong { color: #058cae; }.hero-stat:nth-child(2)::after { background: #4bc6d5; }.hero-stat:nth-child(3) b { color: #46318f; }.hero-stat:nth-child(3) strong { color: #7154d8; }.hero-stat:nth-child(3)::after { background: #9d88ed; }.hero-stat:nth-child(4) b { color: #3d7319; }.hero-stat:nth-child(4) strong { color: #4e971e; }.hero-stat:nth-child(4)::after { background: #8ccc45; }
.hero h1 { max-width: 540px; margin: 0; white-space: normal; font-size: clamp(34px, 3.2vw, 48px); line-height: 1.16; letter-spacing: -.06em; font-weight: 800; }.hero h1 span { color: transparent; white-space: normal; background: linear-gradient(100deg, var(--blue-deep) 8%, #148dd9 53%, #12bdd7 100%); background-clip: text; }.hero-summary small { display: block; margin-top: 13px; color: #5e7187; font-size: 14px; font-weight: 600; line-height: 1.7; letter-spacing: 0; }
.hero-actions { display: flex; align-items: center; gap: 13px; margin-top: 34px; }
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 56px; padding: 0 24px; overflow: hidden; border-radius: 16px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; transition: transform .2s, box-shadow .2s, border-color .2s; }
.button:hover { transform: translateY(-2px); }
.button.primary { color: #fff; background: linear-gradient(135deg, #2368f4 0%, #2188e6 55%, #15b9d2 100%); box-shadow: 0 16px 32px rgba(35,104,244,.26); }
.button.primary::before { content: ""; position: absolute; inset: 1px 1px 52%; border-radius: 15px 15px 50% 50%; background: linear-gradient(180deg, rgba(255,255,255,.22), transparent); pointer-events: none; }
.button.primary:hover { box-shadow: 0 20px 44px rgba(35,104,244,.34); }
.button.ghost { color: #235c9b; border: 1px solid #bad4e9; background: rgba(255,255,255,.9); box-shadow: 0 9px 22px rgba(52,107,153,.1); }
.button.ghost:hover { border-color: #88b5db; background: #fff; box-shadow: 0 13px 28px rgba(52,107,153,.15); }
.button svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; color: currentColor; background: rgba(255,255,255,.18); transition: transform .2s; }.button:hover svg { transform: translateX(3px); }.button.ghost svg { background: #eaf4ff; }
.mini-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; margin-top: auto; padding-top: 30px; color: #4f6d89; font-size: 13px; }
.mini-proof span { display: inline-flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 10px; border: 1px solid rgba(190,216,234,.9); border-radius: 10px; background: rgba(255,255,255,.66); box-shadow: 0 6px 14px rgba(45,104,153,.06); line-height: 1.35; font-weight: 650; }.mini-proof svg { flex: 0 0 auto; width: 15px; height: 15px; padding: 2px; border-radius: 50%; color: #0f9fb9; background: #e5f8fb; }

.hero-shot { align-self: start; width: 100%; min-width: 0; }
.product-window { position: relative; overflow: hidden; width: 100%; border: 1px solid #d3e1ed; border-radius: 20px; background: #fff; box-shadow: 0 33px 80px rgba(49,104,157,.18), 0 0 0 8px rgba(255,255,255,.64); }
.product-shot { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; object-position: initial; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.product-shot-secondary { margin: 0; }
.window-bar { height: 43px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 15px; color: #698096; border-bottom: 1px solid #dbe7f1; background: #f7fbff; font-size: 9px; }
.window-dots { display: flex; gap: 5px; }.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #b5c8d8; }.window-dots i:first-child { background: #ff7979; }.window-dots i:nth-child(2) { background: #f7bf55; }.window-dots i:last-child { background: #51cb88; }
.window-live { justify-self: end; display: inline-flex; align-items: center; gap: 5px; color: #1c9d70; }.window-live::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #42cb8a; box-shadow: 0 0 7px rgba(66,203,138,.65); }
.window-shell { display: grid; grid-template-columns: 110px 1fr; min-height: 390px; }.mock-sidebar { padding: 16px 10px; border-right: 1px solid #dce8f1; background: #f7fbff; }.mock-mark { display: flex; align-items: center; gap: 7px; padding: 3px 6px 20px; color: #1b3652; font-size: 11px; }.mock-mark img { width: 22px; height: 22px; border-radius: 7px; }.mock-sidebar > span { display: flex; align-items: center; gap: 8px; margin: 3px 0; padding: 10px 9px; border-radius: 8px; color: #7c91a4; font-size: 8px; }.mock-sidebar > span i { width: 8px; height: 8px; border: 1px solid currentColor; border-radius: 2px; }.mock-sidebar > span em { font-style: normal; white-space: nowrap; }.mock-sidebar > span.active { color: #1768be; background: #e8f3ff; }
.mock-content { min-width: 0; padding: 25px 22px 20px; background: #fff; }.mock-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.mock-top small, .mock-top strong { display: block; }.mock-top small { margin-bottom: 4px; color: #218fdd; font-size: 7px; letter-spacing: .16em; text-transform: uppercase; }.mock-top strong { color: #18324a; font-size: 15px; }.mock-search { width: 150px; padding: 9px 12px; border: 1px solid #d5e3ee; border-radius: 9px; color: #8294a5; background: #f8fbfe; font-size: 7px; }
.cover-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 22px; }.cover { min-width: 0; }.cover-art { position: relative; height: 145px; overflow: hidden; border-radius: 9px; background: #d9e9fa; }.cover-art::before, .cover-art::after { content: ""; position: absolute; }.cover-art::before { inset: 0; background: radial-gradient(circle at 70% 22%, rgba(255,255,255,.7), transparent 13%), linear-gradient(145deg, transparent 28%, rgba(20,48,84,.34) 70%); }.cover-art::after { width: 75px; height: 110%; left: 22%; bottom: -28%; background: rgba(20,63,105,.24); transform: rotate(32deg); filter: blur(2px); }.cover-1 .cover-art { background: linear-gradient(150deg, #5cd8e6, #3b7fd9 58%, #3d57a2); }.cover-2 .cover-art { background: linear-gradient(150deg, #ff92c9, #8a75df 55%, #5653a3); }.cover-3 .cover-art { background: linear-gradient(150deg, #ffd17e, #e38c60 50%, #906b85); }.cover-4 .cover-art { background: linear-gradient(150deg, #9fe8d9, #5fa5d2 50%, #6378bf); }.cover-art i { position: absolute; z-index: 1; width: 55px; height: 55px; left: 50%; top: 45%; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 40px rgba(255,255,255,.26); }.cover-art span { position: absolute; z-index: 2; left: 8px; top: 8px; padding: 4px 6px; border-radius: 5px; color: #fff; background: rgba(31,70,118,.5); font-size: 6px; }.cover > b, .cover > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.cover > b { margin-top: 8px; color: #304b65; font-size: 9px; }.cover > small { margin-top: 3px; color: #8a9baa; font-size: 7px; }
.download-queue { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding: 12px; border: 1px solid #d7e6f0; border-radius: 10px; background: #f8fbfe; }.download-queue > svg { width: 22px; height: 22px; padding: 5px; border-radius: 6px; color: #1596c8; background: #e2f5fc; }.download-queue small, .download-queue b { display: block; }.download-queue small { color: #7f94a7; font-size: 6px; }.download-queue b { margin-top: 2px; color: #37556e; font-size: 8px; }.download-queue > span { margin-left: auto; padding: 5px 7px; border-radius: 5px; color: #3e8b19; background: #edf9d8; font-size: 6px; }
.float-chip { position: absolute; z-index: 3; display: grid; grid-template-columns: 34px auto; column-gap: 10px; min-width: 145px; padding: 13px; border: 1px solid #d8e7f1; border-radius: 13px; color: #23425d; background: rgba(255,255,255,.9); box-shadow: 0 16px 40px rgba(52,101,144,.17); backdrop-filter: blur(16px); }.float-chip svg { grid-row: 1 / 3; align-self: center; width: 34px; height: 34px; padding: 8px; border-radius: 9px; color: #0c9dc7; background: #e2f8fc; }.float-chip span { color: #8296a7; font-size: 8px; }.float-chip b { font-size: 11px; }.chip-a { left: -35px; bottom: 42px; }.chip-b { right: -25px; top: 72px; }

/* 首屏采用“价值信息 + 双截图”两列编排：左侧内容按阅读顺序递进，右侧两张原图自然叠放。 */
.hero-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: none; column-gap: 40px; row-gap: 0; align-items: stretch; }
.hero-left { min-width: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 25px; padding: 0; }
.hero-left .eyebrow { align-self: start; margin-bottom: 0; }
.hero-stats { width: 100%; margin: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.hero-stat { display: flex; flex-direction: column; min-height: 180px; padding: 20px 21px 18px; border-color: #c9ddea; border-radius: 18px; background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(241,249,255,.96)); box-shadow: 0 15px 30px rgba(45,104,153,.11); }
.hero-stat::before { content: ""; position: absolute; width: 78px; height: 78px; right: -24px; top: -26px; border-radius: 50%; background: rgba(126,211,245,.16); }
.hero-stat-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hero-stat-index { display: inline-grid; place-items: center; width: 27px; height: 20px; border: 1px solid #d4e6f1; border-radius: 7px; color: #7391aa; background: #f6fbff; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.hero-stat b { font-size: 18px; }
.hero-stat strong { margin-top: 14px; font-size: 31px; }
.hero-stat span { margin-top: 9px; font-size: 12px; }
.hero-stat-note { margin-top: 5px; font-size: 11px; }
.hero-left-bottom { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 25px 3px 0; border-top: 1px solid rgba(188,215,232,.86); }
.hero-left-bottom .hero-actions { margin-top: 27px; }
.hero-left-bottom .mini-proof { margin-top: 28px; padding-top: 0; }
.hero-media-stack { min-width: 0; display: grid; grid-template-rows: auto auto; align-content: start; gap: 24px; }
.hero-media-stack .hero-shot { align-self: start; width: 100%; }
.hero-media-stack .product-shot { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: initial; object-position: initial; border: 1px solid rgba(210,226,237,.96); border-radius: 18px; background: #fff; box-shadow: 0 23px 53px rgba(49,104,157,.15); }
.hero-media-stack .product-shot-secondary { margin: 0; }

.stats-strip { position: relative; z-index: 2; margin-top: -140px; color: var(--ink); background: transparent; }.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); width: min(1000px, calc(100% - 48px)); margin-inline: auto; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.96); box-shadow: 0 22px 55px rgba(52,99,141,.16); }.stat { position: relative; padding: 25px 28px 31px; border-right: 1px solid var(--line); }.stat:first-child { border-left: 0; }.stat:last-child { border-right: 0; }.stat strong, .stat span { display: block; }.stat strong { color: var(--blue-deep); font-size: 30px; letter-spacing: -.045em; }.stat span { margin-top: 7px; color: #7b8998; font-size: 11px; }.stat::after { content: ""; position: absolute; left: 28px; bottom: 0; width: 34px; height: 2px; background: var(--cyan); opacity: .8; }

.section { padding: 126px 0; }.section-head { display: grid; grid-template-columns: 1fr 1.25fr; column-gap: 70px; align-items: end; margin-bottom: 56px; }.kicker { margin: 0 0 17px; color: #2481dc; font-size: 11px; font-weight: 850; letter-spacing: .17em; text-transform: uppercase; }.section-head .kicker { grid-column: 1 / -1; }.section h2 { margin: 0; font-size: clamp(38px, 5vw, 60px); line-height: 1.08; letter-spacing: -.055em; }.section-head > p:last-child, .experience-copy > p, .cta-card > div > p:last-child { margin: 0; color: var(--muted); line-height: 1.8; }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.feature-card { position: relative; min-height: 325px; padding: 27px; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: #fff; transition: .28s; }.feature-card::before { content: ""; position: absolute; width: 180px; height: 180px; right: -90px; top: -90px; border-radius: 50%; background: var(--card-glow, #e8f5ff); filter: blur(2px); transition: .3s; }.feature-card:hover { transform: translateY(-7px); border-color: #c4d9ea; box-shadow: 0 24px 60px rgba(14,38,65,.1); }.feature-card:hover::before { transform: scale(1.2); }.feature-number { position: relative; display: block; color: #b5c0ca; font-size: 10px; font-weight: 800; letter-spacing: .15em; }.feature-icon { position: relative; display: grid; place-items: center; width: 54px; height: 54px; margin-top: 53px; border-radius: 15px; color: #087cdd; background: #eaf5ff; }.feature-icon svg { width: 25px; height: 25px; }.feature-card h3 { position: relative; margin: 30px 0 11px; font-size: 20px; letter-spacing: -.025em; }.feature-card > p { position: relative; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.75; }.feature-2 { --card-glow: #edffe5; }.feature-2 .feature-icon { color: #55a618; background: #f0fbe8; }.feature-3 { --card-glow: #fff1df; }.feature-3 .feature-icon { color: #db8219; background: #fff3e7; }.feature-4 { --card-glow: #eeeaff; }.feature-4 .feature-icon { color: #7259e7; background: #f0edff; }

.experience { color: var(--ink); background: #edf6ff; }.experience-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 82px; align-items: center; }.experience-copy > p:not(.kicker) { margin-top: 24px; color: #62748a; }.benefit-list { display: grid; gap: 23px; margin-top: 42px; }.benefit-list > div { display: flex; align-items: center; gap: 15px; }.benefit-list > div > span { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 auto; border: 1px solid #c7e2ed; border-radius: 10px; color: #0d9ebd; background: #e8f9fc; }.benefit-list p { margin: 0; }.benefit-list b, .benefit-list small { display: block; }.benefit-list b { font-size: 14px; }.benefit-list small { margin-top: 4px; color: #74879a; font-size: 11px; }.experience-visual { position: relative; }.experience-visual .product-window { box-shadow: 0 30px 75px rgba(49,104,157,.18); }.score-card { position: absolute; right: -22px; bottom: -35px; width: 170px; padding: 18px; border: 1px solid #d4e5ef; border-radius: 15px; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(52,101,144,.17); }.score-card small, .score-card strong { display: block; }.score-card small { color: #74889d; font-size: 9px; }.score-card strong { margin: 5px 0 10px; color: var(--blue-deep); font-size: 24px; }.score-card span { display: block; height: 4px; overflow: hidden; border-radius: 4px; background: #e0edf5; }.score-card span::after { content: ""; display: block; width: 98%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--cyan)); }

.cta { background: #fff; }.cta-card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 50px; overflow: hidden; padding: 68px 72px; border-radius: 28px; color: #fff; background: linear-gradient(120deg, #2165eb, #147ddc 55%, #13bbcc); box-shadow: 0 28px 90px rgba(25,112,218,.2); }.cta-card::before { content: ""; position: absolute; width: 400px; height: 400px; right: 8%; top: -240px; border: 1px solid rgba(255,255,255,.23); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,.055), 0 0 0 140px rgba(255,255,255,.035); }.cta-card::after { content: "牛"; position: absolute; right: 32px; bottom: -72px; color: rgba(255,255,255,.055); font-size: 270px; font-weight: 950; line-height: 1; }.cta-card > * { position: relative; z-index: 1; }.cta-card .kicker { color: #d2faff; }.cta-card h2 { max-width: 620px; font-size: clamp(35px, 4.3vw, 56px); }.cta-card > div > p:last-child { max-width: 560px; margin-top: 18px; color: rgba(255,255,255,.75); }.cta-actions { flex: 0 0 auto; display: grid; justify-items: center; gap: 11px; }.button.light { color: #1557b9; background: #fff; box-shadow: 0 16px 40px rgba(0,45,97,.2); }.cta-actions small { color: rgba(255,255,255,.68); font-size: 10px; }

.site-footer { padding: 34px 0; color: #71869b; background: #f0f6fb; border-top: 1px solid #dde9f2; }.footer-inner { width: min(var(--shell), calc(100% - 48px)); margin: auto; display: flex; align-items: center; gap: 25px; }.footer-brand { color: var(--ink); font-size: 16px; }.footer-brand img { width: 29px; height: 29px; border-radius: 9px; }.footer-inner > p { margin: 0; font-size: 11px; }.footer-inner > div { display: flex; gap: 24px; margin-left: auto; font-size: 10px; }.service-state { display: inline-flex; align-items: center; gap: 6px; }.service-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #e3a52a; }.service-state.online::before { background: #55d993; box-shadow: 0 0 8px #55d993; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }.reveal.visible { opacity: 1; transform: none; }.feature-card:nth-child(2), .stat:nth-child(2) { transition-delay: .08s; }.feature-card:nth-child(3), .stat:nth-child(3) { transition-delay: .16s; }.feature-card:nth-child(4), .stat:nth-child(4) { transition-delay: .24s; }

@media (max-width: 1040px) {
  .hero { min-height: auto; }.hero-inner { grid-template-columns: 1fr; grid-template-areas: none; row-gap: 32px; }.hero-left { display: block; }.hero-stats { margin-bottom: 30px; }.hero-left-bottom { display: block; }.hero-left-bottom .hero-actions { margin-top: 34px; }.hero-left-bottom .mini-proof { margin-top: 24px; padding-top: 0; }.hero-media-stack { width: min(760px, 94%); margin-inline: auto; }.hero-shot { width: 100%; margin-inline: 0; }.feature-grid { grid-template-columns: repeat(2, 1fr); }.experience-grid { grid-template-columns: 1fr; }.experience-copy { max-width: 680px; }.experience-visual { width: min(780px, 96%); margin: auto; }
}

@media (max-width: 760px) {
  .shell, .nav-shell, .footer-inner { width: min(100% - 30px, var(--shell)); }
  .site-header, .site-header.scrolled { height: 65px; background: rgba(255,255,255,.94); backdrop-filter: blur(18px); }
  .nav-shell { gap: 12px; }.nav-cta { display: none; }.menu-toggle { display: block; }
  nav { position: absolute; left: 15px; right: 15px; top: 73px; display: grid; gap: 4px; padding: 10px; border: 1px solid #dce8f1; border-radius: 14px; background: rgba(255,255,255,.98); box-shadow: 0 20px 50px rgba(35,69,105,.14); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: .2s; }
  nav a { padding: 12px; border-radius: 8px; color: #53667b; } nav a::after { display: none; }.menu-open nav { opacity: 1; visibility: visible; transform: none; }.menu-open .menu-toggle i:first-child { transform: translateY(3.2px) rotate(45deg); }.menu-open .menu-toggle i:last-child { transform: translateY(-3.2px) rotate(-45deg); }
  .hero { padding: 122px 0 70px; }.hero-stats { width: 100%; gap: 9px; }.hero-stat { min-height: 126px; padding: 16px 14px 15px; }.hero-stat b { font-size: 14px; }.hero-stat strong { margin-top: 8px; font-size: 21px; }.hero-stat span { font-size: 10px; }.hero-stat-note { font-size: 9px; white-space: normal; }.hero-stat::after { left: 14px; right: 14px; }.hero h1 { font-size: clamp(31px, 8vw, 40px); }.hero-summary small { margin-top: 9px; font-size: 12px; }.hero-actions { align-items: stretch; flex-direction: column; }.button { width: 100%; }.mini-proof { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 8px; row-gap: 8px; font-size: 11px; }.mini-proof span { padding: 7px 8px; white-space: normal; }.hero-visual { width: 100%; margin-top: 24px; }.hero-shot-stack { gap: 18px; }.float-chip { display: none; }
  .window-shell { grid-template-columns: 68px 1fr; min-height: 310px; }.mock-sidebar { padding-inline: 6px; }.mock-sidebar > span { padding-inline: 6px; }.mock-sidebar > span em { display: none; }.mock-mark b { display: none; }.mock-content { padding: 18px 12px; }.mock-search { width: 110px; }.cover-grid { grid-template-columns: repeat(2, 1fr); }.cover:nth-child(n+3) { display: none; }.cover-art { height: 120px; }
  .stats-strip { margin-top: -28px; }.stats-grid { grid-template-columns: repeat(2, 1fr); width: calc(100% - 30px); border-radius: 17px; }.stat:nth-child(3) { border-left: 0; }.stat:nth-child(2) { border-right: 0; }.stat:nth-child(3), .stat:nth-child(4) { border-top: 1px solid var(--line); }.stat { padding: 22px 20px 28px; }
  .section { padding: 88px 0; }.section-head { display: block; margin-bottom: 38px; }.section-head > p:last-child { margin-top: 18px; }.feature-grid { grid-template-columns: 1fr; }.feature-card { min-height: 270px; }.feature-icon { margin-top: 32px; }
  .experience-grid { gap: 52px; }.score-card { right: -5px; bottom: -30px; }.cta-card { align-items: stretch; flex-direction: column; padding: 42px 26px; border-radius: 22px; }.cta-actions { justify-items: stretch; }.cta-actions small { text-align: center; }
  .footer-inner { align-items: flex-start; flex-wrap: wrap; }.footer-inner > p { width: calc(100% - 130px); }.footer-inner > div { width: 100%; margin: 0; justify-content: space-between; }
}

@media (max-width: 410px) {
  .hero h1 { font-size: 46px; }.window-title { display: none; }.window-bar { grid-template-columns: 1fr 1fr; }.window-live { grid-column: 2; }.stat strong { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Final compact spacing overrides */
.hero { min-height: 650px; padding: 108px 0 42px; }
.hero-inner { column-gap: 28px; row-gap: 18px; }
.hero-left { gap: 17px; }
.hero-stats { gap: 10px; }
.hero-stat { min-height: 146px; padding: 16px 18px 15px; }
.hero-left-bottom { padding-top: 18px; }
.hero-left-bottom .hero-actions { margin-top: 21px; }
.hero-left-bottom .mini-proof { margin-top: 20px; }
.hero-media-stack { gap: 15px; }
.hero-media-stack .product-shot { border-radius: 15px; }
.section { padding: 78px 0; }
.section-head { margin-bottom: 34px; }
.section h2 { font-size: clamp(34px, 4.2vw, 52px); }
.feature-card { min-height: 278px; padding: 23px; }
.feature-icon { margin-top: 38px; }
.feature-card h3 { margin-top: 22px; }
.experience-grid { gap: 52px; }
.benefit-list { gap: 16px; margin-top: 28px; }
.cta { padding: 76px 0; }
@media (max-width: 900px) {
  .hero { min-height: auto; padding-bottom: 34px; }
  .section { padding: 62px 0; }
  .feature-card { min-height: 250px; }
}

/* End-of-file priority overrides for the refreshed hero. */
.hero { padding-top: 112px; padding-bottom: 52px; background: radial-gradient(circle at 76% 20%, rgba(71,184,255,.18), transparent 34%), linear-gradient(120deg,#f8fcff 0%,#edf7ff 58%,#f9fdff 100%); }
.hero-inner { align-items: center; column-gap: 48px; }
.hero-left { gap: 19px; }
.hero-announcement { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 54px; margin: 0; padding: 9px 13px 9px 16px; overflow: hidden; border: 1px solid rgba(83,178,225,.42); border-radius: 15px; color: #145486; background: linear-gradient(100deg,rgba(255,255,255,.96),rgba(236,250,255,.92)); box-shadow: 0 12px 28px rgba(35,124,177,.13),inset 0 1px 0 rgba(255,255,255,.9); font-size: 13px; font-weight: 750; letter-spacing: .01em; }
.hero-announcement::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(#7edb43,#19b9d5); }
.hero-announcement svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 7px; color: #3f9e25; background: #e9f9df; }
.hero-announcement-copy { flex: 1; line-height: 1.45; }
.hero-announcement-tag { flex: 0 0 auto; padding: 7px 10px; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#20a9c8,#2370ec); box-shadow: 0 7px 16px rgba(35,116,221,.2); font-size: 11px; font-weight: 850; white-space: nowrap; }
.hero-stats { margin-bottom: 5px; }
.hero-stat { min-height: 142px; border-radius: 16px; box-shadow: 0 14px 26px rgba(45,104,153,.1); }
.hero-left-bottom { padding-top: 19px; border-top-color: rgba(116,179,214,.55); }
.hero h1 { max-width: 600px; font-size: clamp(40px,4.2vw,62px); line-height: 1.08; letter-spacing: -.065em; }
.hero-summary small { max-width: 500px; margin-top: 14px; font-size: 14px; line-height: 1.75; }
.hero-actions { margin-top: 25px; }
.hero-actions .button.primary { min-width: 174px; min-height: 60px; font-size: 16px; }
.hero-media-stack { min-height: 470px; }
.hero-media-stack .hero-shot-q { transform: translate3d(-3%,-2%,0) scale(1.04) !important; }
.hero-media-stack .hero-shot-pg { width: 88%; right: 2%; }
@media (max-width: 900px) { .hero { padding-top: 94px; } .hero-inner { column-gap: 0; } .hero-announcement { min-height: 50px; font-size: 12px; } .hero h1 { font-size: clamp(38px,8vw,54px); } .hero-media-stack { min-height: 0; } .hero-media-stack .hero-shot-q { transform: none !important; } }
@media (max-width: 520px) { .hero-announcement { align-items: flex-start; } .hero-announcement-copy { font-size: 11px; } .hero-announcement-tag { padding: 6px 8px; font-size: 10px; } }

/* 首屏重点强化：把永久免费承诺设为第一视觉锚点，并收紧信息层级。 */
.hero {
  padding-top: 112px;
  padding-bottom: 52px;
  background:
    radial-gradient(circle at 76% 20%, rgba(71, 184, 255, .18), transparent 34%),
    linear-gradient(120deg, #f8fcff 0%, #edf7ff 58%, #f9fdff 100%);
}
.hero-inner { align-items: center; column-gap: 48px; }
.hero-left { gap: 19px; }
.hero-announcement {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 9px 13px 9px 16px;
  overflow: hidden;
  border: 1px solid rgba(83, 178, 225, .42);
  border-radius: 15px;
  color: #145486;
  background: linear-gradient(100deg, rgba(255,255,255,.96), rgba(236,250,255,.92));
  box-shadow: 0 12px 28px rgba(35, 124, 177, .13), inset 0 1px 0 rgba(255,255,255,.9);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
}
.hero-announcement::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(#7edb43, #19b9d5);
}
.hero-announcement svg { flex: 0 0 auto; width: 22px; height: 22px; padding: 4px; border-radius: 7px; color: #3f9e25; background: #e9f9df; }
.hero-announcement-copy { flex: 1; line-height: 1.45; }
.hero-announcement-tag {
  flex: 0 0 auto;
  padding: 7px 10px;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #20a9c8, #2370ec);
  box-shadow: 0 7px 16px rgba(35, 116, 221, .2);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}
.hero-stats { margin-bottom: 5px; }
.hero-stat { min-height: 142px; border-radius: 16px; box-shadow: 0 14px 26px rgba(45,104,153,.1); }
.hero-left-bottom { padding-top: 19px; border-top-color: rgba(116, 179, 214, .55); }
.hero h1 { max-width: 600px; font-size: clamp(40px, 4.2vw, 62px); line-height: 1.08; letter-spacing: -.065em; }
.hero-summary small { max-width: 500px; margin-top: 14px; font-size: 14px; line-height: 1.75; }
.hero-actions { margin-top: 25px; }
.hero-actions .button.primary { min-width: 174px; min-height: 60px; font-size: 16px; }
.hero-media-stack { min-height: 470px; }
.hero-media-stack .hero-shot-q { transform: translate3d(-3%, -2%, 0) scale(1.04) !important; }
.hero-media-stack .hero-shot-pg { width: 88%; right: 2%; }

@media (max-width: 900px) {
  .hero { padding-top: 94px; }
  .hero-inner { column-gap: 0; }
  .hero-announcement { min-height: 50px; font-size: 12px; }
  .hero h1 { font-size: clamp(38px, 8vw, 54px); }
  .hero-media-stack { min-height: 0; }
  .hero-media-stack .hero-shot-q { transform: none !important; }
}
@media (max-width: 520px) {
  .hero-announcement { align-items: flex-start; }
  .hero-announcement-copy { font-size: 11px; }
  .hero-announcement-tag { padding: 6px 8px; font-size: 10px; }
}
.hero-media-stack { position: relative; display: block; min-height: 520px; padding: 0; overflow: hidden; }
.hero-media-stack .hero-shot { position: absolute; inset: 0 auto auto 0; width: 100%; margin: 0; opacity: 0; transform: translateY(24px) scale(.985); animation: product-roll 8s ease-in-out infinite; will-change: opacity, transform; }
.hero-media-stack .hero-shot-q { z-index: 2; animation-delay: 0s; }
.hero-media-stack .hero-shot-pg { z-index: 1; animation-delay: -4s; }
@media (max-width: 900px) { .hero-media-stack { min-height: 0; aspect-ratio: 16 / 10; overflow: visible; } .hero-media-stack .hero-shot { inset: 0; width: 100%; height: auto; } }

/* Final carousel order override (kept last so it wins over legacy responsive rules). */
.hero-media-stack.roll-q .hero-shot.hero-shot,
.hero-media-stack.roll-pg .hero-shot.hero-shot { animation: none !important; transition: transform .9s cubic-bezier(.22,.8,.24,1), opacity .7s ease; }
.hero-media-stack.roll-q .hero-shot-q { opacity: 1; transform: translate3d(0,0,0) scale(1); z-index: 2; }
.hero-media-stack.roll-q .hero-shot-pg { opacity: 0; transform: translate3d(110%,110%,0) scale(.96); z-index: 1; }
.hero-media-stack.roll-pg .hero-shot-q { opacity: 0; transform: translate3d(-110%,-110%,0) scale(.96); z-index: 1; }
.hero-media-stack.roll-pg .hero-shot-pg { opacity: 1; transform: translate3d(0,0,0) scale(1); z-index: 2; }
.hero-media-stack.hero-media-stack { position: relative; display: block; min-height: 520px; padding: 0; overflow: hidden; }
.hero-media-stack .hero-shot.hero-shot { position: absolute; inset: 0 auto auto 0; width: 100%; margin: 0; opacity: 0; transform: translateY(24px) scale(.985); animation: product-roll 8s ease-in-out infinite; will-change: opacity, transform; }
.hero-media-stack .hero-shot.hero-shot-q { z-index: 2; animation-delay: 0s; }
.hero-media-stack .hero-shot.hero-shot-pg { z-index: 1; animation-delay: -4s; }
.hero-media-stack:not(.roll-pg) .hero-shot-q { opacity: 1; transform: translate3d(0,0,0) scale(1); z-index: 2; }
.hero-media-stack:not(.roll-pg) .hero-shot-pg { opacity: 0; transform: translate3d(110%,110%,0) scale(.96); z-index: 1; }

/* Stacked 3D flip: both captures stay in the same frame and alternate every 2s. */
.hero-media-stack.hero-media-stack {
  perspective: 1400px;
  transform-style: preserve-3d;
  overflow: visible;
}
.hero-media-stack .hero-shot.hero-shot {
  opacity: 1 !important;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .78s cubic-bezier(.22,.72,.2,1) !important;
}
.hero-media-stack.roll-q .hero-shot-q { transform: rotateY(0deg) !important; z-index: 2; }
.hero-media-stack.roll-q .hero-shot-pg { transform: rotateY(180deg) !important; z-index: 1; }
.hero-media-stack.roll-pg .hero-shot-q { transform: rotateY(-180deg) !important; z-index: 1; }
.hero-media-stack.roll-pg .hero-shot-pg { transform: rotateY(0deg) !important; z-index: 2; }
.hero-media-stack:not(.roll-pg) .hero-shot-q { opacity: 1 !important; transform: rotateY(0deg) !important; }
.hero-media-stack:not(.roll-pg) .hero-shot-pg { opacity: 1 !important; transform: rotateY(180deg) !important; }

/* Two-up carousel layout: screenshots remain visible, offset like the reference. */
.hero-media-stack.hero-media-stack { min-height: 520px; overflow: visible; }
.hero-media-stack .hero-shot.hero-shot { opacity: 1 !important; inset: 0 auto auto 0; width: 100%; transform-origin: center; transition: transform .9s cubic-bezier(.2,.75,.2,1), filter .9s ease !important; }
.hero-media-stack.roll-q .hero-shot-q { transform: translate3d(0,0,0) scale(1) !important; z-index: 2; filter: drop-shadow(0 22px 36px rgba(38,83,142,.2)); }
.hero-media-stack.roll-q .hero-shot-pg { transform: translate3d(10%,18%,0) scale(.96) !important; z-index: 1; filter: drop-shadow(0 15px 26px rgba(38,83,142,.13)); }
.hero-media-stack.roll-pg .hero-shot-pg { transform: translate3d(0,0,0) scale(1) !important; z-index: 2; filter: drop-shadow(0 22px 36px rgba(38,83,142,.2)); }
.hero-media-stack.roll-pg .hero-shot-q { transform: translate3d(10%,18%,0) scale(.96) !important; z-index: 1; filter: drop-shadow(0 15px 26px rgba(38,83,142,.13)); }
.experience-shot { display: block; width: 100%; height: auto; border: 1px solid #d4e5ef; border-radius: 22px; box-shadow: 0 30px 75px rgba(49,104,157,.18); }
@media (max-width: 900px) {
  .hero-media-stack.hero-media-stack { min-height: 0; aspect-ratio: 16 / 10; }
  .hero-media-stack .hero-shot.hero-shot { inset: 0 auto auto 0; }
}
.hero-media-stack { position: relative; display: block; min-height: 520px; padding: 0; overflow: hidden; }
.hero-media-stack .hero-shot { position: absolute; inset: 0 auto auto 0; width: 100%; margin: 0; opacity: 0; transform: translateY(24px) scale(.985); animation: product-roll 8s ease-in-out infinite; will-change: opacity, transform; }
.hero-media-stack .hero-shot-q { z-index: 2; animation-delay: 0s; }
.hero-media-stack .hero-shot-pg { z-index: 1; animation-delay: -4s; }
@media (max-width: 900px) { .hero-media-stack { min-height: 0; aspect-ratio: 16 / 10; overflow: visible; } .hero-media-stack .hero-shot { inset: 0; width: 100%; height: auto; } }

/* Auto-playing product showcase: q.png and pg.png cross-fade in a gentle vertical roll. */
.hero-media-stack {
  position: relative;
  display: block;
  min-height: 520px;
  padding: 0;
  overflow: hidden;
}
.hero-media-stack .hero-shot {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  margin: 0;
  opacity: 0;
  transform: translateY(24px) scale(.985);
  animation: product-roll 8s ease-in-out infinite;
  will-change: opacity, transform;
}
.hero-media-stack .hero-shot-q { z-index: 2; animation-delay: 0s; }
.hero-media-stack .hero-shot-pg { z-index: 1; animation-delay: -4s; }
@keyframes product-roll {
  0%, 8% { opacity: 0; transform: translateY(24px) scale(.985); }
  17%, 42% { opacity: 1; transform: translateY(0) scale(1); }
  50%, 100% { opacity: 0; transform: translateY(-24px) scale(1.015); }
}
@media (max-width: 900px) {
  .hero-media-stack { min-height: 0; aspect-ratio: 16 / 10; overflow: visible; }
  .hero-media-stack .hero-shot.hero-shot { inset: 0; width: 100%; height: auto; }
}

/* Hero reflow: overlap product captures instead of stacking two tall screenshots. */
.hero { min-height: 0; padding: 104px 0 34px; }
.hero-inner { align-items: center; }
.hero-left { gap: 12px; }
.hero-stats { margin-bottom: 10px; }
.hero-stat { min-height: 132px; }
.hero-left-bottom { padding-top: 14px; }
.hero-summary small { margin-top: 8px; }
.hero-left-bottom .hero-actions { margin-top: 18px; }
.hero-left-bottom .mini-proof { margin-top: 16px; }
.hero-media-stack { position: relative; display: block; min-height: 520px; padding: 8px 0 34px; }
.hero-media-stack .hero-shot { display: block; width: 100%; }
.hero-media-stack .hero-shot-q { position: relative; z-index: 2; width: 100%; }
.hero-media-stack .hero-shot-pg { position: absolute; z-index: 1; right: 0; bottom: 0; width: 91%; box-shadow: 0 18px 38px rgba(49,104,157,.18); }
.hero-media-stack .product-shot { border-radius: 15px; }
.section { padding: 72px 0; }
.section-head { margin-bottom: 30px; }
.feature-card { min-height: 258px; padding: 22px; }
.feature-icon { margin-top: 30px; }
.feature-card h3 { margin-top: 18px; }
.experience-grid { gap: 46px; }
@media (max-width: 900px) {
  .hero-media-stack { min-height: auto; padding-bottom: 0; }
  .hero-media-stack .hero-shot-pg { position: relative; width: 94%; margin: -60px 0 0 auto; }
}
.hero { min-height: 650px; padding: 108px 0 42px; }
.hero-inner { column-gap: 28px; row-gap: 18px; }
.hero-left { gap: 17px; }
.hero-stats { gap: 10px; }
.hero-stat { min-height: 146px; padding: 16px 18px 15px; }
.hero-left-bottom { padding-top: 18px; }
.hero-left-bottom .hero-actions { margin-top: 21px; }
.hero-left-bottom .mini-proof { margin-top: 20px; }
.hero-media-stack { gap: 15px; }
.hero-media-stack .product-shot { border-radius: 15px; }
.section { padding: 78px 0; }
.section-head { margin-bottom: 34px; }
.section h2 { font-size: clamp(34px, 4.2vw, 52px); }
.feature-card { min-height: 278px; padding: 23px; }
.feature-icon { margin-top: 38px; }
.feature-card h3 { margin-top: 22px; }
.experience-grid { gap: 52px; }
.benefit-list { gap: 16px; margin-top: 28px; }
.cta { padding: 76px 0; }
@media (max-width: 900px) {
  .hero { min-height: auto; padding-bottom: 34px; }
  .section { padding: 62px 0; }
  .feature-card { min-height: 250px; }
}