/* =========================================================================
 * 首页 /：工业媒体运营？一站式搞定
 * 1 Hero 拆解舞台（滚动联动） 2 一站式规格表 3 数据带 4 账号运营 5 示例精选
 * 6 合作流程 7 FAQ 8 联系
 * 只用 tokens.css 的变量；hero 的滚动状态由 home.js 写 CSS 变量 / 类名。
 * ========================================================================= */

/* ------------------------------------------------------------------ 1. HERO */

.hero { position: relative; }
.hero-live .hero { height: 420vh; height: 420svh; }

.hero__stick {
  position: relative;
}
.hero-live .hero__stick {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
}

.hero__inner {
  position: relative;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
  grid-template-areas: "copy stage";
  column-gap: var(--col-gap);
  padding-block: clamp(16px, 3.2vh, 40px);
}

/* ---------- 舞台 ---------- */
.hero__stage {
  grid-area: stage;
  position: relative;
  margin: 0;
  min-height: 0;
  border: 1px solid var(--bd);
  background-color: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
.hero__canvas, .hero__labels, .hero__dim { position: absolute; inset: 0; }
.hero__canvas { z-index: 1; opacity: 0; transition: opacity var(--dur-slow) var(--ease); }
.hero__stage.is-ready .hero__canvas { opacity: 1; }
.hero__labels { z-index: 3; }
.hero__dim {
  z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  color: var(--fg-2); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.hero__stage.is-ready .hero__dim { opacity: 1; }
.hero__dim-line, .hero__dim-ext { stroke: currentColor; stroke-width: 1; fill: none; }
.hero__dim-ext { stroke-dasharray: 2 3; opacity: .7; }
.hero__dim-bg { fill: var(--bg); }
.hero__dim-text {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-mono);
  fill: var(--fg); font-weight: var(--fw-medium);
}

.hero__still { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; padding: 6%; }
.hero__still[hidden] { display: none; }
.hero__still img { width: 100%; height: 100%; object-fit: contain; }
.hero__schematic { width: 100%; max-width: 760px; height: auto; color: var(--fg-2); }
.hero__schematic-axis { stroke-dasharray: 10 4 2 4; opacity: .55; }
.hero__schematic-accent { stroke: var(--accent); }
.hero__schematic-txt { font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; fill: var(--accent-fg); }

/* 四角准星 */
.hero__tick { position: absolute; z-index: 4; width: 12px; height: 12px; pointer-events: none; }
.hero__tick::before, .hero__tick::after { content: ''; position: absolute; background: var(--fg); }
.hero__tick::before { left: 0; right: 0; top: 50%; height: 1px; margin-top: -.5px; }
.hero__tick::after { top: 0; bottom: 0; left: 50%; width: 1px; margin-left: -.5px; }
.hero__tick--tl { left: 10px; top: 10px; }
.hero__tick--tr { right: 10px; top: 10px; }
.hero__tick--bl { left: 10px; bottom: 10px; }
.hero__tick--br { right: 10px; bottom: 10px; }

.hero__cap { position: absolute; z-index: 4; left: 30px; bottom: 16px; margin: 0; }
.hero__readout {
  position: absolute; z-index: 4; right: 30px; top: 12px; margin: 0;
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--ls-mono); color: var(--fg-mute);
}
.hero__readout b {
  font-family: var(--font-display); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: .02em;
  color: var(--fg); font-variant-numeric: tabular-nums; min-width: 3.1em; text-align: right;
}

/* 标注层配色跟站点 token */
.hero__labels { --cx-ink: var(--ink); --cx-accent: var(--accent); --cx-mute: var(--mute-ink); --cx-line: rgba(14,16,18,.42); }

/* ---------- 文案 ---------- */
.hero__copy {
  grid-area: copy;
  position: relative;
  display: grid;
  align-items: center;
  min-height: 0;
}
.hero__intro, .hero__story { grid-area: 1 / 1; min-width: 0; }

