/* 觉山灵机易理 · 品牌门户 */
html { overflow-x: hidden; }

.landing-page {
  min-height: 100dvh;
  overflow-x: hidden;
  background:
    radial-gradient(1000px 580px at 92% -8%, color-mix(in srgb, var(--water) 14%, transparent), transparent 64%),
    radial-gradient(760px 520px at -8% 22%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 68%),
    var(--paper);
}
.landing-page::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .038;
  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='.74' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.landing-page::before { right: auto; width: 100%; }
.landing-page main section[id] { scroll-margin-top: 84px; }
:root[data-theme="dark"] .landing-page::before { opacity: .022; mix-blend-mode: screen; }
.landing-page main, .site-header, .site-footer { position: relative; z-index: 1; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  transition: background var(--duration-normal), box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.site-header.is-scrolled { background: color-mix(in srgb, var(--paper-card) 88%, transparent); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-xs); backdrop-filter: blur(18px); }
.site-nav { width: min(calc(100vw - 32px), var(--container)); height: 76px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
.site-nav .nav-links { justify-self: center; }
.site-nav .nav-actions { justify-self: end; }
.brand-lockup { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand-lockup img { width: 38px; height: 38px; border-radius: 11px; box-shadow: var(--shadow-xs); }
.brand-name { display: block; font: 700 17px/1.1 var(--font-serif); letter-spacing: .15em; }
.brand-tagline { display: block; margin-top: 5px; color: var(--ink-muted); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { min-height: 38px; display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--radius-pill); color: var(--ink-muted); font: 600 15px/1 var(--font-serif); letter-spacing: .14em; text-decoration: none; transition: all var(--duration-fast); }
.nav-links a:hover { color: var(--ink); background: var(--paper-inset); }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.nav-menu-button { display: none; }

/* 导航右侧：宣纸片 + 墨钮，统一气质 */
.nav-actions .icon-button {
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, var(--border));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--paper-card) 92%, #fff), var(--paper-inset));
  color: var(--ink-soft);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent), 0 2px 8px rgba(60, 50, 36, 0.05);
}
.nav-actions .icon-button:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--paper-card) 88%, var(--accent-light));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 12%, transparent);
  transform: translateY(-1px);
}
.nav-actions .lang-toggle {
  width: auto;
  min-width: 74px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  font: 600 12px/1 var(--font-serif);
  letter-spacing: .14em;
  color: var(--ink-soft);
}
.nav-actions .nav-login {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, var(--border));
  border-radius: var(--radius-pill);
  background:
    linear-gradient(165deg, var(--paper-card), color-mix(in srgb, var(--paper-inset) 70%, var(--paper-card)));
  color: var(--ink) !important;
  font: 650 13px/1 var(--font-serif);
  letter-spacing: .16em;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 50%, transparent);
  transition: all var(--duration-fast) var(--ease-standard);
}
.nav-actions .nav-login:visited { color: var(--ink) !important; }
.nav-actions .nav-login:hover {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--paper-card) 85%, var(--accent-light));
  transform: translateY(-1px);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 12%, transparent);
}
.nav-actions .nav-start {
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--seal) 55%, var(--accent));
  border-radius: var(--radius-pill);
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--accent) 92%, #fff), var(--seal-deep, #96352a));
  color: #fffdf7 !important;
  font: 700 13px/1 var(--font-serif);
  letter-spacing: .18em;
  text-decoration: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 20px color-mix(in srgb, var(--accent) 28%, transparent);
}
.nav-actions .nav-start:visited { color: #fffdf7 !important; }
.nav-actions .nav-start:hover {
  background:
    linear-gradient(155deg, color-mix(in srgb, var(--accent-hover) 88%, #fff), var(--seal));
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 12px 26px color-mix(in srgb, var(--accent) 36%, transparent);
}

.landing-section { position: relative; padding: clamp(74px, 9vw, 128px) 0; }
.landing-section.is-quiet { background: color-mix(in srgb, var(--paper-deep) 44%, transparent); border-block: 1px solid var(--border); }
.landing-container { width: min(calc(100vw - 32px), var(--container)); margin: 0 auto; }
.section-kicker { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; }
.section-kicker::before { content: ''; width: 26px; height: 1px; background: var(--gold); }
.section-heading { max-width: 820px; margin: 0; color: var(--ink); font: 400 calc(var(--text-2xl) * 1.12)/1.24 var(--font-brush); letter-spacing: .03em; filter: url(#ink-brush); -webkit-font-smoothing: antialiased; }
.section-lead { max-width: 690px; margin: 18px 0 0; color: var(--ink-muted); font-size: var(--text-lg); line-height: 1.9; }
.section-intro { display: flex; justify-content: space-between; align-items: end; gap: 32px; margin-bottom: 42px; }
.section-intro .section-lead { max-width: 460px; margin: 0; }

/* Hero */
.landing-hero { min-height: min(940px, 100dvh); display: flex; align-items: center; padding: 118px 0 54px; }
.landing-hero::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 32%;
  opacity: .075;
  pointer-events: none;
  background: linear-gradient(165deg, transparent 0 48%, var(--ink) 49% 50%, transparent 51%), linear-gradient(18deg, transparent 0 49%, var(--ink) 50% 51%, transparent 52%);
  clip-path: polygon(0 100%, 0 78%, 11% 55%, 21% 76%, 35% 31%, 45% 71%, 58% 14%, 72% 65%, 84% 35%, 100% 80%, 100% 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(480px, 1.05fr); align-items: center; gap: clamp(32px, 6vw, 88px); }
.hero-copy { position: relative; z-index: 2; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 22px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--jade); background: color-mix(in srgb, var(--paper-card) 70%, transparent); font-size: 11px; letter-spacing: .14em; }
.hero-eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 5px color-mix(in srgb, var(--jade) 12%, transparent); }
.hero-title { margin: 0; color: var(--ink); font: 400 calc(var(--text-hero) * 1.16)/1.06 var(--font-brush); letter-spacing: .04em; -webkit-font-smoothing: antialiased; filter: url(#ink-brush); }
.hero-title span { display: block; margin-top: 14px; color: var(--accent); font-size: .36em; font-family: var(--font-sans); font-weight: 650; letter-spacing: .24em; }
.hero-lead { max-width: 620px; margin: 28px 0 0; color: var(--ink-soft); font-size: clamp(1rem, .92rem + .3vw, 1.18rem); line-height: 2; }
.hero-lead strong { color: var(--ink); font-weight: 700; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
/* Hero CTA：宋体字距 + 彻底去掉链接下划线 */
.hero-actions .btn,
.hero-actions a.btn,
.hero-actions a.btn:link,
.hero-actions a.btn:visited,
.hero-actions a.btn:hover,
.hero-actions a.btn:active,
.landing-page a.btn,
.landing-page a.btn:link,
.landing-page a.btn:visited,
.landing-page a.btn:hover,
.landing-page a.btn:active {
  font-family: var(--font-serif) !important;
  font-weight: 650;
  letter-spacing: .16em;
  text-decoration: none !important;
  -webkit-text-decoration: none !important;
  border-bottom: 0 !important;
  box-shadow: none;
}
.hero-actions .btn-primary,
.landing-page a.btn-primary {
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 30%, transparent);
}
.hero-actions .btn-outline,
.landing-page a.btn-outline {
  background:
    linear-gradient(165deg, var(--paper-card), color-mix(in srgb, var(--paper-inset) 65%, var(--paper-card)));
  border-color: color-mix(in srgb, var(--ink) 16%, var(--border));
  color: var(--ink) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 48%, transparent);
}
.hero-actions .btn-outline:hover,
.landing-page a.btn-outline:hover {
  color: var(--accent) !important;
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
  background: color-mix(in srgb, var(--paper-card) 86%, var(--accent-light));
}
.hero-trust { display: flex; flex-wrap: wrap; gap: 18px; margin: 28px 0 0; padding: 0; list-style: none; color: var(--ink-muted); font-size: 12px; }
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust li::before { content: ''; width: 5px; height: 5px; border: 1px solid var(--gold); transform: rotate(45deg); }

/* 天机罗盘 */
.compass-stage { position: relative; min-height: 610px; display: grid; place-items: center; perspective: 1200px; }
.compass-glow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold) 13%, transparent), transparent 68%); filter: blur(20px); }
.celestial-compass { position: relative; width: min(44vw, 570px); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(var(--tilt-y, 0deg)) rotateY(var(--tilt-x, 0deg)); transition: transform 500ms var(--ease-emphasized); }
.compass-shadow { position: absolute; inset: 12%; border-radius: 50%; box-shadow: 0 38px 78px rgba(34,29,20,.18); transform: translateZ(-24px); }
.compass-ring { position: absolute; inset: var(--ring-inset); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--gold) 54%, var(--border)); display: grid; place-items: center; color: var(--ink-soft); background: color-mix(in srgb, var(--paper-card) var(--ring-alpha, 35%), transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 22%, transparent); transform-style: preserve-3d; transition: filter var(--duration-normal), border-color var(--duration-normal), box-shadow var(--duration-normal); }
.compass-ring:hover, .celestial-compass[data-focus="bazi"] .ring-stems, .celestial-compass[data-focus="ziwei"] .ring-branches, .celestial-compass[data-focus="qimen"] .ring-trigrams { border-color: var(--accent); filter: saturate(1.12); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 24px color-mix(in srgb, var(--accent) 10%, transparent); }
.ring-mountains { --ring-inset: 0%; --ring-alpha: 18%; animation: compassClockwise 30s linear infinite; }
.ring-branches { --ring-inset: 8.5%; --ring-alpha: 28%; animation: compassCounter 24s linear infinite; }
.ring-stems { --ring-inset: 18%; --ring-alpha: 38%; animation: compassClockwise 20s linear infinite; }
.ring-trigrams { --ring-inset: 29%; --ring-alpha: 48%; animation: compassCounter 28s linear infinite; }
.ring-orbit { --ring-inset: 39%; --ring-alpha: 0%; border-style: dashed; animation: compassClockwise 36s linear infinite; }
.compass-ring::before, .compass-ring::after { content: ''; position: absolute; inset: 5px; border-radius: inherit; border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); }
.ring-label { position: absolute; left: 50%; top: 50%; width: 24px; height: calc(50% - 10px); margin-left: -12px; transform-origin: 50% 100%; transform: translateY(-100%) rotate(var(--angle)); text-align: center; font: 600 clamp(9px, .82vw, 12px)/1 var(--font-serif); letter-spacing: .05em; }
.ring-label span { display: block; transform: rotate(calc(-1 * var(--angle))); }
.ring-stems .ring-label { color: var(--accent); }
.ring-trigrams .ring-label { font-size: clamp(15px, 1.4vw, 22px); color: var(--jade); }
.orbit-dot { position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold) 10%, transparent); }
.compass-core { position: absolute; inset: 42%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--gold) 58%, var(--border)); border-radius: 50%; background: var(--paper-card); box-shadow: var(--shadow-md); transform: translateZ(22px); }
.taiji { width: 74%; aspect-ratio: 1; border-radius: 50%; background: linear-gradient(90deg, var(--ink) 50%, var(--paper-card) 50%); position: relative; overflow: hidden; animation: coreBreathe 8s ease-in-out infinite; }
.taiji::before, .taiji::after { content: ''; position: absolute; left: 25%; width: 50%; height: 50%; border-radius: 50%; }
.taiji::before { top: 0; background: var(--ink); box-shadow: inset 0 0 0 8px var(--paper-card); }
.taiji::after { bottom: 0; background: var(--paper-card); box-shadow: inset 0 0 0 8px var(--ink); }
.compass-caption { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%); color: var(--ink-muted); font: 500 10px/1 var(--font-sans); letter-spacing: .3em; white-space: nowrap; }
.compass-pins { position: absolute; inset: 0; pointer-events: none; }
.compass-pin { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--ink-muted); box-shadow: var(--shadow-xs); font-size: 10px; letter-spacing: .08em; }
.compass-pin::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--pin-color, var(--accent)); }
.pin-bazi { --pin-color: var(--accent); left: 4%; top: 28%; }
.pin-ziwei { --pin-color: var(--gold); right: 3%; top: 20%; }
.pin-qimen { --pin-color: var(--jade); right: 6%; bottom: 19%; }
@keyframes compassClockwise { to { transform: rotate(360deg); } }
@keyframes compassCounter { to { transform: rotate(-360deg); } }
@keyframes coreBreathe { 0%,100% { transform: scale(.98); opacity: .86; } 50% { transform: scale(1.025); opacity: 1; } }

