/* ===== 导航 ===== */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-nav); color: #fff; transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), color var(--t) var(--ease); }
.nav__inner { height: 72px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav.is-solid { background: rgba(255, 255, 255, 0.94); color: var(--ink); box-shadow: 0 1px 0 var(--line); backdrop-filter: saturate(1.4) blur(10px); }
.nav.is-app { position: sticky; background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line); }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand__text { display: grid; min-width: 0; line-height: 1.25; }
.brand__name { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand__sub { font-size: 12px; opacity: 0.78; }
.nav__links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.nav__links a { position: relative; padding: 4px 0; opacity: 0.86; transition: opacity var(--t-fast); }
.nav__links a:hover { opacity: 1; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.nav__links a:hover::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav:not(.is-solid):not(.is-app) .btn--nav { background: #fff; border-color: #fff; color: var(--brand); }
.nav:not(.is-solid):not(.is-app) .btn--nav:hover { background: var(--brand-tint-2); }
.nav:not(.is-solid):not(.is-app) .btn--navghost { color: #fff; }
.nav:not(.is-solid):not(.is-app) .btn--navghost:hover { background: rgba(255, 255, 255, 0.12); }
.user-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-size: 13px; font-weight: 600; }
.user-pill svg { width: 14px; height: 14px; }

/* ===== Hero ===== */
.hero { position: relative; background: var(--brand); color: #fff; overflow: hidden; isolation: isolate; }
/* 账簿横线：极淡的表格底纹，向右渐隐 */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: repeating-linear-gradient(to bottom, transparent 0 47px, rgba(255, 255, 255, 0.06) 47px 48px); -webkit-mask-image: linear-gradient(100deg, #000 10%, transparent 75%); mask-image: linear-gradient(100deg, #000 10%, transparent 75%); }
.hero__inner { min-height: min(100svh, 920px); padding: 136px var(--gutter) 88px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 6vw, 96px); align-items: center; max-width: 1440px; margin: 0 auto; }
.hero__kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--on-brand); }
.hero__kicker::before { content: ""; width: 24px; height: 2px; background: var(--hl); }
.hero__title { margin-top: 24px; font-size: clamp(40px, 5.4vw, 80px); font-weight: 700; line-height: 1.14; letter-spacing: -0.005em; }
.hero__title .hl { transition: background-size var(--t-slow) var(--ease), color var(--t) var(--ease) 200ms; }
.hero__title .hl.is-on { color: var(--ink); }
.hero__lead { margin-top: 28px; max-width: 30em; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.85; color: var(--on-brand); }
.hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__basis { margin-top: 48px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.18); max-width: 34em; font-size: 13px; line-height: 1.7; color: var(--on-brand-2); }
.hero__basis b { color: #fff; font-weight: 600; }

/* 资产负债表卡片 */
.sheet { position: relative; background: var(--surface); color: var(--ink); border-radius: var(--r-lg); box-shadow: var(--sh-3); overflow: hidden; }
.sheet__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 20px 24px 14px; }
.sheet__title { font-size: 16px; font-weight: 700; }
.sheet__unit { font-size: 12px; color: var(--ink-3); }
.sheet__table { width: 100%; border-collapse: collapse; font-size: 14px; }
.sheet__table th { padding: 8px 24px; text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); background: var(--surface-2); border-block: 1px solid var(--line); }
.sheet__table th:last-child, .sheet__table td:last-child { text-align: right; }
.sheet__table td { padding: 11px 24px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sheet__table .grp td { padding-top: 14px; font-weight: 700; color: var(--ink); border-bottom: 0; text-align: left !important; }
.sheet__table .lvl1 td:first-child { padding-left: 40px; }
.sheet__table .sub td { color: var(--ink-3); font-size: 13px; }
.sheet__table .sub td:first-child { padding-left: 60px; }
.sheet__table .sub td:first-child::before { content: "其中："; }
.sheet__table td.fig { font-weight: 500; }
.sheet__row { position: relative; transition: color var(--t) var(--ease); }
.sheet__row td { position: relative; z-index: 1; }
.sheet__row::after { content: ""; position: absolute; inset: 4px 12px; z-index: 0; border-radius: 4px; background: var(--hl); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease); }
.sheet__row.is-on::after { transform: scaleX(1); }
.sheet__row.is-on td { color: var(--ink); font-weight: 700; }
.sheet__table tr.sheet__row { display: table-row; }
.sheet__foot { padding: 16px 24px 20px; display: grid; gap: 14px; }
.sheet__caption { min-height: 3.2em; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.sheet__caption b { color: var(--brand); }
.scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.scene { position: relative; overflow: hidden; height: 38px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; font-weight: 600; color: var(--ink-2); transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); }
.scene:hover { border-color: #bfc7d4; color: var(--ink); }
.scene[aria-selected="true"] { border-color: var(--brand); color: var(--brand); background: var(--brand-tint); }
.scene__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.scene[aria-selected="true"] .scene__bar.is-running { animation: scene-progress var(--scene-ms, 5200ms) linear forwards; }
.sheet:hover .scene__bar.is-running, .sheet:focus-within .scene__bar.is-running, .sheet.is-off .scene__bar.is-running { animation-play-state: paused; }
@keyframes scene-progress { to { transform: scaleX(1); } }

/* ===== 通用分区 ===== */
.sec { padding: clamp(80px, 10vw, 144px) var(--gutter); }
.sec__wrap { max-width: 1312px; margin: 0 auto; }
.sec__title { font-size: clamp(28px, 3.4vw, 48px); font-weight: 700; line-height: 1.22; }
.sec__lead { margin-top: 16px; max-width: 36em; font-size: 16px; line-height: 1.8; color: var(--ink-2); }

/* ===== 四步演示 ===== */
.demo { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.dtabs { display: grid; gap: 4px; }
.dtab { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 16px; padding: 20px 20px 20px 16px; text-align: left; border: 1px solid transparent; border-radius: var(--r-lg); background: transparent; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.dtab:hover { background: rgba(255, 255, 255, 0.6); }
.dtab[aria-selected="true"] { background: var(--surface); border-color: var(--line); box-shadow: var(--sh-2); }
.dtab__no { grid-row: span 2; font-size: 40px; font-weight: 500; font-stretch: 112%; line-height: 1; color: #7d8798; transition: color var(--t) var(--ease); }
.dtab[aria-selected="true"] .dtab__no { color: var(--brand); }
.dtab__t { font-size: 18px; font-weight: 700; line-height: 1.4; }
.dtab__d { font-size: 14px; line-height: 1.7; color: var(--ink-3); }

.dpanel { position: sticky; top: 104px; min-height: 480px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-2); overflow: hidden; }
.dpanel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.dpanel__head h3 { font-size: 15px; font-weight: 700; }
.dpanel__head span { font-size: 12px; color: var(--ink-3); }
.dpanel__body { padding: 24px; }
.dpanel__body.is-swap { animation: swap 360ms var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } }

/* 演示 1：是/否切换 */
.yn { display: grid; gap: 4px; }
.yn__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.yn__q { font-size: 14.5px; font-weight: 500; }
.seg { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 3px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); flex: none; }
.seg button { position: relative; z-index: 1; height: 30px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-size: 13px; font-weight: 600; color: var(--ink-3); transition: color var(--t) var(--ease); }
.seg button[aria-pressed="true"] { color: #fff; }
.seg__pill { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); border-radius: 999px; background: var(--brand); transition: transform var(--t) var(--ease), background-color var(--t); }
.seg.is-no .seg__pill { transform: translateX(100%); background: var(--warn); }
.dresult { margin-top: 20px; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; padding: 14px 16px; border-radius: var(--r); font-size: 14px; line-height: 1.65; border: 1px solid; transition: background-color var(--t), border-color var(--t), color var(--t); }
.dresult svg { width: 20px; height: 20px; }
.dresult--ok { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok); }
.dresult--warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.dresult p { color: var(--ink-2); }
.dresult b { color: inherit; }

