:root {
  --ink: #0b1027;
  --ink-soft: #151d43;
  --blue: #4169ff;
  --blue-bright: #5d83ff;
  --blue-pale: #cbd8ff;
  --paper: #f4f6ff;
  --white: #ffffff;
  --line: rgba(203, 216, 255, 0.2);
  --muted: #aab4d8;
  --yellow: #f6c84a;
  --display: 'Noto Sans SC', sans-serif;
  --body: 'Manrope', 'Noto Sans SC', sans-serif;
}

* { box-sizing: border-box; }
html { overflow-x: clip; }
html { scroll-behavior: smooth; }
html { scroll-snap-type: y proximity; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--body); overflow-x: hidden; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .08; z-index: 20; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); }
a { color: inherit; text-decoration: none; }
.section-shell { width: min(1180px, calc(100% - 64px)); margin: 0 auto; }
.cursor-glow { position: fixed; width: 360px; height: 360px; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(65,105,255,.11), transparent 68%); filter: blur(5px); transform: translate3d(-300px,-300px,0); transition: transform .15s ease-out; }
.site-header { height: 82px; width: min(1280px, calc(100% - 64px)); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; }
.wordmark { display: flex; align-items: center; gap: 10px; }
.wordmark-mark { display: grid; place-items: center; width: 31px; height: 31px; color: var(--ink); background: var(--blue-pale); border: 2px solid var(--blue); font-family: var(--display); font-weight: 900; border-radius: 9px 5px 9px 5px; }
.wordmark-text { font-size: 18px; font-weight: 900; letter-spacing: .08em; }
.wordmark-en, .eyebrow, .image-caption, .cta-topline, .contact-label { font-family: 'DM Mono', monospace; }
.wordmark-en { color: var(--muted); font-size: 10px; letter-spacing: .18em; margin-left: 3px; }
.site-nav { display: flex; gap: 34px; margin-left: auto; margin-right: 46px; color: var(--muted); font-size: 13px; }
.site-nav a { transition: color .25s ease; }
.site-nav a:hover { color: var(--white); }
.header-download { border-bottom: 1px solid var(--blue-pale); padding-bottom: 6px; font-size: 12px; font-weight: 700; }
.header-download span { color: var(--blue-bright); margin-left: 8px; }
.hero { min-height: calc(100svh - 82px); position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 26px; padding: 42px 0 80px; }
.hero::before { content: ''; position: absolute; width: 600px; height: 600px; right: 2%; top: 4%; border-radius: 50%; background: radial-gradient(circle, rgba(65,105,255,.23), transparent 68%); filter: blur(10px); z-index: -1; }
.hero-copy { padding-left: clamp(0px, 5vw, 78px); position: relative; z-index: 2; }
.eyebrow { color: var(--blue-bright); letter-spacing: .15em; font-size: 10px; font-weight: 500; line-height: 1.4; }
.eyebrow-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); margin-right: 8px; box-shadow: 0 0 15px var(--yellow); }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--display); letter-spacing: -.08em; }
h1 { font-size: clamp(54px, 6.2vw, 92px); line-height: 1.1; margin: 18px 0 24px; font-weight: 900; }
h1 em, h2 em { color: var(--blue-pale); font-style: normal; }
.hero-lede { max-width: 420px; color: var(--muted); font-size: 15px; line-height: 1.9; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 38px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; font-size: 13px; font-weight: 800; border: 1px solid transparent; transition: transform .25s ease, background .25s ease, box-shadow .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: var(--blue); color: var(--white); box-shadow: 5px 5px 0 rgba(203,216,255,.22); }
.button-primary:hover { background: var(--blue-bright); box-shadow: 7px 7px 0 rgba(203,216,255,.22); }
.button-light { background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 rgba(11,16,39,.25); }
.button-icon { font-size: 19px; line-height: 1; }
.text-link { color: var(--blue-pale); font-size: 12px; border-bottom: 1px solid rgba(203,216,255,.45); padding-bottom: 6px; }
.text-link span { margin-left: 9px; color: var(--blue-bright); }
.hero-note { display: flex; align-items: center; gap: 12px; color: #6e7ba9; margin-top: 46px; font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .04em; }
.hero-note i { width: 3px; height: 3px; background: var(--yellow); border-radius: 50%; }
.hero-art { min-height: 570px; position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-art::before { content: ''; position: absolute; inset: 10% 0 6% 8%; background: linear-gradient(145deg, #121e4d, #0d1534 65%, #111936); border: 1px solid rgba(93,131,255,.38); transform: rotate(3deg); z-index: -2; }
.hero-art::after { content: ''; position: absolute; width: 74%; height: 65%; right: 0; bottom: 3%; border: 1px solid rgba(246,200,74,.52); transform: rotate(-8deg); z-index: -1; }
.hero-art img { width: 108%; max-width: 750px; filter: drop-shadow(0 30px 30px rgba(0,0,0,.4)); animation: float 7s ease-in-out infinite; }
.hero-art-orbit { position: absolute; border: 1px solid rgba(93,131,255,.35); border-radius: 50%; pointer-events: none; }
.orbit-one { width: 77%; aspect-ratio: 1; animation: spin 30s linear infinite; }
.orbit-two { width: 53%; aspect-ratio: 1; border-color: rgba(246,200,74,.23); animation: spin 20s linear reverse infinite; }
.hero-art-label { position: absolute; font: 10px 'DM Mono', monospace; letter-spacing: .16em; color: #8290bd; z-index: 2; }
.label-top { right: 1%; top: 2%; }
.label-bottom { left: 4%; bottom: 0; color: var(--blue-bright); }
.hero-sticker { position: absolute; right: 10%; bottom: 13%; width: 82px; height: 82px; display: grid; place-items: center; text-align: center; color: var(--ink); background: var(--yellow); border-radius: 50%; transform: rotate(11deg); font-family: var(--display); font-size: 12px; line-height: 1.15; box-shadow: 5px 6px 0 var(--ink-soft); }
.hero-sticker strong { font-size: 15px; }
.scroll-cue { position: absolute; bottom: 28px; left: 0; color: #6e7ba9; font: 9px 'DM Mono', monospace; letter-spacing: .14em; writing-mode: vertical-rl; display: flex; align-items: center; gap: 10px; }
.scroll-cue span { height: 42px; width: 1px; background: var(--blue); }
.ticker { width: 100%; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--blue-pale); font: 11px 'DM Mono', monospace; letter-spacing: .08em; white-space: nowrap; }
.ticker-track { width: max-content; display: flex; align-items: center; gap: 32px; padding: 20px 0; animation: marquee 28s linear infinite; }
.ticker b { color: var(--yellow); font-size: 13px; }
.section { padding: 160px 0; }
.features-section { display: grid; grid-template-columns: .72fr 1.28fr; gap: 12%; }
.section-intro h2, .experience-heading h2, .detail-copy h2, .privacy-copy h2 { font-size: clamp(42px, 5vw, 70px); line-height: 1.12; margin: 20px 0 28px; }
.section-intro > p:last-child, .detail-copy > p, .privacy-copy > p { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 390px; }
.section-intro h2 span, .privacy-copy h2 span { color: var(--blue-bright); }
.feature-list { border-top: 1px solid var(--line); }
.feature-row { display: grid; grid-template-columns: 50px 1fr 1fr 32px; gap: 22px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--line); }
.feature-index { color: var(--blue-bright); font: 11px 'DM Mono', monospace; }
.feature-title { display: flex; align-items: center; gap: 14px; }
.feature-title h3 { font-family: var(--display); font-size: 18px; letter-spacing: -.04em; margin: 0; }
.feature-icon { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--blue); color: var(--blue-pale); font-size: 17px; }
.icon-notify { border-radius: 50%; }
.icon-ai { border-radius: 8px; background: rgba(65,105,255,.16); }
.icon-chart { transform: rotate(45deg); border-radius: 5px; }
.icon-chart::first-letter { transform: rotate(-45deg); }
.feature-row > p { color: var(--muted); line-height: 1.7; font-size: 12px; margin: 0; }
.feature-arrow { color: var(--blue-bright); font-size: 23px; justify-self: end; transition: transform .25s ease; }
.feature-row:hover .feature-arrow { transform: translate(4px, -4px); }
.experience-section { background: var(--paper); color: var(--ink); padding-bottom: 170px; }
.experience-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; margin-bottom: 68px; }
.experience-heading .eyebrow { color: var(--blue); }
.experience-heading h2 { margin-bottom: 0; }
.experience-heading h2 em { color: #4561c2; }
.showcase { display: grid; grid-template-columns: 1.25fr .75fr; gap: 34px; }
.showcase figure { margin: 0; position: relative; }
.showcase-main { background: #e4e9ff; padding: 15px; }
.showcase-main img { width: 100%; height: 550px; object-fit: cover; object-position: top center; display: block; }
.showcase-side { display: grid; gap: 34px; }
.showcase-small { background: #dce4ff; padding: 15px; display: grid; grid-template-rows: auto 1fr auto; }
.showcase-small img { width: 100%; height: 245px; object-fit: cover; object-position: top center; display: block; }
.image-caption { display: flex; justify-content: space-between; color: #5463a2; font-size: 9px; letter-spacing: .12em; padding: 0 0 12px; }
.showcase figcaption { display: flex; align-items: baseline; gap: 11px; padding: 14px 2px 2px; }
.showcase figcaption strong { font-family: var(--display); font-size: 15px; letter-spacing: -.04em; }
.showcase figcaption span { color: #6673a8; font-size: 11px; }
.showcase-small figcaption { display: block; }
.showcase-small figcaption strong { font-size: 13px; }
.detail-section { display: grid; grid-template-columns: 1.15fr .85fr; gap: 11%; align-items: center; }
.detail-image { position: relative; height: 530px; overflow: hidden; border: 1px solid rgba(93,131,255,.35); background: #141e46; }
.detail-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,16,39,.32), transparent 45%, rgba(11,16,39,.18)); pointer-events: none; }
.detail-image img { width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: .9; }
.detail-image-tag { position: absolute; z-index: 1; left: 20px; bottom: 18px; font: 11px 'DM Mono', monospace; color: var(--paper); letter-spacing: .08em; }
.download-section { background: #111a3e; position: relative; overflow: hidden; }
.download-section::before { content: ''; position: absolute; inset: 0; opacity: .35; background: linear-gradient(110deg, transparent 35%, rgba(65,105,255,.2), transparent 64%); pointer-events: none; }
.download-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 10%; align-items: center; position: relative; }
.download-copy h2 { margin-bottom: 25px; }
.download-copy > p { color: var(--muted); max-width: 420px; font-size: 14px; line-height: 1.9; }
.download-meta { display: flex; gap: 25px; margin: 34px 0; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.download-meta div { display: grid; gap: 6px; }
.meta-label { color: #7180b6; font: 9px 'DM Mono', monospace; letter-spacing: .1em; }
.download-meta strong { font-size: 14px; color: var(--blue-pale); }
.download-main-button { min-width: 210px; }
.download-hint { font-size: 11px !important; color: #7481ae !important; margin-top: 17px; }
.download-visual { min-height: 450px; display: grid; place-items: center; position: relative; }
.download-visual::before { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: rgba(65,105,255,.18); filter: blur(20px); }
.download-visual img { width: 245px; height: 245px; object-fit: contain; position: relative; z-index: 1; filter: drop-shadow(0 25px 25px rgba(0,0,0,.35)); animation: float 6s ease-in-out infinite; }
.download-ring { position: absolute; width: 390px; height: 390px; border: 1px solid rgba(93,131,255,.4); border-radius: 50%; animation: spin 26s linear infinite; }
.download-ring::before, .download-ring::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 16px var(--yellow); }
.download-ring::before { left: 30px; top: 53px; }
.download-ring::after { right: 19px; bottom: 78px; background: var(--blue-pale); box-shadow: 0 0 16px var(--blue-pale); }
.download-orbit-label { position: absolute; right: 3%; top: 6%; color: #7d8bc1; font: 9px 'DM Mono', monospace; line-height: 1.7; letter-spacing: .12em; transform: rotate(10deg); }
.download-orbit-label span { color: var(--blue-bright); }
.download-version-chip { position: absolute; left: 7%; bottom: 7%; z-index: 2; display: grid; gap: 3px; padding: 12px 16px; background: var(--yellow); color: var(--ink); transform: rotate(-7deg); box-shadow: 5px 5px 0 rgba(0,0,0,.28); }
.download-version-chip span { font: 8px 'DM Mono', monospace; letter-spacing: .12em; }
.download-version-chip strong { font-size: 22px; letter-spacing: -.06em; }
.changelog-section { padding-top: 145px; }
.changelog-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 35px; margin-bottom: 65px; }
.changelog-header h2 { margin-bottom: 0; }
.changelog-header h2 span { color: var(--blue-bright); }
.changelog-header > p { max-width: 300px; color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 6px; }
.changelog-list { border-top: 1px solid var(--line); }
.changelog-item { display: grid; grid-template-columns: 180px 1fr 40px; gap: 35px; padding: 34px 0; border-bottom: 1px solid var(--line); align-items: start; }
.changelog-featured { background: linear-gradient(90deg, rgba(65,105,255,.1), transparent 70%); padding-left: 18px; padding-right: 14px; border-left: 2px solid var(--blue-bright); }
.changelog-date { display: grid; gap: 8px; color: #7180b6; font: 10px 'DM Mono', monospace; letter-spacing: .08em; }
.changelog-date strong { color: var(--blue-pale); font-weight: 500; }
.changelog-version { color: var(--blue-bright); font: 11px 'DM Mono', monospace; letter-spacing: .08em; }
.changelog-version span { color: #7180b6; margin-left: 10px; font-size: 9px; }
.changelog-body h3 { font-family: var(--display); font-size: 22px; letter-spacing: -.05em; margin: 13px 0 10px; }
.changelog-body p { max-width: 600px; color: var(--muted); font-size: 13px; line-height: 1.8; margin-bottom: 15px; }
.changelog-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.changelog-tags span { border: 1px solid rgba(93,131,255,.45); padding: 5px 9px; color: #96a4d3; font: 9px 'DM Mono', monospace; }
.changelog-arrow { justify-self: end; color: var(--blue-bright); font-size: 24px; }
.changelog-loading { color: #7180b6; padding: 24px 0; font-size: 11px; }
.changelog-loading.loaded { display: none; }
.load-more { display: block; margin: 28px auto 0; border: 0; border-bottom: 1px solid var(--blue-pale); padding: 0 0 8px; color: var(--blue-pale); background: none; font: 11px 'DM Mono', monospace; cursor: pointer; }
.load-more span { color: var(--blue-bright); margin-left: 8px; }
.faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 14%; padding-top: 150px; }
.faq-heading h2 { margin-top: 20px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); padding: 22px 0; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; font-family: var(--display); font-size: 16px; font-weight: 700; letter-spacing: -.03em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary span { color: var(--blue-bright); font: 22px 'DM Mono', monospace; transition: transform .25s ease; }
.faq-item[open] summary span { transform: rotate(45deg); }
.faq-item p { max-width: 650px; margin: 16px 40px 2px 0; color: var(--muted); font-size: 13px; line-height: 1.85; }
.check-list { list-style: none; padding: 0; margin: 34px 0 0; display: grid; gap: 18px; color: var(--blue-pale); font-size: 13px; }
.check-list li { display: flex; align-items: center; gap: 11px; }
.check-list span { display: grid; place-items: center; width: 20px; height: 20px; background: var(--blue); color: var(--white); font-size: 11px; }
.privacy-section { background: var(--blue); color: var(--white); position: relative; overflow: hidden; }
.privacy-section::before { content: ''; position: absolute; width: 550px; height: 550px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; right: -90px; top: -150px; box-shadow: 0 0 0 34px rgba(255,255,255,.04), 0 0 0 68px rgba(255,255,255,.04); }
.privacy-inner { display: grid; grid-template-columns: 80px 1fr 180px; gap: 7%; align-items: center; }
.privacy-mark { font-size: 58px; color: var(--yellow); align-self: start; line-height: 1; }
.privacy-copy .eyebrow { color: var(--ink); }
.privacy-copy h2 span, .privacy-copy h2 em { color: var(--ink); }
.privacy-copy > p { color: rgba(255,255,255,.72); }
.privacy-aside { border-left: 1px solid rgba(11,16,39,.35); padding-left: 22px; display: grid; gap: 9px; color: rgba(255,255,255,.76); font-size: 11px; line-height: 1.65; }
.aside-number { color: var(--ink); font-size: 38px; font-weight: 800; letter-spacing: -.08em; }
.cta-section { padding-top: 170px; padding-bottom: 120px; }
.cta-panel { position: relative; background: var(--blue-pale); color: var(--ink); padding: 56px clamp(28px, 7vw, 95px) 65px; overflow: hidden; }
.cta-panel::after { content: '知'; position: absolute; font: 900 400px var(--display); color: rgba(65,105,255,.15); right: -20px; top: -85px; line-height: 1; pointer-events: none; }
.cta-topline { position: relative; z-index: 1; display: flex; justify-content: space-between; color: #5265b0; font-size: 9px; letter-spacing: .12em; }
.cta-panel h2 { position: relative; z-index: 1; font-size: clamp(44px, 6vw, 78px); line-height: 1.08; margin: 45px 0 70px; }
.cta-panel h2 em { color: #314cb2; }
.cta-bottom { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.contact-block { display: grid; gap: 6px; text-align: right; font-size: 12px; color: #43549e; }
.contact-block a { color: var(--ink); font-weight: 700; }
.contact-label { font-size: 9px; letter-spacing: .12em; color: #6171b4; }
.site-footer { min-height: 92px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #7481ae; font-size: 11px; }
.footer-brand { display: flex; align-items: center; gap: 9px; color: var(--paper); font-weight: 800; font-size: 13px; }
.footer-brand img { width: 26px; height: 26px; object-fit: contain; }
.site-footer a { color: var(--blue-pale); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .12s; }
.reveal-delay-2 { transition-delay: .24s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(-14px) rotate(.4deg); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 860px) {
  .section-shell, .site-header { width: min(100% - 36px, 620px); }
  .site-header { height: 72px; }
  .site-nav { display: none; }
  .header-download { margin-left: auto; }
  .hero { display: flex; flex-direction: column; align-items: stretch; padding-top: 56px; min-height: auto; }
  .hero-copy { padding-left: 0; }
  h1 { font-size: clamp(48px, 14vw, 70px); }
  .hero-lede { font-size: 14px; max-width: 360px; }
  .hero-art { min-height: 350px; margin: 16px -18px 0; }
  .hero-art img { width: 112%; }
  .hero-art::before { inset: 7% 0 3% 7%; }
  .hero-sticker { right: 7%; bottom: 6%; transform: scale(.82) rotate(11deg); }
  .scroll-cue { display: none; }
  .section { padding: 100px 0; }
  .features-section, .detail-section { display: block; }
  .section-intro { margin-bottom: 58px; }
  .feature-row { grid-template-columns: 34px 1fr 26px; gap: 13px; align-items: start; }
  .feature-title { grid-column: 2 / 4; }
  .feature-row > p { grid-column: 2 / 4; }
  .feature-arrow { grid-column: 3; grid-row: 1; }
  .experience-heading { display: block; margin-bottom: 48px; }
  .showcase { display: block; }
  .showcase-main { margin-bottom: 24px; }
  .showcase-main img { height: 440px; }
  .showcase-side { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
  .showcase-small { padding: 10px; }
  .showcase-small img { height: 190px; }
  .showcase figcaption { display: block; }
  .showcase figcaption span { display: block; margin-top: 6px; }
  .detail-image { height: 390px; margin-bottom: 60px; }
  .download-inner { display: block; }
  .download-copy { margin-bottom: 55px; }
  .download-meta { gap: 16px; justify-content: space-between; }
  .download-meta strong { font-size: 12px; }
  .download-visual { min-height: 330px; }
  .download-ring { width: 285px; height: 285px; }
  .download-visual img { width: 185px; height: 185px; }
  .changelog-header { display: block; margin-bottom: 45px; }
  .changelog-header > p { margin-top: 24px; }
  .changelog-item { grid-template-columns: 1fr 26px; gap: 18px; padding: 27px 0; }
  .changelog-date { grid-column: 1 / 3; display: flex; gap: 12px; }
  .changelog-body { grid-column: 1; }
  .changelog-body h3 { font-size: 19px; }
  .changelog-arrow { grid-column: 2; grid-row: 2; }
  .faq-section { display: block; padding-top: 100px; }
  .faq-heading { margin-bottom: 48px; }
  .privacy-inner { grid-template-columns: 42px 1fr; gap: 18px; }
  .privacy-aside { grid-column: 2; border-left: 0; border-top: 1px solid rgba(11,16,39,.35); padding: 17px 0 0; display: flex; align-items: baseline; gap: 15px; }
  .cta-section { padding-top: 100px; padding-bottom: 70px; }
  .cta-panel { padding: 36px 24px 40px; }
  .cta-panel h2 { margin: 42px 0 52px; }
  .cta-bottom { display: block; }
  .contact-block { text-align: left; margin-top: 34px; }
  .site-footer { min-height: 120px; flex-wrap: wrap; gap: 10px; padding: 24px 0; }
}

/* Multi-page navigation and full-screen section rhythm */
.site-nav a.is-active { color: var(--white); position: relative; }
.site-nav a.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; border-radius: 2px; background: var(--blue-bright); }
.site-nav { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.menu-toggle { display: none; }
.snap-section { scroll-snap-align: start; scroll-snap-stop: normal; }
body { scroll-snap-type: y proximity; }
.page-hero { min-height: calc(100svh - 88px); display: flex; flex-direction: column; justify-content: center; padding-top: 70px; padding-bottom: 110px; }
.page-hero h1 { max-width: 850px; margin: 22px 0 28px; }
.page-lede { max-width: 460px; color: var(--muted); font-size: 16px; line-height: 1.9; }
.page-hero-light { color: var(--ink); }
.page-hero-light .eyebrow { color: var(--blue); }
.page-hero-light .page-lede { color: #6170a2; }
.experience-page { background: var(--paper); color: var(--ink); }
.experience-page .site-header { color: var(--ink); }
.experience-page .site-header { background: linear-gradient(180deg, rgba(247,248,255,.96), rgba(247,248,255,.72) 72%, transparent); }
.experience-page .wordmark-en, .experience-page .site-nav { color: #6170a2; }
.experience-page .site-nav a.is-active { color: var(--ink); }
.experience-page .header-download { color: var(--ink); background: rgba(77,111,255,.12); }
.feature-detail-list { padding-top: 30px; padding-bottom: 160px; display: grid; gap: 120px; }
.feature-detail { display: grid; grid-template-columns: 56px minmax(0, .9fr) minmax(250px, .7fr); gap: 30px; align-items: center; }
.feature-detail-reverse { grid-template-columns: 56px minmax(250px, .7fr) minmax(0, .9fr); }
.feature-detail-reverse > div { order: 3; }
.feature-detail-reverse > img { order: 2; }
.feature-detail-no { color: var(--blue-bright); font: 12px 'DM Mono', monospace; padding-top: 6px; }
.feature-detail h2 { font-family: var(--display); font-size: clamp(28px, 3vw, 42px); letter-spacing: -.06em; margin: 14px 0 18px; }
.feature-detail p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.9; max-width: 480px; margin-bottom: 25px; }
.feature-detail > img { justify-self: end; width: min(100%, 300px); height: 410px; object-fit: cover; object-position: top center; border-radius: 28px; box-shadow: 0 26px 65px rgba(26,43,110,.22); }
.feature-detail:nth-child(3) > img { width: 100%; height: 260px; object-fit: cover; object-position: top center; }
.experience-showcase { display: grid; grid-template-columns: 1.25fr .75fr; gap: 28px; padding-top: 30px; padding-bottom: 150px; }
.download-page-hero { min-height: calc(100svh - 88px); display: grid; align-items: center; background: radial-gradient(60% 100% at 80% 50%, rgba(71,98,222,.24), transparent 62%); }
.download-page-hero .download-inner { padding-top: 40px; padding-bottom: 100px; }
.download-page-hero h1 { font-size: clamp(54px, 6vw, 86px); margin-top: 20px; }
.download-trust { padding-top: 80px; padding-bottom: 150px; }
.trust-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 25px; margin-top: 38px; }
.trust-item { display: grid; gap: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.trust-item strong { font-family: var(--display); font-size: 19px; }
.trust-item span { color: var(--muted); font-size: 12px; line-height: 1.7; }
.changelog-page-section { padding-top: 25px; padding-bottom: 160px; }
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 22px; padding-top: 20px; padding-bottom: 150px; }
.contact-card { min-height: 240px; position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 27px; border-radius: 26px; background: linear-gradient(145deg, rgba(86,114,226,.2), rgba(27,40,94,.45)); border: 1px solid rgba(154,174,255,.16); transition: transform .35s ease, border-color .35s ease, background .35s ease; }
.contact-card:hover { transform: translateY(-8px); border-color: rgba(154,174,255,.42); background: linear-gradient(145deg, rgba(95,126,255,.34), rgba(27,40,94,.5)); }
.contact-card-main { background: linear-gradient(140deg, #607eff, #314bb8); }
.contact-card-label { color: var(--blue-pale); font: 10px 'DM Mono', monospace; letter-spacing: .14em; }
.contact-card strong { font-family: var(--display); font-size: clamp(21px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -.05em; }
.contact-card-arrow { align-self: flex-end; color: var(--blue-pale); font-size: 26px; }
.contact-card-note { color: var(--muted); font-size: 11px; }
.contact-copy { width: 100%; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.contact-copy:focus-visible { outline: 2px solid var(--yellow); outline-offset: 6px; }
.contact-copy.is-copied .contact-card-note { color: var(--yellow); }
.home-overview { min-height: calc(100svh - 88px); display: grid; grid-template-columns: .72fr 1.28fr; gap: 12%; align-items: center; padding-top: 110px; padding-bottom: 110px; }
.home-overview-copy h2 { font-family: var(--display); font-size: clamp(44px, 5.2vw, 72px); line-height: 1.05; letter-spacing: -.08em; margin: 20px 0 24px; }
.home-overview-copy h2 span { color: var(--blue-bright); }
.home-overview-copy > p:not(.eyebrow) { max-width: 320px; color: var(--muted); font-size: 14px; line-height: 1.9; }
.overview-links { border-top: 1px solid var(--line); }
.overview-link { display: grid; grid-template-columns: 58px 1fr 30px; align-items: center; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--line); transition: padding .3s ease, color .3s ease; }
.overview-link:hover { padding-left: 12px; color: var(--blue-pale); }
.overview-number { color: var(--blue-bright); font: 11px 'DM Mono', monospace; }
.overview-link strong, .overview-link small { display: block; }
.overview-link strong { font-family: var(--display); font-size: 18px; letter-spacing: -.04em; }
.overview-link small { color: var(--muted); font-size: 12px; margin-top: 7px; }
.overview-link b { justify-self: end; color: var(--blue-bright); font-size: 22px; font-weight: 400; }
.home-quote { min-height: 62vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 36px; padding-top: 80px; padding-bottom: 140px; }
.home-quote p { font-family: var(--display); font-size: clamp(32px, 4.5vw, 65px); font-weight: 800; line-height: 1.2; letter-spacing: -.08em; }
.home-quote em { color: var(--blue-bright); font-style: normal; }
.experience-intro { min-height: calc(100svh - 88px); background: radial-gradient(50% 70% at 76% 48%, rgba(92,122,239,.2), transparent 68%); }
.experience-intro-inner { min-height: calc(100svh - 88px); display: grid; grid-template-columns: 1fr .8fr; align-items: center; }
.experience-intro h1 { color: var(--ink); font-size: clamp(58px, 7vw, 104px); margin: 20px 0 28px; }
.experience-intro h1 em { background: linear-gradient(110deg,#4d6fff,#8aa1ff); -webkit-background-clip:text; background-clip:text; color:transparent; }
.experience-intro .page-lede { color: #6674a4; }
.experience-intro-orbit { justify-self: center; width: min(31vw, 360px); aspect-ratio: 1; display: grid; place-items: center; position: relative; border: 1px solid rgba(77,111,255,.25); border-radius: 50%; box-shadow: 0 0 0 28px rgba(77,111,255,.05), 0 0 0 56px rgba(77,111,255,.04); }
.experience-intro-orbit img { width: 62%; filter: drop-shadow(0 26px 30px rgba(39,62,153,.28)); animation: float 6s ease-in-out infinite; }
.orbit-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 18px var(--yellow); right: 4%; top: 18%; }
.orbit-label { position: absolute; left: -30px; bottom: 18%; color: #6474ac; font: 9px 'DM Mono',monospace; letter-spacing:.12em; line-height:1.8; transform: rotate(-9deg); }
.flow-section { padding: 150px 0 170px; background: var(--paper); color: var(--ink); }
.flow-heading { margin-bottom: 80px; }
.flow-heading .eyebrow, .flow-step-kicker { color: var(--blue); }
.flow-heading h2 { font-family: var(--display); font-size: clamp(42px, 5.2vw, 72px); line-height:1.06; letter-spacing:-.08em; margin:20px 0 0; }
.flow-heading h2 em { color:#526bc9; font-style:normal; }
.flow-steps { display:grid; gap:110px; }
.flow-step { display:grid; grid-template-columns:52px minmax(250px,.8fr) minmax(340px,1.1fr); gap:30px; align-items:center; }
.flow-step-reverse { grid-template-columns:52px minmax(340px,1.1fr) minmax(250px,.8fr); }
.flow-step-reverse .flow-step-copy { order:3; }.flow-step-reverse figure { order:2; }
.flow-step-no { color:var(--blue); font:12px 'DM Mono',monospace; align-self:start; padding-top:8px; }
.flow-step-kicker { font:10px 'DM Mono',monospace; letter-spacing:.14em; }
.flow-step h3 { font-family:var(--display); font-size:clamp(25px,3vw,40px); letter-spacing:-.06em; margin:14px 0 14px; }
.flow-step-copy p { max-width:380px; color:#6876a4; font-size:14px; line-height:1.9; }
.flow-step figure { margin:0; padding:12px; border-radius:26px; background:#e4eaff; box-shadow:0 24px 65px rgba(54,78,154,.13); }
.flow-step figure img { display:block; width:100%; height:350px; object-fit:cover; object-position:top center; border-radius:17px; }
.flow-step figcaption { padding:14px 6px 3px; font-family:var(--display); font-size:14px; font-weight:700; }
.flow-step .flow-chart img { height:220px; object-fit:cover; object-position:top 18%; }
@media (max-width: 860px) {
  body { scroll-snap-type: y proximity; }
  .page-hero { min-height: calc(100svh - 74px); padding-top: 44px; padding-bottom: 80px; }
  .page-hero h1 { font-size: clamp(47px, 13vw, 70px); }
  .feature-detail-list { gap: 80px; padding-top: 15px; padding-bottom: 110px; }
  .feature-detail, .feature-detail-reverse { display: grid; grid-template-columns: 35px 1fr; gap: 15px; }
  .feature-detail > div, .feature-detail-reverse > div { order: 2; }
  .feature-detail > img, .feature-detail-reverse > img { order: 3; grid-column: 2; justify-self: stretch; width: 100%; height: 340px; }
  .feature-detail:nth-child(3) > img { height: 180px; }
  .experience-showcase { display: block; padding-bottom: 100px; }
  .experience-showcase .showcase-main { margin-bottom: 24px; }
  .download-page-hero .download-inner { padding-top: 0; padding-bottom: 0; }
  .download-trust { padding-top: 65px; padding-bottom: 100px; }
  .trust-grid { grid-template-columns: 1fr; gap: 24px; }
  .changelog-page-section { padding-top: 5px; padding-bottom: 100px; }
  .contact-grid { grid-template-columns: 1fr; gap: 14px; padding-bottom: 100px; }
  .contact-card { min-height: 180px; }
  .site-header { gap: 10px; }
  .wordmark { flex-shrink: 0; }
  .wordmark-en { display: none; }
  .header-download { margin-left: 0; padding: 10px 13px; font-size: 11px; white-space: nowrap; }
  .menu-toggle { width: 36px; height: 36px; margin-left: auto; padding: 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 1px solid rgba(154,174,255,.24); border-radius: 50%; color: var(--blue-pale); background: rgba(127,154,255,.1); cursor: pointer; }
  .menu-toggle span { width: 13px; height: 1px; background: currentColor; transition: transform .25s ease; }
  .menu-toggle.is-open span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle.is-open span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .site-nav { display: flex; position: absolute; top: calc(100% - 4px); left: 0; right: 0; margin: 0; padding: 12px 18px; gap: 0; flex-direction: column; border: 1px solid rgba(154,174,255,.18); border-radius: 20px; background: rgba(12,20,53,.96); box-shadow: 0 24px 50px rgba(3,7,25,.35); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease, visibility .25s ease; }
  .site-nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
  .site-nav a { padding: 13px 0; border-bottom: 1px solid rgba(187,202,255,.12); }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a.is-active::after { display: none; }
  .experience-page .site-nav { background: rgba(247,248,255,.97); border-color: rgba(48,70,153,.16); }
  .home-overview { min-height: auto; display: block; padding-top: 105px; padding-bottom: 105px; }
  .home-overview-copy { margin-bottom: 52px; }
  .overview-link { grid-template-columns: 38px 1fr 24px; gap: 12px; padding: 21px 0; }
  .overview-link strong { font-size: 16px; }
  .overview-link small { font-size: 11px; }
  .home-quote { min-height: 58vh; padding-top: 75px; padding-bottom: 100px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; } .reveal { opacity: 1; transform: none; } }

/* Final art direction pass: Moonshot-inspired editorial rhythm, adapted to
   知账's deep-blue brand and real app imagery. */
html { scroll-snap-type: y proximity; scroll-padding-top: 0; }
body { scroll-snap-type: none; }
.site-header { position: absolute; inset: 0 0 auto; height: 88px; width: min(1280px, calc(100% - 64px)); }
.site-header::after { content: ''; position: absolute; inset: 0 -200vw; z-index: -1; background: linear-gradient(180deg, rgba(8,13,34,.62), transparent); pointer-events: none; }
.wordmark { gap: 9px; }
.wordmark-mark { width: 40px; height: 40px; padding: 3px; background: radial-gradient(circle at 35% 25%, #f4f6ff, #b7c8ff 72%); box-shadow: 0 8px 25px rgba(110,139,255,.28); border-radius: 50%; overflow: hidden; }
.wordmark-mark img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; transform: none; }
.wordmark-text { font-size: 19px; letter-spacing: .04em; }
.wordmark-en { font-size: 9px; opacity: .7; }
.site-nav { gap: 30px; font-size: 12px; font-weight: 700; }
.header-download { padding: 12px 18px; font-size: 12px; }
.snap-section { scroll-snap-align: start; scroll-margin-top: 0; }
.home-hero { min-height: 100svh; padding-top: 88px; }
.hero-copy { padding-left: clamp(0px, 4.5vw, 70px); }
.hero-art { min-height: 650px; }
.hero-art img { width: 118%; }
.home-overview { min-height: 100svh; padding-top: 150px; padding-bottom: 150px; }
.home-quote { min-height: 72svh; }
.page-hero { min-height: 100svh; padding-top: 130px; }
.page-hero h1 { font-size: clamp(58px, 7.1vw, 108px); }
.feature-detail-list { padding-top: 100px; }
.feature-detail { min-height: 62svh; }
.experience-intro, .experience-intro-inner { min-height: 100svh; }
.flow-section { padding-top: 170px; }
.download-page-hero { min-height: 100svh; }
.download-page-hero .download-inner { min-height: 100svh; grid-template-columns: .88fr 1.12fr; gap: 5%; }
.download-page-hero .download-visual { min-height: 620px; }
.download-page-hero .download-ring { width: 500px; height: 500px; }
.download-page-hero .download-visual img { width: 300px; height: 300px; }
.download-page-hero .download-version-chip { left: 4%; bottom: 12%; }
.download-trust { min-height: 56svh; display: flex; flex-direction: column; justify-content: center; }
.contact-grid { min-height: 58svh; align-items: stretch; }
.contact-card { min-height: 270px; }
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 30; width: 100%; height: 2px; pointer-events: none; background: transparent; }
.scroll-progress span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--yellow), var(--blue-bright)); box-shadow: 0 0 12px rgba(127,154,255,.75); }
.ambient-canvas { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; opacity: .48; mix-blend-mode: screen; }
main, .site-footer { position: relative; z-index: 1; }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .22s ease both; }
::view-transition-new(root) { animation: page-in .38s cubic-bezier(.2,.7,.2,1) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(10px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(-10px); } }

@media (max-width: 860px) {
  .site-header { width: calc(100% - 36px); height: 74px; }
  /* Extend the header wash exactly to the viewport edges without creating a
     horizontal scroll range on narrow devices. */
  .site-header::after { inset: 0 -18px; }
  .home-hero { padding-top: 104px; }
  .hero-art { min-height: 380px; }
  .hero-art img { width: 98%; }
  .home-overview { min-height: 100svh; padding-top: 110px; padding-bottom: 110px; }
  .home-quote { min-height: 62svh; }
  .page-hero { min-height: 100svh; padding-top: 110px; }
  .page-hero h1 { font-size: clamp(48px, 14vw, 78px); }
  .feature-detail { min-height: auto; }
  .experience-intro, .experience-intro-inner { min-height: 100svh; }
  .flow-section { padding-top: 110px; }
  .download-page-hero { min-height: 100svh; }
  .download-page-hero .download-inner { min-height: auto; display: block; padding-top: 95px; }
  .download-page-hero .download-visual { min-height: 390px; margin-top: 40px; }
  .download-page-hero .download-ring { width: 300px; height: 300px; }
  .download-page-hero .download-visual img { width: 190px; height: 190px; }
  .download-page-hero .download-version-chip { left: 8%; bottom: 4%; }
  .download-trust { min-height: auto; display: block; }
  .contact-grid { min-height: auto; }
  .scroll-progress { height: 2px; }
}

/* Keep the reference-style nav floating over the hero instead of adding an
   extra 88px content band that would throw scroll-snap alignment off. */
.site-header { position: absolute; }

/* 2026-08-29 structure pass: persistent navigation, balanced full-screen
   chapters, real product media, and a dedicated mobile composition. */
.site-header {
  position: fixed;
  inset: 14px auto auto 50%;
  transform: translateX(-50%);
  width: min(1320px, calc(100% - 44px));
  height: 64px;
  padding: 0 18px;
  border: 1px solid rgba(183, 200, 255, .16);
  border-radius: 999px;
  background: rgba(8, 13, 34, .62);
  box-shadow: 0 16px 50px rgba(3, 8, 28, .22);
  backdrop-filter: blur(20px) saturate(135%);
  z-index: 50;
  inset: 14px auto auto 50% !important;
}
.site-header::after {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(113, 143, 255, .1), transparent 42%, rgba(113, 143, 255, .06));
}
.experience-page .site-header {
  background: rgba(247, 248, 255, .78);
  border-color: rgba(63, 87, 176, .14);
  box-shadow: 0 16px 45px rgba(47, 68, 145, .12);
}
.wordmark-mark { width: 38px; height: 38px; padding: 3px; }
.wordmark-mark img { display: block; width: 100% !important; height: 100%; max-width: none; object-fit: contain; transform: none !important; }
.home-hero { min-height: 100svh; padding-top: 100px; padding-bottom: 34px; }
.hero-art { min-height: min(66vw, 650px); transform: translate3d(0, var(--hero-shift, 0px), 0) scale(.94); transform-origin: center right; }
.hero-art img { width: 108%; }

.home-overview.section-shell {
  width: min(1440px, calc(100% - 96px));
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(260px, .7fr) minmax(240px, 340px) minmax(380px, 1fr);
  gap: clamp(46px, 6vw, 96px);
  align-items: center;
  padding-top: 116px;
  padding-bottom: 82px;
  position: relative;
  isolation: isolate;
}
.home-overview::before {
  content: '';
  position: absolute;
  width: min(58vw, 820px);
  aspect-ratio: 1;
  left: 36%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 107, 255, .19), rgba(75, 107, 255, .04) 48%, transparent 70%);
  filter: blur(4px);
  z-index: -1;
  pointer-events: none;
}
.home-overview-copy > p:not(.eyebrow) { max-width: 380px; }
.home-overview-copy .text-link { display: inline-block; margin-top: 26px; }
.overview-device { margin: 0; justify-self: center; position: relative; }
.overview-device::before {
  content: '';
  position: absolute;
  inset: -24px -38px;
  border: 1px solid rgba(135, 160, 255, .2);
  border-radius: 46% 54% 50% 50%;
  transform: rotate(-7deg);
  pointer-events: none;
}
.overview-device-screen {
  width: clamp(220px, 18vw, 290px);
  height: clamp(410px, 52vh, 560px);
  padding: 7px;
  border-radius: 34px;
  overflow: hidden;
  background: linear-gradient(150deg, rgba(195, 208, 255, .86), rgba(72, 100, 221, .28));
  box-shadow: 0 30px 80px rgba(1, 6, 28, .48), inset 0 0 0 1px rgba(255, 255, 255, .28);
  transform: rotate(2.5deg);
}
.overview-device-screen img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; border-radius: 27px; }
.overview-device figcaption { display: grid; gap: 4px; margin-top: 19px; text-align: center; }
.overview-device figcaption span { color: var(--blue-bright); font: 9px 'DM Mono', monospace; letter-spacing: .16em; }
.overview-device figcaption strong { font-family: var(--display); font-size: 13px; }
.overview-links { border-top-color: rgba(187, 202, 255, .22); }
.overview-link { padding: 31px 0; }
.overview-link strong { font-size: clamp(18px, 1.45vw, 22px); }
.overview-link small { margin-top: 9px; font-size: 12px; }

.experience-intro { min-height: 100svh; }
.experience-intro-inner { min-height: 100svh; grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr); gap: clamp(50px, 8vw, 120px); padding-top: 104px; padding-bottom: 44px; }
.experience-intro-copy { position: relative; z-index: 2; }
.experience-points { display: flex; gap: 22px; margin-top: 36px; color: #5e6eaa; font-size: 12px; }
.experience-points span { display: flex; align-items: center; gap: 8px; }
.experience-points b { color: var(--blue); font: 9px 'DM Mono', monospace; }
.experience-hero-device { justify-self: center; position: relative; width: min(31vw, 390px); }
.experience-device-glow { position: absolute; inset: 8% -28%; border-radius: 50%; background: rgba(83, 115, 255, .17); filter: blur(38px); }
.experience-device-screen { position: relative; height: min(72vh, 620px); padding: 8px; border-radius: 40px; overflow: hidden; background: linear-gradient(145deg, #c7d3ff, #6682ef 60%, #324cae); box-shadow: 0 35px 90px rgba(47, 68, 153, .28), inset 0 0 0 1px rgba(255,255,255,.55); transform: rotate(3deg); }
.experience-device-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 31px; display: block; }
.experience-device-caption { position: absolute; left: -44px; bottom: 54px; display: grid; gap: 5px; padding: 13px 16px; border-radius: 15px; background: rgba(255,255,255,.86); box-shadow: 0 16px 40px rgba(45,66,145,.18); backdrop-filter: blur(14px); }
.experience-device-caption span { color: var(--blue); font: 8px 'DM Mono', monospace; letter-spacing: .15em; }
.experience-device-caption strong { color: var(--ink); font-family: var(--display); font-size: 13px; }
.flow-section { padding-top: 110px; }
.flow-heading { margin-bottom: 58px; }
.flow-steps { gap: 86px; }

@media (max-width: 1080px) {
  .home-overview.section-shell { grid-template-columns: .78fr 260px 1fr; width: min(100% - 56px, 1100px); gap: 42px; }
  .overview-link { padding: 25px 0; }
  .experience-intro-inner { grid-template-columns: 1fr 330px; gap: 50px; }
}

@media (max-width: 860px) {
  .site-header { inset: 10px auto auto 50%; width: calc(100% - 24px); height: 58px; padding: 0 10px 0 12px; }
  .site-header::after { inset: 0; }
  .wordmark { gap: 7px; }
  .wordmark-mark { width: 34px; height: 34px; padding: 2px; }
  .wordmark-text { font-size: 17px; }
  .header-download { padding: 9px 12px; font-size: 10px; }
  .menu-toggle { width: 34px; height: 34px; }
  .site-nav { top: calc(100% + 9px); left: -1px; right: -1px; border-radius: 18px; }
  .home-hero { min-height: 100svh; padding: 88px 18px 30px; }
  .hero-copy { padding-left: 0; }
  .home-hero h1 { font-size: clamp(52px, 14.4vw, 68px); line-height: 1.02; margin-top: 14px; }
  .hero-lede { font-size: 13px; line-height: 1.75; }
  .hero-actions { gap: 20px; margin-top: 28px; }
  .hero-note { margin-top: 26px; gap: 9px; }
  .hero-art { min-height: 330px; margin: 6px -14px 0; transform: translate3d(0, var(--hero-shift, 0px), 0); }
  .hero-art img { width: 100%; }
  .home-overview.section-shell { width: calc(100% - 36px); min-height: auto; display: grid; grid-template-columns: 1fr; gap: 48px; padding-top: 112px; padding-bottom: 100px; }
  .home-overview::before { width: 140vw; left: 50%; top: 44%; }
  .home-overview-copy { margin-bottom: 0; }
  .home-overview-copy h2 { font-size: clamp(48px, 13vw, 64px); }
  .overview-device-screen { width: min(68vw, 270px); height: 430px; }
  .overview-device figcaption { margin-top: 16px; }
  .overview-links { width: 100%; }
  .overview-link { padding: 23px 0; }
  .experience-intro, .experience-intro-inner { min-height: auto; }
  .experience-intro-inner { display: grid; grid-template-columns: 1fr; gap: 46px; padding-top: 116px; padding-bottom: 88px; }
  .experience-intro h1 { font-size: clamp(52px, 14vw, 72px); }
  .experience-points { gap: 12px; flex-wrap: wrap; margin-top: 28px; }
  .experience-points span { width: calc(50% - 6px); }
  .experience-hero-device { width: min(72vw, 300px); }
  .experience-device-screen { height: 480px; border-radius: 32px; }
  .experience-device-screen img { border-radius: 24px; }
  .experience-device-caption { left: -24px; bottom: 34px; }
  .flow-section { padding: 94px 0 110px; }
  .flow-heading { margin-bottom: 58px; }
  .flow-steps { gap: 82px; }
  .flow-step, .flow-step-reverse { grid-template-columns: 30px 1fr; gap: 14px; }
  .flow-step-no { grid-row: 1; }
  .flow-step-copy, .flow-step-reverse .flow-step-copy { grid-column: 2; grid-row: 1; order: initial; }
  .flow-step figure, .flow-step-reverse figure { grid-column: 1 / -1; grid-row: 2; order: initial; margin-top: 10px; padding: 8px; border-radius: 22px; }
  .flow-step figure img { height: auto; max-height: 520px; object-fit: cover; border-radius: 16px; }
  .flow-step .flow-chart img { height: 220px; }
}

/* 2026 visual pass — softer silhouettes, fewer boxes, more atmosphere */
:root {
  --ink: #080d22;
  --ink-soft: #10183a;
  --blue: #4d6fff;
  --blue-bright: #7f9aff;
  --blue-pale: #e1e7ff;
  --paper: #f7f8ff;
  --line: rgba(187, 202, 255, .18);
  --muted: #aeb8df;
}
body {
  background:
    radial-gradient(70vw 42vw at 82% -5%, rgba(69, 100, 255, .24), transparent 67%),
    radial-gradient(45vw 35vw at 5% 33%, rgba(40, 70, 170, .16), transparent 70%),
    var(--ink);
}
body::before { opacity: .035; }
.cursor-glow { background: radial-gradient(circle, rgba(114, 144, 255, .14), transparent 68%); }
.site-header { height: 88px; position: sticky; top: 0; background: linear-gradient(180deg, rgba(8,13,34,.92), rgba(8,13,34,.62) 72%, transparent); backdrop-filter: blur(14px); }
.wordmark-mark { width: 36px; height: 36px; border: 0; border-radius: 50%; background: linear-gradient(145deg, #edf1ff, #95aaff); box-shadow: 0 0 24px rgba(122, 151, 255, .28); overflow: hidden; display: grid; place-items: center; font-size: 0; }
.wordmark-mark img { width: 170%; height: 170%; max-width: none; object-fit: contain; transform: translateY(7%); }
.header-download { border: 0; border-radius: 999px; padding: 11px 17px; background: rgba(127, 154, 255, .12); transition: background .25s ease, transform .25s ease; }
.header-download:hover { background: rgba(127, 154, 255, .24); transform: translateY(-2px); }
.hero { min-height: calc(100svh - 88px); grid-template-columns: .86fr 1.14fr; gap: 10px; padding-top: 18px; }
.hero::before { width: 680px; height: 680px; right: 0; top: -4%; background: radial-gradient(circle, rgba(77, 111, 255, .2), transparent 69%); filter: blur(20px); }
.hero-copy { padding-left: clamp(0px, 4vw, 58px); }
h1 { font-size: clamp(56px, 6.6vw, 100px); line-height: 1.03; letter-spacing: -.1em; text-wrap: balance; }
h1 em { display: inline-block; background: linear-gradient(110deg, #e8edff 0%, #91a8ff 85%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lede { color: #bac4e7; max-width: 400px; }
.hero-actions { margin-top: 32px; }
.button { border-radius: 999px; }
.button-primary { box-shadow: 0 14px 34px rgba(53, 84, 210, .35); }
.button-primary:hover { box-shadow: 0 18px 42px rgba(53, 84, 210, .48); }
.hero-note { margin-top: 32px; opacity: .7; }
.hero-art { min-height: 610px; transform: translate3d(0, var(--hero-shift, 0px), 0); transition: transform .2s linear; }
.hero-art::before { inset: 10% -8% 8% 4%; border: 0; border-radius: 48% 52% 46% 54%; transform: rotate(2deg); background: radial-gradient(ellipse at 55% 45%, rgba(42, 72, 190, .55), rgba(14, 24, 64, .1) 66%, transparent 72%); filter: blur(1px); }
.hero-art::after { width: 80%; height: 72%; right: -8%; bottom: 0; border: 1px solid rgba(143, 166, 255, .2); border-radius: 50%; transform: rotate(-12deg); opacity: .7; }
.hero-art img { width: 116%; max-width: 820px; filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .44)); }
.hero-art-orbit, .hero-art-label, .hero-sticker { display: none; }
.scroll-cue { color: #8491bd; }
.ticker { background: rgba(56, 79, 178, .22); border-top: 1px solid rgba(187, 202, 255, .12); border-bottom: 1px solid rgba(187, 202, 255, .12); }
.ticker-track { animation-duration: 32s; }
.section { padding-top: 154px; padding-bottom: 154px; }
.section-intro { max-width: 760px; margin-bottom: 78px; }
.section-intro h2, .experience-heading h2, .detail-copy h2, .download-copy h2, .changelog-header h2, .faq-heading h2, .privacy-copy h2 { font-size: clamp(42px, 5.2vw, 72px); line-height: 1.05; }
.feature-list { border-top: 0; }
.feature-row { grid-template-columns: 48px 1fr 1.1fr 32px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.feature-title { gap: 16px; }
.feature-icon { width: 34px; height: 34px; border: 0; background: rgba(114, 144, 255, .13); border-radius: 50%; }
.icon-ai { border-radius: 50%; background: rgba(114, 144, 255, .22); }
.icon-chart { transform: none; border-radius: 50%; }
.experience-section { background: linear-gradient(180deg, #f7f8ff 0%, #eef2ff 100%); }
.showcase { gap: 28px; }
.showcase-main, .showcase-small { background: rgba(211, 221, 255, .54); padding: 12px; border-radius: 28px; box-shadow: 0 24px 70px rgba(66, 91, 175, .12); }
.showcase-main img, .showcase-small img { border-radius: 20px; }
.showcase-main img { height: 550px; }
.showcase-small img { height: 245px; }
.image-caption { padding: 0 5px 11px; }
.showcase figcaption { padding: 16px 6px 5px; }
.detail-image { border: 0; border-radius: 32px; background: #111a40; box-shadow: 0 26px 70px rgba(4, 10, 32, .28); }
.detail-image img { border-radius: 32px; }
.detail-image-tag { left: 24px; bottom: 22px; }
.download-section { background: radial-gradient(80% 120% at 85% 40%, #263a91 0%, #111a3f 60%, #0d1431 100%); }
.download-section::before { opacity: .6; background: radial-gradient(circle at 80% 40%, rgba(110, 139, 255, .3), transparent 38%); }
.download-visual { transform: translate3d(0, var(--hero-shift, 0px), 0); transition: transform .2s linear; }
.download-ring { border-color: rgba(149, 171, 255, .35); }
.download-version-chip { border-radius: 16px; box-shadow: 0 15px 32px rgba(4, 8, 28, .24); transform: rotate(-5deg); }
.changelog-featured { border-left: 0; border-radius: 18px; padding-left: 20px; padding-right: 20px; background: linear-gradient(90deg, rgba(73, 102, 222, .16), rgba(73, 102, 222, 0)); }
.changelog-tags span { border-radius: 999px; padding: 6px 11px; }
.privacy-section { background: linear-gradient(115deg, #4968f0, #6886ff); }
.privacy-section::before { opacity: .45; }
.privacy-mark { filter: drop-shadow(0 0 14px rgba(246, 200, 74, .45)); }
.cta-panel { border-radius: 34px; background: linear-gradient(120deg, #e8edff 0%, #b7c6ff 100%); box-shadow: 0 30px 90px rgba(6, 12, 39, .24); }
.cta-panel::after { opacity: .7; }
.site-footer { border-top-color: rgba(187, 202, 255, .15); }

@media (max-width: 860px) {
  .site-header { height: 74px; }
  .hero { padding-top: 48px; }
  h1 { font-size: clamp(52px, 15vw, 76px); }
  .hero-art { min-height: 350px; margin: 18px -8px 0; }
  .hero-art img { width: 96%; }
  .section { padding-top: 110px; padding-bottom: 110px; }
  .section-intro { margin-bottom: 56px; }
  .showcase-main, .showcase-small { border-radius: 22px; }
  .showcase-main img, .showcase-small img { border-radius: 15px; }
  .detail-image, .detail-image img { border-radius: 24px; }
  .cta-panel { border-radius: 24px; }
}

/* 导航悬浮在首屏上方，避免占用滚动章节高度。 */
.site-header {
  position: fixed;
  top: 14px;
  left: 50%;
  inset-inline: auto;
  transform: translateX(-50%);
  width: min(1320px, calc(100% - 44px));
  height: 64px;
  padding: 0 18px;
  border: 1px solid rgba(183, 200, 255, .16);
  border-radius: 999px;
  background: rgba(8, 13, 34, .62);
  box-shadow: 0 16px 50px rgba(3, 8, 28, .22);
  backdrop-filter: blur(20px) saturate(135%);
  z-index: 50;
}
.site-header::after { inset: 0; border-radius: inherit; }
.experience-page .site-header { background: rgba(247, 248, 255, .8); border-color: rgba(63, 87, 176, .14); box-shadow: 0 16px 45px rgba(47, 68, 145, .12); }
.home-hero { min-height: 100svh; padding-top: 100px; padding-bottom: 34px; }
.hero-art { min-height: min(66vw, 650px); transform: translate3d(0, var(--hero-shift, 0px), 0) scale(.94); transform-origin: center right; }
.hero-art img { width: 108%; }
.home-overview.section-shell { width: min(1440px, calc(100% - 96px)); min-height: 100svh; display: grid; grid-template-columns: minmax(260px, .7fr) minmax(240px, 340px) minmax(380px, 1fr); gap: clamp(46px, 6vw, 96px); align-items: center; padding-top: 116px; padding-bottom: 82px; position: relative; isolation: isolate; }
.home-overview-copy > p:not(.eyebrow) { max-width: 380px; }
.home-overview-copy .text-link { display: inline-block; margin-top: 26px; }
.overview-device { margin: 0; justify-self: center; position: relative; }
.overview-device::before { content: ''; position: absolute; inset: -24px -38px; border: 1px solid rgba(135,160,255,.2); border-radius: 46% 54% 50% 50%; transform: rotate(-7deg); pointer-events: none; }
.overview-device-screen { width: clamp(220px, 18vw, 290px); height: clamp(410px, 52vh, 560px); padding: 7px; border-radius: 34px; overflow: hidden; background: linear-gradient(150deg, rgba(195,208,255,.86), rgba(72,100,221,.28)); box-shadow: 0 30px 80px rgba(1,6,28,.48), inset 0 0 0 1px rgba(255,255,255,.28); transform: rotate(2.5deg); }
.overview-device-screen img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top; border-radius: 27px; }
.overview-device figcaption { display: grid; gap: 4px; margin-top: 19px; text-align: center; }
.overview-device figcaption span { color: var(--blue-bright); font: 9px 'DM Mono', monospace; letter-spacing: .16em; }
.overview-device figcaption strong { font-family: var(--display); font-size: 13px; }
.overview-link { padding: 31px 0; }
.overview-link strong { font-size: clamp(18px, 1.45vw, 22px); }
.overview-link small { margin-top: 9px; font-size: 12px; }
.experience-intro-inner { min-height: 100svh; grid-template-columns: minmax(0, .9fr) minmax(360px, .72fr); gap: clamp(50px, 8vw, 120px); padding-top: 104px; padding-bottom: 44px; }
.experience-points { display: flex; gap: 22px; margin-top: 36px; color: #5e6eaa; font-size: 12px; }
.experience-points span { display: flex; align-items: center; gap: 8px; }
.experience-points b { color: var(--blue); font: 9px 'DM Mono', monospace; }
.experience-hero-device { justify-self: center; position: relative; width: min(31vw, 390px); }
.experience-device-glow { position: absolute; inset: 8% -28%; border-radius: 50%; background: rgba(83,115,255,.17); filter: blur(38px); }
.experience-device-screen { position: relative; height: min(72vh, 620px); padding: 8px; border-radius: 40px; overflow: hidden; background: linear-gradient(145deg, #c7d3ff, #6682ef 60%, #324cae); box-shadow: 0 35px 90px rgba(47,68,153,.28), inset 0 0 0 1px rgba(255,255,255,.55); transform: rotate(3deg); }
.experience-device-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 31px; display: block; }
.experience-device-caption { position: absolute; left: -44px; bottom: 54px; display: grid; gap: 5px; padding: 13px 16px; border-radius: 15px; background: rgba(255,255,255,.86); box-shadow: 0 16px 40px rgba(45,66,145,.18); backdrop-filter: blur(14px); }
.experience-device-caption span { color: var(--blue); font: 8px 'DM Mono', monospace; letter-spacing: .15em; }
.experience-device-caption strong { color: var(--ink); font-family: var(--display); font-size: 13px; }
.flow-section { padding-top: 110px; }
.flow-heading { margin-bottom: 58px; }
.flow-steps { gap: 86px; }

@media (max-width: 860px) {
  .site-header { inset: 10px auto auto 50% !important; width: calc(100vw - 24px); height: 58px; padding: 0 10px 0 12px; }
  .wordmark-mark { width: 34px; height: 34px; padding: 2px; }
  .wordmark-text { font-size: 17px; }
  .header-download { padding: 9px 12px; font-size: 10px; }
  .home-hero { min-height: 100svh; padding: 88px 18px 30px; }
  .home-hero h1 { font-size: clamp(52px, 14.4vw, 68px); line-height: 1.02; }
  .hero-art { min-height: 330px; margin: 6px -14px 0; transform: translate3d(0, var(--hero-shift, 0px), 0); }
  .hero-art img { width: 100%; }
  .home-overview.section-shell { width: calc(100% - 36px); min-height: auto; display: grid; grid-template-columns: 1fr; gap: 48px; padding-top: 112px; padding-bottom: 100px; }
  .home-overview-copy { margin-bottom: 0; }
  .overview-device-screen { width: min(68vw, 270px); height: 430px; }
  .overview-links { width: 100%; }
  .overview-link { padding: 23px 0; }
  .experience-intro-inner { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 46px; padding-top: 116px; padding-bottom: 88px; }
  .experience-intro h1 { font-size: clamp(52px, 14vw, 72px); }
  .experience-points { gap: 12px; flex-wrap: wrap; margin-top: 28px; }
  .experience-points span { width: calc(50% - 6px); }
  .experience-hero-device { width: min(72vw, 300px); }
  .experience-device-screen { height: 480px; border-radius: 32px; }
  .experience-device-screen img { border-radius: 24px; }
  .experience-device-caption { left: -24px; bottom: 34px; }
  .flow-section { padding: 94px 0 110px; }
  .flow-heading { margin-bottom: 58px; }
  .flow-steps { gap: 82px; }
  .flow-step, .flow-step-reverse { grid-template-columns: 30px 1fr; gap: 14px; }
  .flow-step-copy, .flow-step-reverse .flow-step-copy { grid-column: 2; grid-row: 1; }
  .flow-step figure, .flow-step-reverse figure { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; padding: 8px; border-radius: 22px; }
  .flow-step figure img { height: auto; max-height: 520px; border-radius: 16px; }
}

/* Interactive atmosphere and narrative balance. */
.hero { overflow: hidden; }
.hero::after {
  content: '';
  position: absolute;
  width: min(78vw, 980px);
  aspect-ratio: 1;
  right: -18vw;
  top: 10%;
  border: 1px solid rgba(129, 157, 255, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(129,157,255,.045), 0 0 0 88px rgba(129,157,255,.025);
  animation: ripple-breathe 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes ripple-breathe { 0%, 100% { transform: scale(.94); opacity: .42; } 50% { transform: scale(1.04); opacity: .8; } }
.hero-art { min-height: min(72vw, 720px); transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.03); }
.hero-art img { width: 122%; max-width: 900px; }
.overview-device, .experience-hero-device { perspective: 900px; }
.overview-device-screen, .experience-device-screen { transform-style: preserve-3d; will-change: transform; }
.coin-layer, .stroke-canvas { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.stroke-canvas { z-index: 79; }
.coin-pop { position: fixed; width: 34px; height: 34px; margin: -17px 0 0 -17px; display: grid; place-items: center; border: 2px solid #f6c84a; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3a5, #f6c84a 56%, #ae7d12); color: #6f4d00; font: 800 17px/1 var(--display); box-shadow: 0 0 24px rgba(246,200,74,.8); }
.coin-pop-show { animation: coin-pop .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes coin-pop { 0% { opacity: 0; transform: translateY(5px) scale(.55) rotate(-18deg); } 22% { opacity: 1; } 100% { opacity: 0; transform: translateY(-72px) scale(.9) rotate(14deg); } }
body.is-drawing, body.is-drawing * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M4 24 8 13 20 1l7 7-12 12z' fill='%23f6c84a' stroke='%23080d22' stroke-width='1.5'/%3E%3Cpath d='m14 20 4 4' stroke='%23080d22' stroke-width='1.5'/%3E%3C/svg%3E") 4 22, crosshair !important; }
.home-quote { min-height: 82svh; display: grid; grid-template-columns: 1fr .8fr; gap: clamp(60px, 9vw, 150px); align-items: center; padding-top: 120px; padding-bottom: 120px; }
.home-quote-copy { position: relative; z-index: 1; }
.home-quote-line { font-family: var(--display); font-size: clamp(36px, 4.7vw, 72px); font-weight: 850; line-height: 1.16; letter-spacing: -.08em; margin: 22px 0 34px; }
.home-quote-line em { color: var(--blue-bright); font-style: normal; }
.home-quote-side { justify-self: center; display: grid; gap: 38px; }
.quote-orbit { width: min(25vw, 300px); aspect-ratio: 1; display: grid; place-items: center; position: relative; border: 1px solid rgba(127,154,255,.22); border-radius: 50%; box-shadow: 0 0 0 26px rgba(127,154,255,.035), 0 0 0 52px rgba(127,154,255,.022); animation: orbit-float 8s ease-in-out infinite; }
.quote-orbit-core { width: 82px; height: 82px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #f0f4ff, #8fa7ff); color: #16245d; font: 900 36px var(--display); box-shadow: 0 0 36px rgba(126,155,255,.42); }
.quote-orbit-ring { position: absolute; inset: 12%; border: 1px solid rgba(246,200,74,.35); border-radius: 50%; animation: spin 16s linear infinite; }
.quote-orbit-ring::after { content: ''; position: absolute; width: 9px; height: 9px; right: 4%; top: 18%; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 16px var(--yellow); }
.ring-b { inset: 24%; border-color: rgba(127,154,255,.3); animation-duration: 11s; animation-direction: reverse; }
.ring-b::after { right: auto; left: 2%; top: 74%; background: var(--blue-pale); box-shadow: 0 0 16px var(--blue-pale); }
@keyframes orbit-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(2deg); } }
.quote-facts { display: grid; gap: 12px; color: var(--muted); font-size: 12px; }
.quote-facts span { display: flex; gap: 12px; align-items: center; }
.quote-facts b { color: var(--blue-bright); font: 9px 'DM Mono', monospace; }
.site-footer { min-height: 156px; padding: 34px 0; display: grid; grid-template-columns: 1fr 1fr auto; gap: 30px; align-items: center; }
.site-footer p { justify-self: center; margin: 0; }
.site-footer > a { justify-self: end; }

@media (max-width: 860px) {
  .hero-art { min-height: 360px; transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1); }
  .hero-art img { width: 104%; }
  .hero::after { width: 150vw; right: -70vw; top: 32%; }
  .home-quote { min-height: auto; display: grid; grid-template-columns: 1fr; gap: 72px; padding-top: 100px; padding-bottom: 100px; }
  .home-quote-line { font-size: clamp(34px, 10.5vw, 48px); }
  .home-quote-side { justify-self: start; width: 100%; grid-template-columns: 150px 1fr; align-items: center; gap: 28px; }
  .quote-orbit { width: 150px; }
  .quote-orbit-core { width: 50px; height: 50px; font-size: 23px; }
  .quote-facts { gap: 10px; font-size: 11px; }
  .site-footer { min-height: 180px; grid-template-columns: 1fr 1fr; gap: 18px; padding: 30px 0; }
  .site-footer p { justify-self: end; text-align: right; }
  .site-footer > a { grid-column: 1 / -1; justify-self: start; }
}

/* Motion pass: the top bar is a light navigation layer, not a giant pill. */
.site-header {
  top: 0 !important;
  width: 100% !important;
  height: 78px !important;
  padding-inline: max(24px, 4vw) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(8, 13, 34, .78), rgba(8, 13, 34, .22) 72%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px) saturate(120%);
}
.site-header::after { inset: 0 !important; border-radius: 0 !important; background: linear-gradient(90deg, rgba(77,111,255,.06), transparent 48%, rgba(77,111,255,.06)) !important; }
.experience-page .site-header { background: linear-gradient(180deg, rgba(247,248,255,.9), rgba(247,248,255,.3) 72%, transparent) !important; box-shadow: none !important; }
.site-header .wordmark, .site-header .site-nav, .site-header .header-download, .site-header .menu-toggle { position: relative; z-index: 1; }
@media (max-width: 860px) {
  .site-header { height: 68px !important; padding-inline: 16px !important; }
  .site-header::after { background: linear-gradient(90deg, rgba(77,111,255,.08), transparent 55%, rgba(77,111,255,.05)) !important; }
}

/* 首屏内容必须先可读，再等待增强动画接管。某些 WebView 会延迟
   IntersectionObserver；这个兜底避免整屏保持 opacity:0。Motion 加载后
   仍会对这些元素执行一次真实的入场动画。 */
.hero .reveal,
.page-hero .reveal,
.experience-intro .reveal,
.download-page-hero .reveal { opacity: 1; transform: none; }

/* 收束幕补足一层信息密度，让首页第三幕不止是一句引语。 */
.home-quote-lede { max-width: 510px; color: var(--muted); font-size: 14px; line-height: 1.9; margin: -8px 0 28px; }
.quote-signal { display: grid; gap: 7px; margin-top: 9px; padding-top: 18px; border-top: 1px solid rgba(187,202,255,.18); }
.quote-signal span { color: var(--blue-bright); font: 9px 'DM Mono', monospace; letter-spacing: .15em; }
.quote-signal strong { color: var(--blue-pale); font-family: var(--display); font-size: 16px; letter-spacing: -.04em; }
.quote-signal small { max-width: 250px; color: #7f8cbb; font-size: 11px; line-height: 1.7; }

@media (max-width: 860px) {
  .home-quote-lede { font-size: 13px; line-height: 1.8; margin-bottom: 24px; }
  .quote-signal { margin-top: 4px; }
}

/* Final balance pass: preserve the artwork as a focal point without letting it
   swallow the first chapter, and keep the navigation crisp over the canvas. */
.site-header { backdrop-filter: blur(3px) saturate(115%); background: linear-gradient(180deg, rgba(8,13,34,.92), rgba(8,13,34,.34) 82%, transparent) !important; }
.hero { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(8px, 2vw, 34px); }
.hero-art { min-height: min(62vw, 620px); }
.hero-art img { width: 96%; max-width: 780px; }
.home-quote { position: relative; isolation: isolate; min-height: calc(100svh - 78px); grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: clamp(42px, 7vw, 110px); padding-top: 96px; padding-bottom: 92px; }
.home-quote p.home-quote-line { max-width: 720px; font-size: clamp(30px, 2.8vw, 50px); line-height: 1.13; margin-top: 18px; margin-bottom: 24px; }
.home-quote p.home-quote-lede { max-width: 560px; color: var(--muted); font-family: var(--body); font-size: 13px; font-weight: 400; line-height: 1.75; }
.home-quote p.eyebrow { color: var(--blue-bright); font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 500; line-height: 1.4; letter-spacing: .15em; }
.home-quote::before { content: ''; position: absolute; inset: 12% auto auto 22%; width: min(60vw, 900px); height: 60%; background: radial-gradient(ellipse, rgba(57,84,196,.18), transparent 68%); filter: blur(18px); pointer-events: none; }
.home-quote-side { position: relative; z-index: 1; }
.quote-orbit { width: min(27vw, 340px); }
.site-footer { min-height: 96px; padding: 22px 0; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 0; }
  .hero-art { min-height: 350px; }
  .hero-art img { width: 100%; max-width: none; }
  .home-quote { min-height: auto; padding-top: 86px; padding-bottom: 74px; }
  .home-quote p.home-quote-line { font-size: clamp(32px, 9.4vw, 48px); line-height: 1.15; }
  .quote-orbit { width: 150px; }
  .site-footer { min-height: 108px; padding: 20px 0; }
}

/* 2026-08-29 screenshot fixes */
@media (max-width: 860px) {
  /* The rule above that makes .site-header children relative must not win over
     the mobile drawer. Keep the drawer anchored to the full header width. */
  .site-header .site-nav {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 10px) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 18px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-radius: 18px !important;
    background: #0d163d !important;
    box-shadow: 0 22px 48px rgba(2, 7, 28, .48) !important;
    transform: translateY(-8px);
  }
  .site-header .site-nav.is-open { transform: translateY(0); }
  .experience-page .site-header .site-nav { background: #f7f8ff !important; box-shadow: 0 22px 48px rgba(47, 68, 145, .18) !important; }

  /* Show each real phone capture as a complete image instead of cropping its
     middle with the desktop showcase height. */
  .flow-step figure { display: flex; flex-direction: column; align-items: center; }
  .flow-step figure img,
  .flow-step .flow-chart img { width: min(100%, 340px); height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center top; }
  .flow-step figcaption { width: min(100%, 340px); }

  .contact-grid { grid-template-columns: 1fr 1fr !important; gap: 14px; padding-bottom: 70px; }
  .contact-card { min-height: 154px; padding: 20px; border-radius: 20px; }
  .contact-card-main { grid-column: 1 / -1; min-height: 170px; }
  .contact-card strong { font-size: clamp(18px, 4.3vw, 28px); }
  .privacy-inner { gap: 22px; }
  .privacy-section { padding-top: 78px; padding-bottom: 78px; }
  .faq-section { padding-top: 78px; padding-bottom: 78px; }
  .experience-page .site-footer { color: #3c4d86; }
  .experience-page .site-footer a { color: #3049a0; }
}

@media (max-width: 520px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .contact-card-main { grid-column: auto; }
  .flow-step figure img, .flow-step .flow-chart img, .flow-step figcaption { width: min(100%, 300px); }
}

/* Narrow the opening composition on large screens. The hero remains full bleed,
   but its inner artwork now has a deliberate editorial frame instead of
   touching the viewport edge. */
@media (min-width: 861px) {
  .home-hero { width: min(1680px, calc(100% - 96px)); margin-inline: auto; }
  .home-hero .hero-art img { width: min(82%, 640px); max-width: 640px; }
  .home-hero .hero-art { justify-items: end; }
  .home-hero .hero-copy { padding-left: clamp(0px, 2vw, 32px); }
}

@media (max-width: 860px) {
  .home-hero .hero-art img { width: min(82%, 520px); }
  .home-quote p.home-quote-line { font-size: clamp(31px, 7.9vw, 40px); }
  .home-quote p.home-quote-lede { max-width: 470px; }
}

/* Supporting proof stays compact beneath the actual download chapter. */
.download-trust { min-height: 0 !important; padding-top: 72px; padding-bottom: 96px; scroll-snap-align: none !important; }
.download-trust > .eyebrow { margin-bottom: 28px; }

/* Present long product captures as phones/screens, not cropped banners. */
.flow-step figure { display: flex; flex-direction: column; align-items: center; }
.flow-step figure img,
.flow-step .flow-chart img { width: min(100%, 380px); height: auto !important; max-height: none !important; object-fit: contain !important; object-position: center top; }
.flow-step figcaption { width: min(100%, 380px); }

/* A single editorial contact list carries more signal than three giant cards. */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 0; min-height: 0 !important; padding-top: 20px; padding-bottom: 96px; border-top: 1px solid var(--line); }
.contact-card,
.contact-card.contact-card-main { min-height: 0; display: grid; grid-template-columns: minmax(110px, .3fr) 1fr auto; align-items: center; gap: 24px; padding: 24px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent !important; box-shadow: none; }
.contact-card:hover { transform: none; background: linear-gradient(90deg, rgba(91,121,245,.1), transparent 70%) !important; }
.contact-card-label { color: var(--blue-bright); }
.contact-card strong { font-size: clamp(20px, 2.5vw, 34px); }
.contact-card-arrow { grid-column: 3; }
.contact-card-note { grid-column: 2; margin-top: -16px; }

/* Tone the Orbit down to a quiet navigation motif. */
.quote-orbit { border-color: rgba(127,154,255,.14); box-shadow: 0 0 0 18px rgba(127,154,255,.025), 0 0 0 36px rgba(127,154,255,.014); background: radial-gradient(circle at 50% 48%, rgba(92,121,255,.13), transparent 64%); }
.quote-orbit-core { background: linear-gradient(145deg, #f4f6ff, #aabaff); box-shadow: 0 0 25px rgba(126,155,255,.3); }
.overview-device { animation: preview-float 7s ease-in-out infinite; will-change: transform; }
@keyframes preview-float { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-8px) rotate(.5deg); } }
.experience-page .site-footer { color: #43558f; }
.experience-page .site-footer a { color: #3049a0; }

@media (max-width: 860px) {
  .download-trust { padding-top: 48px; padding-bottom: 70px; }
  .contact-grid { padding-bottom: 70px; }
  .contact-card,
  .contact-card.contact-card-main { grid-template-columns: 92px 1fr auto; gap: 14px; padding: 20px 0; }
  .contact-card strong { font-size: clamp(18px, 5vw, 26px); }
  .contact-card-note { grid-column: 2 / -1; margin-top: -10px; }
  .flow-step figure img, .flow-step .flow-chart img, .flow-step figcaption { width: min(100%, 340px); }
}

/* Prevent decorative cursor glow from extending the mobile layout box. */
@media (max-width: 860px) { .cursor-glow { width: 240px; height: 240px; } }

/* Replace the decorative planet with a quiet ledger signal. */
.signal-visual { width: min(31vw, 360px); aspect-ratio: 1.18; position: relative; display: grid; place-items: center; border: 1px solid rgba(127,154,255,.18); border-radius: 38% 62% 54% 46%; background: linear-gradient(145deg, rgba(67,94,190,.2), rgba(8,13,34,.1)); box-shadow: inset 0 0 50px rgba(75,107,255,.1), 0 28px 70px rgba(2,7,28,.24); transform: rotate(-5deg); overflow: hidden; }
.signal-visual::before, .signal-visual::after { content: ''; position: absolute; left: 11%; right: 11%; height: 1px; background: linear-gradient(90deg, transparent, rgba(127,154,255,.42), transparent); }
.signal-visual::before { top: 34%; transform: rotate(-16deg); }.signal-visual::after { bottom: 28%; transform: rotate(14deg); }
.signal-core { width: 94px; height: 94px; display: grid; place-items: center; border-radius: 28px; background: linear-gradient(145deg, #f4f6ff, #9eafff); color: #18265d; font: 900 38px var(--display); box-shadow: 0 18px 34px rgba(3,8,31,.32); transform: rotate(5deg); overflow: hidden; }
.signal-core img { width: 112%; height: 112%; display: block; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(9,18,69,.24)); }
.signal-line { position: absolute; display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--blue-bright), transparent); transform-origin: left center; opacity: .75; }
.line-1 { width: 44%; left: 7%; top: 25%; transform: rotate(18deg); }.line-2 { width: 38%; right: 8%; top: 48%; transform: rotate(-28deg); }.line-3 { width: 40%; left: 14%; bottom: 18%; transform: rotate(-8deg); }
.signal-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 15px var(--yellow); animation: signal-pulse 2.8s ease-in-out infinite; }.dot-1 { left: 18%; top: 27%; }.dot-2 { right: 16%; bottom: 20%; animation-delay: -1.2s; background: var(--blue-pale); box-shadow: 0 0 15px var(--blue-pale); }
@keyframes signal-pulse { 0%,100% { transform: scale(.72); opacity: .55; } 50% { transform: scale(1.35); opacity: 1; } }
.flow-step figure { width: min(100%, 390px); justify-self: center; }
.contact-grid.snap-section { min-height: clamp(520px, 72svh, 760px) !important; align-content: center; }
.privacy-section.snap-section, .faq-section.snap-section { min-height: calc(100svh - 78px); display: grid; align-items: center; }
@media (max-width: 860px) { .signal-visual { width: 190px; } .signal-core { width: 58px; height: 58px; border-radius: 18px; font-size: 25px; } .contact-grid.snap-section { min-height: calc(100svh - 68px) !important; } }

/* Mobile quote layout must collapse to one readable column. The desktop
   minmax(320px, .92fr) side track otherwise squeezes the copy to 0px on
   narrow screens, leaving the final chapter looking clipped and empty. */
@media (max-width: 860px) {
  .home-quote { grid-template-columns: 1fr; }
  .home-quote-copy { min-width: 0; }
  .home-quote-side { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 16px; }
  .signal-visual { width: min(150px, 100%); }
  .quote-facts { min-width: 0; }
  .quote-signal { grid-column: 1 / -1; }
  .menu-toggle { color: #4169ff; background: rgba(65,105,255,.12); border-color: rgba(65,105,255,.28); }
  .menu-toggle span { width: 16px; height: 2px; background: currentColor; }
}

/* 视觉增强层：用连续的光、线和材质建立章节之间的统一感，保持内容留白。 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .42;
  background:
    radial-gradient(ellipse 46% 28% at 80% 4%, rgba(74, 105, 255, .15), transparent 72%),
    radial-gradient(ellipse 38% 24% at 8% 84%, rgba(246, 200, 74, .055), transparent 72%),
    linear-gradient(115deg, transparent 0 48%, rgba(130, 154, 255, .028) 48.1%, transparent 48.4%);
  mix-blend-mode: screen;
}

.home-page main::before,
.inner-page main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: min(78vw, 1180px);
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .36;
  background-image:
    linear-gradient(90deg, transparent 0 49.92%, rgba(127, 154, 255, .08) 50%, transparent 50.08%),
    linear-gradient(0deg, transparent 0 99.7%, rgba(127, 154, 255, .12) 99.8%, transparent 100%);
  background-size: 100% 100%, 100% 100%;
  z-index: 0;
}

.site-header {
  isolation: isolate;
}
.site-header::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--yellow), transparent);
  opacity: .85;
}
.site-nav a {
  position: relative;
  transition: color .28s ease, transform .28s cubic-bezier(.22, 1, .36, 1);
}
.site-nav a::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--yellow);
  transform: translate(-50%, 5px) scale(0);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  box-shadow: 0 0 12px rgba(246, 200, 74, .7);
}
.site-nav a:hover { transform: translateY(-2px); }
.site-nav a:hover::after,
.site-nav a.is-active::after { transform: translate(-50%, 0) scale(1); }

.button-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 32px rgba(65, 105, 255, .24), inset 0 1px 0 rgba(255,255,255,.28);
}
.button-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translateX(-110%) skewX(-18deg);
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.34) 50%, transparent 80%);
  transition: transform .72s cubic-bezier(.22, 1, .36, 1);
}
.button-primary:hover::before { transform: translateX(110%) skewX(-18deg); }

.hero-art {
  filter: saturate(1.06);
}
.hero-art::before {
  animation: hero-halo 9s ease-in-out infinite;
}
.hero-art::after {
  animation: hero-orbit-drift 14s ease-in-out infinite alternate;
}
@keyframes hero-halo {
  0%, 100% { opacity: .72; transform: rotate(2deg) scale(.98); }
  50% { opacity: 1; transform: rotate(4deg) scale(1.03); }
}
@keyframes hero-orbit-drift {
  0% { transform: rotate(-12deg) translate3d(0, 0, 0); }
  100% { transform: rotate(-8deg) translate3d(-10px, -8px, 0); }
}

.home-overview,
.home-quote,
.page-hero,
.experience-intro,
.flow-section,
.download-page-hero,
.download-trust,
.changelog-section,
.contact-grid,
.privacy-section,
.faq-section {
  position: relative;
  isolation: isolate;
}
.home-overview::after,
.home-quote::after,
.flow-section::after,
.download-page-hero::after,
.contact-grid::after {
  content: '';
  position: absolute;
  right: max(24px, calc((100vw - 1180px) / 2));
  bottom: 26px;
  width: 52px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246, 200, 74, .65));
  opacity: .75;
}
.home-overview::before,
.flow-section::before,
.download-trust::before,
.contact-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: max(24px, calc((100vw - 1180px) / 2));
  width: 1px;
  height: 42px;
  background: linear-gradient(180deg, rgba(127,154,255,.42), transparent);
  opacity: .7;
}

.overview-device,
.experience-hero-device,
.download-visual {
  transition: transform .6s cubic-bezier(.22, 1, .36, 1), filter .6s ease;
}
.overview-device:hover,
.experience-hero-device:hover,
.download-visual:hover {
  filter: brightness(1.08) saturate(1.08);
}
.overview-device-screen,
.experience-device-screen {
  box-shadow: 0 28px 60px rgba(2, 7, 28, .34), 0 0 0 1px rgba(154, 174, 255, .18), inset 0 0 0 1px rgba(255,255,255,.08);
}

.flow-step {
  position: relative;
}
.flow-step::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--yellow), transparent);
  transition: width .8s cubic-bezier(.22, 1, .36, 1);
}
.flow-step.is-visible::before { width: 84px; }
.flow-step figure img { transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .7s ease; }
.flow-step:hover figure img { transform: translateY(-8px) scale(1.018); filter: drop-shadow(0 24px 28px rgba(4, 10, 36, .28)); }

.download-page-hero {
  background:
    radial-gradient(ellipse 42% 70% at 82% 50%, rgba(65, 105, 255, .18), transparent 70%),
    linear-gradient(120deg, rgba(14, 23, 62, .32), transparent 56%);
}
.download-ring { animation: ring-breathe 8s ease-in-out infinite; }
@keyframes ring-breathe {
  0%, 100% { transform: scale(.96) rotate(0deg); opacity: .7; }
  50% { transform: scale(1.04) rotate(8deg); opacity: 1; }
}
.trust-item { transition: color .3s ease, transform .3s cubic-bezier(.22, 1, .36, 1); }
.trust-item:hover { transform: translateX(8px); color: var(--paper); }

.changelog-item {
  position: relative;
  transition: border-color .3s ease, background .3s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.changelog-item::after {
  content: '↗';
  position: absolute;
  right: 20px;
  top: 50%;
  color: var(--yellow);
  opacity: 0;
  transform: translate(8px, -50%);
  transition: opacity .3s ease, transform .3s ease;
}
.changelog-item:hover { transform: translateX(6px); border-color: rgba(127,154,255,.42); background: rgba(48, 70, 150, .12); }
.changelog-item:hover::after { opacity: 1; transform: translate(0, -50%); }

.contact-card { transition: padding-left .35s cubic-bezier(.22, 1, .36, 1), border-color .3s ease, background .3s ease; }
.contact-card:hover { padding-left: 12px; border-color: rgba(127,154,255,.42); }
.contact-card-arrow { transition: transform .35s cubic-bezier(.22, 1, .36, 1), color .3s ease; }
.contact-card:hover .contact-card-arrow { transform: translate(4px, -4px); color: var(--yellow); }

.site-footer { position: relative; }
.site-footer::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 130px;
  height: 1px;
  background: linear-gradient(90deg, var(--yellow), transparent);
}
.footer-brand img { transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.footer-brand:hover img { transform: rotate(-8deg) scale(1.08); }

@media (max-width: 860px) {
  body::after { opacity: .3; }
  .home-page main::before, .inner-page main::before { width: calc(100% - 40px); opacity: .22; }
  .site-header::before { bottom: 7px; width: 24px; }
  .home-overview::before, .flow-section::before, .download-trust::before, .contact-grid::before { left: 20px; height: 26px; }
  .home-overview::after, .home-quote::after, .flow-section::after, .download-page-hero::after, .contact-grid::after { right: 20px; width: 34px; }
  .flow-step:hover figure img { transform: translateY(-4px) scale(1.01); }
  .changelog-item:hover, .contact-card:hover { transform: none; }
  .contact-card:hover { padding-left: 4px; }
}

/* Editorial navigation marks: every chapter gets a quiet index without adding
   another card or competing with the copy. */
.home-hero,
.home-overview,
.home-quote,
.page-hero,
.experience-intro,
.flow-section,
.download-page-hero,
.changelog-section,
.contact-grid {
  isolation: isolate;
}
.home-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .7;
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(127,154,255,.055) 42.1%, transparent 42.35%),
    linear-gradient(75deg, transparent 0 67%, rgba(246,200,74,.035) 67.1%, transparent 67.3%),
    radial-gradient(ellipse 30% 65% at 68% 50%, rgba(65,105,255,.12), transparent 72%);
}
.hero-copy::before,
.home-overview-copy::before,
.home-quote-copy::before,
.page-hero::before,
.experience-intro-copy::before,
.flow-heading::before {
  display: block;
  width: max-content;
  margin-bottom: 22px;
  color: rgba(203,216,255,.42);
  content: '01 / INTRO';
  font: 9px 'DM Mono', monospace;
  letter-spacing: .18em;
}
.home-overview-copy::before { content: '02 / CLARITY'; }
.home-quote-copy::before { content: '03 / DECISION'; }
.page-hero::before { content: '00 / ZHIZHANG'; }
.experience-intro-copy::before { content: '01 / WORKFLOW'; }
.flow-heading::before { content: '02 / THREE MOMENTS'; }
.hero-copy::after,
.home-overview-copy::after,
.home-quote-copy::after,
.experience-intro-copy::after,
.flow-heading::after {
  content: '';
  display: block;
  width: 42px;
  height: 1px;
  margin-top: 28px;
  background: linear-gradient(90deg, var(--yellow), transparent);
  opacity: .72;
}
.page-hero::after { margin-top: 24px; }
.eyebrow { text-shadow: 0 0 22px rgba(93,131,255,.3); }
h1 em, h2 em {
  background: linear-gradient(100deg, var(--blue-pale), #7d9cff 52%, #dbe3ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.home-overview {
  background: linear-gradient(90deg, transparent, rgba(50,73,157,.045) 50%, transparent);
}
.home-overview::after { box-shadow: 0 0 18px rgba(246,200,74,.35); }
.overview-links { position: relative; }
.overview-links::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -18px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(127,154,255,.4) 18%, rgba(127,154,255,.4) 82%, transparent);
}
.overview-link {
  position: relative;
  transition: padding-left .35s cubic-bezier(.22,1,.36,1), background .35s ease;
}
.overview-link::before {
  content: '';
  position: absolute;
  left: -18px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--blue-bright);
  box-shadow: 0 0 0 0 rgba(93,131,255,.45);
  transform: translate(-2px, -50%) scale(.5);
  transition: transform .35s ease, box-shadow .35s ease;
}
.overview-link:hover { padding-left: 10px; background: linear-gradient(90deg, rgba(76,106,222,.1), transparent 78%); }
.overview-link:hover::before { transform: translate(-2px, -50%) scale(1); box-shadow: 0 0 0 7px rgba(93,131,255,.1); }
.overview-link b { transition: transform .35s cubic-bezier(.22,1,.36,1), color .25s ease; }
.overview-link:hover b { transform: translate(5px, -4px); color: var(--yellow); }

.home-quote {
  background: radial-gradient(ellipse 48% 70% at 88% 46%, rgba(47,72,167,.12), transparent 72%);
}
.signal-visual {
  box-shadow: inset 0 0 70px rgba(75,107,255,.12), 0 28px 70px rgba(2,7,28,.24), 0 0 0 1px rgba(127,154,255,.05);
}
.signal-visual::after { animation: signal-scan 5s ease-in-out infinite; }
@keyframes signal-scan {
  0%, 100% { opacity: .25; transform: translateY(0) rotate(14deg); }
  50% { opacity: .85; transform: translateY(-14px) rotate(14deg); }
}

.page-hero,
.experience-intro {
  background: linear-gradient(110deg, rgba(39,58,133,.13), transparent 48%), radial-gradient(ellipse 36% 70% at 88% 30%, rgba(65,105,255,.12), transparent 72%);
}
.flow-section { background: linear-gradient(180deg, rgba(9,15,43,.2), transparent 24%, rgba(31,48,112,.09)); }
.flow-step:nth-child(2) { background: linear-gradient(90deg, transparent, rgba(67,95,193,.07), transparent); }
.flow-step:nth-child(3) { background: linear-gradient(90deg, transparent, rgba(246,200,74,.035), transparent); }

@media (max-width: 860px) {
  .hero-copy::before,
  .home-overview-copy::before,
  .home-quote-copy::before,
  .page-hero::before,
  .experience-intro-copy::before,
  .flow-heading::before { margin-bottom: 16px; font-size: 8px; }
  .hero-copy::after,
  .home-overview-copy::after,
  .home-quote-copy::after,
  .experience-intro-copy::after,
  .flow-heading::after { margin-top: 20px; }
  .overview-links::before { left: -10px; }
  .overview-link::before { left: -10px; }
  .overview-link:hover { padding-left: 4px; }
}

/* WeChat group QR: compact proof point inside the contact chapter. */
.contact-qr {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 148px 1fr;
  align-items: center;
  gap: 28px;
  margin: 24px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--line);
}
.contact-qr-frame {
  width: 148px;
  aspect-ratio: 1;
  padding: 8px;
  background: rgba(244,246,255,.96);
  border: 1px solid rgba(127,154,255,.3);
  box-shadow: 0 18px 38px rgba(2,7,28,.3), 0 0 0 8px rgba(127,154,255,.045);
  transform: rotate(-2deg);
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.contact-qr-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.contact-qr:hover .contact-qr-frame { transform: rotate(0deg) translateY(-5px); box-shadow: 0 24px 46px rgba(2,7,28,.36), 0 0 0 8px rgba(127,154,255,.08); }
.contact-qr figcaption { display: grid; gap: 10px; align-content: center; }
.contact-qr figcaption strong { font-family: var(--display); font-size: clamp(24px, 3vw, 38px); letter-spacing: -.06em; }
.contact-qr figcaption small { color: var(--muted); font-size: 12px; line-height: 1.7; }
.contact-qr .contact-card-label { font-size: 9px; letter-spacing: .16em; }
@media (max-width: 860px) {
  .contact-qr { grid-template-columns: 112px 1fr; gap: 18px; margin-top: 18px; padding-top: 20px; }
  .contact-qr-frame { width: 112px; padding: 6px; box-shadow: 0 12px 28px rgba(2,7,28,.28), 0 0 0 5px rgba(127,154,255,.045); }
  .contact-qr figcaption { gap: 7px; }
  .contact-qr figcaption strong { font-size: clamp(20px, 6vw, 29px); }
  .contact-qr figcaption small { font-size: 11px; }
}
@media (max-width: 420px) {
  .contact-qr { grid-template-columns: 96px 1fr; gap: 14px; }
  .contact-qr-frame { width: 96px; }
}

/* Contact is intentionally a two-beat page; keep its opening copy in the
   first viewport instead of inheriting the oversized full-height hero. */
.contact-page .page-hero {
  min-height: min(78svh, 760px);
  padding-top: 78px;
  padding-bottom: 72px;
}
.contact-page .contact-grid.snap-section {
  min-height: min(84svh, 820px) !important;
}
.contact-page .wordmark-mark img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  transform: none !important;
  object-fit: contain !important;
}
@media (max-width: 860px) {
  .contact-page .page-hero { min-height: calc(78svh - 18px); padding-top: 56px; padding-bottom: 58px; }
  .contact-page .contact-grid.snap-section { min-height: calc(100svh - 68px) !important; }
}

/* 2026-08-30 边缘收束：氛围光必须铺满视口，不能停在 section-shell
   的定宽边界上。章节之间仅保留两端渐隐的细线，避免矩形切板感。 */
.home-page main,
.inner-page main {
  position: relative;
  isolation: isolate;
}

.home-page main::before,
.inner-page main::before {
  inset: 0;
  width: 100%;
  height: 100%;
  transform: none;
  opacity: .2;
  background:
    radial-gradient(ellipse 44% 24% at 76% 12%, rgba(78, 111, 255, .2), transparent 74%),
    radial-gradient(ellipse 36% 22% at 16% 60%, rgba(55, 84, 190, .13), transparent 76%),
    linear-gradient(90deg, transparent 0 49.94%, rgba(127, 154, 255, .055) 50%, transparent 50.06%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}

/* 这些章节自身是定宽容器，背景画在它们身上会暴露左右直边。 */
.home-overview,
.home-quote,
.page-hero {
  background: transparent !important;
}

/* 顶部导航的材质向下自然消失，不留下整齐的矩形底边。 */
.site-header::after {
  opacity: .68;
  -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .72) 48%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, .72) 48%, transparent 100%);
}

/* 统一章节分隔线：中心可见、两端自然消失。 */
.contact-grid {
  border-top: 0;
}
.contact-grid::before {
  top: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  height: 1px;
  opacity: .46;
  background: linear-gradient(90deg, transparent 0, rgba(187, 202, 255, .12) 18%, rgba(187, 202, 255, .18) 50%, rgba(187, 202, 255, .12) 82%, transparent 100%);
}
.changelog-list {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(187, 202, 255, .22) 12%, rgba(187, 202, 255, .22) 88%, transparent) 1;
}
.changelog-item,
.contact-card,
.contact-card.contact-card-main,
.contact-qr {
  border-bottom-color: transparent;
  border-image: linear-gradient(90deg, transparent, rgba(187, 202, 255, .18) 8%, rgba(187, 202, 255, .18) 92%, transparent) 1;
}
.contact-qr {
  border-top-color: transparent;
}
.site-footer {
  border-top-color: transparent;
}
.site-footer::before {
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  opacity: .58;
  background: linear-gradient(90deg, transparent, rgba(246, 200, 74, .24) 8%, rgba(187, 202, 255, .12) 28%, rgba(187, 202, 255, .1) 72%, transparent);
}

/* 原有角标线条只作为低对比度提示，不再形成锐利的章节边角。 */
.home-overview::after,
.home-quote::after,
.flow-section::after,
.download-page-hero::after,
.contact-grid::after {
  opacity: .36;
  filter: blur(.25px);
}
.flow-section::before,
.download-trust::before {
  opacity: .34;
}

@media (max-width: 860px) {
  .home-page main::before,
  .inner-page main::before {
    width: 100%;
    opacity: .16;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .home-overview::after,
  .home-quote::after,
  .flow-section::after,
  .download-page-hero::after,
  .contact-grid::after {
    opacity: .24;
  }
}

/* 联系入口改为“邮箱 + 双二维码”两级结构：客服与交流群并列呈现，
   让扫码入口成为同一组信息，而不是继续堆叠成大方块卡片。 */
.contact-qr-list {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(26px, 5vw, 72px);
  margin-top: 24px;
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(187, 202, 255, .2) 12%, rgba(187, 202, 255, .2) 88%, transparent) 1;
}
.contact-qr-list .contact-qr {
  grid-column: auto;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 24px 0;
  border-top: 0;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(187, 202, 255, .18) 8%, rgba(187, 202, 255, .18) 92%, transparent) 1;
}
.contact-qr-list .contact-qr-frame {
  width: 118px;
  padding: 7px;
  transform: rotate(-2deg);
}
.contact-qr-list .contact-qr figcaption { gap: 8px; }
.contact-qr-list .contact-qr figcaption strong {
  font-size: clamp(19px, 2vw, 28px);
  line-height: 1.15;
}
.contact-qr-list .contact-qr figcaption small { max-width: 210px; }

@media (max-width: 860px) {
  .contact-qr-list {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 18px;
  }
  .contact-qr-list .contact-qr {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 18px;
    padding: 20px 0;
  }
  .contact-qr-list .contact-qr-frame { width: 112px; }
}
@media (max-width: 420px) {
  .contact-qr-list .contact-qr {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
  }
  .contact-qr-list .contact-qr-frame { width: 96px; }
}