.hero__eyebrow { margin: 0 0 var(--s-5); color: var(--fg-mute); }
.hero__title {
  margin: 0;
  font-size: clamp(44px, 5.6vw, 104px);
  line-height: 1.06;
  letter-spacing: var(--ls-tight);
}
.hero__line { display: block; white-space: nowrap; }
.hero__line--mark { position: relative; width: max-content; padding-bottom: .1em; }
.hero__line--mark::after {
  content: '';
  position: absolute; left: 0; bottom: -.04em;
  width: 100%; height: clamp(6px, .7vw, 12px);
  background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  animation: hero-mark 900ms var(--ease) 450ms forwards;
}
@keyframes hero-mark { to { transform: scaleX(1); } }
.hero__sub {
  margin: var(--s-6) 0 0;
  max-width: 30em;
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--fg-2);
}
.hero__cta { margin-top: var(--s-6); }

/* 滚动联动下的 intro / story 交接（--pi：0 = intro，1 = story） */
.hero-live .hero__intro {
  opacity: calc(1 - var(--pi, 0));
  transform: translateY(calc(var(--pi, 0) * -36px));
}
.hero-live .hero__story {
  opacity: var(--pi, 0);
  transform: translateY(calc((1 - var(--pi, 0)) * 28px));
}
.hero-live .hero__intro.is-off, .hero-live .hero__story.is-off { visibility: hidden; }

.hero__thesis { margin: 0 0 var(--s-6); color: var(--fg-mute); }

.hero__chapters { display: grid; grid-template-rows: auto 1fr; gap: var(--s-5); }

/* 进度刻度：4 段 */
.hero__rail ol { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; }
.hero__seg {
  position: relative; display: block; width: 100%;
  min-height: 44px; padding: 14px 0 0;
  border: 0; background: none; cursor: pointer; text-align: left; color: var(--fg-mute);
}
.hero__seg::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--bd);
}
.hero__seg-fill {
  position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--accent); transform: scaleX(var(--f, 0)); transform-origin: left center;
}
.hero__seg-no { font-size: var(--fs-mono); transition: color var(--dur-fast); }
.hero__seg.is-active .hero__seg-no, .hero__seg:hover .hero__seg-no { color: var(--accent-fg); }

/* 章节窗口：当前章在上，下一章露出一截 */
.hero__window {
  position: relative;
  height: clamp(250px, 38vh, 340px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.hero__track {
  margin: 0; padding: 0; list-style: none;
  transform: translateY(calc(var(--ty, 0) * -1px));
  transition: transform 650ms var(--ease);
}
.chap {
  padding-bottom: var(--s-7);
  opacity: .28;
  transition: opacity var(--dur) var(--ease);
}
.chap.is-active { opacity: 1; }
.chap__no {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 4.4vw, 72px); line-height: .9; letter-spacing: .01em;
  color: var(--accent);
}
.chap__title { margin: var(--s-3) 0 0; font-size: var(--fs-h3); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.15; }
.chap__text { margin: var(--s-3) 0 0; max-width: 26em; color: var(--fg-2); line-height: 1.7; }
.chap__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: var(--s-2); }

.hero__hint {
  position: absolute; left: var(--gutter); bottom: clamp(14px, 2.6vh, 28px);
  display: flex; align-items: center; gap: 10px; margin: 0; color: var(--fg-mute);
  opacity: calc(1 - var(--pi, 0) * 3);
  pointer-events: none;
}
.hero__hint-bar { position: relative; width: 48px; height: 1px; background: var(--bd-strong); overflow: hidden; }
.hero__hint-bar::after {
  content: ''; position: absolute; inset: 0; background: var(--accent);
  transform: translateX(-100%); animation: hero-hint 2.2s var(--ease-in-out) 1.2s infinite;
}
@keyframes hero-hint { 60%, 100% { transform: translateX(100%); } }

/* 加载中 */
.hero__stage.is-loading .hero__readout-k::after { content: ''; }