/* 模块入口 */
.module-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.product-module { position: relative; min-height: 340px; display: flex; flex-direction: column; padding: 30px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); background: var(--paper-card); box-shadow: var(--shadow-sm); text-decoration: none; transform: perspective(900px) rotateX(var(--card-y, 0deg)) rotateY(var(--card-x, 0deg)); transition: transform var(--duration-normal) var(--ease-emphasized), border-color var(--duration-normal), box-shadow var(--duration-normal); }
/* product-module hover lift is defined in the global card-lift block below */
.product-module::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px 260px at 90% 0%, color-mix(in srgb, var(--module-color) 16%, transparent), transparent 66%); pointer-events: none; }
.product-module::after { content: ''; position: absolute; width: 240px; height: 240px; right: -82px; bottom: -95px; border: 1px solid color-mix(in srgb, var(--module-color) 38%, transparent); border-radius: 50%; box-shadow: inset 0 0 0 20px color-mix(in srgb, var(--module-color) 3%, transparent), inset 0 0 0 42px color-mix(in srgb, var(--module-color) 4%, transparent); }
.module-bazi { --module-color: var(--accent); }
.module-ziwei { --module-color: var(--gold); }
.module-qimen { --module-color: var(--jade); }
.module-topline { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.module-mark { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--module-color) 70%, var(--border)); border-radius: 12px; color: var(--module-color); font: 700 20px/1 var(--font-serif); }
.module-status { padding: 5px 9px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--module-color) 10%, transparent); color: var(--module-color); font-size: 10px; letter-spacing: .12em; }
.product-module h3 { position: relative; z-index: 1; margin: 42px 0 12px; color: var(--ink); font: 700 28px/1.25 var(--font-serif); letter-spacing: .09em; }
.product-module p { position: relative; z-index: 1; max-width: 92%; margin: 0; color: var(--ink-muted); line-height: 1.85; }
.module-details { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding-top: 28px; }
.module-details span { padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 10px; }
.module-arrow { position: absolute; right: 26px; bottom: 24px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; color: var(--module-color); background: var(--paper-card); transition: transform var(--duration-normal); }
.product-module:hover .module-arrow { transform: translateX(3px); }

/* 方法论与能力 */
.method-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(26px, 5vw, 72px); align-items: center; }
.method-orbit { position: relative; aspect-ratio: 1; max-width: 520px; margin: 0 auto; display: grid; place-items: center; }
.method-orbit::before, .method-orbit::after { content: ''; position: absolute; border: 1px solid var(--border); border-radius: 50%; }
.method-orbit::before { inset: 7%; }
.method-orbit::after { inset: 24%; border-style: dashed; }
.method-center { width: 142px; aspect-ratio: 1; display: grid; place-items: center; text-align: center; border: 1px solid var(--gold); border-radius: 50%; color: var(--ink); background: var(--paper-card); box-shadow: var(--shadow-md); font: 700 18px/1.65 var(--font-serif); }
.method-node { position: absolute; width: 112px; min-height: 74px; display: grid; place-items: center; padding: 10px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-soft); background: var(--surface-1); box-shadow: var(--shadow-xs); font-size: 12px; }
.method-node:nth-of-type(2) { top: 0; left: 50%; transform: translateX(-50%); }
.method-node:nth-of-type(3) { right: 0; top: 50%; transform: translateY(-50%); }
.method-node:nth-of-type(4) { bottom: 0; left: 50%; transform: translateX(-50%); }
.method-node:nth-of-type(5) { left: 0; top: 50%; transform: translateY(-50%); }
.capability-list { display: grid; gap: 10px; margin-top: 30px; }
.capability-item { display: grid; grid-template-columns: 42px 1fr; gap: 14px; align-items: start; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--paper-card) 74%, transparent); }
.capability-number { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-light); font: 700 12px/1 var(--font-serif); }
.capability-item h3 { margin: 1px 0 5px; color: var(--ink); font-size: 15px; }
.capability-item p { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.75; }

/* 流程、优势、示例 */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: var(--border); }
.process-step { position: relative; min-height: 245px; padding: 28px; background: var(--paper-card); }
.process-step::after { content: '→'; position: absolute; right: -10px; top: 42px; z-index: 2; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--gold); background: var(--paper-card); }
.process-step:last-child::after { display: none; }
.process-index { color: var(--gold); font: 700 34px/1 var(--font-serif); opacity: .72; }
.process-step h3 { margin: 46px 0 10px; color: var(--ink); font: 700 18px/1.4 var(--font-serif); }
.process-step p { margin: 0; color: var(--ink-muted); font-size: 13px; line-height: 1.8; }
.advantage-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.advantage-card { padding: 24px; border-top: 2px solid var(--adv-color, var(--gold)); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--paper-card); box-shadow: var(--shadow-xs); }
.advantage-card h3 { margin: 16px 0 8px; color: var(--ink); font-size: 15px; }
.advantage-card p { margin: 0; color: var(--ink-muted); font-size: 12px; line-height: 1.8; }
.advantage-card .ui-icon { color: var(--adv-color, var(--gold)); font-size: 24px; }

.analysis-demo { display: grid; grid-template-columns: .84fr 1.16fr; gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--border); box-shadow: var(--shadow-md); }
.demo-chart { padding: clamp(24px, 4vw, 44px); background: var(--paper-inset); }
.demo-note { padding: clamp(24px, 4vw, 48px); background: var(--paper-card); }
.demo-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 28px; }
.demo-pillar { min-height: 190px; display: flex; flex-direction: column; align-items: center; padding: 15px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper-card); }
.demo-pillar.is-day { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
.demo-pillar small { color: var(--ink-muted); }
.demo-pillar strong { margin: 18px 0 10px; color: var(--accent); font: 700 32px/1.1 var(--font-serif); }
.demo-pillar span { color: var(--ink-soft); font: 700 30px/1.1 var(--font-serif); }
.demo-note-tag { display: inline-flex; padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--jade); background: color-mix(in srgb, var(--jade) 8%, transparent); font-size: 10px; letter-spacing: .12em; }
.demo-note h3 { margin: 22px 0 16px; color: var(--ink); font: 700 24px/1.5 var(--font-serif); }
.demo-note p { color: var(--ink-soft); line-height: 1.95; }
.demo-note blockquote { margin: 22px 0 0; padding: 15px 18px; border-left: 3px solid var(--gold); color: var(--ink-soft); background: var(--paper-inset); }

/* 定价与 FAQ */
.pricing-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: stretch; }
.price-card { padding: clamp(28px, 5vw, 54px); border: 1px solid var(--accent); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--paper-card), color-mix(in srgb, var(--accent) 5%, var(--paper-card))); box-shadow: var(--shadow-md); }
.price-value { color: var(--accent); font: 700 clamp(46px, 6vw, 78px)/1 var(--font-serif); }
.price-value small { margin-left: 8px; color: var(--ink-muted); font: 500 14px/1 var(--font-sans); }
.price-card p { color: var(--ink-muted); line-height: 1.8; }
.price-list { display: grid; gap: 11px; margin: 26px 0 30px; padding: 0; list-style: none; }
.price-list li { display: flex; gap: 10px; color: var(--ink-soft); }
.price-list li::before { content: '✓'; color: var(--jade); font-weight: 800; }
.usage-note { display: grid; align-content: center; padding: clamp(26px, 4vw, 46px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-card); }
.usage-note h3 { color: var(--ink); font: 700 22px/1.5 var(--font-serif); }
.usage-note p { color: var(--ink-muted); line-height: 1.9; }

.faq-list { max-width: 900px; margin: 38px auto 0; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question { width: 100%; min-height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; border: 0; background: transparent; color: var(--ink); text-align: left; font-weight: 650; cursor: pointer; }
.faq-question::after { content: '+'; color: var(--accent); font: 400 25px/1 var(--font-serif); transition: transform var(--duration-normal); }
.faq-question[aria-expanded="true"]::after { transform: rotate(45deg); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--duration-slow) var(--ease-standard); }
.faq-answer > div { overflow: hidden; }
.faq-answer p { max-width: 760px; margin: 0; padding: 0 0 24px; color: var(--ink-muted); line-height: 1.9; }
.faq-question[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }

.site-footer { padding: 54px 0 26px; color: #cdc6b6; background: #201d18; }
.footer-grid { display: grid; grid-template-columns: 1.3fr repeat(3, .7fr); gap: 42px; }
.footer-brand { color: #f2ece0; font: 700 20px/1.4 var(--font-serif); letter-spacing: .12em; }
.footer-desc { max-width: 390px; color: #9a9284; line-height: 1.8; font-size: 13px; }
.footer-group h3 { margin: 0 0 14px; color: #c99a4e; font-size: 12px; letter-spacing: .14em; }
.footer-group a { display: block; margin: 9px 0; color: #a49c8c; text-decoration: none; font-size: 13px; }
.footer-group a:hover { color: #f2ece0; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,250,240,.1); color: #857d6e; font-size: 11px; }

.mobile-nav { display: none; position: fixed; inset: 0; z-index: var(--z-modal); padding: 88px 24px 32px; background: color-mix(in srgb, var(--paper-card) 96%, transparent); backdrop-filter: blur(24px); }
.mobile-nav.is-open { display: block; }
.mobile-nav a { min-height: 54px; display: flex; align-items: center; border-bottom: 1px solid var(--border); color: var(--ink); font: 650 18px/1 var(--font-serif); text-decoration: none; }
.mobile-nav-close { position: absolute; right: 20px; top: 20px; }

@media (max-width: 1040px) {
  .nav-links { display: none; }
  .nav-menu-button { display: inline-flex; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero-copy { max-width: 760px; margin: 0 auto; }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .compass-stage { min-height: 520px; }
  .celestial-compass { width: min(78vw, 520px); }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .product-module:last-child { grid-column: 1 / -1; min-height: 300px; }
  .method-grid, .analysis-demo, .pricing-layout { grid-template-columns: 1fr; }
  .process-grid, .advantage-grid { grid-template-columns: repeat(2, 1fr); }
  .process-step:nth-child(2)::after { display: none; }
  .footer-grid { grid-template-columns: 1.3fr repeat(2, .7fr); }
  .footer-group:last-child { grid-column: 2 / -1; }
}

@media (max-width: 700px) {
  .site-nav { height: 66px; }
  .brand-tagline { display: none; }
  .brand-name { font-size: 14px; letter-spacing: .08em; }
  .brand-lockup img { width: 34px; height: 34px; }
  .nav-actions .btn { display: none; }
  .landing-hero { min-height: auto; padding: 108px 0 52px; }
  .hero-title { font-size: clamp(2.45rem, 12vw, 3.7rem); }
  .hero-title span { font-size: .32em; line-height: 1.7; }
  .hero-lead { font-size: .98rem; line-height: 1.85; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-trust { gap: 10px 14px; font-size: 11px; }
  .compass-stage { min-height: 390px; }
  .compass-stage { overflow: hidden; }
  .celestial-compass { width: min(88vw, 380px); }
  .ring-mountains .ring-label:nth-child(even), .ring-stems .ring-label:nth-child(even) { display: none; }
  .compass-pin { display: none; }
  .section-intro { display: block; }
  .section-intro .section-lead { margin-top: 16px; }
  .module-grid, .process-grid, .advantage-grid { grid-template-columns: 1fr; }
  .product-module, .product-module:last-child { grid-column: auto; min-height: 310px; }
  .process-step::after { display: none; }
  .method-node { width: 92px; min-height: 64px; font-size: 10px; }
  .method-center { width: 116px; font-size: 15px; }
  .analysis-demo { border-radius: var(--radius); }
  .demo-pillars { gap: 5px; }
  .demo-pillar { min-height: 158px; padding-inline: 4px; }
  .demo-pillar strong, .demo-pillar span { font-size: 25px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-group:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}

@media (pointer: coarse) {
  .product-module, .celestial-compass { transform: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .compass-ring, .taiji { animation: none !important; }
}
.page-hidden .compass-ring, .page-hidden .taiji { animation-play-state: paused !important; }

/* 2026 企业级品牌首页 */
.site-header { animation: headerArrive .6s var(--ease-standard) both; }
.site-header.is-scrolled .site-nav { height: 64px; }
.site-nav { transition: height var(--duration-normal) var(--ease-standard); }
.nav-links { position: relative; }
.nav-links .nav-indicator { position: absolute; left: 0; bottom: -10px; width: var(--nav-indicator-width, 0); height: 2px; border-radius: 2px; background: var(--accent); transform: translateX(var(--nav-indicator-x, 0)); transition: width var(--duration-normal) var(--ease-emphasized), transform var(--duration-normal) var(--ease-emphasized), opacity var(--duration-fast); opacity: var(--nav-indicator-opacity, 0); }
.nav-links a.is-current { color: var(--ink); }
.lang-toggle { width: auto; min-width: 48px; padding-inline: 9px; color: var(--ink-muted); font-size: 11px; }
.nav-start { position: relative; overflow: hidden; }
.nav-start::after { content: ''; position: absolute; inset: -1px; background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.28), transparent 78%); transform: translateX(-140%); transition: transform .7s var(--ease-standard); }
.nav-start:hover::after { transform: translateX(140%); }

/* 登录链接：防止浏览器默认 visited 紫色 */
a.nav-login,
a.nav-login:link,
a.nav-login:visited,
a.nav-login:active { color: var(--ink); text-decoration: none; }
@keyframes headerArrive { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.landing-hero { min-height: min(960px, 100dvh); overflow: hidden; }
.landing-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--paper) 94%, transparent) 0 35%, transparent 72%); }
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-atmosphere span { position: absolute; border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); border-radius: 50%; opacity: .46; animation: atmosphereDrift 18s ease-in-out infinite alternate; }
.hero-atmosphere span:nth-child(1) { width: 420px; height: 420px; left: -250px; top: 15%; }
.hero-atmosphere span:nth-child(2) { width: 680px; height: 680px; right: -360px; top: -180px; animation-duration: 24s; }
.hero-atmosphere span:nth-child(3) { width: 240px; height: 240px; left: 44%; bottom: -140px; border-style: dashed; animation-duration: 14s; }
.hero-title { max-width: 720px; font-size: clamp(3rem, 5vw, 5.65rem); line-height: 1.11; letter-spacing: .025em; }
.hero-lead { max-width: 650px; }
.hero-trust { max-width: 680px; }
@keyframes atmosphereDrift { to { transform: translate3d(16px,-12px,0) rotate(5deg); } }

.section-heading { text-wrap: balance; }
.section-lead { text-wrap: pretty; }
.panel-number, .panel-overline { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }

/* 人生议题导航盘 */
.needs-section { overflow: hidden; }
.needs-explorer { display: grid; grid-template-columns: minmax(520px, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(36px, 7vw, 92px); }
.needs-orbit { position: relative; width: min(100%, 590px); aspect-ratio: 1; display: grid; place-items: center; margin-inline: auto; }
.needs-orbit::before, .needs-orbit::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.needs-orbit::before { inset: 6%; border: 1px solid var(--border); box-shadow: inset 0 0 0 42px color-mix(in srgb, var(--paper-deep) 32%, transparent); }
.needs-orbit::after { inset: 23%; border: 1px dashed color-mix(in srgb, var(--gold) 48%, var(--border)); }
.needs-core { position: relative; z-index: 2; width: 180px; aspect-ratio: 1; display: grid; place-content: center; gap: 7px; padding: 24px; text-align: center; border: 1px solid color-mix(in srgb, var(--gold) 72%, var(--border)); border-radius: 50%; color: var(--ink); background: var(--paper-card); box-shadow: var(--shadow-md); }
.needs-core span { font: 700 25px/1.2 var(--font-serif); letter-spacing: .08em; }
.needs-core small { color: var(--ink-muted); font-size: 10px; line-height: 1.55; }
.need-node { position: absolute; z-index: 3; width: 142px; min-height: 78px; display: flex; align-items: center; gap: 11px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-muted); background: color-mix(in srgb, var(--paper-card) 92%, transparent); box-shadow: var(--shadow-xs); cursor: pointer; transition: transform var(--duration-normal) var(--ease-emphasized), border-color var(--duration-fast), color var(--duration-fast), box-shadow var(--duration-fast); }
.need-node:nth-of-type(1) { top: 2%; left: 50%; transform: translateX(-50%); }
.need-node:nth-of-type(2) { right: 0; top: 50%; transform: translateY(-50%); }
.need-node:nth-of-type(3) { bottom: 2%; left: 50%; transform: translateX(-50%); }
.need-node:nth-of-type(4) { left: 0; top: 50%; transform: translateY(-50%); }
.need-node .ui-icon { flex: 0 0 auto; width: 21px; color: var(--gold); }
.need-node b { font-size: 13px; }
.need-node.is-active { color: var(--ink); border-color: var(--accent); box-shadow: 0 10px 32px color-mix(in srgb, var(--accent) 12%, transparent); }
.need-node.is-active .ui-icon { color: var(--accent); }
.need-node:hover { z-index: 4; border-color: var(--accent); color: var(--ink); box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 16%, transparent); }
.need-node:hover .ui-icon { color: var(--accent); }
.need-node:nth-of-type(1):hover { transform: translateX(-50%) translateY(-4px) scale(1.09); }
.need-node:nth-of-type(1).is-active { transform: translateX(-50%) translateY(-4px); }
.need-node:nth-of-type(2):hover { transform: translateY(-50%) translateX(4px) scale(1.09); }
.need-node:nth-of-type(2).is-active { transform: translateY(-50%) translateX(4px); }
.need-node:nth-of-type(3):hover { transform: translateX(-50%) translateY(4px) scale(1.09); }
.need-node:nth-of-type(3).is-active { transform: translateX(-50%) translateY(4px); }
.need-node:nth-of-type(4):hover { transform: translateY(-50%) translateX(-4px) scale(1.09); }
.need-node:nth-of-type(4).is-active { transform: translateY(-50%) translateX(-4px); }
.need-panels { position: relative; min-height: 420px; display: grid; align-items: center; }
.need-panel { grid-area: 1/1; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(145deg, var(--paper-card), color-mix(in srgb, var(--jade) 4%, var(--paper-card))); box-shadow: var(--shadow-md); }
.need-panel h3 { margin: 18px 0 14px; color: var(--ink); font: 700 28px/1.4 var(--font-serif); }
.need-panel p { color: var(--ink-soft); line-height: 1.95; }
.need-panel ul { display: grid; gap: 12px; margin: 26px 0 0; padding: 22px 0 0; border-top: 1px solid var(--border); list-style: none; }
.need-panel li { display: flex; gap: 10px; color: var(--ink-muted); }
.need-panel li::before { content: ''; flex: 0 0 auto; width: 6px; height: 6px; margin-top: .65em; border: 1px solid var(--accent); transform: rotate(45deg); }

/* 三体系切换舞台 */
.systems-stage { display: grid; grid-template-columns: 245px minmax(390px, 1fr) minmax(320px, .9fr); min-height: 590px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-card); box-shadow: var(--shadow-md); }
.system-tabs { display: grid; align-content: center; gap: 8px; padding: 24px; border-right: 1px solid var(--border); background: var(--paper-inset); }
.system-tab { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 3px 12px; padding: 18px 15px; border: 0; border-radius: var(--radius-sm); color: var(--ink-muted); background: transparent; text-align: left; cursor: pointer; transition: background var(--duration-normal), color var(--duration-normal), transform var(--duration-normal); }
.system-tab::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--accent); transform: scaleY(0); transition: transform var(--duration-normal); }
.system-tab > span { grid-row: 1/3; color: var(--gold); font: 700 13px/1.3 var(--font-serif); }
.system-tab b { color: inherit; font: 700 16px/1.35 var(--font-serif); }
.system-tab small { font-size: 10px; line-height: 1.5; }
.system-tab.is-active { color: var(--ink); background: var(--paper-card); transform: translateX(3px); box-shadow: var(--shadow-xs); }
.system-tab.is-active::before { transform: scaleY(1); }
.system-visual { position: relative; display: grid; place-items: center; min-width: 0; overflow: hidden; background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 62%), var(--paper-deep); }
.system-visual::before { content: ''; position: absolute; width: 420px; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent); border-radius: 50%; box-shadow: inset 0 0 0 34px color-mix(in srgb, var(--gold) 2.5%, transparent), inset 0 0 0 72px color-mix(in srgb, var(--jade) 2.5%, transparent); }
.example-badge { position: absolute; left: 20px; top: 20px; z-index: 4; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--ink-muted); background: var(--surface-1); font-size: 10px; }
.mini-chart { position: absolute; width: min(82%, 390px); transition: opacity .35s var(--ease-standard), transform .45s var(--ease-emphasized); }
.mini-bazi { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.mini-bazi > div { min-height: 240px; display: flex; flex-direction: column; align-items: center; padding: 22px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--paper-card) 88%, transparent); box-shadow: var(--shadow-xs); animation: pillarRise .55s var(--ease-emphasized) both; }
.mini-bazi > div:nth-child(2) { animation-delay: .06s; }.mini-bazi > div:nth-child(3) { animation-delay: .12s; }.mini-bazi > div:nth-child(4) { animation-delay: .18s; }
.mini-bazi > div.is-day { border-color: var(--accent); }
.mini-bazi small { color: var(--ink-muted); }.mini-bazi b,.mini-bazi span { margin-top: 22px; color: var(--accent); font: 700 34px/1 var(--font-serif); }.mini-bazi span { margin-top: 16px; color: var(--ink); }
.mini-bazi svg { position: absolute; inset: 20% 5%; width: 90%; height: 60%; pointer-events: none; }.mini-bazi path { fill: none; stroke: color-mix(in srgb, var(--gold) 40%, transparent); stroke-width: .6; stroke-dasharray: 3 3; }
.mini-ziwei { aspect-ratio: 1; display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: repeat(4,1fr); gap: 5px; }
.mini-ziwei span { display: grid; place-items: center; border: 1px solid var(--border); color: var(--ink-muted); background: var(--paper-card); font: 600 11px/1 var(--font-serif); animation: palaceReveal .5s var(--ease-standard) both; }
.mini-ziwei span:nth-child(5),.mini-ziwei span:nth-child(6),.mini-ziwei span:nth-child(7),.mini-ziwei span:nth-child(8) { grid-row: 2; }.mini-ziwei span:nth-child(9),.mini-ziwei span:nth-child(10),.mini-ziwei span:nth-child(11),.mini-ziwei span:nth-child(12) { grid-row: 4; }
.mini-ziwei b { position: absolute; inset: 28%; display: grid; place-items: center; text-align: center; border: 1px solid var(--gold); color: var(--ink); background: var(--paper-inset); font: 700 22px/1.55 var(--font-serif); }
.mini-qimen { aspect-ratio: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; transform-origin: center; }
.mini-qimen span { display: grid; place-items: center; border: 1px solid var(--border); color: var(--ink-soft); background: var(--paper-card); font: 600 12px/1.4 var(--font-serif); animation: gridReveal .48s var(--ease-standard) both; }
.system-visual[data-active-system="bazi"] .mini-ziwei,.system-visual[data-active-system="bazi"] .mini-qimen,.system-visual[data-active-system="ziwei"] .mini-bazi,.system-visual[data-active-system="ziwei"] .mini-qimen,.system-visual[data-active-system="qimen"] .mini-bazi,.system-visual[data-active-system="qimen"] .mini-ziwei { opacity: 0; transform: scale(.94); pointer-events: none; }
.system-panels { display: grid; align-items: center; padding: clamp(28px, 4vw, 48px); border-left: 1px solid var(--border); }
.system-panel { grid-area: 1/1; }
.system-panel h3 { margin: 14px 0; color: var(--ink); font: 700 26px/1.45 var(--font-serif); }
.system-panel p { color: var(--ink-soft); line-height: 1.9; }
.system-panel ul { display: grid; gap: 9px; margin: 24px 0 28px; padding: 0; list-style: none; }.system-panel li { color: var(--ink-muted); }.system-panel li::before { content: '—'; margin-right: 8px; color: var(--gold); }
@keyframes pillarRise { from { opacity: 0; transform: translateY(14px); } }
@keyframes palaceReveal { from { opacity: 0; transform: scale(.92); } }
@keyframes gridReveal { from { opacity: 0; clip-path: inset(50%); } to { clip-path: inset(0); } }

