/* ============================================================
   竹梦文化科技 · 官网
   基于 tokens.css（Bamboo Dream 设计系统）
   审美方向：电影黑房 + 竹节刻度 —— 深墨底、宋体巨字、
             jade 单一强调、mono 场记板式数据标注
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  background: var(--bg-0);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--bg-0);
  color: var(--fg-1);
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; }
p { margin: 0; }
ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

::selection { background: var(--accent); color: var(--fg-on-accent); }

.mono { font-family: var(--font-mono); }

/* ── 全站颗粒（胶片感） ───────────────────────────────── */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 左侧竹节刻度线 ───────────────────────────────────── */
.rail {
  position: fixed; left: 34px; top: 0; bottom: 0; width: 1px;
  z-index: 5; pointer-events: none;
}
.rail::before,
.rail::after {
  content: ''; position: absolute; left: -3px; width: 7px; height: 7px;
  border: 1px solid var(--line-2); border-radius: 50%;
}
.rail::before { top: 96px; }
.rail::after  { bottom: 96px; }
.rail-line {
  position: absolute; left: 0; top: 96px; bottom: 96px; width: 1px;
  background: linear-gradient(180deg,
    transparent, var(--line-1) 12%, var(--line-1) 88%, transparent);
}
@media (max-width: 1180px) { .rail { display: none; } }

/* ── 液态玻璃（prompt 规范实现） ────────────────────────── */
.liquid-glass,
.btn-glass {
  position: relative; overflow: hidden;
  background: rgba(255, 255, 255, 0.01);
  background-blend-mode: luminosity;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: none;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.10);
}
.liquid-glass::before,
.btn-glass::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1.4px; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%,
    rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%,
    rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

.btn-glass {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-pill);
  padding: 10px 24px;
  font-size: var(--text-sm); font-weight: 500; letter-spacing: .02em;
  color: var(--fg-0); cursor: pointer;
  transition: transform var(--d-short) var(--ease-out),
              box-shadow var(--d-short) var(--ease-out);
}
.btn-glass:hover {
  transform: scale(1.03);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18), var(--e-glow-jade);
}
.btn-lg { padding: 19px 52px; font-size: var(--text-md); }

.btn-plain {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); color: var(--fg-2);
  transition: color var(--d-short) var(--ease-out), gap var(--d-short) var(--ease-out);
}
.btn-plain:hover { color: var(--accent); gap: 11px; }

/* ── 导航 ─────────────────────────────────────────────── */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  transition: background var(--d-base) var(--ease-out),
              backdrop-filter var(--d-base) var(--ease-out),
              border-color var(--d-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(10, 14, 14, .72);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom-color: var(--line-0);
}
.nav-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 20px clamp(20px, 4vw, 40px);
  display: flex; align-items: center; gap: var(--s-8);
}
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.brand-mark { opacity: .95; }
.brand-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--text-xl); letter-spacing: var(--tracking-tight);
  color: var(--fg-0);
}
.brand-name sup { font-size: 9px; font-family: var(--font-body); font-weight: 500; opacity: .6; top: -.9em; }

.nav-links { display: flex; gap: var(--s-8); }
.nav-links a {
  position: relative; font-size: var(--text-sm); color: var(--fg-2);
  transition: color var(--d-short) var(--ease-out);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px;
  background: var(--accent);
  transition: right var(--d-base) var(--ease-out);
}
.nav-links a:hover { color: var(--fg-0); }
.nav-links a:hover::after { right: 0; }

.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-inner { gap: var(--s-4); }
  .nav-cta { display: none; }
  .nav-toggle {
    display: flex; flex-direction: column; gap: 5px; justify-content: center;
    width: 40px; height: 40px; padding: 0 9px;
    background: none; border: none; cursor: pointer;
  }
  .nav-toggle span { height: 1px; background: var(--fg-1); transition: transform var(--d-short) var(--ease-out); }
  .nav-links {
    position: fixed; inset: 68px 0 auto; flex-direction: column; gap: 0;
    padding: var(--s-4) clamp(20px, 6vw, 40px) var(--s-8);
    background: var(--bg-0);
    border-bottom: 1px solid var(--line-1);
    box-shadow: var(--e-2);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity var(--d-short) var(--ease-out), transform var(--d-short) var(--ease-out);
  }
  .nav-links a { padding: 14px 0; font-size: var(--text-md); border-bottom: 1px solid var(--line-0); }
  .nav.is-open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  .nav.is-open .nav-toggle span:first-child { transform: translateY(3px) rotate(45deg); }
  .nav.is-open .nav-toggle span:last-child  { transform: translateY(-3px) rotate(-45deg); }
}

