:root {
  --brand: #ff3800;
  --page: #f2f2f7;
  --panel: #e2e6ec;
  --ink: #3d3d3f;
  --s: 1;
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--page); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--page); }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.site-header {
  position: fixed;
  z-index: 200;
  top: 12px;
  left: 50%;
  width: calc(100% - 40px);
  max-width: 1400px;
  height: 76px;
  padding: 0 12px 0 40px;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 38px;
  background: rgba(0,0,0,.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.brand { flex: none; }
.brand img { width: 96px; height: auto; }
.main-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; margin-right: 32px; }
.main-nav > a { padding: 8px 16px; border-radius: 14px; color: #515151; font-size: 20px; font-weight: 700; line-height: 24px; transition: color .25s ease, background-color .25s ease; }
.main-nav > a:hover, .main-nav > a:focus-visible { color: #515151; background: rgba(171,171,171,.6); outline: none; }
.download-trigger {
  flex: none;
  width: 248px;
  height: 52px;
  border-radius: 26px;
  background: var(--brand);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  transition: transform .5s cubic-bezier(.25,.1,.25,1), box-shadow .5s cubic-bezier(.25,.1,.25,1);
}
.download-trigger:hover, .download-trigger:focus-visible { transform: scale(1.025); box-shadow: 0 4px 10px rgba(0,0,0,.5); outline: none; }

.scroll-story { position: relative; height: 400vh; }
.scene { position: absolute; inset: 0; pointer-events: none; }
.scene-sticky { position: fixed; inset: 0; height: 100vh; overflow: hidden; will-change: transform; }
.hero-scene { z-index: 1; }
.download-scene { z-index: 3; }
/* 第三屏(手机 + 功能按钮)在下载面板之下:面板往上推走时露出它(稿 26:1437 / 26:0337) */
.feature-scene { z-index: 2; }
.hero-sticky { background: var(--page); }
.hero-layout { position: relative; width: 100%; max-width: 1440px; height: 100%; margin: 0 auto; }

.phone { position: absolute; width: 319px; aspect-ratio: 319 / 652; container-type: inline-size; }
.phone-screen { position: absolute; left: 4.702cqw; top: 4.387cqw; width: 89.97cqw; height: 194.98cqw; overflow: hidden; border-radius: 12.85cqw; background: #111; }
.phone-screen > img, .phone-screen > video { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.phone-frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.phone-hero .phone-screen > img { height: auto; }
.phone-hero { left: 19.1%; top: calc(50% - 163px); width: clamp(250px, 22.15vw, 319px); }
.hero-copy { position: absolute; left: 51.39%; top: 50%; width: 46%; height: 158px; transform: translateY(-50%); color: var(--brand); }
.hero-line { position: absolute; inset: 0; }
.hero-line p { margin: 0; font-size: clamp(40px, 4.1667vw, 60px); line-height: 1.2; white-space: nowrap; opacity: 0; transform: translateY(20px); transition: opacity .4s ease, transform .4s ease; }
.hero-line p:first-child { margin-bottom: 14px; font-weight: 300; }
.hero-line p:last-child { font-weight: 600; }
.hero-line.is-active p { opacity: 1; transform: translateY(0); }
.hero-line.is-active p:last-child { transition-delay: .2s; }
.hero-line.is-leaving p { opacity: 0; transform: translateY(-20px); transition-delay: 0s; }
.hero-line.is-leaving p:last-child { transition-delay: .2s; }

/* 面板高 = 可视区 − 95 + 38:稿 26:1437 / 26:0337 里面板是 743 高,第二屏时多出的 38 在屏幕外 */
.download-sticky { top: 95px; height: calc(100vh - 57px); background: var(--panel); }
.download-sticky .iphone-only { bottom: 58px; }
.download-panel-content { position: relative; width: 100%; height: 100%; text-align: center; }
.download-panel-content h2 { position: absolute; top: 112px; left: 0; right: 0; margin: 0; color: var(--brand); font-size: 50px; line-height: 60px; font-weight: 700; }
.app-store-button { position: absolute; top: 235px; left: 50%; width: 322px; height: 90px; padding: 10px 20px; display: flex; justify-content: center; align-items: center; gap: 16px; transform: translateX(-50%); border: 1.5px solid #1a1a1a; border-radius: 49px; background: #fff; color: #3d3d3f; transition: transform .5s cubic-bezier(.25,.1,.25,1), box-shadow .5s cubic-bezier(.25,.1,.25,1); }
.app-store-button:hover, .app-store-button:focus-visible { transform: translateX(-50%) scale(1.025); box-shadow: 0 4px 10px rgba(0,0,0,.25); outline: none; }
.app-store-button > img { width: 44px; height: 52px; }
.app-store-button > span { display: flex; flex-direction: column; align-items: flex-start; font-family: Inter, -apple-system, sans-serif; }
.app-store-button small { font-size: 17px; line-height: 21px; letter-spacing: .2px; }
.app-store-button strong { font-size: 36px; line-height: 42px; font-weight: 600; letter-spacing: -.3px; }
.scan-label { position: absolute; top: 362px; left: 0; right: 0; margin: 0; font-size: 20px; line-height: 24px; font-weight: 700; }
.qr-code { position: absolute; top: 405px; left: 50%; width: 220px; height: 220px; transform: translateX(-50%); }
.iphone-only { position: absolute; left: 0; right: 0; bottom: 20px; margin: 0; color: #999; font-size: 16px; line-height: 19px; font-weight: 700; }

.feature-sticky { background: var(--page); }
.feature-sticky { overflow: visible; }
.phone-feature { left: calc(50% + (411px - 720px) * var(--s)); top: calc(50% + (117px - 400px) * var(--s)); width: calc(319px * var(--s)); }
.phone-screen > img.is-switching { opacity: 0; transform: translateY(10px); }
.phone-screen > img { transition: opacity .2s ease, transform .3s cubic-bezier(.25,.1,.25,1); }
.feature-buttons { position: absolute; left: calc(50% + (830px - 720px) * var(--s)); top: calc(50% + (173px - 400px) * var(--s)); width: calc(188px * var(--s)); height: calc(540px * var(--s)); }
/* 🔴 位移只走 translate 属性(脚本写),悬停只走 scale —— 两者分开,放大永远以按钮自身中心为原点、不会跑位(原来位移写在 transform 里,scale 叠上去会按位移量偏出去) */
.feature-buttons > button { position: absolute; left: 0; top: calc(var(--i) * 80px * var(--s)); width: calc(188px * var(--s)); height: calc(60px * var(--s)); padding: 0; overflow: hidden; border-radius: calc(30px * var(--s)); background: var(--tone); color: #fff; text-align: left; pointer-events: auto; transform-origin: center; transition: scale .5s cubic-bezier(.25,.1,.25,1), box-shadow .5s cubic-bezier(.25,.1,.25,1); }
.feature-buttons img { position: absolute; left: calc(30px * var(--s)); top: 50%; width: calc(var(--icon-w) * 1px * var(--s)); height: auto; transform: translate(-50%, -50%); }
.feature-buttons span { position: absolute; left: calc(60px * var(--s)); top: calc(20px * var(--s)); font-size: calc(17px * var(--s)); line-height: calc(20px * var(--s)); font-weight: 510; white-space: nowrap; }
/* 与右上角「免费下载」同一套:原地放大 1.025 + 投影 */
.feature-buttons > button:hover, .feature-buttons > button:focus-visible { scale: 1.025; box-shadow: 0 4px 10px rgba(0,0,0,.5); outline: none; }
.feature-buttons > button.is-selected { box-shadow: inset 0 0 0 calc(1.5px * var(--s)) rgba(255,255,255,.7); }

.site-footer { position: relative; z-index: 5; padding-top: 120px; background: var(--page); pointer-events: none; }
.site-footer > * { pointer-events: auto; }
.newsletter { width: 393px; max-width: calc(100% - 32px); margin: 0 auto; text-align: center; }
.newsletter h2 { margin: 0; font-size: 42px; line-height: 50px; }
.newsletter > p:not(.privacy-note):not(.subscribe-status) { margin: 12px 0 0; color: #717171; font-size: 16px; line-height: 1.6; }
.subscribe-form { width: 384px; max-width: 100%; height: 52px; margin: 48px auto 0; padding: 7px; display: flex; border: 1px solid #d2d2d2; border-radius: 26px; background: #ededed; }
.subscribe-form input { min-width: 0; flex: 1; padding: 0 14px; border: 0; outline: none; background: transparent; color: #3d3d3f; font-size: 20px; font-weight: 700; }
.subscribe-form input::placeholder { color: #909090; }
.subscribe-form button { width: 76px; border-radius: 26px; background: #3d3d3f; color: #fff; font-size: 20px; font-weight: 700; transition: transform .3s ease, box-shadow .3s ease; }
.subscribe-form button:hover { transform: scale(1.025); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.privacy-note { margin: 38px 0 0; color: #717171; font-size: 12px; line-height: 1.6; }
.privacy-note a { text-decoration: underline; }
.subscribe-status { min-height: 20px; margin: 10px 0 0; color: #717171; font-size: 13px; }
/* 稿 9:6974:灰底 368 高 = 上 56 + 链接 204 + 间距 60 + 版权 14 + 下 34 */
.footer-links-wrap { margin-top: 38px; padding: 56px 24px 34px; background: var(--panel); }
/* 四列固定间距 224(稿 9:6974),整块按内容宽度居中;原来 781 宽平分四列,最后一列很窄,看着整体偏左 */
.footer-links { width: max-content; max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 224px)) max-content; }
.footer-links section { display: flex; flex-direction: column; align-items: flex-start; }
.footer-links h3 { margin: 0 0 8px; color: #7a7a7a; font-size: 30px; line-height: 36px; }
.footer-links a, .footer-links button, .footer-links span { padding: 0; color: #7a7a7a; background: none; font-size: 16px; line-height: 2; font-weight: 700; text-align: left; }
/* 移入:稿 9:6974「鼠标移入」—— 文字左右各多 18、高 29 的药丸,#D1D1D1 60%,字色加深;用伪元素画,不改变排版 */
.footer-links a, .footer-links button { position: relative; isolation: isolate; transition: color .25s ease; }
.footer-links a::before, .footer-links button::before { content: ""; position: absolute; z-index: -1; left: -18px; right: -18px; top: 1.5px; bottom: 1.5px; border-radius: 14px; background: rgba(209,209,209,.6); opacity: 0; transition: opacity .25s ease; }
.footer-links a:hover, .footer-links button:hover, .footer-links a:focus-visible, .footer-links button:focus-visible { color: #393939; outline: none; }
.footer-links a:hover::before, .footer-links button:hover::before, .footer-links a:focus-visible::before, .footer-links button:focus-visible::before { opacity: 1; }
.copyright { margin: 60px 0 0; color: #868686; font-size: 11.5px; line-height: 14px; text-align: center; }
.copyright a { text-decoration: underline; }

.download-overlay { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 14px 22px; background: rgba(242,242,247,.68); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .3s ease; }
.download-overlay.is-open { opacity: 1; }
.download-overlay[hidden] { display: none; }
.download-modal { position: relative; width: min(1396px, calc(100vw - 44px)); height: min(757px, calc(100vh - 28px)); overflow: auto; border-radius: 36px; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,.25); clip-path: inset(20px 20px 85% 85% round 36px); opacity: .6; transition: clip-path .5s cubic-bezier(.4,0,.2,1), opacity .25s ease; }
.download-overlay.is-open .download-modal { clip-path: inset(0 0 0 0 round 36px); opacity: 1; }
.modal-topbar { position: absolute; z-index: 2; top: 10px; left: 38px; right: 20px; display: flex; align-items: center; }
.modal-logo { width: 96px; }
.modal-topbar > span { margin-left: auto; margin-right: 28px; color: #909090; font-size: 20px; font-weight: 700; }
.modal-close { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--brand); transition: transform .5s cubic-bezier(.25,.1,.25,1), box-shadow .5s cubic-bezier(.25,.1,.25,1); }
.modal-close:hover { transform: scale(1.025); box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.modal-close img { width: 20px; height: 20px; }
.download-modal .download-panel-content { min-height: 757px; }
.download-modal .download-panel-content h2 { top: 160px; }
.download-modal .app-store-button { top: 283px; }
.download-modal .scan-label { top: 410px; }
.download-modal .qr-code { top: 453px; }
.toast { position: fixed; z-index: 600; left: 50%; bottom: 28px; max-width: calc(100% - 40px); padding: 12px 20px; border-radius: 20px; background: rgba(45,52,57,.94); color: #fff; font-size: 15px; opacity: 0; pointer-events: none; transform: translate(-50%, 12px); transition: opacity .25s ease, transform .25s ease; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) {
  .main-nav { gap: 10px; margin-right: 16px; }
  .main-nav > a { padding: 8px 10px; font-size: 17px; }
  .download-trigger { width: 190px; font-size: 18px; }
}

@media (max-width: 700px) {
  .site-header { top: 8px; width: calc(100% - 24px); height: 62px; padding: 0 8px 0 20px; border-radius: 31px; }
  .brand img { width: 78px; }
  .main-nav { gap: 0; margin-right: 8px; }
  .main-nav > a { display: none; }
  .main-nav > .contact-link { display: block; font-size: 14px; line-height: 20px; }
  .download-trigger { width: 112px; height: 42px; font-size: 16px; }
  .phone-hero { left: 50%; top: 46%; width: 250px; transform: translateX(-50%); }
  .hero-copy { left: 16px; right: 16px; top: 17%; width: auto; height: 120px; transform: none; text-align: center; }
  .hero-line p { font-size: 34px; white-space: normal; }
  .hero-line p:first-child { margin-bottom: 8px; }
  .download-sticky { top: 78px; height: calc(100vh - 40px); }
  .download-panel-content h2 { top: 90px; font-size: 36px; line-height: 44px; }
  .app-store-button { top: 180px; width: 280px; height: 78px; }
  .app-store-button strong { font-size: 31px; line-height: 36px; }
  .app-store-button small { font-size: 15px; }
  .scan-label { top: 300px; font-size: 17px; }
  .qr-code { top: 350px; width: 190px; height: 190px; }
  .phone-feature { left: 50%; top: 92px; width: 200px; margin-left: -100px; }
  .feature-buttons { left: 16px; right: 16px; top: auto; bottom: 24px; width: auto; height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .feature-buttons > button { position: relative; top: auto; width: 100%; height: 44px; border-radius: 22px; }
  .feature-buttons img { left: 24px; top: 50%; width: calc(var(--icon-w) * .75px); height: auto; }
  .feature-buttons span { left: 46px; top: 12px; font-size: 14px; line-height: 20px; }
  .newsletter h2 { font-size: 34px; }
  .subscribe-form { margin-top: 36px; }
  .subscribe-form input, .subscribe-form button { font-size: 16px; }
  .footer-links-wrap { padding-top: 36px; }
  .footer-links { width: 100%; grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .footer-links h3 { font-size: 24px; }
  .copyright { line-height: 1.8; }
  .download-overlay { padding: 8px; }
  .download-modal { width: calc(100vw - 16px); height: calc(100vh - 16px); border-radius: 28px; }
  .modal-topbar { left: 20px; right: 12px; }
  .download-modal .download-panel-content h2 { top: 130px; }
  .download-modal .app-store-button { top: 225px; }
  .download-modal .scan-label { top: 340px; }
  .download-modal .qr-code { top: 390px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.legal-page { background: var(--page); }
.legal-header { width: min(920px, calc(100% - 40px)); margin: 0 auto; padding: 28px 0; display: flex; align-items: center; justify-content: space-between; }
.legal-header img { width: 96px; }
.legal-header a:last-child { color: #717171; font-size: 16px; font-weight: 600; }
.legal-content { width: min(920px, calc(100% - 40px)); margin: 0 auto 80px; padding: 56px 64px; border: 1px solid #e5e5ea; border-radius: 28px; background: #fff; }
.legal-content h1 { margin: 0 0 28px; font-size: 42px; line-height: 1.2; }
.legal-content h2 { margin: 42px 0 16px; font-size: 26px; line-height: 1.35; }
.legal-content h3 { margin: 28px 0 10px; font-size: 20px; line-height: 1.4; }
.legal-content p { margin: 12px 0; color: #515151; font-size: 16px; line-height: 1.9; }
.legal-content a { color: #095fbd; text-decoration: underline; }
@media (max-width: 700px) {
  .legal-content { padding: 32px 22px; }
  .legal-content h1 { font-size: 32px; }
  .legal-content h2 { font-size: 23px; }
}

.ambient-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: var(--page); pointer-events: none; }
.ambient-blob { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform; }
.ambient-blob[data-ambient-blob="blue"] { width: 58.3vw; height: 66.7vh; background: radial-gradient(closest-side, rgba(0,122,255,.40), rgba(0,122,255,0)); }
.ambient-blob[data-ambient-blob="orange"] { width: 61vw; height: 66.7vh; background: radial-gradient(closest-side, rgba(255,90,46,.40), rgba(255,90,46,0)); }
.ambient-blob[data-ambient-blob="red"] { width: 46vw; height: 56vh; background: radial-gradient(closest-side, rgba(255,59,48,.40), rgba(255,59,48,0)); }
.ambient-blob[data-ambient-blob="cyan"] { width: 46vw; height: 56vh; background: radial-gradient(closest-side, rgba(50,173,230,.40), rgba(50,173,230,0)); }
.hero-sticky, .feature-sticky, .site-footer { background: transparent; }
.download-sticky { background: var(--panel); }
.footer-links-wrap { background: rgba(226,230,236,.78); }
.legal-header, .legal-content { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ambient-blob { will-change: auto; } }

@media (prefers-reduced-motion: reduce) { .hero-line.is-active p:last-child, .hero-line.is-leaving p:last-child { transition-delay: 0s; } }