/* 分析报告阅读器 */
.report-reader { display: grid; grid-template-columns: 235px minmax(0,1fr); overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-inset); box-shadow: 18px 22px 0 -12px color-mix(in srgb, var(--gold) 8%, transparent), var(--shadow-md); }
.report-nav { display: grid; align-content: start; padding: 28px 18px; border-right: 1px solid var(--border); }
.report-nav > span { margin: 0 12px 22px; color: var(--accent); font-size: 10px; letter-spacing: .18em; }
.report-nav button { display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 10px; min-height: 54px; padding: 10px 12px; border: 0; border-radius: var(--radius-sm); color: var(--ink-muted); background: transparent; text-align: left; cursor: pointer; }
.report-nav button b { color: var(--gold); font: 700 11px/1 var(--font-serif); }.report-nav button.is-active { color: var(--ink); background: var(--paper-card); box-shadow: var(--shadow-xs); }
.report-paper { position: relative; min-height: 540px; padding: clamp(28px,5vw,62px); background: var(--paper-card); }
.report-paper::before { content: ''; position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--gold) 16%, transparent); pointer-events: none; }
.report-paper-head { position: relative; display: flex; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }
.report-paper-head small,.report-paper-head strong { display: block; }.report-paper-head small { color: var(--ink-muted); font-size: 10px; letter-spacing: .15em; }.report-paper-head strong { margin-top: 7px; color: var(--ink); font: 700 18px/1.4 var(--font-serif); }.report-paper-head > span { align-self: start; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--accent); font-size: 10px; }
.report-panel { min-height: 255px; padding-top: 32px; }.report-panel h3 { max-width: 650px; margin: 0 0 15px; color: var(--ink); font: 700 28px/1.45 var(--font-serif); }.report-panel > p { max-width: 720px; color: var(--ink-soft); line-height: 1.95; }
.report-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }.report-insights > div { padding: 17px; border-left: 2px solid var(--gold); background: var(--paper-inset); }.report-insights b { color: var(--ink); font-size: 12px; }.report-insights p { margin: 7px 0 0; color: var(--ink-muted); font-size: 12px; line-height: 1.75; }
.report-timeline { position: relative; display: grid; grid-template-columns: repeat(4,1fr); margin-top: 26px; }.report-timeline::before { content: ''; position: absolute; left: 8%; right: 8%; top: 7px; height: 1px; background: var(--border-strong); }.report-timeline span { position: relative; display: grid; justify-items: center; gap: 10px; color: var(--ink-muted); font-size: 11px; }.report-timeline span::before { content: ''; z-index: 1; width: 13px; height: 13px; border: 2px solid var(--paper-card); border-radius: 50%; background: var(--border-strong); }.report-timeline .is-current::before { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }.report-timeline .is-past::before { background: var(--gold); }

/* 可点击服务流程：左侧步骤 tab + 右侧墨迹化开的场景 */
.process-flow { position: relative; display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 34px; margin-top: 54px; align-items: start; }
.process-steps { display: grid; gap: 10px; position: relative; }
.process-steps::before { content: ''; position: absolute; left: 25px; top: 12px; bottom: 12px; width: 2px; background: var(--border); }
.process-step { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid transparent; border-radius: var(--radius); background: transparent; color: var(--ink-muted); text-align: left; cursor: pointer; transition: background var(--duration-normal), border-color var(--duration-normal), color var(--duration-normal), transform var(--duration-normal); }
.process-step:hover { color: var(--ink-soft); background: color-mix(in srgb, var(--paper-card) 60%, transparent); }
.process-step-index { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--paper); color: var(--ink-faint); font: 700 17px/1 var(--font-serif); transition: all var(--duration-normal); }
.process-step-name { font: 600 15px/1.4 var(--font-brush); font-size: 17px; letter-spacing: .04em; }
.process-step.is-active { color: var(--ink); background: var(--paper-card); border-color: color-mix(in srgb, var(--accent) 34%, var(--border)); box-shadow: var(--shadow-sm); transform: translateX(4px); }
.process-step.is-active .process-step-index { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent); }
.process-stage { position: relative; min-height: 300px; }
.process-scene { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 20px; min-height: 300px; padding: clamp(26px,4vw,46px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-card); box-shadow: var(--shadow-md); }
.process-scene.is-current { animation: sceneInk .72s var(--ease-emphasized) both; }
@keyframes sceneInk { 0% { opacity: 0; clip-path: inset(0 46% 46% 0 round 22px); transform: scale(.98); } 100% { opacity: 1; clip-path: inset(0 0 0 0 round 22px); transform: none; } }
.process-index { color: var(--gold); font: 700 35px/1 var(--font-serif); }.process-scene h3 { margin: 0 0 10px; color: var(--ink); font: 700 23px/1.45 var(--font-serif); }.process-scene p { margin: 0; color: var(--ink-muted); line-height: 1.85; }
.question-selector,.form-fragment { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }.question-selector span,.form-fragment span { padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--ink-soft); background: var(--paper-inset); font-size: 11px; }.question-selector span:first-child { border-color: var(--accent); color: var(--accent); }
.form-fragment span { min-width: 120px; border-radius: var(--radius-sm); }.form-fragment span::after { content: '⌄'; float: right; color: var(--gold); }
.structure-fragment { position: relative; display: grid; grid-template-columns: repeat(4,56px); gap: 6px; margin-top: 22px; }.structure-fragment i { height: 78px; border: 1px solid var(--border); border-radius: 8px; background: linear-gradient(var(--paper-inset), var(--paper-card)); }.structure-fragment i:nth-child(3) { border-color: var(--accent); }.structure-fragment span { align-self: end; margin-left: 8px; color: var(--ink-muted); font-size: 11px; }
.chat-fragment { max-width: 480px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--paper-inset); }.chat-fragment > span { color: var(--ink-soft); font-size: 12px; }.chat-fragment b { display: flex; gap: 4px; margin-top: 14px; }.chat-fragment i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: inkPulse 1.8s ease-in-out infinite; }.chat-fragment i:nth-child(2) { animation-delay: .15s; }.chat-fragment i:nth-child(3) { animation-delay: .3s; }

/* AI 演示器 */
.ai-demo { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr); min-height: 560px; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-card); box-shadow: var(--shadow-md); }
.ai-question-tabs { display: grid; gap: 9px; }
.ai-questions { display: grid; align-content: start; gap: 9px; padding: clamp(24px,4vw,42px); border-right: 1px solid var(--border); background: var(--paper-inset); }.ai-questions > span { margin-bottom: 12px; color: var(--accent); font-size: 10px; letter-spacing: .18em; }.ai-questions button { display: flex; align-items: center; gap: 11px; min-height: 58px; padding: 12px 14px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink-muted); background: transparent; text-align: left; cursor: pointer; }.ai-questions button .ui-icon { flex: 0 0 auto; width: 20px; color: var(--gold); }.ai-questions button b { font-size: 13px; }.ai-questions button.is-active { color: var(--ink); border-color: var(--border); background: var(--paper-card); box-shadow: var(--shadow-xs); }.ai-questions .btn { margin-top: 18px; }
.ai-answer-shell { padding: clamp(28px,5vw,58px); background: linear-gradient(145deg, var(--paper-card), color-mix(in srgb, var(--jade) 3%, var(--paper-card))); }.ai-answer-head { display: flex; align-items: center; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--border); }.ink-avatar { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--ink); font: 700 12px/1 var(--font-serif); }.ai-answer-head b,.ai-answer-head small { display: block; }.ai-answer-head b { color: var(--ink); }.ai-answer-head small { margin-top: 4px; color: var(--ink-muted); font-size: 10px; }.ai-status { display: flex; gap: 4px; margin-left: auto; }.ai-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: inkPulse 2.1s ease-in-out infinite; }.ai-status i:nth-child(2){animation-delay:.18s}.ai-status i:nth-child(3){animation-delay:.36s}
.ai-answer { padding-top: 28px; }.ai-answer section { padding: 0 0 22px 18px; border-left: 2px solid var(--border); animation: answerSection .45s var(--ease-standard) both; }.ai-answer section:nth-child(2){animation-delay:.08s}.ai-answer section:nth-child(3){animation-delay:.16s}.ai-answer h3 { margin: 0 0 9px; color: var(--ink); font: 700 17px/1.4 var(--font-serif); }.ai-answer p { margin: 0; color: var(--ink-soft); line-height: 1.95; }
@keyframes inkPulse { 0%,100%{opacity:.28;transform:scale(.8)}50%{opacity:1;transform:scale(1)} }
@keyframes answerSection { from { opacity: 0; transform: translateY(8px); } }

/* 真实产品浏览器 */
.product-browser { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-card); box-shadow: 0 34px 70px rgba(33,29,20,.15); transform-origin: 50% 100%; }
.browser-chrome { min-height: 54px; display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--paper-inset); }.browser-chrome > span { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }.browser-chrome > span:first-child { background: var(--accent); }.browser-chrome > b { margin-left: 9px; color: var(--ink-muted); font-size: 10px; font-weight: 600; letter-spacing: .12em; }.browser-chrome > div { display: flex; gap: 4px; margin-left: auto; }.browser-chrome button { min-width: 50px; padding: 6px 9px; border: 0; border-radius: var(--radius-pill); color: var(--ink-muted); background: transparent; cursor: pointer; }.browser-chrome button.is-active { color: #fff; background: var(--accent); }
.browser-screen { display: grid; grid-template-columns: 165px minmax(0,1fr) 270px; min-height: 520px; }.mock-history { padding: 24px 16px; border-right: 1px solid var(--border); background: var(--paper-inset); }.mock-history h3 { margin: 0 0 20px; color: var(--ink); font-size: 12px; }.mock-history > span { display: block; height: 54px; margin-bottom: 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--paper-card); }.mock-history > span::before { content: ''; display: block; width: 52%; height: 6px; margin: 12px; border-radius: 4px; background: var(--border-strong); }.mock-history > span::after { content: ''; display: block; width: 72%; height: 5px; margin: 0 12px; border-radius: 4px; background: var(--border); }.mock-history > span.is-selected { border-color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
.mock-workspace { display: grid; align-items: center; min-width: 0; padding: clamp(22px,4vw,48px); background: radial-gradient(circle, color-mix(in srgb, var(--gold) 6%, transparent), transparent 62%), var(--paper-card); }.workbench-panel { grid-area: 1/1; }.mock-pillar-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }.mock-pillar-row > span { min-height: 210px; display: grid; place-content: center; gap: 15px; text-align: center; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--accent); background: var(--paper-inset); font: 700 28px/1 var(--font-serif); }.mock-pillar-row b { color: var(--ink); }.mock-pillar-row .is-day { border-color: var(--accent); box-shadow: inset 0 3px var(--accent); }
.mock-timeline { position: relative; display: grid; grid-template-columns: repeat(5,1fr); margin-top: 30px; }.mock-timeline::before { content: ''; position: absolute; left: 7%; right: 7%; top: 6px; height: 1px; background: var(--border-strong); }.mock-timeline i { z-index: 1; justify-self: center; width: 12px; height: 12px; border: 2px solid var(--paper-card); border-radius: 50%; background: var(--gold); }.mock-timeline i.is-current { background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 12%, transparent); }
.mock-palaces { position: relative; aspect-ratio: 1; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }.mock-palaces span { display: grid; place-items: center; border: 1px solid var(--border); color: var(--ink-muted); background: var(--paper-inset); }.mock-palaces b { position: absolute; inset: 27%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--ink); background: var(--paper-card); font: 700 21px/1 var(--font-serif); }
.mock-nine { aspect-ratio: 1; display: grid; grid-template-columns: repeat(3,1fr); gap: 5px; }.mock-nine span { display: grid; place-items: center; border: 1px solid var(--border); color: var(--jade); background: var(--paper-inset); font: 700 18px/1 var(--font-serif); }.mock-analysis h3 { color: var(--ink); font: 700 18px/1.4 var(--font-serif); }.mock-analysis p { height: 8px; border-radius: 4px; background: var(--border); }.mock-analysis p:nth-of-type(1){width:92%}.mock-analysis p:nth-of-type(2){width:68%}
.mock-ai { display: flex; flex-direction: column; padding: 22px 18px; border-left: 1px solid var(--border); background: var(--paper-inset); }.mock-ai-head { display: flex; align-items: center; gap: 9px; }.mock-ai-head span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--ink); font-size: 10px; }.mock-ai-head b { color: var(--ink); font-size: 12px; }.mock-ai > p { height: 7px; margin: 22px 0 0; border-radius: 4px; background: var(--border); }.mock-ai > p:nth-of-type(2){width:72%;margin-top:8px}.mock-ai-input { display: flex; align-items: center; gap: 10px; min-height: 45px; margin-top: auto; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-muted); background: var(--paper-card); font-size: 10px; }.mock-ai-input i { margin-left: auto; color: var(--accent); }
.browser-notes { display: flex; justify-content: center; gap: 26px; padding: 14px 20px; border-top: 1px solid var(--border); color: var(--ink-muted); background: var(--paper-inset); font-size: 10px; }.browser-notes span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: var(--jade); }