/* ── HERO ─────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 160px clamp(20px, 5vw, 40px) 132px;
  text-align: center; overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-video {
  width: 100%; height: 100%; object-fit: cover;
  animation: heroDrift 34s var(--ease-inout) infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1.04); }
  to   { transform: scale(1.13); }
}
/* 三层遮罩：
   ① 侧幕——竖屏原片扩成 16:9 后，两侧是模糊延展区，压暗它既能藏住过渡带，
      也把画面收成一束光，正是短剧竖屏该有的观感；
   ② 中心柔光——保证标题在任何一帧上都有对比度；
   ③ 上下渐隐——顶部让导航可读，底部接住页面底色。 */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(10,14,14,.94) 0%, rgba(10,14,14,.62) 15%, rgba(10,14,14,.14) 29%,
      transparent 42%, transparent 58%,
      rgba(10,14,14,.14) 71%, rgba(10,14,14,.62) 85%, rgba(10,14,14,.94) 100%),
    radial-gradient(120% 86% at 50% 44%, rgba(10,14,14,.40) 0%, rgba(10,14,14,.62) 58%, rgba(10,14,14,.84) 100%),
    linear-gradient(180deg, rgba(10,14,14,.80) 0%, rgba(10,14,14,.10) 24%, rgba(10,14,14,.28) 58%, rgba(10,14,14,.88) 90%, var(--bg-0) 100%);
}

.hero-body { position: relative; z-index: 2; max-width: 1180px; }

.eyebrow {
  font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--tracking-widest);
  color: var(--accent);
}

.hero-title {
  margin-top: var(--s-6);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(42px, 8.4vw, 116px);
  line-height: .98; letter-spacing: -.035em;
  color: var(--fg-0);
}
.hero-title em { font-style: normal; color: var(--ink-300); }

.hero-sub {
  max-width: 660px; margin: var(--s-8) auto 0;
  font-size: var(--text-md); line-height: var(--lh-relaxed);
  color: var(--ink-200); text-wrap: pretty;
}

.hero-actions {
  margin-top: var(--s-12);
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  align-items: center; justify-content: center;
}

/* hero 底部：数据带 + 滚动提示 */
.hero-foot {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  padding: 0 clamp(20px, 5vw, 40px) 34px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-6);
  max-width: 1280px; margin: 0 auto;
}
.ticker {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: .06em; color: var(--fg-3); text-align: left;
}
.ticker span { display: flex; align-items: baseline; gap: 7px; }
.ticker b {
  font-size: var(--text-lg); font-weight: 500;
  color: var(--fg-0); letter-spacing: -.02em;
}
.scroll-hint {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-widest); color: var(--fg-3);
}
.scroll-line { display: block; width: 52px; height: 1px; background: var(--line-2); position: relative; overflow: hidden; }
.scroll-line::after {
  content: ''; position: absolute; inset: 0; width: 40%;
  background: var(--accent);
  animation: scrollSweep 2.6s var(--ease-inout) infinite;
}
@keyframes scrollSweep {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(260%); }
}

.hero-credit {
  position: absolute; z-index: 2; right: clamp(20px, 5vw, 40px); top: 50%;
  /* vertical-rl 本身就是中文竖排、从上往下读；再叠 rotate(180deg) 会把整行倒过来 */
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .16em; color: rgba(255,255,255,.34);
}

@media (max-width: 860px) {
  .hero { padding: 120px clamp(20px, 5vw, 40px) 150px; }
  .hero-foot { flex-direction: column; align-items: flex-start; }
  .scroll-hint { display: none; }
  .hero-credit { display: none; }
}

/* ── 区块骨架 ─────────────────────────────────────────── */
.sec {
  position: relative;
  padding: clamp(96px, 13vw, 168px) clamp(20px, 5vw, 40px);
}
.sec--alt { background: var(--bg-1); }
.sec--alt::before,
.sec--alt::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line-0);
}
.sec--alt::before { top: 0; }
.sec--alt::after  { bottom: 0; }

.wrap { max-width: 1280px; margin: 0 auto; }

