/* 陌路遥 V5 — clean page, motion pieces */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
:root {
  --bg: #fafaf9; --ink: #111; --gray: #5f5f5f; --muted: #6b6b6b; --line: #e7e6e3; --soft: #f1f0ed;
  --orange: #ff4f12; --blue: #2f5bff; --cream: #f1ede5; --night: #0c0c0d;
  --sans: "Geist", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, Consolas, monospace;
  --gut: clamp(18px, 4vw, 52px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.7 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
p { margin: 0; }
ol, ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
.wrap { width: min(1240px, 100% - 2 * var(--gut)); margin-inline: auto; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; border-radius: 10px; background: var(--ink); color: #fff; }
.skip:focus { top: 12px; }

/* ---------- header ---------- */
.bar { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px var(--gut);
  background: rgba(250, 250, 249, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s; }
.bar.scrolled { border-bottom-color: var(--line); }
.brand { font-weight: 600; text-decoration: none; font-size: 16px; }
.nav { display: flex; gap: 24px; font-size: 14.5px; }
.nav a { color: var(--gray); text-decoration: none; transition: color .2s; }
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }

/* ---------- shared ---------- */
.lede { margin-top: 18px; color: var(--gray); font-size: 17px; max-width: 560px; }
.note { margin-top: 22px; color: var(--muted); font-size: 13px; }
.sec-head { margin-bottom: 36px; max-width: 760px; }
.sec-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.sec-head p { margin-top: 12px; color: var(--gray); font-size: 16px; }
.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 12px; font-weight: 600; font-size: 15px; text-decoration: none; transition: transform .25s var(--ease), background .2s, box-shadow .25s; }
.btn:active { transform: scale(.97); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #2a2a2a; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5); }
.btn-line { background: #fff; border: 1px solid var(--line); }
.btn-line:hover { border-color: #cfcfcb; }
.link-arrow { display: inline-flex; font-weight: 600; font-size: 15px; text-decoration: none; }
.link-arrow:hover { text-decoration: underline; }
.chip { display: inline-flex; align-items: center; padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 12.5px; color: var(--gray); white-space: nowrap; margin: 0 4px; }
.chip-solo { border-color: var(--ink); background: var(--ink); color: #fff; }
.chip-lead { border-color: var(--orange); color: #b8360a; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(40px, 7vw, 96px) 0 clamp(40px, 6vw, 80px); }
.hero h1 { font-size: clamp(32px, 3.4vw, 50px); letter-spacing: -.035em; line-height: 1.14; }
.h1-name { display: block; margin-bottom: 14px; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--gray); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 30px; }

/* ---------- proof ---------- */
.proof { padding-bottom: clamp(56px, 8vw, 100px); }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.stats li { padding: 22px 20px 4px 0; }
.stats li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.stats b { font-size: clamp(32px, 3.6vw, 46px); font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.stats span { margin-left: 4px; color: var(--gray); font-weight: 500; }
.stats p { margin-top: 6px; font-size: 14.5px; }
.stats small { display: block; margin-top: 4px; color: var(--muted); font: 12px var(--mono); }

/* ---------- work grid ---------- */
.work { padding-bottom: clamp(56px, 8vw, 110px); }
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; }
.item-wide { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: start; }
.cap { padding-top: 16px; }
.item-wide .cap { padding-top: 4px; }
.cap-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.cap-top h3 { font-size: 21px; margin-right: 6px; }
.when { color: var(--muted); font: 12.5px var(--mono); margin-left: 4px; }
.sum { margin-top: 8px; color: var(--gray); }
.pad { margin: 14px 0 0; }
.pad div { display: grid; grid-template-columns: 40px 1fr; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.pad dt { font-weight: 600; }
.pad dd { margin: 0; color: #333; }
.cap .link-arrow { margin-top: 14px; }
.tools { margin-top: 14px; }
.tools li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; color: #333; }
.tools b { display: block; color: var(--ink); font-weight: 600; }

/* ---------- stage (a motion piece) ---------- */
.stage { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; container-type: inline-size; isolation: isolate; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .05); transition: transform .5s var(--ease), box-shadow .5s; }
.stage:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .35), 0 0 0 1px rgba(0, 0, 0, .06); }
.cursor { position: absolute; z-index: 20; width: 2.6cqw; height: 2.6cqw; fill: #111; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 .3cqw .5cqw rgba(0, 0, 0, .25)); }
.caret { display: inline-block; width: .08em; height: 1em; margin-left: .06em; vertical-align: -.12em; background: currentColor; }
.motion .caret { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.st-note, .st-tag { position: absolute; z-index: 25; left: 2.4cqw; bottom: 2cqw; font: 500 1.25cqw var(--mono); letter-spacing: .06em; }

/* hero piece */
.st-hero { background: var(--night); }
.hp { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.hp1 { background: var(--night); color: #fff; font-size: 15cqw; }
.hp2 { background: var(--orange); color: #111; font-size: 11.5cqw; }
.hp3 { background: var(--blue); color: #fff; font-size: 11.5cqw; }
.hp4 { background: var(--cream); color: #111; font-size: 12cqw; }
.hp5 { display: flex; align-items: center; justify-content: center; background: #111; color: #fff; font: 500 8.5cqw var(--mono); letter-spacing: -.03em; }
.hp6 { background: var(--cream); color: #111; font-size: 9.5cqw; align-content: center; gap: 1.2cqw; }
.hp6 span { display: block; }
.hp6 b { position: relative; display: inline-block; font-weight: 700; color: #fff; padding: 0 .08em; }
.hp6 .hl { position: absolute; inset: .02em -.02em -.04em; z-index: -1; background: var(--orange); transform-origin: left; }
.st-hero .st-tag { color: rgba(17, 17, 17, .55); }

/* AIProductHub piece */
.st-hub { background: var(--cream); }
.win { position: absolute; left: 5%; top: 10%; width: 60%; height: 80%; border-radius: 1.4cqw; background: #fff; box-shadow: 0 1.6cqw 4cqw -1.6cqw rgba(0, 0, 0, .25); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: .7cqw; height: 9%; padding: 0 1.6cqw; border-bottom: 1px solid #eee; }
.win-bar i { width: .9cqw; height: .9cqw; border-radius: 50%; background: #e2e2e2; }
.win-bar span { margin: 0 auto; padding: .2cqw 2cqw; border-radius: 1cqw; background: #f3f3f3; font: 1.2cqw var(--mono); color: #666; }
.win-body { padding: 3cqw; }
.search { display: flex; align-items: center; gap: 1cqw; height: 5.2cqw; padding: 0 1.6cqw; border: 1px solid #e3e3e3; border-radius: 2.6cqw; font-size: 1.9cqw; }
.search svg { width: 1.9cqw; fill: none; stroke: #888; stroke-width: 2; }
.rows { margin-top: 2.4cqw; display: grid; gap: 1.2cqw; }
.rows li { display: flex; align-items: center; gap: 1.4cqw; padding: 1cqw; border-radius: 1cqw; }
.rows i { width: 3.6cqw; height: 3.6cqw; border-radius: .9cqw; background: var(--orange); }
.rows li:nth-child(2) i { background: var(--blue); } .rows li:nth-child(3) i { background: #111; } .rows li:nth-child(4) i { background: #c9c3b6; }
.rows b { height: 1.2cqw; width: 38%; border-radius: 1cqw; background: #222; }
.rows s { height: 1.2cqw; width: 22%; border-radius: 1cqw; background: #ddd; margin-left: auto; }
.kpis { position: absolute; left: 68.5%; top: 10%; width: 26.5%; height: 80%; display: grid; gap: 1.4cqw; align-content: center; }
.kpi { padding: 1.6cqw 1.8cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 1cqw 2.4cqw -1.4cqw rgba(0, 0, 0, .3); }
.kpi small { display: block; font-size: 1.15cqw; color: #777; }
.kpi b { font-size: 3.1cqw; font-weight: 700; letter-spacing: -.04em; }
.kpi:first-child { background: #111; color: #fff; } .kpi:first-child small { color: #aaa; }
.st-hub .cursor { left: 36%; top: 50%; }
.st-hub .st-note { color: #8a8378; }

/* GEO piece */
.st-geo { background: #fff radial-gradient(#e6e4df 1px, transparent 1px) 0 0 / 2.2cqw 2.2cqw; }
.chat { position: absolute; left: 12%; right: 12%; top: 11%; }
.chat-hi { font: 500 2.6cqw/1 Georgia, "Songti SC", serif; color: #222; margin-bottom: 1.8cqw; }
.chat-hi::first-letter { color: var(--orange); }
.chat-box { position: relative; padding: 2cqw 7cqw 2cqw 2.2cqw; min-height: 9cqw; border: 1px solid #ddd; border-radius: 1.8cqw; background: #fff; box-shadow: 0 1.4cqw 3cqw -2cqw rgba(0, 0, 0, .3); font-size: 2.3cqw; color: #222; }
.send { position: absolute; right: 1.6cqw; bottom: 1.6cqw; display: grid; place-items: center; width: 3.6cqw; height: 3.6cqw; border-radius: .9cqw; background: var(--orange); color: #fff; font-style: normal; font-size: 2cqw; }
.checks { position: absolute; left: 12%; right: 12%; top: 51%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.checks li { display: flex; align-items: center; gap: .9cqw; padding: 1.2cqw 1.4cqw; border-radius: 1.2cqw; background: #f5f4f1; font-size: 1.75cqw; font-weight: 500; }
.checks li::before { content: "✓"; display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #111; color: #fff; font-size: 1.4cqw; flex: none; }
.plats { position: absolute; left: 12%; right: 12%; top: 72%; display: grid; grid-template-columns: repeat(7, 1fr); gap: 1cqw; }
.plats li { display: grid; place-items: center; aspect-ratio: 1; border-radius: 1.2cqw; border: .25cqw solid var(--orange); background: #fff4ef; font: 600 1.7cqw var(--mono); color: #b8360a; }

/* Offer piece */
.st-offer { background: var(--orange); }
.doc { position: absolute; left: 8%; top: 12%; width: 42%; height: 76%; padding: 3.2cqw 3cqw; border-radius: 1cqw; background: #fff; transform: rotate(-3deg); box-shadow: 0 2cqw 4cqw -2cqw rgba(0, 0, 0, .4); display: grid; align-content: start; gap: 1.6cqw; }
.doc-h { height: 2.2cqw; width: 55%; border-radius: .6cqw; background: #111; }
.doc i { height: 1.1cqw; border-radius: .6cqw; background: #e4e4e4; }
.doc i:nth-child(odd) { width: 82%; }
.doc .hit { background: #ffd2c2; }
.ring { position: absolute; width: 80%; left: 6%; fill: none; stroke: #e0201a; stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 0; overflow: visible; }
.r1 { top: 30%; } .r2 { top: 51%; }
.rules { position: absolute; left: 57%; right: 7%; top: 12%; height: 76%; display: grid; align-content: center; gap: 1.3cqw; }
.rules li { padding: 1.3cqw 2cqw; border-radius: 1.2cqw; background: #fff; font-size: 2.2cqw; font-weight: 600; letter-spacing: -.02em; }
.rules li:nth-child(1), .rules li:nth-child(2), .rules li:nth-child(3) { background: #111; color: #fff; }

/* Agent piece */
.st-agent { background: var(--night); color: #fff; }
.ag-top { position: absolute; left: 6%; top: 9%; font: 1.5cqw var(--mono); color: #8d8d8d; }
.pipe { position: absolute; left: 6%; right: 6%; top: 38%; display: flex; align-items: center; }
.node { padding: 1.2cqw 2cqw; border: .2cqw solid #fff; border-radius: 99cqw; font-size: 2.1cqw; font-weight: 600; white-space: nowrap; }
.node-gray { border-style: dashed; color: #bbb; border-color: #888; }
.seg { flex: 1; height: .2cqw; background: #555; transform-origin: left; }
.token { position: absolute; top: 50%; left: 100%; width: 2cqw; height: 2cqw; margin: -1cqw 0 0 -1cqw; border-radius: 50%; background: var(--orange); box-shadow: 0 0 2cqw var(--orange), 0 0 5cqw rgba(255, 79, 18, .6); }
.back { position: absolute; left: 6%; right: 6%; top: 52%; width: 88%; height: 22%; fill: none; stroke: var(--orange); stroke-width: 2; stroke-dasharray: 3 3; overflow: visible; }
.ag-back { position: absolute; left: 0; right: 0; top: 76%; text-align: center; font-size: 1.9cqw; color: #ff9b78; }

/* KnowHub piece */
.st-know { background: var(--blue); }
.links-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.links-svg path { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: .5; stroke-dasharray: 100; stroke-dashoffset: 0; }
.kn, .kn-core { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; border-radius: 99cqw; }
.kn { padding: 1cqw 1.8cqw; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .5); color: #fff; font-size: 1.9cqw; font-weight: 500; backdrop-filter: blur(4px); }
.kn1 { left: 17.5%; top: 20%; } .kn2 { left: 82.5%; top: 20%; } .kn3 { left: 13.75%; top: 57.8%; } .kn4 { left: 86.25%; top: 57.8%; } .kn5 { left: 30%; top: 88.9%; } .kn6 { left: 70%; top: 88.9%; }
.kn-core { left: 50%; top: 50%; padding: 1.8cqw 3.2cqw; background: #fff; color: #111; font-size: 3cqw; font-weight: 700; letter-spacing: -.03em; box-shadow: 0 0 0 1.2cqw rgba(255, 255, 255, .15), 0 0 0 2.6cqw rgba(255, 255, 255, .07); }

/* Vibe Coding piece */
.st-tools { background: #151517; }
.ed { position: absolute; left: 5%; top: 11%; width: 52%; height: 78%; margin: 0; padding: 3cqw; border-radius: 1.2cqw; background: #0b0b0c; border: 1px solid #2a2a2d; font: 1.75cqw/1.75 var(--mono); color: #d7d7d7; white-space: pre; overflow: hidden; }
.ed .c { color: #6b6b72; } .ed .k { color: #ff8a5c; } .ed .s { color: #9bd4ff; }
.type-block { display: block; }
.pv { position: absolute; left: 61%; top: 16%; width: 34%; padding: 2.2cqw; border-radius: 1.4cqw; background: #fff; box-shadow: 0 2cqw 4cqw -2cqw rgba(0, 0, 0, .6); }
.pv-h { font-size: 2cqw; font-weight: 700; letter-spacing: -.02em; }
.pv ul { margin: 1.6cqw 0 2cqw; display: grid; gap: 1cqw; }
.pv li { display: flex; align-items: center; gap: 1cqw; }
.pv li i { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: .7cqw; background: #f0f0f0; font: 600 1.3cqw var(--mono); font-style: normal; }
.pv li:first-child i { background: var(--orange); color: #fff; }
.pv li b { height: 1.1cqw; flex: 1; border-radius: .6cqw; background: #222; transform-origin: left; }
.pv li:nth-child(2) b { flex: .75; } .pv li:nth-child(3) b { flex: .55; }
.pv-btn { display: inline-block; padding: .9cqw 2.4cqw; border-radius: .9cqw; background: #111; color: #fff; font-size: 1.6cqw; font-weight: 600; }
.toast { position: absolute; right: 5%; top: 6%; padding: 1cqw 2cqw; border-radius: 99cqw; background: #19c37d; color: #fff; font-size: 1.6cqw; font-weight: 600; }
.st-tools .cursor { left: 66%; top: 74%; }

/* method piece */
.st-method { background: var(--cream); }
.scene-canvas { display: block; width: 100%; height: 100%; }
.scene-label { position: absolute; left: 3cqw; bottom: 2.6cqw; display: flex; align-items: baseline; gap: 1.4cqw; }
.scene-num { font-size: 6cqw; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.scene-cap { font: 1.8cqw var(--mono); color: #6b6b6b; }

/* contact piece */
.st-contact { background: var(--cream); }
.ct-big { position: absolute; left: 6%; top: 14%; font-size: 13cqw; font-weight: 700; letter-spacing: -.055em; line-height: 1; }
.ct-big span { display: inline-block; }
.ct-big span:last-child { color: var(--orange); }
.ct-btn { position: absolute; left: 6%; top: 62%; padding: 2cqw 3.6cqw; border-radius: 99cqw; background: #111; color: #fff; font: 500 2.6cqw var(--mono); }
.ct-ripple { position: absolute; left: 30%; top: 70%; width: 6cqw; height: 6cqw; margin: -3cqw 0 0 -3cqw; border-radius: 50%; background: var(--orange); opacity: 0; }
.st-contact .cursor { left: 30%; top: 69%; }

/* ---------- method section ---------- */
.method { padding-bottom: clamp(56px, 8vw, 110px); }
.method-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.st-method { order: 2; position: sticky; top: 90px; }
.steps { order: 1; }
.step { min-height: 52vh; display: flex; flex-direction: column; justify-content: center; padding: 14px 0 14px 20px; border-left: 2px solid var(--line); transition: border-color .4s; }
.step.active { border-left-color: var(--orange); }
.step-no { font: 500 12.5px var(--mono); color: var(--muted); }
.step h3 { margin: 10px 0 10px; font-size: clamp(20px, 2vw, 26px); }
.step p:not(.step-no) { color: var(--gray); }
.js .step { opacity: .35; transition: opacity .4s, border-color .4s; }
.js .step.active { opacity: 1; }
html:not(.js) .st-method { display: none; }
html:not(.js) .method-body { grid-template-columns: 1fr; }
html:not(.js) .step { min-height: 0; }

/* ---------- path / scope / archive / contact ---------- */
.path { padding-bottom: clamp(56px, 8vw, 110px); }
.tl li { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--line); }
.tl time { font: 13px/1.9 var(--mono); color: var(--muted); }
.tl h3 { font-size: 19px; margin-bottom: 6px; }
.tl p { color: var(--gray); max-width: 760px; }
.tl-note { margin-top: 10px; padding: 10px 14px; border-radius: 10px; background: var(--soft); font-size: 14.5px; }
.scope { padding-bottom: clamp(56px, 8vw, 100px); }
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.scope-grid > div { padding: 26px 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.scope-grid h3 { font-size: 19px; margin-bottom: 8px; }
.scope-grid li { position: relative; padding: 9px 0 9px 24px; border-top: 1px solid var(--line); font-size: 15px; }
.scope-grid li::before { content: "✓"; position: absolute; left: 0; top: 9px; font-weight: 700; }
.scope-grid .edge li::before { content: "—"; color: var(--orange); }
.archive { padding-bottom: clamp(56px, 8vw, 100px); }
.pieces li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; }
.pieces b { font-weight: 600; }
.pieces span { color: var(--gray); font-size: 15px; }
.pieces time { font: 12.5px var(--mono); color: var(--muted); }
.contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-bottom: clamp(56px, 8vw, 100px); }
.contact h2 { font-size: clamp(26px, 3vw, 38px); }
.mail { margin-top: 16px; font: 500 20px var(--mono); }
.links { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.links a { display: inline-flex; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; text-decoration: none; transition: border-color .2s, transform .2s var(--ease); }
.links a::after { content: "↗"; margin-left: 6px; color: var(--muted); }
.links a:hover { border-color: var(--ink); transform: translateY(-2px); }
.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 24px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }

/* ---------- reveal ---------- */
.motion .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--rd, 0) * 70ms); }
.motion .rv.in { opacity: 1; transform: none; }
.motion .st-know.playing .links-svg path { stroke-dasharray: 3 3; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -6; } }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero { grid-template-columns: 1fr; }
  .item-wide { grid-template-columns: 1fr; gap: 0; }
  .item-wide .cap { padding-top: 16px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats li:nth-child(3) { padding-left: 0; border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--line); }
  .contact { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .grid { grid-template-columns: 1fr; gap: 40px; }
  .method-body { grid-template-columns: 1fr; }
  .st-method { order: 0; top: 104px; z-index: 3; }
  .step { min-height: 64vh; justify-content: flex-end; padding-bottom: 6vh; }
  .tl li { grid-template-columns: 1fr; gap: 4px; }
  .scope-grid { grid-template-columns: 1fr; }
  .pieces li { grid-template-columns: 1fr; gap: 2px; }
}
@media (max-width: 640px) {
  .bar { flex-wrap: wrap; padding-block: 12px 8px; row-gap: 6px; }
  .nav { width: 100%; gap: 18px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; }
  .stats { grid-template-columns: 1fr; }
  .stats li, .stats li + li { padding: 16px 0 6px; border-left: 0; border-top: 1px solid var(--line); }
  .stats li:first-child { border-top: 0; }
  .pad div { grid-template-columns: 1fr; gap: 0; }
  .stage { border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}