/* ---------- 静态版（无 WebGL / reduced-motion / 引擎失败） ---------- */
html:not(.hero-live) .hero__inner {
  min-height: calc(100svh - var(--nav-h));
  grid-template-rows: auto auto;
  grid-template-areas: "copy stage" "story stage";
  row-gap: var(--s-7);
  align-content: center;
  padding-block: clamp(32px, 6vh, 72px);
}
html:not(.hero-live) .hero__copy { display: contents; }
html:not(.hero-live) .hero__intro { grid-area: copy; align-self: end; }
html:not(.hero-live) .hero__story { grid-area: story; align-self: start; }
html:not(.hero-live) .hero__stage { aspect-ratio: 4 / 3; align-self: center; }
html:not(.hero-live) .hero__rail,
html:not(.hero-live) .hero__hint,
html:not(.hero-live) .hero__readout,
html:not(.hero-live) .hero__dim,
html:not(.hero-live) .hero__canvas,
html:not(.hero-live) .hero__labels { display: none; }
html:not(.hero-live) .hero__window { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
html:not(.hero-live) .hero__track { transform: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--col-gap); }
html:not(.hero-live) .chap { opacity: 1; padding: var(--s-4) 0 0; border-top: 1px solid var(--bd); }
html:not(.hero-live) .chap__no { font-size: 32px; }
html:not(.hero-live) .chap__title { font-size: 22px; margin-top: var(--s-2); }
html:not(.hero-live) .chap__text { font-size: var(--fs-sm); }

/* ---------- 窄屏 ---------- */
@media (max-width: 899px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 50fr) minmax(0, 50fr);
    grid-template-areas: "stage" "copy";
    row-gap: var(--s-4);
    padding-block: 12px 16px;
  }
  .hero__copy { align-items: start; }
  .hero__eyebrow { margin-bottom: var(--s-3); font-size: 11px; }
  .hero__title { font-size: clamp(38px, 11vw, 64px); line-height: 1.05; }
  .hero__sub { margin-top: var(--s-4); font-size: 15px; line-height: 1.6; }
  .hero__cta { margin-top: var(--s-4); }
  .hero__cta .btn { min-height: 48px; }
  .hero__cap { left: 26px; bottom: 12px; font-size: 11px; }
  .hero__cap span:last-child { display: none; }
  .hero__readout { right: 26px; top: 8px; }
  .hero__readout b { font-size: 22px; }
  .hero__thesis { margin-bottom: var(--s-3); font-size: 11px; }
  .hero__chapters { gap: var(--s-2); }
  .hero__window { height: 230px; }
  .chap { padding-bottom: var(--s-6); }
  .chap__no { font-size: 34px; }
  .chap__title { margin-top: var(--s-2); font-size: 24px; }
  .chap__text { margin-top: var(--s-2); font-size: 15px; line-height: 1.6; }
  .chap__link { margin-top: 0; }
  .hero__hint { display: none; }

  html:not(.hero-live) .hero__inner {
    grid-template-rows: auto;
    grid-template-areas: "copy" "stage" "story";
    min-height: 0;
    row-gap: var(--s-6);
    padding-block: var(--s-6) var(--s-7);
  }
  html:not(.hero-live) .hero__stage { aspect-ratio: 4 / 3; }
  html:not(.hero-live) .hero__track { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) and (max-height: 700px) {
  .hero-live .hero__sub { display: none; }
}

/* ------------------------------------------------------------------ 2. 一站式：规格表 */