.sec-head { position: relative; max-width: 780px; margin-bottom: clamp(56px, 7vw, 96px); }
.sec-no {
  position: absolute; right: -40px; top: -46px;
  font-family: var(--font-mono); font-size: clamp(64px, 10vw, 132px);
  font-weight: 500; line-height: 1; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px var(--line-1);
  pointer-events: none; user-select: none;
}
.sec-title {
  margin-top: var(--s-5);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1.12; letter-spacing: var(--tracking-tight);
  color: var(--fg-0); text-wrap: balance;
}
.sec-lede {
  margin-top: var(--s-6); max-width: 640px;
  font-size: var(--text-md); line-height: var(--lh-relaxed);
  color: var(--fg-2); text-wrap: pretty;
}

@media (min-width: 1181px) { .sec-no { right: auto; left: -104px; top: -8px; } }
@media (max-width: 620px)  { .sec-no { right: 0; top: -34px; } }

/* ── 01 作品 · 旗舰剧 ─────────────────────────────────── */
/* 上排：竖版海报 + 文案；下排：通栏剧照条 —— 两列高度自然对齐 */
.feature {
  display: grid;
  grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(28px, 4vw, 64px) clamp(32px, 5vw, 72px);
  align-items: stretch;
  padding-bottom: clamp(56px, 7vw, 88px);
  border-bottom: 1px solid var(--line-0);
}
.feature-poster { position: relative; }
.feature-poster img,
.feature-poster video {
  display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--r-3);
  box-shadow: var(--e-3);
  filter: saturate(1.04);
  background: var(--ink-900);
}
/* 播放中让出全部注意力：去掉圆角外的裁切干扰，撤掉海报滤镜 */
.feature-poster.is-playing video { filter: none; }

/* 覆盖在海报上的播放入口 */
.play-btn {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5);
  border: none; border-radius: 0 0 var(--r-3) var(--r-3);
  background: linear-gradient(180deg, transparent, rgba(10,14,14,.78) 42%, rgba(10,14,14,.94));
  color: var(--fg-0); text-align: left; cursor: pointer;
  transition: opacity var(--d-base) var(--ease-out);
}
.play-ico {
  display: grid; place-items: center; flex-shrink: 0;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: var(--fg-0);
  transition: transform var(--d-base) var(--ease-out),
              background var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out);
}
.play-ico svg { width: 19px; height: 19px; margin-left: 2px; }
.play-btn:hover .play-ico {
  transform: scale(1.08);
  background: var(--accent); color: var(--fg-on-accent);
  box-shadow: var(--e-glow-jade);
}
.play-txt { display: flex; flex-direction: column; gap: 4px; }
.play-txt b {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: 700; letter-spacing: var(--tracking-tight);
}
.play-txt em {
  font-style: normal; font-size: 10px;
  letter-spacing: var(--tracking-wide); color: var(--fg-2);
}
/* 播放开始后隐藏入口，把原生控件让出来 */
.feature-poster.is-playing .play-btn,
.feature-poster.is-playing .poster-tag { opacity: 0; pointer-events: none; }
.feature-poster::after {
  content: ''; position: absolute; inset: 0; border-radius: var(--r-3);
  box-shadow: inset 0 0 0 1px var(--line-1);
  pointer-events: none;
}
.poster-tag {
  position: absolute; left: -1px; bottom: -26px;
  font-size: 10px; letter-spacing: var(--tracking-widest); color: var(--fg-3);
}

/* 文案列拉满海报高度，规格表贴底 —— 两列底边对齐 */
.feature-body { display: flex; flex-direction: column; }
.feature-kicker { font-size: 10px; letter-spacing: var(--tracking-widest); color: var(--accent); }
.feature-title {
  margin-top: var(--s-4);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 4.2vw, 54px); line-height: 1.1;
  letter-spacing: var(--tracking-tight); color: var(--fg-0);
}
.feature-line {
  margin-top: var(--s-4);
  font-family: var(--font-display); font-size: var(--text-lg);
  color: var(--ink-300); letter-spacing: .02em;
}
.feature-desc {
  margin-top: var(--s-6); margin-bottom: var(--s-10); max-width: 560px;
  line-height: var(--lh-relaxed); color: var(--fg-2);
}

.specs {
  margin-top: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--line-0);
  border: 1px solid var(--line-0); border-radius: var(--r-2); overflow: hidden;
}
.specs > div { background: var(--bg-0); padding: var(--s-4) var(--s-5); }
.sec--alt .specs > div { background: var(--bg-1); }
.specs dt {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--tracking-wide); color: var(--fg-3);
}
.specs dd {
  margin-top: 7px; display: flex; align-items: center; gap: 7px;
  font-size: var(--text-base); color: var(--fg-0);
}

.dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.dot.done { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dot.wip  { background: var(--signal); box-shadow: 0 0 0 3px var(--signal-soft); }
.dot.prep { background: var(--warning); box-shadow: 0 0 0 3px rgba(224,178,85,.14); }

/* 剧照保持竖屏原比例——横裁 16:9 只剩 31% 画面高度，正好切在人脸上。
   四张竖卡靠左，右侧空位放说明，形成不对称平衡。 */
.stills {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 214px)) 1fr;
  gap: var(--s-4); align-items: end;
}
.stills figure { margin: 0; }
.stills img {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: var(--r-2); border: 1px solid var(--line-1);
  filter: grayscale(.18) brightness(.94);
  transition: filter var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.stills figure:hover img { filter: none; transform: translateY(-3px); }
.stills figcaption {
  margin-top: 8px; font-size: 10px;
  letter-spacing: var(--tracking-wide); color: var(--fg-3);
}
.stills-note {
  padding: 0 0 2px var(--s-6); max-width: 250px;
  font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--fg-3);
}
.stills-note .mono {
  display: block; margin-bottom: 10px; font-size: 10px;
  letter-spacing: var(--tracking-widest); color: var(--accent);
}

@media (max-width: 1080px) {
  .stills { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stills-note { grid-column: 1 / -1; padding: var(--s-2) 0 0; max-width: 520px; }
}
@media (max-width: 800px) {
  .feature { grid-template-columns: 1fr; }
  .feature-poster { max-width: 300px; }
  .poster-tag { display: none; }
  .stills { grid-template-columns: repeat(2, 1fr); }
}

/* ── 01 作品 · 其余剧目 ───────────────────────────────── */
.work-grid {
  margin-top: clamp(48px, 6vw, 72px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-6);
}
.work-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line-1); border-radius: var(--r-3);
  overflow: hidden; background: var(--bg-1);
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.sec--alt .work-card { background: var(--bg-2); }
.work-card:hover { border-color: var(--line-2); transform: translateY(-4px); }
.work-thumb { overflow: hidden; }
.work-thumb img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  filter: saturate(.92) brightness(1.06);
  transition: transform var(--d-long) var(--ease-out), filter var(--d-long) var(--ease-out);
}
.work-card:hover .work-thumb img { transform: scale(1.05); filter: none; }
.work-meta { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.work-meta h3 {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 700; color: var(--fg-0); letter-spacing: var(--tracking-tight);
}
.work-genre { font-size: 10px; letter-spacing: var(--tracking-wide); color: var(--accent); order: -1; }
.work-desc { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--fg-2); }
.work-status {
  margin-top: auto; padding-top: var(--s-3);
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-3);
}
.work-card--text { border-style: dashed; border-color: var(--line-1); background: transparent; }
.work-card--text .work-meta { gap: var(--s-4); justify-content: center; }
.work-card--text .btn-plain { margin-top: var(--s-2); }

/* ── 01 作品 · 题材覆盖 ────────────────────────────────
   配图全部来自已完成 / 在制项目的真实美术设定，不是通用素材。 */
.genres { margin-top: clamp(80px, 10vw, 128px); }

.genre-head { max-width: 680px; margin-bottom: clamp(32px, 4vw, 48px); }
.genre-title {
  margin-top: var(--s-4);
  font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 42px);
  font-weight: 700; line-height: 1.15; color: var(--fg-0);
  letter-spacing: var(--tracking-tight);
}
.genre-lede {
  margin-top: var(--s-5);
  font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--fg-2);
}

.genre-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
}
.genre-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-3); border: 1px solid var(--line-1);
  aspect-ratio: 16 / 9;
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.genre-card img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.72) saturate(.92);
  transition: transform var(--d-long) var(--ease-out), filter var(--d-long) var(--ease-out);
}
/* 底部压暗，保证标签可读 */
.genre-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 26%, rgba(10,14,14,.62) 62%, rgba(10,14,14,.94) 100%);
}
.genre-card:hover { border-color: var(--line-accent); transform: translateY(-4px); }
.genre-card:hover img { transform: scale(1.06); filter: brightness(.92) saturate(1); }

.genre-tag {
  position: absolute; z-index: 1; left: var(--s-5); right: var(--s-5); bottom: var(--s-5);
  display: flex; flex-direction: column; gap: 5px;
}
.genre-tag span {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: var(--fg-0); letter-spacing: var(--tracking-tight);
}
.genre-tag em {
  font-style: normal; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; color: var(--fg-2);
}