/* 信任印章与场景时间线 */
.trust-layout { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(40px,7vw,98px); }.trust-detail { min-height: 180px; display: grid; margin-top: 30px; }.trust-panel { grid-area: 1/1; padding: 22px 24px; border-left: 3px solid var(--accent); background: var(--paper-inset); }.trust-panel h3 { margin: 0 0 10px; color: var(--ink); font: 700 19px/1.45 var(--font-serif); }.trust-panel p { margin: 0; color: var(--ink-muted); line-height: 1.9; }
.seal-matrix { position: relative; width: min(100%,570px); aspect-ratio: 1; display: grid; place-items: center; margin-inline: auto; }.seal-matrix::before { content: ''; position: absolute; inset: 8%; border: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--border)); border-radius: 50%; }.seal-center { width: 145px; aspect-ratio: 1; display: grid; place-content: center; gap: 6px; text-align: center; border: 1px solid var(--gold); border-radius: 50%; background: var(--paper-card); box-shadow: var(--shadow-md); }.seal-center span { color: var(--accent); font: 700 46px/1 var(--font-serif); }.seal-center small { color: var(--ink-muted); }
.trust-seal { position: absolute; width: 108px; aspect-ratio: 1; display: grid; place-content: center; gap: 5px; border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border)); color: var(--accent); background: var(--paper-card); cursor: pointer; clip-path: polygon(7% 3%,93% 5%,97% 91%,88% 98%,5% 94%,3% 11%); transition: transform var(--duration-normal), background var(--duration-normal), color var(--duration-normal); }.trust-seal::after { content: ''; position: absolute; inset: 7px; border: 1px solid currentColor; opacity: .36; }.trust-seal b { font: 700 24px/1 var(--font-serif); }.trust-seal span { font-size: 10px; letter-spacing: .14em; }.trust-seal:nth-of-type(1){top:2%;left:50%;transform:translateX(-50%) rotate(-2deg)}.trust-seal:nth-of-type(2){right:1%;top:50%;transform:translateY(-50%) rotate(2deg)}.trust-seal:nth-of-type(3){bottom:2%;left:50%;transform:translateX(-50%) rotate(1deg)}.trust-seal:nth-of-type(4){left:1%;top:50%;transform:translateY(-50%) rotate(-2deg)}.trust-seal.is-active { color: #fff; background: var(--accent); box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 8%, transparent); }.trust-seal:nth-of-type(1):hover{transform:translateX(-50%) translateY(-4px)}.trust-seal:nth-of-type(2):hover{transform:translateY(-50%) translateX(4px)}.trust-seal:nth-of-type(3):hover{transform:translateX(-50%) translateY(4px)}.trust-seal:nth-of-type(4):hover{transform:translateY(-50%) translateX(-4px)}

.life-timeline { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(340px,.8fr); gap: 40px; align-items: stretch; }.life-line { position: relative; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; min-height: 300px; }.life-line::before { content: ''; position: absolute; left: 8%; right: 8%; top: 50%; height: 1px; background: linear-gradient(90deg,var(--accent),var(--gold),var(--jade),var(--water)); }.life-line button { position: relative; display: grid; justify-items: center; gap: 11px; padding: 18px 8px; border: 0; color: var(--ink-muted); background: transparent; text-align: center; cursor: pointer; }.life-line button::before { content: ''; z-index: 1; width: 19px; height: 19px; border: 5px solid var(--paper-deep); border-radius: 50%; background: var(--border-strong); transition: transform var(--duration-normal), background var(--duration-normal); }.life-line button span { color: var(--gold); font: 700 12px/1 var(--font-serif); }.life-line button b { max-width: 110px; font-size: 12px; line-height: 1.55; }.life-line button.is-active { color: var(--ink); }.life-line button.is-active::before { background: var(--accent); transform: scale(1.18); box-shadow: 0 0 0 6px color-mix(in srgb,var(--accent) 10%,transparent); }
.life-panels { display: grid; }.life-panel { grid-area: 1/1; min-height: 300px; display: grid; align-content: center; padding: clamp(28px,4vw,48px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-card); box-shadow: var(--shadow-sm); }.life-panel .ui-icon { width: 35px; color: var(--accent); }.life-panel h3 { margin: 22px 0 12px; color: var(--ink); font: 700 23px/1.45 var(--font-serif); }.life-panel p { margin: 0; color: var(--ink-muted); line-height: 1.9; }

/* 服务方案与 FAQ */
.pricing-comparator { padding: clamp(24px,4vw,44px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--paper-inset); }.pricing-needs { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 7px; margin-bottom: 30px; }.pricing-needs > span { margin-right: 8px; color: var(--ink-muted); font-size: 12px; }.pricing-needs button { min-height: 38px; padding: 8px 14px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--ink-muted); background: var(--paper-card); cursor: pointer; }.pricing-needs button.is-active { border-color: var(--accent); color: #fff; background: var(--accent); }
.pricing-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }.pricing-card { position: relative; display: flex; flex-direction: column; min-height: 390px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--paper-card); transition: transform var(--duration-normal), border-color var(--duration-normal), box-shadow var(--duration-normal), opacity var(--duration-normal); }.pricing-card > span { color: var(--accent); font-size: 10px; letter-spacing: .15em; }.pricing-card h3 { margin: 20px 0 24px; color: var(--ink); font: 700 21px/1.4 var(--font-serif); }.pricing-number { display: flex; align-items: end; gap: 8px; color: var(--accent); }.pricing-number b { font: 700 68px/.9 var(--font-serif); }.pricing-number small { padding-bottom: 6px; color: var(--ink-muted); }.pricing-card p { color: var(--ink-muted); line-height: 1.85; }.pricing-card .btn { margin-top: auto; }.pricing-card.is-recommended { border-color: var(--accent); box-shadow: var(--shadow-md); }
.pricing-note { display: flex; align-items: center; gap: 13px; margin-top: 18px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink-muted); background: var(--paper-card); }.pricing-note .ui-icon { flex: 0 0 auto; width: 21px; color: var(--gold); }.pricing-note p { margin: 0; font-size: 12px; }

.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(40px,7vw,90px); align-items: start; }.faq-intro { position: sticky; top: 110px; }.faq-list { max-width: none; margin: 0; }.faq-item { position: relative; padding-left: 0; transition: padding-left var(--duration-normal); }.faq-item.is-open { padding-left: 16px; }.faq-item.is-open::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: var(--accent); }.faq-question { min-height: 76px; font-size: 14px; }.faq-question[aria-expanded="true"]::after { transform: rotate(180deg); content: '−'; }.faq-answer p { padding-right: 20px; }

/* 理性使用书签 */
.rational-section { padding: 54px 0 92px; background: color-mix(in srgb, var(--paper-deep) 55%, transparent); }.rational-bookmark { position: relative; display: grid; grid-template-columns: 86px 1fr; gap: 26px; max-width: 980px; margin: 0 auto; padding: clamp(28px,5vw,52px); border: 1px solid var(--border); border-left: 6px solid var(--accent); background: var(--paper-card); box-shadow: var(--shadow-md); }.rational-bookmark::after { content: ''; position: absolute; right: 0; top: 0; border-style: solid; border-width: 0 50px 50px 0; border-color: transparent var(--paper-deep) transparent transparent; }.bookmark-seal { width: 72px; height: 72px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); font: 700 34px/1 var(--font-serif); clip-path: polygon(4% 2%,96% 5%,98% 93%,90% 98%,3% 94%); }.rational-bookmark h2 { margin: 0; color: var(--ink); font: 700 27px/1.4 var(--font-serif); }.rational-bookmark p { color: var(--ink-muted); line-height: 1.9; }.rational-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--duration-slow), opacity var(--duration-normal); }.rational-more > * { overflow: hidden; }.rational-more.is-open { grid-template-rows: 1fr; opacity: 1; }.rational-more a { margin-right: 18px; color: var(--accent); }.bookmark-toggle { padding: 8px 0; border: 0; color: var(--accent); background: transparent; font-weight: 700; cursor: pointer; }

/* 页脚山水 */
.site-footer { position: relative; padding-top: 92px; background: #201d18; }.footer-mountains { position: absolute; left: 0; right: 0; top: -72px; width: 100%; height: 92px; fill: #201d18; opacity: 0; transform: translateY(12px); transition: opacity .8s, transform .8s; }.site-footer.is-visible .footer-mountains { opacity: 1; transform: none; }.footer-brand { display: flex; align-items: center; gap: 12px; }.footer-brand img { border-radius: 11px; }.footer-brand b,.footer-brand small { display: block; }.footer-brand b { color: #f3ede0; font: 700 20px/1.3 var(--font-serif); }.footer-brand small { margin-top: 5px; color: #9a917f; font-size: 9px; letter-spacing: .18em; }.footer-group a { position: relative; width: fit-content; }.footer-group a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px; background: #c0392b; transition: right var(--duration-normal); }.footer-group a:hover::after { right: 0; }.footer-risk { margin-top: 32px; padding: 14px 0; border-top: 1px solid rgba(243,237,224,.09); color: #9a917f; font-size: 11px; line-height: 1.7; }

/* 分层进入动画 —— 以「水墨洇染 / 落笔」为母题 */
/* 滚动块：进入浮现 / 离开褪去（同页上下滑，可反复）—— 慢、顺，不用重 blur */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 1.05s cubic-bezier(.22, 1, .36, 1),
    transform 1.15s cubic-bezier(.22, 1, .36, 1),
    clip-path 1.15s cubic-bezier(.22, 1, .36, 1),
    filter .9s cubic-bezier(.22, 1, .36, 1);
}
/* 墨迹：由下方缓缓上来 */
[data-reveal="ink"] { transform: translateY(36px) scale(.985); clip-path: inset(0 4% 18% 4% round 2px); filter: blur(2px); }
[data-reveal="scale"],[data-reveal="stage"] { transform: translateY(28px) scale(.96); filter: blur(1.5px); }
[data-reveal="orbit"] { transform: translateY(24px) scale(.97); }
[data-reveal="paper"] { transform: translateY(34px); transform-origin: 50% 100%; }
[data-reveal="line"] { transform: translateX(-20px) translateY(18px); clip-path: inset(0 28% 0 0); }
[data-reveal="dialogue"] { transform: translateY(32px); }
[data-reveal="perspective"] { transform: translateY(36px) scale(.98); }
[data-reveal="seal"] { transform: translateY(22px) scale(.94); }
[data-reveal="timeline"] { transform: translateY(28px); clip-path: inset(0 40% 0 0); }
[data-reveal="cards"] { transform: translateY(30px) scale(.985); }
[data-reveal="bookmark"] { transform: translateY(26px); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0 round 2px);
  filter: none;
}
/* 离开视口：慢慢褪去上移（不是突然消失） */
[data-reveal].is-leaving {
  opacity: 0;
  transform: translateY(-22px) scale(.99);
  filter: none;
  clip-path: inset(0 0 0 0 round 2px);
  transition:
    opacity .95s cubic-bezier(.4, 0, .2, 1),
    transform 1.05s cubic-bezier(.4, 0, .2, 1);
}