.spec { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bd-strong); }
.spec__row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 72px minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr) 40px;
  gap: var(--col-gap);
  align-items: start;
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-bottom: 1px solid var(--bd);
}
.spec__row::before {
  content: ''; position: absolute; left: 0; top: -1px; bottom: -1px; width: 4px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform var(--dur) var(--ease);
}
.spec__row::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--surface); opacity: 0; transition: opacity var(--dur) var(--ease);
}
.spec__row:hover::before, .spec__row:focus-within::before { transform: scaleY(1); }
.spec__row:hover::after, .spec__row:focus-within::after { opacity: 1; }
.spec__no { margin: 6px 0 0 20px; color: var(--accent-fg); font-size: var(--fs-mono-lg); }
.spec__name { margin: 0; font-size: var(--fs-h3); font-size: clamp(26px, 2.4vw, 36px); line-height: 1.15; }
.spec__link { color: inherit; text-decoration: none; }
.spec__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.spec__link:focus-visible { outline: none; }
.spec__row:has(.spec__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.spec__en { margin: var(--s-2) 0 0; color: var(--fg-mute); }
.spec__one { margin: var(--s-4) 0 0; max-width: 24em; color: var(--fg-2); font-size: var(--fs-body); }
.spec__k { margin: 6px 0 var(--s-3); color: var(--fg-mute); }
.spec__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--fs-sm); color: var(--fg); }
.spec__list li { position: relative; padding-left: 22px; line-height: 1.6; }
.spec__list li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 12px; color: var(--accent-fg);
}
.spec__fit { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--fg-2); }
.spec__go {
  align-self: center; justify-self: end;
  font-family: var(--font-display); font-size: 30px; line-height: 1; color: var(--fg-mute);
  transition: transform var(--dur) var(--ease), color var(--dur-fast);
}
.spec__row:hover .spec__go, .spec__row:focus-within .spec__go { color: var(--accent); transform: translateX(6px); }

@media (max-width: 1099px) {
  .spec__row { grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1fr) 32px; }
  .spec__col--fit { grid-column: 3; }
  .spec__main { grid-row: span 2; }
  .spec__go { grid-column: 4; grid-row: 1 / span 2; }
}
@media (max-width: 699px) {
  .spec__row { grid-template-columns: 40px minmax(0, 1fr) 24px; gap: var(--s-3) var(--s-3); padding: var(--s-6) 0; }
  .spec__no { margin: 8px 0 0 12px; }
  .spec__main { grid-column: 2; grid-row: auto; }
  .spec__col, .spec__col--fit { grid-column: 2; }
  .spec__go { grid-column: 3; grid-row: 1; align-self: start; margin-top: 4px; font-size: 24px; }
  .spec__one { margin-top: var(--s-3); }
  .spec__k { margin: var(--s-2) 0 var(--s-2); }
}

/* ------------------------------------------------------------------ 4. 账号运营：装配线 */

.ops__title { max-width: 18em; }

.line {
  --n: 6;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  gap: var(--col-gap);
  margin: 0; padding: 0; list-style: none;
}
/* 连线：基线 + 绘制线 */
.line::before, .line::after {
  content: ''; position: absolute; left: 28px; right: 0; top: 28px; height: 1px;
}
.line::before { background: var(--bd-strong); }
.line::after {
  height: 2px; margin-top: -.5px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1500ms var(--ease-in-out) 150ms;
}
.line.is-on::after { transform: scaleX(1); }

.line__step { position: relative; }
.line__node {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 56px; height: 56px;
  background: var(--bg); border: 1px solid var(--bd-strong);
  color: var(--fg-mute);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: color 400ms var(--ease), border-color 400ms var(--ease), background 400ms var(--ease);
  transition-delay: calc(var(--i) * 230ms + 150ms);
}
.line__node svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.line.is-on .line__node { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.line__no { margin: var(--s-5) 0 0; color: var(--accent-fg); }
.line__name { margin: var(--s-2) 0 0; font-size: var(--fs-h3); line-height: 1.2; }
.line__text { margin: var(--s-3) 0 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--fg-2); }
.line__no, .line__name, .line__text {
  opacity: .35; transition: opacity 500ms var(--ease); transition-delay: calc(var(--i) * 230ms + 250ms);
}
.line.is-on .line__no, .line.is-on .line__name, .line.is-on .line__text { opacity: 1; }
html:not(.js) .line .line__no, html:not(.js) .line .line__name, html:not(.js) .line .line__text { opacity: 1; }