.genre-foot {
  margin-top: var(--s-8);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding-top: var(--s-6); border-top: 1px solid var(--line-0);
}
.genre-foot p {
  max-width: 640px; font-size: var(--text-sm);
  line-height: var(--lh-relaxed); color: var(--fg-3);
}
.genre-foot b { color: var(--fg-1); font-weight: 500; }

@media (max-width: 900px) { .genre-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) {
  .genre-grid { grid-template-columns: 1fr; }
  .genre-foot { flex-direction: column; align-items: flex-start; }
}

/* ── 02 能力 · 竹节流程 ───────────────────────────────── */
.flow {
  position: relative;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: var(--s-6);
  padding-top: var(--s-10);
}
.flow::before {
  content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 1px;
  background: linear-gradient(90deg, var(--accent), var(--signal) 60%, transparent);
  opacity: .45;
}
.flow-node { position: relative; padding-top: var(--s-6); }
.flow-node::before {
  content: ''; position: absolute; left: 0; top: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-0); border: 1px solid var(--accent);
  transform: translateY(-5px);
}
.sec--alt .flow-node::before { background: var(--bg-1); }
.flow-no { display: block; font-size: 10px; letter-spacing: var(--tracking-wide); color: var(--fg-3); }
.flow-node h3 {
  margin-top: var(--s-3);
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: var(--fg-0);
}
.flow-node p { margin-top: var(--s-3); font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--fg-2); }

@media (max-width: 900px) {
  .flow { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--s-6); }
  .flow::before { display: none; }
  .flow-node { padding-left: var(--s-6); padding-top: 0; }
  .flow-node::before { transform: none; top: 4px; }
}
@media (max-width: 520px) { .flow { grid-template-columns: 1fr; } }

/* ── 02 能力 · 一致性证据 ─────────────────────────────── */
.proof {
  margin-top: clamp(72px, 9vw, 120px);
  display: grid; grid-template-columns: minmax(280px, 400px) 1fr;
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.proof-title {
  margin-top: var(--s-4);
  font-family: var(--font-display); font-size: clamp(24px, 3vw, 36px);
  font-weight: 700; line-height: 1.2; color: var(--fg-0);
  letter-spacing: var(--tracking-tight); text-wrap: balance;
}
.proof-copy p:not(.eyebrow) {
  margin-top: var(--s-5); font-size: var(--text-base);
  line-height: var(--lh-relaxed); color: var(--fg-2);
}
/* 两张三视图并排 + 场景条通栏。三视图是白底设定图，
   在深色页面上要压暗，否则会盖过旁边的正文。 */
.proof-visual {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
}
.ref-sheet { margin: 0; position: relative; }
.ref-sheet img {
  width: 100%; border-radius: var(--r-2);
  border: 1px solid var(--line-1);
  background: var(--ink-700);
  filter: brightness(.80) contrast(1.04) saturate(.95);
  transition: filter var(--d-base) var(--ease-out);
}
.ref-sheet:hover img { filter: brightness(.95) contrast(1.02); }
.ref-sheet figcaption {
  margin-top: 8px; font-size: 10px;
  letter-spacing: var(--tracking-wide); color: var(--fg-3);
}
.scene-strip {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
}
.scene-strip img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r-2); border: 1px solid var(--line-0);
  filter: brightness(.88);
  transition: filter var(--d-base) var(--ease-out);
}
.scene-strip img:hover { filter: none; }

@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }

/* ── 02 能力 · 数据 ───────────────────────────────────── */
.stat-row {
  margin-top: clamp(72px, 9vw, 120px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px; background: var(--line-0);
  border-top: 1px solid var(--line-0); border-bottom: 1px solid var(--line-0);
}
.stat { background: var(--bg-1); padding: var(--s-8) var(--s-6); }
.sec--alt .stat { background: var(--bg-1); }
.stat-num {
  display: block; font-size: clamp(44px, 5.6vw, 68px); font-weight: 500;
  line-height: 1; letter-spacing: -.045em; color: var(--fg-0);
}
.stat-num i { font-style: normal; font-size: .42em; color: var(--accent); margin-left: 2px; }
.stat-label { margin-top: var(--s-4); font-size: var(--text-base); color: var(--fg-1); }
.stat-note {
  margin-top: 7px; font-family: var(--font-mono);
  font-size: var(--text-xs); line-height: 1.6; color: var(--fg-3);
}

/* ── 03 工具 · 流水线控制台 ────────────────────────────
   不用卡片网格：那说不清工具之间的关系。改成机架列表，
   左侧一条 jade→cyan 走线把创作工具串起来、末端汇入资产库，
   直接画出「所有产物沉淀到底座」。 */

.console {
  position: relative;
  border: 1px solid var(--line-1); border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(93,224,230,.04), transparent 26%),
    var(--bg-1);
  overflow: hidden;
  box-shadow: var(--e-2);
}
.sec--alt .console { background: linear-gradient(180deg, rgba(93,224,230,.04), transparent 26%), var(--bg-2); }