/* 整段 section：上一段褪去、下一段上来 */
.section-scroll {
  opacity: .28;
  transform: translate3d(0, 40px, 0);
  transition:
    opacity 1.1s cubic-bezier(.22, 1, .36, 1),
    transform 1.2s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.section-scroll.is-section-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.section-scroll.is-section-leaving {
  opacity: .18;
  transform: translate3d(0, -28px, 0);
  transition:
    opacity 1s cubic-bezier(.4, 0, .2, 1),
    transform 1.1s cubic-bezier(.4, 0, .2, 1);
}
/* hero 首屏默认可见，避免一进来整页发灰 */
.landing-hero.section-scroll {
  opacity: 1;
  transform: none;
}

@media (max-width: 1180px) {
  .nav-links a { padding-inline: 9px; font-size: 11px; }
  .nav-login { display: none; }
  .systems-stage { grid-template-columns: 205px minmax(330px,1fr) minmax(280px,.85fr); }
  .browser-screen { grid-template-columns: 145px minmax(0,1fr) 230px; }
}

@media (max-width: 1040px) {
  .hero-title { max-width: 820px; }
  .needs-explorer,.trust-layout,.life-timeline,.faq-layout { grid-template-columns: 1fr; }
  .needs-orbit { width: min(82vw,570px); }
  .need-panels { min-height: 320px; }
  .systems-stage { grid-template-columns: 190px minmax(0,1fr); }
  .system-panels { grid-column: 1/-1; min-height: 340px; border-top: 1px solid var(--border); border-left: 0; }
  .report-reader { grid-template-columns: 190px 1fr; }
  .browser-screen { grid-template-columns: 135px minmax(0,1fr); }.mock-ai { display: none; }
  .faq-intro { position: static; }
  .life-line { min-height: 220px; }
}

@media (max-width: 760px) {
  .landing-section { padding-block: 76px; }
  .mobile-nav { background-image: radial-gradient(circle at 50% 100%, color-mix(in srgb,var(--gold) 10%,transparent), transparent 50%); }
  .mobile-nav-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: var(--ink-muted); font-size: 12px; }.brand-seal { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--accent); color: var(--accent); font: 700 19px/1 var(--font-serif); }
  .mobile-lang { width: 100%; min-height: 48px; margin-top: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--ink); background: var(--paper-card); }
  .hero-title { font-size: clamp(2.55rem,11.5vw,4rem); line-height: 1.16; }
  .hero-atmosphere span:nth-child(1),.hero-atmosphere span:nth-child(3) { display: none; }
  .needs-explorer { display: block; }
  .needs-orbit { width: auto; aspect-ratio: auto; display: flex; gap: 10px; margin: 0 -16px 24px; padding: 4px 16px 14px; overflow-x: auto; scroll-snap-type: x mandatory; }
  .needs-orbit::before,.needs-orbit::after,.needs-core { display: none; }
  .need-node,.need-node:nth-of-type(n) { position: static; flex: 0 0 190px; min-height: 70px; transform: none !important; scroll-snap-align: start; }
  .need-panels { min-height: auto; }.need-panel { padding: 26px; }.need-panel h3 { font-size: 23px; }
  .systems-stage { display: block; min-height: 0; overflow: visible; background: transparent; border: 0; box-shadow: none; }
  .system-tabs { display: flex; gap: 6px; padding: 0 0 14px; overflow-x: auto; border: 0; background: transparent; }.system-tab { flex: 0 0 164px; grid-template-columns: 24px 1fr; padding: 13px; border: 1px solid var(--border); background: var(--paper-card); }.system-tab small { display: none; }
  .system-visual { min-height: 390px; border: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; }.system-panels { min-height: 390px; padding: 28px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); background: var(--paper-card); }.mini-chart { width: min(88%,340px); }.mini-bazi > div { min-height: 205px; }.system-panel h3 { font-size: 22px; }
  .report-reader { display: block; }.report-nav { display: flex; gap: 5px; padding: 12px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--border); }.report-nav > span { display: none; }.report-nav button { flex: 0 0 auto; min-height: 42px; grid-template-columns: 22px 1fr; padding: 8px 10px; }.report-paper { min-height: 590px; padding: 28px 24px; }.report-panel h3 { font-size: 23px; }.report-insights { grid-template-columns: 1fr; }
  .process-flow { grid-template-columns: 1fr; gap: 18px; }.process-steps { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }.process-steps::before { display: none; }.process-step { flex: 0 0 auto; scroll-snap-align: start; }.process-scene { grid-template-columns: 52px 1fr; padding: 24px 20px; }.structure-fragment { grid-template-columns: repeat(4,42px); }
  .ai-demo { grid-template-columns: 1fr; }.ai-questions { display: flex; align-items: center; gap: 7px; padding: 14px; overflow-x: auto; border: 0; border-bottom: 1px solid var(--border); }.ai-questions > span { display: none; }.ai-question-tabs { display: flex; gap: 7px; flex: 0 0 auto; }.ai-questions button { flex: 0 0 190px; }.ai-questions .btn { flex: 0 0 auto; margin: 0; }.ai-answer-shell { min-height: 490px; padding: 26px 22px; }
  .browser-chrome > b { display: none; }.browser-chrome > div { overflow-x: auto; }.browser-screen { grid-template-columns: 1fr; min-height: 490px; }.mock-history { display: none; }.mock-workspace { padding: 28px 20px; }.mock-pillar-row > span { min-height: 185px; font-size: 24px; }.browser-notes { display: grid; gap: 8px; }
  .seal-matrix { width: min(96vw,500px); }.trust-seal { width: 88px; }.seal-center { width: 120px; }
  .life-line { display: grid; grid-template-columns: 1fr; min-height: 0; padding-left: 24px; }.life-line::before { left: 8px; right: auto; top: 18px; bottom: 18px; width: 1px; height: auto; }.life-line button { grid-template-columns: 28px 30px 1fr; justify-items: start; text-align: left; }.life-line button::before { grid-column: 1; }.life-line button span { grid-column: 2; }.life-line button b { grid-column: 3; max-width: none; }.life-panel { min-height: 260px; }
  .pricing-cards { display: flex; gap: 12px; margin-inline: -8px; padding: 8px; overflow-x: auto; scroll-snap-type: x mandatory; }.pricing-card { flex: 0 0 min(82vw,310px); min-height: 370px; scroll-snap-align: center; }.pricing-card.is-recommended { transform: none; translate: none; }
  .rational-bookmark { grid-template-columns: 1fr; }.bookmark-seal { width: 56px; height: 56px; font-size: 27px; }
}

@media (max-width: 430px) {
  .site-nav { width: min(calc(100vw - 22px), var(--container)); }
  .lang-toggle:not(.mobile-lang) { display: none; }
  .hero-trust { display: grid; grid-template-columns: 1fr 1fr; text-align: left; }
  .compass-stage { min-height: 350px; }.celestial-compass { width: 350px; max-width: 98vw; }
  .section-heading { font-size: clamp(2rem,9vw,2.65rem); }
  .need-panel h3,.system-panel h3,.report-panel h3 { font-size: 21px; }
  .process-scene { grid-template-columns: 1fr; }.process-index { font-size: 27px; }.structure-fragment span { grid-column: 1/-1; margin: 4px 0 0; }
  .mock-pillar-row { grid-template-columns: repeat(2,1fr); }.mock-pillar-row > span { min-height: 130px; }
  .seal-matrix { aspect-ratio: 1.08; }.trust-seal { width: 76px; }.trust-seal b { font-size: 18px; }.seal-center { width: 100px; }.seal-center span { font-size: 34px; }
  .pricing-comparator { padding-inline: 16px; }.pricing-needs { justify-content: flex-start; }
  .footer-grid { gap: 28px 18px; }
}

@media (pointer: coarse) {
  .nav-start::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-leaving,
  .section-scroll,
  .section-scroll.is-section-leaving {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    filter: none !important;
    transition: none !important;
  }
  .hero-atmosphere span,.chat-fragment i,.ai-status i { animation: none !important; }
  .mini-bazi > div,.mini-ziwei span,.mini-qimen span,.ai-answer section { animation: none !important; }
}

/* 品牌发布级首尾叙事 */
.brand-intro { position: fixed; inset: 0; z-index: calc(var(--z-modal) + 10); display: grid; place-content: center; justify-items: center; gap: 13px; pointer-events: none; color: var(--ink); background: color-mix(in srgb, var(--paper) 96%, transparent); opacity: 0; visibility: hidden; }
.brand-intro.is-playing { pointer-events: auto; visibility: visible; animation: introSurface 3.2s var(--ease-standard) both; }
.intro-skip { position: absolute; right: 24px; top: 22px; min-height: 38px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--ink-muted); background: var(--paper-card); cursor: pointer; opacity: 0; animation: introText .45s .45s forwards; }
.intro-instrument { position: relative; width: 180px; aspect-ratio: 1; display: grid; place-items: center; }
.intro-instrument i { position: absolute; border: 1px solid color-mix(in srgb, var(--gold) 68%, var(--border)); border-radius: 50%; clip-path: inset(0 100% 0 0); animation: introRing .72s var(--ease-standard) forwards; }
.intro-instrument i:nth-child(1) { inset: 0; }.intro-instrument i:nth-child(2) { inset: 18%; animation-delay: .32s; }.intro-instrument i:nth-child(3) { inset: 34%; animation-delay: .62s; }
.intro-instrument span { z-index: 1; color: var(--accent); font: 700 38px/1 var(--font-serif); opacity: 0; animation: introText .55s 1.05s forwards; }
.intro-name { font: 700 25px/1.3 var(--font-serif); letter-spacing: .18em; opacity: 0; animation: introText .62s 1.3s forwards; }.intro-tagline { color: var(--ink-muted); font-size: 10px; letter-spacing: .28em; opacity: 0; animation: introText .58s 1.58s forwards; }
@keyframes introSurface { 0%,72% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes introRing { to { clip-path: inset(0); transform: rotate(35deg); } }
@keyframes introText { to { opacity: 1; transform: none; } }

.landing-section:not(.systems-section)::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: min(72vw,920px); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 24%,transparent),color-mix(in srgb,var(--accent) 18%,transparent),transparent); pointer-events: none; }
.need-recommend { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--border); }.need-recommend span { color: var(--ink-muted); font-size: 10px; letter-spacing: .12em; }.need-recommend b { color: var(--jade); font-size: 12px; }.need-recommend a { margin-left: auto; color: var(--accent); font-size: 12px; font-weight: 700; text-decoration: none; }.need-recommend a::after { content: ' →'; }