/* 演示 2：持有目的 → 报表行 */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pchip { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: border-color var(--t-fast), background-color var(--t-fast), color var(--t-fast); }
.pchip:hover { border-color: #bfc7d4; color: var(--ink); }
.pchip svg { width: 14px; height: 14px; transform: scale(0); transition: transform var(--t) var(--ease); }
.pchip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.pchip[aria-pressed="true"] svg { transform: scale(1); }
.mini-sheet { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mini-sheet .sheet__table td { padding: 10px 18px; }
.mini-sheet .sheet__table .sub td:first-child { padding-left: 36px; }
.mini-sheet .sheet__row::after { inset: 3px 8px; }

/* 演示 3：来源 → 成本模板 */
.srcs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.src { padding: 10px 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--ink-2); transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast); }
.src:hover { border-color: #bfc7d4; color: var(--ink); }
.src[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-tint); color: var(--brand); }
.tcount { margin-top: 24px; display: flex; align-items: baseline; gap: 12px; }
.tcount b { font-size: 64px; font-weight: 600; font-stretch: 112%; line-height: 1; color: var(--brand); }
.tcount span { font-size: 14px; color: var(--ink-2); }
.titems { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.titems li { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); animation: swap 320ms var(--ease) both; animation-delay: calc(var(--i) * 28ms); }
.titems li span { color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 1.6em; }