/* 机房网格底纹 */
.console::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-0) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-0) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(130% 88% at 50% 0%, #000 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(130% 88% at 50% 0%, #000 0%, transparent 70%);
}

/* ── 顶部状态条 ── */
.console-bar {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding: var(--s-5) var(--s-8);
  border-bottom: 1px solid var(--line-1);
  background: rgba(10,14,14,.34);
}
.console-live {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--text-sm); font-weight: 500; color: var(--fg-1);
}
.console-meta { font-size: 10px; letter-spacing: var(--tracking-widest); color: var(--fg-3); }

/* 呼吸状态灯 */
.pulse {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--accent);
  animation: pulseRing 2.4s var(--ease-out) infinite;
}
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(63,174,123,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(63,174,123,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,174,123,0); }
}

/* ── 机架单元 ── */
.rack {
  position: relative;
  display: grid; grid-template-columns: 52px 1fr auto;
  align-items: start; gap: var(--s-6);
  padding: 28px var(--s-8);
  border-bottom: 1px solid var(--line-0);
  transition: background var(--d-base) var(--ease-out);
}
.rack:last-child { border-bottom: none; }
/* hover 左缘光条 */
.rack::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform var(--d-base) var(--ease-out);
}
.rack:hover { background: rgba(255,255,255,.024); }
.rack:hover::before { transform: scaleY(1); }

/* 图标既是标识，也是走线上的节点：不透明底色把走线遮断，
   线看起来才是「连到元件」而不是从图标中间穿过去。 */
.rack-icon {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 14px;
  border: 1px solid var(--line-1);
  background: var(--ink-800);
  color: var(--accent);
  transition: border-color var(--d-base) var(--ease-out),
              box-shadow var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.rack-icon svg { width: 21px; height: 21px; }
.rack:hover .rack-icon {
  border-color: var(--line-accent);
  box-shadow: 0 0 22px rgba(63,174,123,.22);
  transform: translateY(-2px);
}

.rack-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.rack-head h3 {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: 700; color: var(--fg-0); letter-spacing: var(--tracking-tight);
}
.rack-badge {
  padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-accent);
  background: var(--accent-soft);
  font-size: 11px; letter-spacing: .04em; color: var(--accent);
}
.rack-badge--base {
  border-color: rgba(93,224,230,.32); background: var(--signal-soft); color: var(--signal);
}
.rack-en {
  margin-top: 7px; font-size: 10px;
  letter-spacing: var(--tracking-widest); color: var(--fg-3);
}
.rack-desc {
  margin-top: var(--s-4); max-width: 620px;
  font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--fg-2);
}

/* 右列：状态 + 技术栈 */
.rack-side {
  display: flex; flex-direction: column; align-items: flex-end; gap: 9px;
  text-align: right; padding-top: 4px;
}
.rack-status {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 13px 5px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-1); background: rgba(10,14,14,.4);
  font-size: 11px; color: var(--fg-2); white-space: nowrap;
}
.rack-stack { font-size: 10px; letter-spacing: .05em; color: var(--fg-3); white-space: nowrap; }

/* ── 旗舰单元 ── */
.rack--flagship { background: linear-gradient(100deg, rgba(63,174,123,.055), transparent 56%); }
.rack--flagship .rack-head h3 { font-size: var(--text-2xl); }
.rack--flagship .rack-icon {
  width: 60px; height: 60px; border-radius: 16px;
  border-color: var(--line-accent);
  background: linear-gradient(150deg, rgba(63,174,123,.14), transparent), var(--ink-800);
}
.rack--flagship .rack-icon svg { width: 25px; height: 25px; }
.rack--flagship { grid-template-columns: 60px 1fr auto; }

/* 流程链 */
.rack-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  margin-top: var(--s-6);
}
.rack-flow li {
  position: relative;
  padding: 6px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line-1); background: rgba(10,14,14,.42);
  font-size: var(--text-xs); letter-spacing: .04em; color: var(--fg-1);
  transition: border-color var(--d-short) var(--ease-out), color var(--d-short) var(--ease-out);
}
.rack--flagship:hover .rack-flow li { border-color: rgba(63,174,123,.28); color: var(--fg-0); }
.rack-flow li + li::before {
  content: ''; position: absolute; left: -9px; top: 50%;
  width: 9px; height: 1px; background: var(--line-2);
}