.final-cta { position: relative; min-height: 650px; display: grid; place-items: center; overflow: hidden; padding: 100px 0 140px; color: #ece6da; background: radial-gradient(circle at 50% 42%, rgba(192,57,43,.14), transparent 44%), radial-gradient(circle at 50% 46%, rgba(188,154,82,.07), transparent 42%), #201d18; }
.final-cta::before { content: ''; position: absolute; inset: 8% 20%; border: 1px solid rgba(188,154,82,.16); border-radius: 50%; box-shadow: inset 0 0 0 48px rgba(192,57,43,.028), inset 0 0 0 96px rgba(188,154,82,.02); }
.final-orbit { position: absolute; width: min(72vw,720px); aspect-ratio: 1; display: grid; place-items: center; opacity: .6; }.final-orbit i { position: absolute; border: 1px solid rgba(188,154,82,.24); border-radius: 50%; }.final-orbit i:nth-child(1) { inset: 0; }.final-orbit i:nth-child(2) { inset: 18%; border-style: dashed; border-color: rgba(192,57,43,.3); }.final-orbit i:nth-child(3) { inset: 35%; }.final-orbit span { display: grid; place-items: center; width: 82px; aspect-ratio: 1; border: 1px solid rgba(192,57,43,.85); color: #e0705f; font: 700 34px/1 var(--font-serif); box-shadow: 0 0 32px rgba(192,57,43,.32); clip-path: polygon(4% 2%,96% 5%,98% 93%,90% 98%,3% 94%); }
.final-cta-inner { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }.final-cta .section-kicker { color: #e0705f; }.final-cta h2 { max-width: 880px; margin: 4px 0 20px; color: #f5efe3; font: 700 clamp(2.5rem,5vw,4.7rem)/1.16 var(--font-serif); letter-spacing: .035em; }.final-cta p { max-width: 650px; margin: 0; color: #b3ab9a; font-size: 16px; line-height: 1.9; }.final-actions { display: flex; gap: 12px; margin-top: 34px; }.final-cta .btn-outline { color: #ece6da; border-color: rgba(236,230,218,.28); background: rgba(255,252,245,.03); }.final-cta ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 28px 0 0; padding: 0; color: #9a917f; list-style: none; font-size: 11px; }.final-cta li::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border: 1px solid #bc9a52; transform: rotate(45deg); }

@media (max-width: 760px) {
  .final-cta { min-height: 590px; padding: 88px 0 116px; }.final-orbit { width: 620px; max-width: 155vw; }.final-cta::before { inset: 15% -28%; }.final-actions { width: 100%; flex-direction: column; }.final-actions .btn { width: 100%; }.final-cta ul { display: grid; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-intro { display: none !important; }
}
.celestial-compass.is-resting .compass-ring,.celestial-compass.is-resting .taiji { animation-play-state: paused; }

/* ═══ 水墨北极星图（中上方空白区 · 北斗指极 · 紫微帝星） ═══ */
.hero-starmap {
  position: absolute; z-index: 1;
  left: 50%; top: 10%; right: auto;
  width: min(28vw, 380px); height: auto; aspect-ratio: 480/520;
  pointer-events: none; opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity 1.4s var(--ease-standard) .3s, transform 1.4s var(--ease-emphasized) .3s;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--gold) 18%, transparent));
}
.landing-hero .hero-starmap { opacity: .72; transform: translateX(-50%); }
:root[data-theme="dark"] .hero-starmap { opacity: .88; }

/* 指极线：朱砂虚线 + 流光描出 */
.starmap-pointer {
  stroke: var(--seal); stroke-width: 1.15; stroke-dasharray: 3 7; stroke-linecap: round;
  opacity: .58; filter: url(#ink-bleed-soft);
  stroke-dashoffset: 400; animation: starmapDraw 3.6s var(--ease-standard) .6s forwards;
}
/* 北斗连线：墨笔一笔连成 + 金色流光 */
.starmap-plough {
  stroke: var(--ink-soft); stroke-width: 1.45; stroke-linejoin: round; stroke-linecap: round;
  opacity: .48; filter: url(#ink-bleed);
  stroke-dasharray: 640; stroke-dashoffset: 640;
  animation: starmapDraw 2.8s var(--ease-emphasized) .2s forwards;
}
.starmap-plough-flow {
  fill: none;
  stroke: color-mix(in srgb, var(--gold) 72%, transparent);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-dasharray: 18 620;
  opacity: 0;
  animation: ploughFlow 4.8s linear 3.2s infinite;
}
@keyframes starmapDraw { to { stroke-dashoffset: 0; } }
@keyframes ploughFlow {
  0% { opacity: 0; stroke-dashoffset: 0; }
  8% { opacity: .55; }
  100% { opacity: 0; stroke-dashoffset: -640; }
}

/* 北斗七星星体：墨点 + 微金光晕 */
.starmap-stars circle {
  fill: var(--ink); opacity: .55;
  animation: starTwinkle 4.2s ease-in-out infinite;
}
.starmap-stars circle:nth-child(2) { animation-delay: .5s; }
.starmap-stars circle:nth-child(3) { animation-delay: 1.1s; }
.starmap-stars circle:nth-child(4) { animation-delay: 1.7s; }
.starmap-stars circle:nth-child(5) { animation-delay: 2.3s; }
.starmap-stars circle:nth-child(6) { animation-delay: 2.9s; }
.starmap-stars circle:nth-child(7) { animation-delay: 3.5s; }
@keyframes starTwinkle { 0%,100% { opacity: .32; } 50% { opacity: .78; } }

/* 北极星（勾陈一 · 紫微帝星）：朱砂主星 + 光晕呼吸 + 十字星芒 */
.starmap-pole .pole-star { fill: var(--seal); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--seal) 55%, transparent)); }
.starmap-pole .pole-halo {
  fill: var(--seal); opacity: .16; transform-origin: 206px 46px;
  animation: poleBreathe 5.5s ease-in-out infinite;
}
.starmap-pole .pole-spark {
  stroke: var(--seal); stroke-width: 1; opacity: .55;
  transform-origin: 206px 46px; animation: poleSpark 5.5s ease-in-out infinite;
}
.starmap-pole .pole-label {
  fill: var(--ink-muted); font: 600 12px/1 var(--font-serif); letter-spacing: .14em; text-anchor: middle;
}
@keyframes poleBreathe { 0%,100% { transform: scale(.82); opacity: .12; } 50% { transform: scale(1.16); opacity: .28; } }
@keyframes poleSpark { 0%,100% { opacity: .34; transform: scale(.92) rotate(0deg); } 50% { opacity: .72; transform: scale(1.08) rotate(45deg); } }

/* 流星层 */
.hero-meteors {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
}
.hero-meteors i {
  position: absolute;
  width: 92px; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 70%, #fff), transparent);
  opacity: 0;
  transform: rotate(-28deg);
  animation: meteorFly 6.5s linear infinite;
}
.hero-meteors i:nth-child(1) { top: 12%; left: 58%; animation-delay: 1.2s; }
.hero-meteors i:nth-child(2) { top: 28%; left: 72%; width: 70px; animation-delay: 3.8s; animation-duration: 7.2s; }
.hero-meteors i:nth-child(3) { top: 18%; left: 40%; width: 58px; animation-delay: 5.6s; animation-duration: 5.8s; }
@keyframes meteorFly {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(-28deg); }
  6% { opacity: .7; }
  28% { opacity: 0; transform: translate3d(160px, 90px, 0) rotate(-28deg); }
  100% { opacity: 0; transform: translate3d(160px, 90px, 0) rotate(-28deg); }
}

@media (max-width: 1040px) {
  .hero-starmap {
    left: 50%; top: 8%; right: auto;
    width: min(42vw, 320px);
    opacity: .55 !important;
    transform: translateX(-50%);
  }
  .landing-hero .hero-starmap { transform: translateX(-50%); }
}
@media (max-width: 700px) {
  .hero-starmap, .hero-meteors { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .starmap-pointer, .starmap-plough, .starmap-plough-flow { animation: none !important; stroke-dashoffset: 0 !important; opacity: .45 !important; }
  .starmap-stars circle, .pole-halo, .pole-spark, .hero-meteors i { animation: none !important; }
}

/* ═══ 毛笔晕染层：宣纸上的水墨洇染，托在 hero 与标题背后 ═══ */
.ink-wash { position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; filter: url(#ink-bleed) blur(2px); opacity: .06; }
.landing-hero { position: relative; }
.landing-hero .ink-wash-1 {
  width: 42vw; max-width: 620px; aspect-ratio: 1; left: -6%; bottom: -14%;
  background: radial-gradient(circle at 40% 40%, var(--ink), transparent 66%);
  opacity: .05; animation: inkDrift 22s ease-in-out infinite alternate;
}
.landing-hero .ink-wash-2 {
  width: 30vw; max-width: 440px; aspect-ratio: 1; right: 8%; top: 2%;
  background: radial-gradient(circle at 55% 45%, var(--seal), transparent 68%);
  opacity: .045; animation: inkDrift 27s ease-in-out infinite alternate-reverse;
}
:root[data-theme="dark"] .landing-hero .ink-wash-1 { opacity: .08; }
:root[data-theme="dark"] .landing-hero .ink-wash-2 { opacity: .07; }
@keyframes inkDrift { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(22px,-16px,0) scale(1.08); } }

/* 标题的毛笔洇染底纹：让 hero 主标题像落在生宣上 */
.hero-title { position: relative; }
.hero-title::before {
  content: ''; position: absolute; z-index: -1; left: -4%; top: 8%; width: 108%; height: 92%;
  background: radial-gradient(60% 70% at 22% 46%, var(--paper-wash), transparent 72%);
  filter: url(#ink-bleed-soft); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .ink-wash { animation: none !important; }
}

/* ═══ 全局卡片浮起 / 放大 / 阴影（宣纸落笔感） ═══
   用独立 translate/scale 属性，避免与入场动画 transform 冲突
   鼠标移入：轻微上浮 + 放大 + 墨影加深；移出：平滑回落 */
.landing-page {
  --lift-shadow: 0 18px 48px rgba(60, 50, 36, 0.16), 0 4px 14px rgba(60, 50, 36, 0.08);
  --lift-shadow-strong: 0 26px 60px rgba(60, 50, 36, 0.2), 0 8px 20px rgba(168, 86, 56, 0.1);
  --lift-ease: var(--ease-emphasized);
  --lift-duration: var(--duration-normal);
}

/* 基础可悬浮卡片：统一过渡（含 translate/scale 独立属性） */
.pricing-card,
.advantage-card,
.capability-item,
.need-panel,
.process-scene,
.life-panel,
.trust-panel,
.report-insights > div,
.mini-bazi > div,
.mock-pillar-row > span,
.system-tab,
.ai-questions button,
.question-selector span,
.form-fragment span,
.faq-item,
.pricing-needs button,
.report-nav button,
.browser-notes span,
.compass-pin,
.product-module,
.price-card,
.usage-note,
.rational-bookmark,
.method-node,
.demo-pillar,
.structure-fragment i,
.chat-fragment,
.mock-history > span,
.seal-center,
.needs-core,
.process-step,
.life-line button {
  transition:
    transform var(--lift-duration) var(--lift-ease),
    translate var(--lift-duration) var(--lift-ease),
    scale var(--lift-duration) var(--lift-ease),
    box-shadow var(--lift-duration) var(--lift-ease),
    border-color var(--lift-duration) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard),
    opacity var(--lift-duration) var(--ease-standard);
}

/* 主卡片：浮起 + 放大 + 阴影 */
.pricing-card:hover,
.advantage-card:hover,
.capability-item:hover,
.price-card:hover,
.usage-note:hover,
.rational-bookmark:hover,
.demo-pillar:hover {
  translate: 0 -8px;
  scale: 1.025;
  box-shadow: var(--lift-shadow);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  z-index: 2;
}

/* 推荐价卡已有上移基准，悬停再抬一层 */
.pricing-card.is-recommended {
  translate: 0 -6px;
}
.pricing-card.is-recommended:hover {
  translate: 0 -14px;
  scale: 1.03;
  box-shadow: var(--lift-shadow-strong);
  border-color: var(--accent);
}

/* 产品模块：保留 3D 倾斜 transform，叠加独立上浮 */
.product-module:hover {
  translate: 0 -10px;
  scale: 1.02;
  border-color: var(--module-color);
  box-shadow: var(--lift-shadow-strong);
}

/* 流程场景 / 人生场景 / 需求面板：整块纸面抬起 */
.process-scene:hover,
.life-panel:hover,
.need-panel:hover {
  translate: 0 -6px;
  scale: 1.015;
  box-shadow: var(--lift-shadow);
  border-color: color-mix(in srgb, var(--gold) 40%, var(--border));
}

/* 报告洞察小卡 */
.report-insights > div:hover {
  translate: 0 -5px;
  scale: 1.02;
  box-shadow: var(--lift-shadow);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--paper-card) 88%, var(--paper-inset));
}

/* 四柱 / 命盘格子 */
.mini-bazi > div:hover,
.mock-pillar-row > span:hover {
  translate: 0 -7px;
  scale: 1.04;
  box-shadow: var(--lift-shadow);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  z-index: 2;
}
.mini-bazi > div.is-day:hover,
.mock-pillar-row > span.is-day:hover,
.demo-pillar.is-day:hover {
  border-color: var(--accent);
  box-shadow: var(--lift-shadow-strong), inset 0 3px 0 var(--accent);
}

/* 侧栏选择 / 系统 tab / AI 问题 */
.system-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--paper-card) 92%, transparent);
  translate: 4px 0;
  scale: 1.02;
  box-shadow: var(--shadow-sm);
}
.system-tab.is-active:hover {
  translate: 5px 0;
  scale: 1.02;
  box-shadow: var(--shadow-md);
}
.ai-questions button:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: var(--paper-card);
  translate: 0 -3px;
  scale: 1.02;
  box-shadow: var(--shadow-sm);
}
.ai-questions button.is-active:hover {
  translate: 0 -4px;
  scale: 1.025;
  box-shadow: var(--lift-shadow);
}
.report-nav button:hover {
  color: var(--ink);
  background: var(--paper-card);
  translate: 3px 0;
  scale: 1.02;
  box-shadow: var(--shadow-xs);
}
.report-nav button.is-active:hover {
  translate: 4px 0;
  scale: 1.02;
  box-shadow: var(--shadow-sm);
}