/* 演示 4：报告 */
.mreport { display: grid; gap: 18px; }
.mreport__total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.mreport__total small { display: block; font-size: 12px; color: var(--ink-3); }
.mreport__total b { font-size: 44px; font-weight: 600; font-stretch: 108%; line-height: 1.1; color: var(--brand); }
.mreport__total b i { font-style: normal; font-size: 15px; font-weight: 500; color: var(--ink-3); margin-left: 4px; }

/* 占比条（演示与正式报告共用） */
.bars { display: grid; }
.bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto 52px; gap: 6px 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.bars li:first-child { border-top: 0; }
.bars .b-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.bars .b-amt { font-variant-numeric: tabular-nums; text-align: right; }
.bars .b-pct { font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-3); }
.bars .b-track { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.bars .b-track i { display: block; height: 100%; border-radius: 3px; background: #6f93c9; transform-origin: left; transform: scaleX(var(--k, 0)); transition: transform 700ms var(--ease); }
.bars li:first-child .b-track i { background: var(--brand); }

/* ===== 适用边界 ===== */
.scope-sec { background: var(--surface); border-block: 1px solid var(--line); }
.scope { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 64px); }
.scope h3 { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 2px solid var(--ink); font-size: 18px; font-weight: 700; }
.scope__col--pro h3 { border-bottom-color: var(--line-2); color: var(--ink-2); }
.scope ul { margin-top: 4px; }
.scope li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.scope li svg { width: 18px; height: 18px; margin-top: 3px; color: var(--ok); }
.scope__col--pro li { color: var(--ink-2); }
.scope__col--pro li svg { color: var(--ink-3); }
.scope li small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }

/* ===== 结尾行动 ===== */
.closing { background: var(--brand-deep); color: #fff; padding: clamp(80px, 10vw, 136px) var(--gutter); }
.closing__wrap { max-width: 1312px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px 64px; align-items: end; }
.closing h2 { font-size: clamp(32px, 4.4vw, 64px); font-weight: 700; line-height: 1.2; }
.closing p { margin-top: 16px; max-width: 32em; color: var(--on-brand); line-height: 1.8; }
.closing__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.foot { background: var(--brand-deep); color: var(--on-brand-2); border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 24px var(--gutter) 32px; font-size: 13px; }
.foot__wrap { max-width: 1312px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.foot .brand__name { color: #fff; font-size: 14px; }

/* ===== 响应式 ===== */
@media (max-width: 1080px) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; padding-top: 120px; }
  .sheet { max-width: 620px; }
  .demo { grid-template-columns: 1fr; }
  .dtabs { grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .dtab { scroll-snap-align: start; grid-template-columns: 1fr; }
  .dtab__no { grid-row: auto; font-size: 28px; }
  .dtab__d { display: none; }
  .dpanel { position: static; min-height: 0; }
  .closing__wrap { grid-template-columns: 1fr; align-items: start; }
}
@media (max-width: 720px) {
  .nav__links { display: none; }
  .nav__inner { height: 64px; }
  .brand__sub { display: none; }
  .hero__inner { padding: 104px var(--gutter) 56px; gap: 40px; }
  .hero__cta .btn { flex: 1 1 100%; }
  .sheet__head, .sheet__foot { padding-left: 16px; padding-right: 16px; }
  .sheet__table th, .sheet__table td { padding-left: 16px; padding-right: 16px; }
  .sheet__table .lvl1 td:first-child { padding-left: 28px; }
  .sheet__table .sub td:first-child { padding-left: 40px; }
  .sheet__row::after { inset: 4px 6px; }
  .scene { font-size: 12px; padding: 0 4px; }
  .yn__row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .srcs { grid-template-columns: 1fr 1fr; }
  .titems { grid-template-columns: 1fr; }
  .tcount b { font-size: 48px; }
  .dpanel__body { padding: 18px; }
  .scope { grid-template-columns: 1fr; }
  .closing__cta .btn { flex: 1 1 100%; }
}