/* ── 走线：串起创作工具，末端拐进资产库 ── */
.rack-line { position: relative; }
.rack-line::before {
  content: ''; position: absolute; left: 58px; top: 0; bottom: -1px; width: 1px;
  background: linear-gradient(180deg, var(--accent), var(--signal));
  opacity: .4;
}
/* 走线末端箭头，指向下方的资产库 */
.rack-line::after {
  content: ''; position: absolute; left: 55px; bottom: -8px;
  width: 7px; height: 7px;
  border-right: 1px solid var(--signal); border-bottom: 1px solid var(--signal);
  transform: rotate(45deg); opacity: .75;
}

/* ── 数据底座 ── */
.rack--base {
  background: linear-gradient(100deg, rgba(93,224,230,.075), transparent 58%);
  border-top: 1px solid var(--line-1);
  grid-template-columns: 60px 1fr auto;
}
.rack--base::before { background: var(--signal); }
.rack--base .rack-head h3 { font-size: var(--text-2xl); }
.rack--base .rack-icon {
  width: 60px; height: 60px; border-radius: 16px;
  color: var(--signal);
  border-color: rgba(93,224,230,.28);
  background: linear-gradient(150deg, rgba(93,224,230,.13), transparent), var(--ink-800);
}
.rack--base .rack-icon svg { width: 25px; height: 25px; }
.rack--base:hover .rack-icon {
  border-color: rgba(93,224,230,.5);
  box-shadow: 0 0 22px rgba(93,224,230,.22);
}
.rack--base .pulse { background: var(--signal); animation-name: pulseRingCyan; }
@keyframes pulseRingCyan {
  0%   { box-shadow: 0 0 0 0 rgba(93,224,230,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(93,224,230,0); }
  100% { box-shadow: 0 0 0 0 rgba(93,224,230,0); }
}
.rack-counters {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8);
  margin-top: var(--s-6);
}
.rack-counters span {
  display: flex; align-items: baseline; gap: 6px;
  font-size: var(--text-xs); letter-spacing: .04em; color: var(--fg-3);
}
.rack-counters b {
  font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 500;
  color: var(--signal); letter-spacing: -.03em;
}

/* ── 其余常驻服务 ── */
.console-rest {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6);
  padding: var(--s-6) var(--s-8);
  border-top: 1px solid var(--line-1);
  background: rgba(10,14,14,.28);
}
.console-rest-label { font-size: 10px; letter-spacing: var(--tracking-widest); color: var(--fg-3); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3); }
.chip-row li {
  padding: 6px 15px; border-radius: var(--r-pill);
  border: 1px solid var(--line-1);
  font-size: var(--text-xs); color: var(--fg-2);
  transition: border-color var(--d-short) var(--ease-out),
              color var(--d-short) var(--ease-out),
              transform var(--d-short) var(--ease-out);
}
.chip-row li:hover {
  border-color: var(--line-accent); color: var(--fg-0);
  transform: translateY(-2px);
}

.tool-more {
  margin-top: var(--s-8); max-width: 760px;
  font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--fg-3);
}

/* 机架错峰进场 */
.console.in .rack { animation: fade-rise .7s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms + 120ms); }

@media (max-width: 900px) {
  .console { border-radius: 16px; }
  .console-bar { padding: var(--s-4) var(--s-5); }
  .rack,
  .rack--flagship,
  .rack--base { grid-template-columns: 44px 1fr; gap: var(--s-4); padding: var(--s-6) var(--s-5); }
  .rack-icon,
  .rack--flagship .rack-icon,
  .rack--base .rack-icon { width: 44px; height: 44px; border-radius: 12px; }
  .rack-icon svg,
  .rack--flagship .rack-icon svg,
  .rack--base .rack-icon svg { width: 19px; height: 19px; }
  .rack--flagship .rack-head h3,
  .rack--base .rack-head h3 { font-size: var(--text-xl); }
  .rack-side {
    grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start;
    flex-wrap: wrap; gap: var(--s-3); text-align: left; padding-top: 0;
  }
  .rack-line::before { left: 42px; }
  .rack-line::after { left: 39px; }
  .console-rest { padding: var(--s-5); }
}

@media (prefers-reduced-motion: reduce) {
  .pulse { animation: none; }
  .console.in .rack { animation: none; }
}