/* 流程步骤按钮：浮起 + 边框强调 */
.process-step:hover {
  color: var(--ink);
  background: var(--paper-card);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  translate: 6px 0;
  scale: 1.02;
  box-shadow: var(--shadow-sm);
}
.process-step.is-active:hover {
  translate: 7px 0;
  scale: 1.02;
  box-shadow: var(--shadow-md);
}

/* 定价筛选 pill / 问题标签 / 表单片段 */
.pricing-needs button:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  translate: 0 -3px;
  scale: 1.04;
  box-shadow: var(--shadow-sm);
}
.pricing-needs button.is-active:hover {
  color: #fff;
  background: var(--accent-hover);
  translate: 0 -3px;
  scale: 1.04;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 28%, transparent);
}
.question-selector span:hover,
.form-fragment span:hover {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  translate: 0 -3px;
  scale: 1.05;
  box-shadow: var(--shadow-xs);
  background: var(--paper-card);
}

/* 信任印章 / 罗盘针脚 / 方法节点 */
.trust-seal:hover {
  box-shadow: 0 14px 36px color-mix(in srgb, var(--accent) 18%, transparent);
}
.compass-pin:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--pin-color, var(--accent)) 55%, var(--border));
  translate: 0 -4px;
  scale: 1.06;
  box-shadow: var(--shadow-sm);
}
.method-node:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--gold) 50%, var(--border));
  box-shadow: var(--lift-shadow);
  z-index: 3;
}
.method-node:nth-of-type(2):hover { transform: translateX(-50%) translateY(-6px) scale(1.06); }
.method-node:nth-of-type(3):hover { transform: translateY(-50%) translateX(6px) scale(1.06); }
.method-node:nth-of-type(4):hover { transform: translateX(-50%) translateY(6px) scale(1.06); }
.method-node:nth-of-type(5):hover { transform: translateY(-50%) translateX(-6px) scale(1.06); }

/* need-node 激活态悬停：保证放大不被 is-active 覆盖 */
.need-node:nth-of-type(1).is-active:hover { transform: translateX(-50%) translateY(-6px) scale(1.09); }
.need-node:nth-of-type(2).is-active:hover { transform: translateY(-50%) translateX(6px) scale(1.09); }
.need-node:nth-of-type(3).is-active:hover { transform: translateX(-50%) translateY(6px) scale(1.09); }
.need-node:nth-of-type(4).is-active:hover { transform: translateY(-50%) translateX(-6px) scale(1.09); }

/* FAQ 条目悬停 */
.faq-item:hover {
  background: color-mix(in srgb, var(--paper-inset) 55%, transparent);
}
.faq-item:hover .faq-question {
  color: var(--accent);
}
.faq-question {
  transition: color var(--duration-fast), padding var(--lift-duration);
  font-family: var(--font-serif);
  letter-spacing: .06em;
}

/* 工作台历史条 / 结构预览块 / 聊天片段 */
.mock-history > span:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  translate: 0 -3px;
  scale: 1.02;
  box-shadow: var(--shadow-xs);
}
.structure-fragment i:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  translate: 0 -5px;
  scale: 1.05;
  box-shadow: var(--shadow-sm);
}
.chat-fragment:hover {
  translate: 0 -4px;
  scale: 1.015;
  box-shadow: var(--shadow-sm);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.browser-notes span:hover {
  color: var(--ink);
  translate: 0 -2px;
}

/* 信任说明面板 / 中心圆 */
.trust-panel:hover {
  translate: 0 -4px;
  box-shadow: var(--shadow-sm);
  background: color-mix(in srgb, var(--paper-card) 70%, var(--paper-inset));
}
.needs-core:hover,
.seal-center:hover {
  scale: 1.04;
  box-shadow: var(--lift-shadow);
}

/* 人生时间线节点 */
.life-line button:hover {
  color: var(--ink);
  translate: 0 -4px;
}
.life-line button:hover::before {
  background: var(--accent);
  transform: scale(1.2);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ═══ 字体：宣纸 + 毛笔质感统一 ═══ */
.need-node b,
.system-tab b,
.process-step-name,
.pricing-card h3,
.advantage-card h3,
.capability-item h3,
.life-line button b,
.faq-question,
.compass-pin,
.report-nav button span,
.ai-questions button b,
.pricing-needs button,
.question-selector span,
.form-fragment span,
.browser-notes span,
.need-recommend b,
.trust-seal span,
.panel-number,
.panel-overline {
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
}

/* 卡片主标题：宋体加字距，像印在生宣上 */
.need-panel h3,
.system-panel h3,
.process-scene h3,
.life-panel h3,
.report-panel h3,
.trust-panel h3,
.pricing-card h3,
.ai-answer h3,
.product-module h3 {
  font-family: var(--font-serif);
  letter-spacing: .08em;
  font-weight: 700;
}

/* 流程 / 节点名称更偏毛笔行书 */
.process-step-name,
.need-node b,
.system-tab b,
.life-line button b,
.compass-pin {
  font-family: var(--font-brush), var(--font-serif);
  letter-spacing: .08em;
  font-weight: 600;
}

/* 正文与导语：宋体阅读感 */
.section-lead,
.need-panel p,
.system-panel p,
.process-scene p,
.life-panel p,
.trust-panel p,
.pricing-card p,
.report-panel > p,
.ai-answer p,
.capability-item p,
.advantage-card p,
.faq-answer p {
  font-family: var(--font-serif);
  letter-spacing: .04em;
  line-height: 1.9;
}

/* 数字与索引：宋体粗体，金石感 */
.pricing-number b,
.process-index,
.process-step-index,
.panel-number,
.mini-bazi b,
.mini-bazi span,
.mock-pillar-row > span,
.demo-pillar strong,
.demo-pillar span {
  font-family: var(--font-serif);
  letter-spacing: .04em;
}

/* 小标签字距拉开 */
.pricing-card > span,
.section-kicker,
.report-nav > span,
.ai-questions > span,
.panel-overline,
.need-recommend span,
.browser-notes span {
  letter-spacing: .18em;
  font-family: var(--font-serif);
}

/* 导航与品牌已有宋体，再略提字距 */
.brand-name {
  letter-spacing: .18em;
}
.nav-links a {
  letter-spacing: .16em;
}

/* FAQ 答案用宋体，问题略大一号 */
.faq-question {
  font-size: 15px;
  letter-spacing: .07em;
  font-weight: 650;
}
.faq-answer p {
  font-size: 13.5px;
}

/* 触控设备：减弱缩放，避免误触跳动 */
@media (pointer: coarse) {
  .pricing-card:hover,
  .advantage-card:hover,
  .capability-item:hover,
  .product-module:hover,
  .price-card:hover,
  .usage-note:hover,
  .rational-bookmark:hover,
  .demo-pillar:hover,
  .process-scene:hover,
  .life-panel:hover,
  .need-panel:hover,
  .report-insights > div:hover,
  .mini-bazi > div:hover,
  .mock-pillar-row > span:hover {
    translate: 0 -4px;
    scale: 1.01;
  }
  .pricing-card.is-recommended:hover {
    translate: 0 -8px;
    scale: 1.015;
  }
}

/* 移动端：已有横向滚动的节点取消强制 transform 冲突 */
@media (max-width: 760px) {
  .need-node:hover,
  .need-node:nth-of-type(n):hover,
  .need-node:nth-of-type(n).is-active:hover {
    transform: none !important;
    translate: none;
    scale: none;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 14%, transparent);
  }
  .pricing-card.is-recommended:hover {
    translate: 0 -6px;
    scale: 1.02;
  }
  .method-node:nth-of-type(n):hover {
    transform: none;
    translate: none;
    scale: none;
  }
}

/* 减少动效偏好：关闭悬停位移动画 */
@media (prefers-reduced-motion: reduce) {
  .pricing-card,
  .advantage-card,
  .capability-item,
  .need-panel,
  .process-scene,
  .life-panel,
  .trust-panel,
  .report-insights > div,
  .mini-bazi > div,
  .mock-pillar-row > span,
  .system-tab,
  .ai-questions button,
  .question-selector span,
  .form-fragment span,
  .faq-item,
  .pricing-needs button,
  .report-nav button,
  .browser-notes span,
  .compass-pin,
  .product-module,
  .price-card,
  .usage-note,
  .rational-bookmark,
  .method-node,
  .demo-pillar,
  .structure-fragment i,
  .chat-fragment,
  .mock-history > span,
  .seal-center,
  .needs-core,
  .process-step,
  .life-line button {
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast), color var(--duration-fast), background var(--duration-fast) !important;
  }
  .pricing-card:hover,
  .advantage-card:hover,
  .capability-item:hover,
  .product-module:hover,
  .price-card:hover,
  .usage-note:hover,
  .rational-bookmark:hover,
  .demo-pillar:hover,
  .process-scene:hover,
  .life-panel:hover,
  .need-panel:hover,
  .report-insights > div:hover,
  .mini-bazi > div:hover,
  .mock-pillar-row > span:hover,
  .system-tab:hover,
  .ai-questions button:hover,
  .question-selector span:hover,
  .form-fragment span:hover,
  .pricing-needs button:hover,
  .report-nav button:hover,
  .browser-notes span:hover,
  .compass-pin:hover,
  .process-step:hover,
  .life-line button:hover,
  .chat-fragment:hover,
  .structure-fragment i:hover,
  .mock-history > span:hover,
  .needs-core:hover,
  .seal-center:hover,
  .pricing-card.is-recommended:hover {
    transform: none !important;
    translate: none !important;
    scale: none !important;
  }
}

:root[data-theme="dark"] .landing-page {
  --lift-shadow: 0 18px 48px rgba(0, 0, 0, 0.45), 0 4px 14px rgba(0, 0, 0, 0.28);
  --lift-shadow-strong: 0 26px 60px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(168, 86, 56, 0.18);
}

/* 卡片鼠标跟随光斑 —— 只跟鼠标，不自动循环 */
.has-spotlight {
  --spot-x: 50%;
  --spot-y: 40%;
  --spot-color: var(--gold);
  --spot-alpha: 16%;
  --spot-size: 220px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.has-spotlight::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .18s ease;
  background: radial-gradient(
    var(--spot-size) circle at var(--spot-x) var(--spot-y),
    color-mix(in srgb, var(--spot-color) var(--spot-alpha), transparent),
    transparent 64%
  );
  will-change: opacity, background;
}
.has-spotlight.is-spot-active::after { opacity: 1; }
.has-spotlight > * { position: relative; z-index: 2; }

/* 服务流程场景卡：朱砂红晕，鼠标在哪红在哪 */
.process-scene.has-spotlight {
  --spot-color: var(--seal);
  --spot-alpha: 28%;
  --spot-size: 340px;
  background:
    radial-gradient(
      var(--spot-size) circle at var(--spot-x) var(--spot-y),
      color-mix(in srgb, var(--seal) 0%, transparent),
      transparent 70%
    ),
    var(--paper-card);
}
.process-scene.has-spotlight.is-spot-active {
  background:
    radial-gradient(
      var(--spot-size) circle at var(--spot-x) var(--spot-y),
      color-mix(in srgb, var(--seal) 22%, transparent),
      color-mix(in srgb, var(--accent) 6%, transparent) 42%,
      transparent 68%
    ),
    var(--paper-card);
  border-color: color-mix(in srgb, var(--seal) 34%, var(--border));
  box-shadow:
    0 18px 48px color-mix(in srgb, var(--seal) 14%, transparent),
    var(--shadow-md);
}
.process-scene.has-spotlight::after {
  background: radial-gradient(
    calc(var(--spot-size) * .72) circle at var(--spot-x) var(--spot-y),
    color-mix(in srgb, var(--seal) 32%, transparent),
    color-mix(in srgb, var(--accent) 10%, transparent) 46%,
    transparent 70%
  );
}
@media (prefers-reduced-motion: reduce) {
  .has-spotlight::after { transition: none; }
}