@media (max-width: 1099px) and (min-width: 700px) {
  .line { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--s-8); }
  .line::before, .line::after { display: none; }
}
@media (max-width: 699px) {
  .line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .line::before, .line::after { left: 27.5px; right: auto; top: 28px; bottom: 28px; width: 1px; height: auto; margin: 0; }
  .line::after { width: 2px; margin-left: -.5px; transform: scaleY(0); transform-origin: top center; }
  .line.is-on::after { transform: scaleY(1); }
  .line__step {
    display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-5);
    padding-bottom: var(--s-6);
  }
  .line__step:last-child { padding-bottom: 0; }
  .line__node { grid-row: 1 / span 3; }
  .line__no { margin: 4px 0 0; }
  .line__name { margin-top: 2px; }
  .line__text { margin-top: var(--s-2); }
}
@media (prefers-reduced-motion: reduce) {
  .line::after { transition: none; }
  .line__node, .line__no, .line__name, .line__text { transition: none; }
}

/* 运营账号 */

@media (max-width: 899px) {
  .accts__list { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); }
}

/* ------------------------------------------------------------------ 5. 示例精选 */

.feat__grid { row-gap: var(--s-7); }
.feat__grid .card__meta { flex-wrap: nowrap; }
.feat__type { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat__src { margin: var(--s-2) 0 0; font-size: 12px; line-height: 1.5; color: var(--fg-mute); }
.feat__grid .tag { margin-left: auto; }

/* ------------------------------------------------------------------ 6. 合作流程：细线时间轴 */

.flow {
  position: relative;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--col-gap);
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--bd-strong);
}
.flow__step { position: relative; padding-top: var(--s-6); }
.flow__step::before {
  content: ''; position: absolute; left: 0; top: -5px; width: 9px; height: 9px;
  background: var(--bg); border: 1px solid var(--fg);
}
.flow__step:first-child::before { background: var(--accent); border-color: var(--accent); }
.flow__no { margin: 0; color: var(--accent-fg); }
.flow__name { margin: var(--s-3) 0 0; font-size: var(--fs-h3); line-height: 1.2; }
.flow__text { margin: var(--s-3) 0 0; max-width: 22em; font-size: var(--fs-sm); line-height: 1.7; color: var(--fg-2); }

@media (max-width: 899px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 0; border-left: 1px solid var(--bd-strong); margin-left: 4px; }
  .flow__step { padding: 0 0 var(--s-6) var(--s-5); }
  .flow__step:last-child { padding-bottom: 0; }
  .flow__step::before { left: -5px; top: 4px; }
}

/* ------------------------------------------------------------------ 7. FAQ */

.faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: start; }
.faq__title { font-size: clamp(28px, 3.2vw, 48px); max-width: 12em; }
@media (max-width: 899px) {
  .faq { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

/* ------------------------------------------------------------------ 8. 联系 */

.contact__inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--col-gap); align-items: center; }
.contact__title {
  margin: var(--s-5) 0 0;
  font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-tight);
}
.contact__text { margin: var(--s-5) 0 0; max-width: 28em; font-size: var(--fs-lg); line-height: 1.65; color: var(--fg-2); }
.contact__top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: var(--s-4); }
.contact__qr { margin: 0; padding: var(--s-6); background: var(--white); border: 1px solid var(--bd); justify-self: end; width: min(100%, 340px); }
.contact__qr img { display: block; width: 100%; height: auto; }
.contact__qr .fig-cap { margin-top: var(--s-4); justify-content: center; }
@media (max-width: 899px) {
  .contact__inner { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .contact__qr { justify-self: start; width: min(100%, 300px); }
}

/* 账号运营：标题左、导语右，与「一站式」节的两栏头部一致 */
#ops .sec__head { display: grid; gap: var(--s-4) var(--s-7); align-items: end; }
.ops__lead { margin: 0; max-width: 32em; color: var(--fg-2); font-size: var(--fs-lead, 18px); line-height: 1.7; }
@media (min-width: 900px) {
  #ops .sec__head { grid-template-columns: 1.3fr 1fr; }
  #ops .sec__head .label { grid-column: 1 / -1; }
}