/* ── 04 关于 ──────────────────────────────────────────── */
.pillars {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-8) var(--s-6);
}
.pillar { position: relative; padding-top: var(--s-6); border-top: 1px solid var(--line-1); }
.pillar-no { font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--accent); }
.pillar h3 {
  margin-top: var(--s-3);
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: var(--fg-0);
}
.pillar p { margin-top: var(--s-3); font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--fg-2); }

/* ── 05 加入我们 ──────────────────────────────────────
   五个岗位在宽屏并成一行，和能力区的五步流程同一个节奏。 */
.jobs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: var(--s-5);
}
.job {
  display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6);
  border: 1px solid var(--line-1); border-radius: var(--r-3);
  background: var(--bg-1);
  transition: border-color var(--d-base) var(--ease-out),
              transform var(--d-base) var(--ease-out);
}
.job:hover { border-color: var(--line-2); transform: translateY(-4px); }
.job-en { font-size: 10px; letter-spacing: var(--tracking-wide); color: var(--accent); }
.job h3 {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: var(--fg-0); letter-spacing: var(--tracking-tight);
}
.job-desc { font-size: var(--text-sm); line-height: var(--lh-relaxed); color: var(--fg-2); }
.job-tags {
  margin-top: auto; padding-top: var(--s-4);
  display: flex; flex-wrap: wrap; gap: 8px;
}
.job-tags li {
  padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-0);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .04em; color: var(--fg-3);
}

.job-foot {
  margin-top: var(--s-8);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-5);
  padding-top: var(--s-6); border-top: 1px solid var(--line-0);
}
.job-foot p {
  max-width: 640px; font-size: var(--text-sm);
  line-height: var(--lh-relaxed); color: var(--fg-3);
}
.job-foot b { color: var(--fg-1); font-weight: 500; }

/* 待填写占位：醒目但不破坏版式 */
.tbd {
  color: var(--warning) !important;
  border-bottom: 1px dashed rgba(224,178,85,.5);
  padding-bottom: 1px; cursor: help;
}
.tbd::after {
  content: ' ✎'; font-size: .78em; opacity: .7;
}

/* ── 页脚 ─────────────────────────────────────────────── */
.foot {
  position: relative;
  padding: clamp(96px, 12vw, 150px) clamp(20px, 5vw, 40px) 40px;
  background: var(--bg-0);
  border-top: 1px solid var(--line-0);
  overflow: hidden;
}
.foot::before {
  content: ''; position: absolute; left: 50%; top: -30%;
  width: min(900px, 90vw); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(63,174,123,.09), transparent 62%);
  pointer-events: none;
}
.foot-cta { position: relative; max-width: 900px; }
.foot-title {
  margin-top: var(--s-5);
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(30px, 5vw, 64px); line-height: 1.08;
  letter-spacing: var(--tracking-tight); color: var(--fg-0);
  text-wrap: balance;
}
.foot-lede { margin-top: var(--s-6); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--fg-2); }

.foot-contacts {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-5);
}
.contact-item {
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--s-6);
  border: 1px solid var(--line-0); border-radius: var(--r-3);
  background: var(--bg-1);
  transition: border-color var(--d-base) var(--ease-out);
}
.contact-item:hover { border-color: var(--line-2); }
.contact-k { font-size: 10px; letter-spacing: var(--tracking-widest); color: var(--fg-3); }
.contact-v { font-size: var(--text-md); color: var(--fg-0); }

.foot-bar {
  position: relative;
  margin-top: clamp(72px, 9vw, 120px); padding-top: var(--s-6);
  border-top: 1px solid var(--line-0);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.foot-brand { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); color: var(--fg-2); }
.foot-brand img { opacity: .8; }
.foot-legal { font-size: var(--text-xs); letter-spacing: .04em; color: var(--fg-3); }
.foot-legal a { color: inherit; text-decoration: none; transition: color var(--d-short) var(--ease-out); }
.foot-legal a:hover { color: var(--fg-2); }

/* ── 动效 ─────────────────────────────────────────────── */
@keyframes fade-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-rise { animation: fade-rise .8s var(--ease-out) both; }
.fade-rise.d1 { animation-delay: .16s; }
.fade-rise.d2 { animation-delay: .32s; }
.fade-rise.d3 { animation-delay: .48s; }
.fade-rise.d4 { animation-delay: .68s; }

.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--d-cinema) var(--ease-out), transform var(--d-cinema) var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-rise, .hero-video { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-line::after { animation: none; }
}