/* 整点信息 · 站点样式
   设计 token 集中在 :root。换配色只改下面这几行：
   --brand / --brand-deep / --brand-soft 是主色三档，--accent 是暖砂点缀色，
   --sand 是交替区块的暖底。改完刷新即可，不用动任何页面代码。 */

:root {
  --ink: #000000;
  --ink-2: rgba(0, 0, 0, .64);
  --ink-3: rgba(0, 0, 0, .52);
  --line: #d0d0d0;
  --line-2: #b4b4b4;
  --bg: #ffffff;
  --bg-2: #ffffff;
  --sand: #000000;
  --brand: #105df1;
  --brand-deep: #0b46bb;
  --brand-soft: #e8eefc;
  --accent: #105df1;
  --radius: 12px;
  --radius-sm: 8px;
  --wrap: 1160px;
  --font: system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.75 var(--font);
  -webkit-font-smoothing: antialiased;
  /* 安全网：用 clip，不要用 hidden —— hidden 会把 body 变成滚动容器，废掉 sticky 顶栏 */
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: var(--brand); text-decoration: none; }
::selection { background: #105df1; color: #fff; text-shadow: none; }
a:hover { text-decoration: underline; }
button { font: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.wrap--narrow { max-width: 820px; }

.sec { padding: 76px 0; }
.sec--alt { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec--tight { padding: 52px 0; }
.sec-head { max-width: 760px; margin: 0 0 36px; }
.sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }

.eyebrow {
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--accent);
  margin: 0 0 12px;
}

h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.28; letter-spacing: -.01em; margin: 0 0 16px; font-weight: 500; }
h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; margin: 0 0 10px; font-weight: 500; }
h3 { font-size: 17px; margin: 0 0 8px; font-weight: 500; }
h4 { font-size: 15px; margin: 0 0 6px; font-weight: 500; }
p  { margin: 0 0 12px; }
.sub { color: var(--ink-2); font-size: 16px; line-height: 1.85; }
.muted { color: var(--ink-3); font-size: 13.5px; }
.small { font-size: 13.5px; color: var(--ink-2); }

/* ============ 顶栏 ============ */
.nav-bar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 20px;
  height: 66px; display: flex; align-items: center; gap: 30px;
  min-width: 0;
}
.logo { font-size: 17px; font-weight: 500; color: var(--ink); white-space: nowrap; min-width: 0; }
.logo:hover { text-decoration: none; }
.logo i { font-style: normal; color: var(--brand); }
.logo span { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; line-height: 1; margin-top: 2px; letter-spacing: .04em; }
.nav-links { display: flex; gap: 4px; margin-left: auto; }
.nav-links a {
  color: var(--ink-2); font-size: 14.5px; padding: 8px 12px; border-radius: 6px;
}
.nav-links a:hover { background: var(--bg-2); color: var(--ink); text-decoration: none; }
.nav-links a.on { color: var(--brand); }
.nav-cta { display: flex; align-items: center; gap: 10px; }
.nav-tel { font-size: 14.5px; color: var(--ink); white-space: nowrap; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--line); border-radius: 6px;
  width: 40px; height: 38px; cursor: pointer; color: var(--ink);
}

/* ============ 按钮 ============ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: #fff; color: var(--ink);
  font-size: 15px; cursor: pointer; white-space: nowrap;
}
.btn:hover { border-color: var(--ink-3); text-decoration: none; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn--light { background: #fff; border-color: #fff; color: var(--brand); }
.btn--sm { height: 38px; padding: 0 14px; font-size: 14px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ============ 首屏 ============ */
.hero { padding: 68px 0 60px; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.hero-facts { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.hero-facts li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15px; }
.hero-facts li::before {
  content: ""; position: absolute; left: 4px; top: .72em;
  width: 8px; height: 8px; border-radius: 50%; background: var(--brand-soft); border: 1.5px solid var(--brand);
}
.hero-mock {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2);
  padding: 18px; box-shadow: 0 12px 32px rgba(20,22,26,.06);
}
.hero-mock .bar { display: flex; gap: 6px; margin-bottom: 14px; }
.hero-mock .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-2); font-style: normal; }
.hero-mock .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; }
.hero-mock .row { display: flex; align-items: flex-end; gap: 10px; height: 92px; margin: 10px 0 6px; }
.hero-mock .row b { flex: 1; background: var(--brand-soft); border-radius: 4px 4px 0 0; display: block; }
.hero-mock .row b.hi { background: var(--brand); }
.hero-mock .legend { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-3); }
.hero-mock .kv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.hero-mock .kv div { background: var(--bg-2); border-radius: 6px; padding: 8px 10px; }
.hero-mock .kv em { font-style: normal; display: block; font-size: 11.5px; color: var(--ink-3); }
.hero-mock .kv b { font-size: 17px; font-weight: 500; }

/* 首屏配图：照片 + 左下角叠一张数据小卡 */
.hero-photo { position: relative; }
.hero-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.hero-photo .caption {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  background: rgba(12,32,30,.72); color: #f2f2f2;
  font-size: 12px; padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.hero-photo .overlap {
  position: absolute; left: -22px; bottom: -22px; z-index: 3;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  box-shadow: 0 10px 28px rgba(16,32,30,.10);
}
.hero-photo .overlap em { font-style: normal; display: block; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.hero-photo .overlap b { font-size: 18px; font-weight: 500; color: var(--brand); }

/* ============ 数据带 ============ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.stat { background: #fff; padding: 20px 22px; }
.stat b { display: block; font-size: 28px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.stat span { color: var(--ink-2); font-size: 13.5px; }

/* ============ 卡片 ============ */
.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.card {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 22px; display: flex; flex-direction: column;
}
.card:hover { border-color: var(--line-2); }
.card .tag {
  display: inline-block; font-size: 12px; color: var(--brand); background: var(--brand-soft);
  border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; align-self: flex-start;
}
.card .foot { margin-top: auto; padding-top: 14px; font-size: 13.5px; color: var(--ink-2); border-top: 1px dashed var(--line); }

/* 案例卡 */
.case-card { padding: 0; overflow: hidden; }
.case-card .thumb {
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: rgba(0,0,0,.34); letter-spacing: .04em;
  background: linear-gradient(135deg, #f2f2f2 0%, #f2f2f2 55%, #f2f2f2 100%);
  border-bottom: 1px solid var(--line);
}
/* 真实配图：统一 16:10 裁切，避免每张原图比例不同把卡片撑歪 */
.shot {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block;
  border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.shot--wide { aspect-ratio: 16 / 9; }
.case-card .body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.case-card h3 { font-size: 16.5px; line-height: 1.5; }
.case-card h3 a { color: var(--ink); }
.case-card h3 a:hover { color: var(--brand); text-decoration: none; }
.case-card dl { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-2); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; }
.case-card dt { color: var(--ink-3); white-space: nowrap; }
.case-card dd { margin: 0; }
.case-card .result { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }

/* 行业网格 */
.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ind {
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff;
  padding: 16px; text-align: center; color: var(--ink); font-size: 14.5px;
}
.ind:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.ind em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 4px; }

/* 方案 / 价格卡 */
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; background: #fff; display: flex; flex-direction: column; }
.plan--featured { border: 2px solid var(--brand); }
.plan .price { font-size: 26px; font-weight: 500; margin: 8px 0 2px; }
.plan .price small { font-size: 13px; color: var(--ink-3); font-weight: 400; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 0; font-size: 14px; color: var(--ink-2); }
.plan ul li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.plan ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--brand-soft); border: 1px solid var(--brand); }
.plan .btn { margin-top: auto; justify-content: center; }
.badge { font-size: 12px; background: #f2f2f2; color: var(--accent); border-radius: 999px; padding: 2px 10px; align-self: flex-start; }

/* 行业图文卡 */
.ind-card { padding: 0; overflow: hidden; }
.ind-card .body { padding: 18px 20px 20px; }
.ind-card h3 { margin-top: 2px; }

/* 流程 */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; counter-reset: s; }
.step { border-top: 2px solid var(--brand); padding-top: 14px; }
.step em { font-style: normal; font-size: 13px; color: var(--brand); display: block; margin-bottom: 6px; }

/* 保障条 */
.assure { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.assure div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14px; color: var(--ink-2); }
.assure b { display: block; color: var(--ink); font-weight: 500; margin-bottom: 2px; }

/* 表格 */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
table.cmp th, table.cmp td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cmp thead th { background: var(--bg-2); font-weight: 500; color: var(--ink); }
table.cmp td:first-child { color: var(--ink-2); width: 130px; }
table.cmp tr:last-child td { border-bottom: 0; }

/* FAQ */
.faq details { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq details summary { cursor: pointer; font-size: 15.5px; font-weight: 500; }
.faq details p { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; }

/* 资讯 */
.news-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.news-item time { color: var(--ink-3); font-size: 13px; white-space: nowrap; padding-top: 3px; }
.news-item h3 { font-size: 15.5px; margin: 0 0 4px; }
.news-item p { margin: 0; font-size: 14px; color: var(--ink-2); }

/* CTA 带 */
.cta-band { background: var(--brand); color: #fff; border-radius: var(--radius); padding: 40px 36px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cta-band h2 { color: #fff; margin: 0 0 6px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.85); font-size: 15px; }

/* 文章正文 */
.article { font-size: 16px; }
.article h2 { margin-top: 36px; }
.article ul { padding-left: 22px; color: var(--ink-2); }
.article li { margin: 6px 0; }
.abstract { background: var(--bg-2); border-left: 3px solid var(--brand); border-radius: var(--radius-sm); padding: 16px 18px; margin: 0 0 24px; font-size: 15.5px; }
.crumb { font-size: 13px; color: var(--ink-3); margin: 22px 0 12px; }

/* 表单 */
.form { display: grid; gap: 14px; }
.form label { font-size: 14px; color: var(--ink-2); display: block; margin-bottom: 6px; }
.form input, .form select, .form textarea {
  width: 100%; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 12px; font: inherit; font-size: 15px; background: #fff; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand); }

/* 页脚：深青黑，与主色同族 */
footer.site { background: #000000; color: rgba(255,255,255,.6); margin-top: 0; padding: 52px 0 30px; font-size: 14px; }
footer.site a { color: #ffffff; }
footer.site .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
footer.site h4 { color: #fff; font-size: 14.5px; margin-bottom: 12px; }
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: 8px; }
footer.site .bottom { border-top: 1px solid #223230; margin-top: 32px; padding-top: 18px; font-size: 13px; color: rgba(255,255,255,.42); display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* 滚动淡入 */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* 占位提示条 */
.dev-note {
  background: #fff8e6; border: 1px solid #e0b64a; color: #6b4b00;
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin: 20px 0 0;
}

/* 筛选 */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filters button {
  border: 1px solid var(--line-2); background: #fff; color: var(--ink-2);
  border-radius: 999px; padding: 7px 16px; font-size: 14px; cursor: pointer;
}
.filters button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 交付模块矩阵：小方块里放模块名的首字，不用外链图标 */
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.mod { border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; padding: 16px; }
.mod .ico {
  width: 30px; height: 30px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-deep);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 500;
  margin-bottom: 10px;
}
.mod h4 { margin: 0 0 4px; font-size: 14.5px; }
.mod p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }
.mod .tier {
  display: inline-block; margin-top: 10px; font-size: 11.5px; color: var(--accent);
  background: #f2f2f2; border-radius: 999px; padding: 1px 8px;
}

/* 案例墙：密排小卡，比大卡片更像"客户名录" */
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.wall a {
  display: block; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; padding: 14px 16px; color: var(--ink);
}
.wall a:hover { border-color: var(--brand); text-decoration: none; }
.wall span { font-size: 11.5px; color: var(--brand); background: var(--brand-soft); border-radius: 999px; padding: 2px 9px; }
.wall b { display: block; font-size: 14.5px; font-weight: 500; margin: 8px 0 4px; }
.wall p { margin: 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.65; }

/* 知识库 */
.kb-toc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.kb-toc a {
  font-size: 13.5px; color: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 6px 14px;
}
.kb-toc a:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.kb-cat { font-size: 13px; letter-spacing: .1em; color: var(--accent); margin: 12px 0 0; }
.kb-item { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 26px; }
.kb-item h2 { font-size: 20px; margin: 0 0 4px; }

/* ============ 响应式 ============ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo .overlap { position: static; margin-top: 14px; }
  .sec { padding: 56px 0; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .nav-inner { height: 58px; gap: 12px; }
  .nav-toggle { display: block; margin-left: auto; }
  .nav-links {
    display: none; position: absolute; left: 0; right: 0; top: 58px;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; padding: 8px 20px 16px; gap: 0; margin: 0;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav-cta .nav-tel { display: none; }
  .nav-cta .btn { padding: 0 12px; font-size: 14px; }
  .cta-band { padding: 28px 22px; }
  footer.site .cols { grid-template-columns: 1fr; }
  .news-item { flex-direction: column; gap: 4px; }
}

/* 数据带在窄屏是两列，5 项最后会剩一个空格：让最后一项横跨两列，看着才像设计过 */
@media (max-width: 720px) {
  .stat:last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 430px) {
  .logo span { display: none; }
  .nav-inner { gap: 10px; padding: 0 14px; }
  .wrap { padding: 0 14px; }
  .nav-cta .btn { padding: 0 10px; font-size: 13.5px; }
  .hero { padding: 44px 0 40px; }
}

/* ==========================================================================
   动效与排版升级层
   设计原则：靠字号对比、字距、留白节奏和运动曲线撑气场，不堆特效。
   ========================================================================== */

:root {
  --font-serif: "Times New Roman", "Songti SC", Georgia, serif;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 66px;
  --hero-ink: #000000;
}
@media (max-width: 720px) { :root { --nav-h: 58px; } }

/* ---------- 顶栏：压在深色首屏上时透明，滚动后变实体 ---------- */
.nav-bar.is-transparent { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.nav-bar.is-transparent .logo { color: #ffffff; }
.nav-bar.is-transparent .logo span { color: rgba(244,248,247,.55); }
.nav-bar.is-transparent .logo i { color: #105df1; }
.nav-bar.is-transparent .nav-links a { color: rgba(244,248,247,.74); }
.nav-bar.is-transparent .nav-links a:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-bar.is-transparent .nav-toggle { color: #fff; border-color: rgba(255,255,255,.32); }
.nav-bar.is-transparent .nav-cta .nav-tel { color: rgba(244,248,247,.7); }
.nav-bar.is-transparent .btn--primary { background: #ffffff; border-color: #ffffff; color: #000000; }

/* ---------- 首屏 ---------- */
.hero-x {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: calc(var(--nav-h) * -1); padding-top: var(--nav-h);
  min-height: min(94vh, 920px);
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--hero-ink); color: #ffffff;
}
.hero-x .layer-media { position: absolute; inset: 0; z-index: 0; }
.hero-x .layer-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 58% 45%; opacity: .5;
  transform: scale(1.08); animation: heroZoom 1.8s var(--ease-out) .1s forwards;
  will-change: transform;
}
@keyframes heroZoom { to { transform: scale(1); } }
.hero-x .layer-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(110% 70% at 82% 6%, rgba(15,118,110,.42), transparent 62%),
    linear-gradient(180deg, rgba(10,20,19,.66) 0%, rgba(10,20,19,.5) 34%, rgba(10,20,19,.95) 100%);
}
#heroField { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: block; }
.hero-x .wrap, .hero-x .marquee { position: relative; z-index: 3; }
/* flex 列里的 .wrap 带 margin:0 auto 会按内容宽度收缩，必须显式铺满，否则窄屏被居中挤出视口 */
.hero-x .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; }
.hero-x-inner { width: 100%; padding: 96px 20px 40px; }

.kicker {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .2em;
  text-transform: uppercase; color: #105df1; display: flex; align-items: center; gap: 12px;
}
.kicker::after { content: ""; flex: 0 0 46px; height: 1px; background: rgba(255,255,255,.5); }

.hero-title {
  font-size: clamp(34px, 6.4vw, 88px); line-height: 1.05; letter-spacing: -.028em;
  font-weight: 500; margin: 20px 0 0; max-width: 16em;
}
.hero-title .line { display: block; overflow: hidden; padding-bottom: .06em; }
.hero-title .line-in {
  display: block; transform: translateY(112%);
  animation: lineUp 1.1s var(--ease-out) forwards;
}
.hero-title .line:nth-child(1) .line-in { animation-delay: .18s; }
.hero-title .line:nth-child(2) .line-in { animation-delay: .30s; }
.hero-title .line:nth-child(3) .line-in { animation-delay: .42s; }
@keyframes lineUp { to { transform: translateY(0); } }

.hero-title em { font-style: normal; position: relative; color: #105df1; }
.hero-title em::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .12em; height: 2px;
  background: #105df1; transform: scaleX(0); transform-origin: left;
  animation: lineGrow .9s var(--ease-out) 1.15s forwards;
}
@keyframes lineGrow { to { transform: scaleX(1); } }

.hero-x-bottom {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end;
  margin-top: 38px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.16);
  opacity: 0; animation: fadeUp .9s var(--ease-out) .9s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.hero-x-lead { margin: 0; color: rgba(244,248,247,.78); font-size: 15.5px; line-height: 1.85; max-width: 54ch; }
.hero-x-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-x .btn { border-color: rgba(255,255,255,.26); background: transparent; color: #ffffff; }
.hero-x .btn:hover { border-color: #fff; }
.hero-x .btn--primary { background: #ffffff; border-color: #ffffff; color: #000000; }
.hero-x .btn--primary:hover { background: #105df1; border-color: #105df1; color: #06211d; }

/* ---------- 跑马灯 ---------- */
.marquee {
  overflow: hidden; border-top: 1px solid rgba(255,255,255,.14);
  padding: 13px 0; background: rgba(10,20,19,.5);
}
.marquee-track { display: flex; width: max-content; animation: marquee 34s linear infinite; }
.marquee-track span {
  font-family: var(--font-serif); font-size: 13px; letter-spacing: .16em;
  color: rgba(244,248,247,.58); padding: 0 18px; white-space: nowrap;
}
.marquee-track i { font-style: normal; color: #105df1; margin-right: 10px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- 滚动进场 ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .85s var(--ease-out), transform .85s var(--ease-out);
  transition-delay: var(--d, 0s);
}
[data-reveal="mask"] {
  opacity: 1; transform: none; clip-path: inset(0 0 102% 0);
  transition: clip-path 1.1s var(--ease-out); transition-delay: var(--d, 0s);
}
[data-reveal="scale"] { opacity: 0; transform: scale(.945); }
[data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }

/* ---------- 自定义光标与进度条 ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: none;
  z-index: 9999; mix-blend-mode: difference; opacity: 0;
}
.cursor {
  position: fixed; left: 0; top: 0; z-index: 9999;
  pointer-events: none; mix-blend-mode: difference; opacity: 0;
}
.cursor-on .cursor { opacity: 1; }
.cspin { position: relative; width: 0; height: 0; animation: cspin 9s linear infinite; }
.cursor.is-hover .cspin { animation-duration: 3.5s; }
.cz { position: relative; transition: transform .3s var(--ease-out); }
.cursor.is-hover .cz { transform: scale(1.45); }
.cursor.is-down .cz { transform: scale(.8); }
.cursor i { position: absolute; background: #fff; }

/* 中心点 */
.cursor .cdot { width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; }

/* 主环 */
.cursor .cring { width: 26px; height: 26px; margin: -13px 0 0 -13px;
  border: 1px solid #fff; border-radius: 50%; background: none; }

/* 悬停浮现的反向虚线圈 */
.cursor .cring.c2 { width: 36px; height: 36px; margin: -18px 0 0 -18px;
  border-style: dashed; opacity: 0; transition: opacity .25s;
  animation: cspin 5s linear infinite reverse; }
.cursor.is-hover .cring.c2 { opacity: .9; }

/* 四个刻度：贴在环缘，随整体旋转 */
.cursor .ct { width: 1.5px; height: 5px; left: -0.75px; top: -17px;
  transform-origin: 0.75px 17px; }
.cursor .ct.t { transform: rotate(0deg); }
.cursor .ct.r { transform: rotate(90deg); }
.cursor .ct.b { transform: rotate(180deg); }
.cursor .ct.l { transform: rotate(270deg); }

@keyframes cspin { to { transform: rotate(360deg); } }
@media (hover: none), (pointer: coarse) { .cursor-dot, .cursor-ring { display: none; } }

.scroll-progress {
  position: fixed; left: 0; top: 0; height: 2px; width: 100%; z-index: 9998;
  background: linear-gradient(90deg, var(--brand), #105df1);
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}

/* ---------- 卡片与图片的悬停 ---------- */
.card, .mod, .plan, .wall a, .ind {
  transition: transform .5s var(--ease-out), border-color .35s, box-shadow .5s var(--ease-out);
}
.card:hover, .mod:hover, .plan:hover, .wall a:hover, .ind:hover {
  transform: translateY(-5px); box-shadow: 0 20px 44px rgba(12, 32, 30, .09);
}
.case-card img.shot { transition: transform 1s var(--ease-out); }
.case-card:hover img.shot { transform: scale(1.045); }

/* ---------- 大字宣言段 ---------- */
.statement { background: var(--hero-ink); color: #ffffff; padding: 104px 0; overflow: hidden; }
.statement .kicker { color: #105df1; }
.statement .kicker::after { background: rgba(255,255,255,.4); }
.statement p.big {
  font-size: clamp(28px, 4.6vw, 62px); line-height: 1.24; letter-spacing: -.03em;
  font-weight: 500; margin: 22px 0 0; max-width: 18em;
}
.statement p.big span { color: rgba(244,248,247,.34); }
.statement .note { margin: 26px 0 0; color: rgba(244,248,247,.6); font-size: 14.5px; max-width: 46ch; }

/* ---------- 章节编号 ---------- */
.sec-head .num {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .2em;
  color: var(--ink-3); margin-left: 10px;
}

/* ---------- 大屏排版微调 ---------- */
@media (min-width: 1080px) {
  .sec-head h2 { font-size: clamp(28px, 2.9vw, 42px); letter-spacing: -.022em; line-height: 1.2; }
  .stat b { font-size: 34px; letter-spacing: -.02em; }
}

/* ---------- 小屏 ---------- */
@media (max-width: 960px) {
  .hero-x { min-height: auto; }
  .hero-x-inner { padding: 76px 20px 32px; }
  .hero-x-bottom { grid-template-columns: 1fr; gap: 20px; align-items: start; }
  .hero-title { max-width: none; }
  .statement { padding: 70px 0; }
}
@media (max-width: 430px) {
  .hero-x-inner { padding: 54px 14px 26px; }
  .marquee-track span { font-size: 12px; padding: 0 12px; }
}


/* ==========================================================================
   第二轮：编辑感版式（参照 burocratik 的语法：全是字、索引列表、编号宣言）
   ========================================================================== */

/* ---------- 开场遮罩：纯 CSS 定时退场，即使 JS 失效也不会挡内容 ---------- */
.veil {
  position: fixed; inset: 0; z-index: 10000; background: var(--hero-ink);
  display: flex; align-items: center; justify-content: center; gap: 18px;
  color: #ffffff; pointer-events: none;
  animation: veilOut .7s cubic-bezier(.76, 0, .24, 1) .75s forwards;
}
.veil span { font-size: 15px; letter-spacing: .3em; opacity: 0; animation: veilIn .5s ease .05s forwards; }
.veil i { width: 46px; height: 1px; background: #105df1; display: block; transform-origin: left; transform: scaleX(0); animation: lineGrow .6s var(--ease-out) .1s forwards; }
@keyframes veilIn { to { opacity: 1; } }
@keyframes veilOut { to { opacity: 0; visibility: hidden; } }

/* ---------- 首屏：纯排版版 ---------- */
.hero-x--type { background: #000000; justify-content: center; }
.hero-x--type .marquee { position: absolute; left: 0; right: 0; bottom: 0; }
.hero-x--type .hero-x-inner { padding-bottom: 96px; }

/* 主推案例：一张横图 + 一行说明 */
.feature { margin: 0 0 44px; }
.feature a { display: block; color: var(--ink); }
.feature .shotwrap { overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.feature img { width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; transition: transform 1.1s var(--ease-out); }
.feature a:hover img { transform: scale(1.02); }
.feature a:hover { text-decoration: none; }
.feature figcaption { display: flex; align-items: baseline; gap: 16px; padding-top: 14px; font-size: 14px; }
.feature .fnum { font-family: var(--font-serif); color: var(--ink-3); letter-spacing: .1em; }
.feature .fname { flex: 1; }
.feature .fmore { color: var(--brand); }
.hero-x--type::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: none;
}
.hero-x--type .hero-x-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) 196px; gap: 36px; align-items: end;
}
/* 桌面端每行锁死不断行：断字比缩小字号更难看得多 */
@media (min-width: 961px) {
  .hero-title .line-in { white-space: nowrap; }
}
.hero-x--type .hero-title { font-size: clamp(30px, 5.1vw, 74px); max-width: 15em; }
.hero-meta { border-left: 1px solid rgba(255,255,255,.16); padding-left: 20px; display: grid; gap: 16px; }
.hero-meta div { display: flex; align-items: baseline; gap: 8px; }
.hero-meta b {
  font-family: var(--font-serif); font-size: 30px; font-weight: 400; color: #fff; line-height: 1;
}
.hero-meta span { font-size: 12px; color: rgba(244,248,247,.55); letter-spacing: .04em; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.hero-chips span {
  font-size: 12px; letter-spacing: .06em; color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.34); border-radius: 999px; padding: 5px 12px;
  transform: rotate(-1.2deg);
}
.hero-chips span:nth-child(2) { transform: rotate(.8deg); }
.hero-chips span:nth-child(3) { transform: rotate(-.6deg); }

/* ---------- 索引列表：作品墙 / 行业墙 ---------- */
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list a {
  display: grid; grid-template-columns: 62px minmax(0, 1fr) 190px 96px;
  align-items: center; gap: 16px; padding: 20px 8px 20px 0; color: var(--ink);
  transition: color .35s, padding .4s var(--ease-out), background .35s;
}
.index-list a:hover { color: var(--brand); padding-left: 14px; text-decoration: none; }
.index-list .idx { font-family: var(--font-serif); font-size: 13px; color: var(--ink-3); letter-spacing: .1em; }
.index-list .name { font-size: clamp(19px, 2.1vw, 27px); letter-spacing: -.02em; line-height: 1.3; }
.index-list .meta { font-size: 13px; color: var(--ink-3); }
.index-list .year { font-family: var(--font-serif); font-size: 13px; color: var(--ink-3); text-align: right; }
.index-list--ind a { grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr); }
.index-list--ind .meta { text-align: right; }

/* 悬停预览图：跟着鼠标走 */
.peek {
  position: fixed; left: 0; top: 0; width: 300px; height: 200px; z-index: 9000;
  pointer-events: none; overflow: hidden; border-radius: 6px;
  opacity: 0; transition: opacity .3s ease; will-change: transform;
  box-shadow: 0 24px 60px rgba(7, 20, 18, .28);
}
.peek.is-on { opacity: 1; }
.peek img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 编号宣言 ---------- */
.manifesto { list-style: none; margin: 46px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.14); }
.manifesto li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px;
  padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.manifesto b { font-family: var(--font-serif); font-weight: 400; font-size: 15px; color: #105df1; letter-spacing: .1em; }
.manifesto p { margin: 0; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.7; color: rgba(244,248,247,.86); }

/* ---------- 章节大编号 ---------- */
.sec-head .eyebrow { font-size: 12.5px; }

@media (max-width: 960px) {
  .hero-x--type { justify-content: flex-end; }
  .hero-x--type .marquee { position: static; }
  .hero-x--type .hero-x-inner { grid-template-columns: 1fr; gap: 26px; align-items: start; padding-bottom: 32px; }
  .hero-meta { border-left: 0; padding-left: 0; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .hero-meta b { font-size: 24px; }
  .index-list a { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; row-gap: 4px; }
  .index-list .meta, .index-list .year { grid-column: 2; text-align: left; font-size: 12.5px; }
  .index-list .year { display: none; }
  .index-list--ind a { grid-template-columns: 42px minmax(0, 1fr); }
  .index-list--ind .meta { text-align: left; }
  .peek { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .veil { display: none; }
  .peek { display: none; }
}


/* ==========================================================================
   黑白方案：交替区块直接用纯黑反白，不用浅灰底（这是原站的节奏）
   ========================================================================== */
.sec--alt { background: #000; color: #fff; border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f; }
.sec--alt h2, .sec--alt h3, .sec--alt h4, .sec--alt .index-list a { color: #fff; }
.sec--alt .sub, .sec--alt .small, .sec--alt .muted, .sec--alt .sec-note, .sec--alt p { color: rgba(255,255,255,.62); }
.sec--alt .eyebrow { color: #fff; }
.sec--alt .eyebrow .num { color: rgba(255,255,255,.4); }
.sec--alt .card, .sec--alt .mod, .sec--alt .plan, .sec--alt .assure div, .sec--alt .ind {
  background: transparent; border-color: #262626; color: #fff;
}
.sec--alt .card:hover, .sec--alt .mod:hover, .sec--alt .plan:hover { box-shadow: none; border-color: #444; }
.sec--alt .card .foot { border-color: #262626; color: rgba(255,255,255,.62); }
.sec--alt .mod .ico { background: #141414; color: #fff; }
.sec--alt .mod .tier, .sec--alt .badge { background: #141414; color: rgba(255,255,255,.72); }
.sec--alt .index-list, .sec--alt .index-list li { border-color: #262626; }
.sec--alt .index-list .idx, .sec--alt .index-list .meta, .sec--alt .index-list .year { color: rgba(255,255,255,.5); }
.sec--alt .index-list a:hover { color: #105df1; }
.sec--alt .table-wrap { border-color: #262626; }
.sec--alt table.cmp th, .sec--alt table.cmp td { border-color: #262626; }
.sec--alt table.cmp thead th { background: #0d0d0d; color: #fff; }
.sec--alt table.cmp td:first-child { color: rgba(255,255,255,.58); }
.sec--alt .faq details { border-color: #262626; }
.sec--alt .faq details summary { color: #fff; }
.sec--alt .faq details p { color: rgba(255,255,255,.62); }
.sec--alt .news-item { border-color: #262626; }
.sec--alt .news-item h3 a { color: #fff; }
.sec--alt .btn { background: transparent; border-color: #3a3a3a; color: #fff; }
.sec--alt .btn:hover { border-color: #fff; }
.sec--alt .btn--primary { background: #fff; border-color: #fff; color: #000; }

/* 页脚同样是纯黑 */
footer.site { background: #000; color: rgba(255,255,255,.55); border-top: 1px solid #1f1f1f; }
footer.site .bottom { border-color: #262626; color: rgba(255,255,255,.4); }

/* 卡片缩略图占位改中性灰，不再带青绿 */
.case-card .thumb { background: #f2f2f2; }

/* ---------- 尊重系统设置 ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-x .layer-media img,
  .hero-title .line-in,
  .hero-title em::after,
  .hero-x-bottom,
  .marquee-track { animation: none !important; }
  .hero-title .line-in { transform: none; }
  .hero-title em::after { transform: scaleX(1); }
  .hero-x-bottom { opacity: 1; }
  [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  #heroField { display: none; }
}



/* ==========================================================================
   案例列表：标题 + 标签 pill + 右侧图片（照参考站的作品行）
   ========================================================================== */
.case-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.case-list li { border-bottom: 1px solid var(--line); }
.case-list a {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 288px;
  align-items: center; gap: 22px; padding: 16px 0; color: var(--ink);
  transition: color .3s;
}
.case-list a:hover { color: var(--brand); text-decoration: none; }
.case-list .idx { font-family: var(--font-serif); font-size: 12.5px; color: var(--ink-3); letter-spacing: .08em; }
.case-list .name-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; min-width: 0; }
.case-list .name { font-size: clamp(18px, 1.9vw, 25px); letter-spacing: -.022em; line-height: 1.3; }
.case-list .pills { display: flex; flex-wrap: wrap; gap: 6px; }
.case-list .pills i {
  font-style: normal; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  background: #000; color: #fff; padding: 4px 9px; border-radius: 2px; white-space: nowrap;
}
.case-list .more { font-size: 12px; color: var(--ink-3); letter-spacing: .12em; white-space: nowrap; }
.case-list .pic { overflow: hidden; border-radius: 2px; background: #f2f2f2; }
.case-list .pic img {
  width: 100%; height: 168px; object-fit: cover; display: block;
  transition: transform 1s var(--ease-out);
}
.case-list a:hover .pic img { transform: scale(1.05); }

@media (max-width: 1024px) {
  .case-list a { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 14px; padding: 18px 0; }
  .case-list .name-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .case-list .more { display: none; }
  .case-list .pic { grid-column: 1 / -1; margin-top: 8px; }
  .case-list .pic img { height: auto; aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   配色收口：回到 99% 黑白。#105df1 只出现在三个地方——
   选中文字、首屏那一个关键词、以及鼠标交互的瞬间。
   ========================================================================== */

a { color: inherit; }
a:hover { color: var(--brand); }

/* 按钮：默认纯黑；悬停才泛蓝 */
.btn--primary { background: #000; border-color: #000; color: #fff; }
.btn--primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 小标题与标签：去蓝 */
.eyebrow { color: var(--ink); letter-spacing: .14em; }
.eyebrow .num { color: var(--ink-3); }
.card .tag { background: #f2f2f2; color: var(--ink); }
.mod .ico { background: #000; color: #fff; }
.mod .tier { background: #f2f2f2; color: var(--ink-2); }
.badge { background: #f2f2f2; color: var(--ink); }
.plan--featured { border-color: #000; }
.plan ul li::before { background: #000; border-color: #000; }
.step { border-top-color: #000; }
.step em { color: var(--ink-2); }
.filters button.on { background: #000; border-color: #000; color: #fff; }
.filters button:hover { border-color: #000; color: #000; }
.index-list a:hover { color: var(--brand); }
.wall a span, .ind em { color: var(--ink-2); }
.wall span { background: #f2f2f2; color: var(--ink); }
.hero-title em { color: var(--brand); }

/* 深色区块内：主按钮反过来（白底黑字），悬停泛蓝 */
.sec--alt .btn--primary { background: #fff; border-color: #fff; color: #000; }
.sec--alt .btn--primary:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.sec--alt .eyebrow { color: #fff; }
.sec--alt .card .tag { background: #141414; color: #fff; }
.sec--alt .index-list a:hover { color: var(--brand); }

/* 页脚链接：白，悬停泛蓝 */
footer.site a { color: #fff; }
footer.site a:hover { color: var(--brand); }

/* 深色底上的小字：白/灰，不再用蓝（蓝只留给那一个关键词） */
.kicker, .statement .kicker { color: rgba(255,255,255,.55); }
.kicker::after, .statement .kicker::after { background: rgba(255,255,255,.3); }
.marquee-track i { color: rgba(255,255,255,.4); }
.manifesto b { color: rgba(255,255,255,.42); }
.veil i { background: #fff; }

/* ==========================================================================
   视觉站：不正经的那一层
   ========================================================================== */

/* ---------- 首屏：巨型字 + 旋转徽章 ---------- */
.hero--fun { min-height: 100svh; justify-content: center; padding-top: calc(var(--nav-h) + 60px); padding-bottom: 60px; }
.fun-kicker {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  font-family: var(--font-serif); font-size: 11.5px; letter-spacing: .24em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}
.fun-kicker b { font-weight: 400; color: #fff; }
.fun-title {
  /* 中文的汉字撑满字身框，行高低于 1 就会互相压住；西文才能压到 .9 */
  font-size: clamp(44px, 9.6vw, 146px); line-height: 1.04; letter-spacing: -.045em;
  font-weight: 500; margin: 20px 0 0; max-width: 12em;
}
.fun-title .w {
  display: inline-block; transition: transform .55s var(--ease-out), color .3s ease;
  will-change: transform;
}
.fun-title .w:hover { transform: translateY(-.13em) rotate(-4deg); color: var(--brand); }
.fun-title .out { color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.72); }
.fun-title .out:hover { color: transparent; -webkit-text-stroke-color: var(--brand); }
.fun-title .blue { color: var(--brand); }

.fun-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-top: 40px; flex-wrap: wrap; }
.fun-sub { max-width: 44ch; margin: 0; color: rgba(255,255,255,.62); font-size: clamp(14px, 1.2vw, 17px); line-height: 1.9; }
.fun-sub b { color: #fff; font-weight: 500; }
.fun-scroll {
  font-family: var(--font-serif); font-size: 11px; letter-spacing: .26em;
  color: rgba(255,255,255,.4); white-space: nowrap;
}
.fun-scroll i { display: inline-block; margin-left: 10px; animation: bob 1.6s ease-in-out infinite; font-style: normal; }
@keyframes bob { 50% { transform: translateY(5px); } }

/* 旋转徽章：贴在首屏右下，纯 SVG 文字沿圆排布 */
.fun-badge {
  position: absolute; right: 5vw; bottom: 9vh; width: 124px; height: 124px; z-index: 4;
}
.fun-badge svg { width: 100%; height: 100%; animation: spin 22s linear infinite; }
.fun-badge text { fill: rgba(255,255,255,.75); font-size: 10.2px; letter-spacing: .32em; font-family: var(--font-serif); }
.fun-badge .dot { fill: var(--brand); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 巨型跑马灯带 ---------- */
.band {
  background: #000; overflow: hidden; padding: 8px 0;
  border-top: 1px solid #1f1f1f; border-bottom: 1px solid #1f1f1f;
}
.band + .band { border-top: 0; }
.band-track { display: flex; width: max-content; animation: marquee 24s linear infinite; }
.band--rev .band-track { animation-direction: reverse; }
.band-track span {
  font-size: clamp(38px, 6.4vw, 86px); line-height: 1.15; letter-spacing: -.035em;
  padding: 0 22px; white-space: nowrap; color: #fff;
}
.band-track .out { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.55); }
.band-track .blue { color: var(--brand); }

/* ---------- 大数字（我们才 6 个月） ---------- */
.age {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.age div { background: #fff; padding: 24px 22px 22px; }
.age b {
  display: block; font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(44px, 6.2vw, 88px); line-height: .88; letter-spacing: -.05em;
}
.age span { display: block; margin-top: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.6; }

/* ---------- 服务大字号列表 ---------- */
.svc { border-top: 1px solid var(--line); }
.svc a {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) minmax(0, 26ch);
  gap: 20px; align-items: baseline; padding: 26px 0; color: inherit;
  transition: transform .5s var(--ease-out);
}
.svc a:hover { text-decoration: none; transform: translateX(12px); }
.svc .n { font-family: var(--font-serif); font-size: 12.5px; color: var(--ink-3); }
.svc .t {
  font-size: clamp(24px, 3.6vw, 46px); letter-spacing: -.035em; line-height: 1.15;
  transition: color .3s;
}
.svc a:hover .t { color: var(--brand); }
.svc .d { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }

/* ---------- 贴纸墙 ---------- */
.stickers { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.stickers li {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 9px 16px; font-size: 14.5px;
  transition: transform .45s var(--ease-out), background .3s, color .3s, border-color .3s;
  cursor: default;
}
.stickers li:nth-child(3n) { transform: rotate(-1.6deg); }
.stickers li:nth-child(3n+1) { transform: rotate(1.1deg); }
.stickers li:hover { background: #000; color: #fff; border-color: #000; transform: translateY(-5px) rotate(-3deg) scale(1.04); }

/* ---------- 洗牌按钮 ---------- */
.shuffle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 14px; }
.shuffle {
  border: 1px solid #000; background: #000; color: #fff; border-radius: 999px;
  padding: 8px 18px; font-size: 13px; cursor: pointer; letter-spacing: .06em;
  transition: background .3s, color .3s, transform .4s var(--ease-out);
}
.shuffle:hover { background: var(--brand); border-color: var(--brand); transform: rotate(-2deg); }
.case-list li.is-moving { animation: puff .5s var(--ease-out); }
@keyframes puff { from { opacity: .2; transform: translateY(8px); } }

/* 案例图 3D 倾斜（JS 写 transform） */
.case-list .pic { transition: transform .5s var(--ease-out); will-change: transform; }

/* ---------- 收尾巨大的联系语 ---------- */
.cta-huge { padding: 110px 0 96px; text-align: center; }
.cta-huge p {
  font-size: clamp(32px, 7.4vw, 104px); letter-spacing: -.045em; line-height: .98;
  margin: 0 0 26px; font-weight: 500;
}
.cta-huge .out { color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.7); }
.cta-huge a.mail {
  display: inline-block; margin-top: 6px; font-size: clamp(15px, 1.6vw, 20px);
  border-bottom: 1px solid rgba(255,255,255,.4); padding-bottom: 4px; color: #fff;
}
.cta-huge a.mail:hover { color: var(--brand); border-color: var(--brand); }

@media (max-width: 960px) {
  .fun-badge { position: static; margin: 28px 0 0 auto; display: block; width: 88px; height: 88px; }
  .fun-title { max-width: none; }
  .svc a { grid-template-columns: 40px minmax(0, 1fr); padding: 20px 0; }
  .svc .d { grid-column: 2; margin-top: 6px; }
  .age { grid-template-columns: repeat(2, 1fr); }
  .cta-huge { padding: 70px 0 60px; }
}

/* 大开字 CTA 在深色区块里要够亮 */
.cta-huge.sec--alt p { color: #fff; }
.cta-huge.sec--alt .out { color: transparent; -webkit-text-stroke: 1.4px rgba(255,255,255,.7); }

/* ==========================================================================
   行业作品行：标题 + 标签 pill + 括号计数 + 右侧溢出图片条（参照 lamalama /work）
   ========================================================================== */
.work-sec { overflow: clip; }
.work-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #262626; }
.work-row { border-bottom: 1px solid #262626; }
.work-row > a {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(180px, 300px) 104px minmax(0, 1fr);
  align-items: center; gap: 24px; padding: 24px 0; color: #fff;
}
.work-row > a:hover { text-decoration: none; }
.work-row .tname {
  font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.022em; font-weight: 400;
  transition: color .3s, transform .55s var(--ease-out);
}
.work-row > a:hover .tname { color: #105df1; transform: translateX(9px); }
.work-row .pillset { display: flex; gap: 6px; flex-wrap: wrap; }
.work-row .pillset i {
  font-style: normal; font-size: 10px; letter-spacing: .1em;
  background: #000; border: 1px solid #333; color: #fff;
  padding: 4px 9px; border-radius: 2px; white-space: nowrap;
}
.work-row .cnt {
  font-family: var(--font-serif); font-size: 12px; letter-spacing: .06em;
  color: rgba(255,255,255,.45); white-space: nowrap;
}
.work-row .strip {
  position: relative; display: flex; gap: 6px; justify-content: flex-end;
  margin-right: -16vw; transition: transform 1s var(--ease-out);
}
.work-row .strip img {
  width: 212px; height: 134px; object-fit: cover; display: block;
  border-radius: 2px; flex: 0 0 auto;
}
.work-row > a:hover .strip { transform: translateX(-52px); }
/* 点阵团：悬停时从图片条左侧浮出 */
.work-row .dither {
  position: absolute; left: -46px; top: -10%; width: 200px; height: 120%;
  pointer-events: none; opacity: 0; transform: scale(.82);
  transition: opacity .4s ease, transform .75s var(--ease-out);
  background-image: radial-gradient(circle, rgba(255,255,255,.92) 1.3px, transparent 1.55px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(58% 72% at 36% 50%, #000 6%, rgba(0,0,0,0) 74%);
  mask-image: radial-gradient(58% 72% at 36% 50%, #000 6%, rgba(0,0,0,0) 74%);
}
.work-row > a:hover .dither { opacity: .92; transform: none; }

/* 底部筛选条 */
.work-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 20px; }
.work-bar button {
  border: 1px solid #333; background: transparent; color: rgba(255,255,255,.72);
  border-radius: 2px; padding: 6px 11px; font-size: 11px; letter-spacing: .08em;
  cursor: pointer; transition: background .25s, color .25s, border-color .25s;
}
.work-bar button:hover { border-color: #fff; color: #fff; }
.work-bar button.on { background: #fff; border-color: #fff; color: #000; }
.work-bar .count {
  margin-left: auto; font-family: var(--font-serif); font-size: 12px;
  color: rgba(255,255,255,.45); letter-spacing: .06em;
}

@media (max-width: 1024px) {
  .work-row > a { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 18px 0; }
  .work-row .pillset { grid-row: 2; grid-column: 1 / -1; }
  .work-row .cnt { grid-row: 1; grid-column: 2; }
  .work-row .strip { grid-column: 1 / -1; justify-content: flex-start; margin: 6px 0 0; overflow: hidden; }
  .work-row .strip img { width: 44vw; height: 28vw; }
  .work-row > a:hover .strip { transform: none; }
  .work-row .dither { display: none; }
}

/* ---------- 作品行：点击原地展开 ---------- */
.row-panel {
  display: none; overflow: hidden; max-height: 0; opacity: 0;
  transition: max-height .6s var(--ease-out), opacity .35s ease;
}
.work-row.is-open .row-panel { opacity: 1; }
.row-panel > .panel-inner { min-height: 0; }

.panel-grid { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 36px; align-items: start; padding: 4px 0 30px; }
.panel-dither {
  display: block; width: 100%; height: 152px;
  background-image: radial-gradient(circle, rgba(255,255,255,.85) 1.3px, transparent 1.55px);
  background-size: 7px 7px;
  -webkit-mask-image: radial-gradient(52% 58% at 50% 50%, #000 8%, rgba(0,0,0,0) 72%);
  mask-image: radial-gradient(52% 58% at 50% 50%, #000 8%, rgba(0,0,0,0) 72%);
}
.panel-grid p {
  margin: 0 0 20px; font-size: 15.5px; line-height: 1.95;
  color: rgba(255,255,255,.7); max-width: 54ch;
}
.panel-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.panel-actions .btn {
  height: 38px; font-size: 13.5px; border-radius: 2px;
  border-color: #3a3a3a; color: #fff; background: transparent;
}
.panel-actions .btn:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.07); }
.panel-shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-bottom: 34px; }
.panel-shots img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 2px; display: block; }

.work-row .strip { transition: transform 1s var(--ease-out), opacity .4s ease, margin-right .6s var(--ease-out); }
.work-row.is-open .strip { opacity: .32; margin-right: 0; }
.work-row.is-open .tname { color: #105df1; }
.work-row.is-open .pillset i { border-color: #555; }

@media (max-width: 1024px) {
  .panel-grid { grid-template-columns: 1fr; gap: 18px; padding-bottom: 22px; }
  .panel-dither { display: none; }
  .panel-shots { grid-template-columns: 1fr 1fr; padding-bottom: 26px; }
  .panel-grid p { font-size: 14.5px; }
}

/* 注意：不要写全局 img[width][height]{height:auto}——
   它会盖掉 .work-row .strip img 的固定高度。
   只需要给用 aspect-ratio 的那几处（.shot / .panel-shots img / .feature img）单独补 height:auto。 */

/* ==========================================================================
   案例墙（参照 hunuo 案例列表：缩略图 + 悬停分类条 + 底部蓝线）
   ========================================================================== */
.case-wall { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 37px; margin-top: 6px; }
.case-item { position: relative; background: #fff; padding-bottom: 2px; }
.case-item .pic { position: relative; display: block; overflow: hidden; aspect-ratio: 375 / 288; }
.case-item .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.case-item:hover .pic img { transform: scale(1.04); }
.case-item .cat {
  position: absolute; left: 0; bottom: 0; width: 100%; line-height: 53px;
  background: rgba(0, 0, 0, .58); color: #fff; font-size: 15px; padding-left: 15px;
  transform: translateY(100%); transform-origin: center;
  transition: transform .28s var(--ease-out); white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; padding-right: 15px;
}
.case-item:hover .cat { transform: translateY(0); }
.case-item .body { display: flex; gap: 12px; padding: 13px 2px 15px; align-items: flex-start; }
.case-item .txt { flex: 1; min-width: 0; }
.case-item h3 {
  font-size: 19px; line-height: 1.5; letter-spacing: -.01em; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.case-item h3 a { color: var(--ink); }
.case-item:hover h3 a { color: var(--brand); }
.case-item .desc {
  margin: 2px 0 0; font-size: 14px; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.case-item .meta { flex: none; width: 82px; text-align: right; }
.case-item .meta b {
  display: block; font-family: var(--font-serif); font-size: 18px; font-weight: 500;
  color: var(--ink); line-height: 1.2;
}
.case-item .meta span { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; }
.case-item .go { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.case-item:hover .go { color: var(--brand); }
.case-item .line {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--brand);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .4s var(--ease-out);
}
.case-item:hover .line { transform: scaleX(1); }

@media (max-width: 1024px) {
  .case-wall { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}
@media (max-width: 640px) {
  .case-wall { grid-template-columns: 1fr; }
  .case-item .cat { bottom: 0; }
  .case-item .body { padding-bottom: 14px; }
}

/* ==========================================================================
   案例详情页（结构对标 hunuo 案例页：大图 → 标题 → 元信息 → 概览+背景
   → 做法 → 数据 → 截图 → 上下篇 → CTA）。类名统一 cd- 前缀，避免与全站冲突。
   ========================================================================== */
.cd-hero { margin: 0 0 40px; }
.cd-hero img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.cd-hero figcaption { font-size: 13px; color: var(--ink-3); margin-top: 10px; }

.cd-head { padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.cd-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin: 26px 0 0; padding: 20px 0 0; border-top: 1px dashed var(--line); }
.cd-meta dt { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; margin: 0 0 4px; }
.cd-meta dd { margin: 0; font-size: 15px; font-weight: 500; }

.cd-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 48px; margin: 52px 0; }
.cd-kv { margin: 0; display: grid; gap: 13px; }
.cd-kv div { display: grid; gap: 2px; }
.cd-kv dt { font-size: 12px; color: var(--ink-3); margin: 0; }
.cd-kv dd { margin: 0; font-size: 14.5px; font-weight: 500; overflow-wrap: anywhere; }
.cd-kv dd em { font-style: normal; font-weight: 400; color: var(--ink-3); font-size: 13px; }

.cd-steps { margin: 56px 0 0; }
.cd-step { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px;
  padding: 20px 0; border-top: 1px solid var(--line); }
.cd-step:last-child { border-bottom: 1px solid var(--line); }
.cd-step .n { font-family: var(--font-serif); font-size: 13px; color: var(--brand); padding-top: 3px; }
.cd-step h3 { margin: 0 0 6px; font-size: 17px; letter-spacing: -.01em; }
.cd-step p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.8; }

.cd-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 56px 0 10px; }
.cd-metric { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 22px; text-align: center; }
.cd-metric b { display: block; font-family: var(--font-serif); font-size: 38px; font-weight: 400;
  line-height: 1.1; letter-spacing: -.02em; color: var(--ink); }
.cd-metric span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); }

.cd-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 44px 0 0; }
.cd-shots figure { margin: 0; }
.cd-shots img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--line); cursor: zoom-in; }
.cd-shots figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 8px; }

.cd-pager { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 24px 0; margin-top: 52px; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); font-size: 14.5px; }
.cd-pager a { color: var(--ink-2); }
.cd-pager a:hover { color: var(--brand); }
.cd-pager .all { font-weight: 500; color: var(--ink); }
.cd-pager .off { color: var(--ink-3); }

.cd-cta { background: #000; color: #fff; border-radius: 16px; padding: 40px 36px; margin: 48px 0 0;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cd-cta h2 { margin: 0 0 6px; font-size: 22px; color: #fff; }
.cd-cta p { margin: 0; font-size: 14px; color: rgba(255,255,255,.6); }
.cd-cta .btn { background: #fff; border-color: #fff; color: #000; }
.cd-cta .btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

.cd-lb { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none;
  align-items: center; justify-content: center; z-index: 99; padding: 24px; }
.cd-lb.on { display: flex; }
.cd-lb img { max-width: min(1200px, 96vw); max-height: 88vh; width: auto; border-radius: 8px; }
.cd-lb button { position: absolute; top: 16px; right: 20px; background: none; border: 0;
  color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }

@media (max-width: 860px) {
  .cd-meta { grid-template-columns: repeat(2, 1fr); }
  .cd-grid { grid-template-columns: 1fr; gap: 30px; margin: 40px 0; }
  .cd-metrics { grid-template-columns: 1fr; }
  .cd-metric b { font-size: 30px; }
  .cd-shots { grid-template-columns: 1fr; }
  .cd-pager { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cd-cta { flex-direction: column; align-items: flex-start; padding: 30px 22px; }
}

/* 触感反馈：按下时轻微下沉 + 收缩，模拟物理按键（技能清单里明确要求） */
.btn:active, .shuffle:active, .filters button:active, .work-bar button:active,
.nav-toggle:active, .panel-actions .btn:active, .cd-cta .btn:active {
  transform: translateY(1px) scale(.99);
}

/* ==========================================================================
   首屏波纹线（SVG 竖线 + 弹簧物理；算法参考 Antoine Wodniack 的公开实现，
   代码为本项目重写：加了可见性暂停、点数上限、reduced-motion 静态帧）
   ========================================================================== */
.hero-waves {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; opacity: .85;
}
.hero-waves path {
  fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
@media (max-width: 760px) {
  .hero-waves { opacity: .6; }
  .hero-waves path { stroke: rgba(255, 255, 255, .14); }
}

/* ==========================================================================
   首屏 HUD 层：线框地球 + 四角标记 + CASE 资料块（从横幅合并版搬进来的）
   ========================================================================== */
.hero-globe {
  position: absolute; right: -12vw; top: 50%; transform: translateY(-50%);
  width: 60vw; height: 60vw; z-index: 1; pointer-events: none; opacity: .62;
  mix-blend-mode: screen;
}
.hud-corner { position: absolute; width: 30px; height: 30px; border: 1px solid rgba(242,245,247,.25); z-index: 2; }
.hud-corner.tl { top: 90px; left: 30px; border-right: 0; border-bottom: 0; }
.hud-corner.tr { top: 90px; right: 30px; border-left: 0; border-bottom: 0; }
.hud-corner.bl { bottom: 30px; left: 30px; border-right: 0; border-top: 0; }
.hud-corner.br { bottom: 30px; right: 30px; border-left: 0; border-top: 0; }

.hero-panel {
  position: absolute; right: 5vw; top: 50%; transform: translateY(-52%);
  width: 300px; z-index: 3; pointer-events: auto;
  border: 1px solid rgba(242,245,247,.18); border-radius: 6px;
  background: linear-gradient(180deg, rgba(16,93,241,.08), rgba(255,255,255,.02));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 20px 18px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.hero-panel .hp-hd {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: .2em; color: var(--brand);
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(242,245,247,.14);
}
.hero-panel dl { margin: 0; display: grid; gap: 9px; }
.hero-panel dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
/* 注意：panel 在深色首屏里，不能用全站的 --ink/--ink-2（那是给白底页面准备的深色字） */
.hero-panel dt { font-size: 11px; letter-spacing: .12em; color: rgba(242,245,247,.42); }
.hero-panel dd { margin: 0; font-size: 13.5px; font-weight: 500; color: #f2f5f7; text-align: right; }
.hero-panel .hp-link { display: block; margin-top: 14px; font-size: 12.5px; color: var(--brand); text-decoration: none; }
.hero-panel .hp-link:hover { text-decoration: underline; }

@media (max-width: 1180px) {
  .hero-panel { display: none; }       /* 窄屏资料块会压住标题，直接隐藏 */
  .hero-globe { opacity: .55; right: -20vw; }
}

/* ==========================================================================
   悬浮联系栏（右缘）：微信 / 抖音 / 返回顶部。悬停弹出二维码位。
   ========================================================================== */
.contact-rail {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column;
  background: rgba(8, 11, 16, .74);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(242, 245, 247, .14); border-right: 0;
  border-radius: 12px 0 0 12px; padding: 6px;
}
.cr-item { position: relative; }
.cr-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 74px; padding: 12px 4px; border: 0; background: none;
  color: rgba(242, 245, 247, .68); cursor: pointer; border-radius: 8px;
  font-family: inherit; text-decoration: none;
  transition: background .25s var(--ease-out), color .25s var(--ease-out), transform .2s var(--ease-out);
}
.cr-btn:hover { background: rgba(16, 93, 241, .22); color: #fff; }
.cr-btn:active { transform: translateY(1px) scale(.98); }
.cr-btn svg { width: 21px; height: 21px; }
.cr-btn span { font-size: 11px; letter-spacing: .06em; white-space: nowrap; }
.cr-sep { height: 1px; background: rgba(242, 245, 247, .12); margin: 4px 10px; }

.cr-pop {
  position: absolute; right: calc(100% + 14px); top: 50%;
  transform: translateY(-50%) translateX(8px);
  width: 186px; background: rgba(8, 11, 16, .92);
  border: 1px solid rgba(242, 245, 247, .16); border-radius: 10px;
  padding: 14px; opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out);
}
.cr-item:hover .cr-pop { opacity: 1; transform: translateY(-50%) translateX(0); pointer-events: auto; }
.qr-ph {
  height: 108px; border: 1px dashed rgba(242, 245, 247, .3); border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; margin-bottom: 10px; color: var(--ink-3, rgba(232,237,242,.45));
  font-size: 12px; background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 8px);
}
.cr-id { margin: 0; font-size: 13.5px; color: #f2f5f7; }
.cr-note { margin: 2px 0 0; font-size: 12px; color: rgba(242, 245, 247, .45); }

@media (max-width: 760px) {
  .contact-rail { padding: 4px; }
  .cr-btn { width: 54px; padding: 10px 2px; }
  .cr-btn span { font-size: 10px; }
  .cr-pop { display: none; }        /* 手机上悬停不可用，改为点进联系页 */
}

/* 二维码图（联系栏弹层内） */
.qr-img { width: 100%; height: auto; border-radius: 8px; display: block; margin-bottom: 10px; background: #fff; padding: 4px; box-sizing: border-box; }
.qr-img.qr-round { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover; }

/* 首屏底部 ASCII 波形走线（装饰层，低透明度从文字后面穿过） */
.hero-stream {
  position: absolute; left: 4vw; right: 4vw; bottom: 22px;
  z-index: 0; pointer-events: none;
}
.hero-stream .hs-hd {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; letter-spacing: .2em; color: rgba(242,245,247,.35);
  margin-bottom: 6px;
}
.hero-stream .hs-hd i { font-style: normal; color: var(--brand); }
.hero-stream pre {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; line-height: 1.1; color: rgba(242,245,247,.30);
  white-space: pre; overflow: hidden; margin: 0; font-variant-ligatures: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
@media (max-width: 760px) {
  .hero-stream { bottom: 14px; }
  .hero-stream pre { font-size: 9px; }
}

/* ==========================================================================
   案例页 · 暗色作品集（结构参考 FABRIC / ElixirConf：整页黑、徽章、编号、年份）
   ========================================================================== */
body.dark-page { background: #05070a; color: #f2f5f7; }
body.dark-page .nav-bar {
  background: rgba(5, 7, 10, .85);
  border-bottom: 1px solid rgba(242, 245, 247, .12);
}
body.dark-page .nav-links a { color: rgba(242, 245, 247, .62); }
body.dark-page .nav-links a.on { color: #fff; }
body.dark-page .nav-tel { color: rgba(242, 245, 247, .6); }
body.dark-page .crumb a { color: rgba(242, 245, 247, .4); }
body.dark-page .crumb a:hover { color: var(--brand); }
body.dark-page .sec-head h1, body.dark-page .sec-head h2 { color: #f2f5f7; }
body.dark-page .sec-head .sub { color: rgba(242, 245, 247, .55); }
body.dark-page .eyebrow { color: var(--brand); }
body.dark-page .sec-head .num { color: rgba(242, 245, 247, .3); }
body.dark-page .filters { border-color: rgba(242, 245, 247, .16); }
body.dark-page .filters button { color: rgba(242, 245, 247, .55); }
body.dark-page .filters button.on { background: var(--brand); color: #fff; }
body.dark-page .filters .count { color: rgba(242, 245, 247, .3); }
body.dark-page .case-item { background: #0b0e12; border: 1px solid rgba(242, 245, 247, .1); }
body.dark-page .case-item .cat { background: rgba(16, 93, 241, .78); }
body.dark-page .case-item h3 a { color: #f2f5f7; }
body.dark-page .case-item .desc { color: rgba(242, 245, 247, .5); }
body.dark-page .case-item .meta b { color: #f2f5f7; }
body.dark-page .case-item .meta span { color: rgba(242, 245, 247, .35); }
body.dark-page .case-item .go { color: rgba(242, 245, 247, .4); }
body.dark-page .case-item:hover .go { color: var(--brand); }
body.dark-page .muted { color: rgba(242, 245, 247, .4); }

/* 卡片编号 + 年份徽章 */
.case-item .idx {
  position: absolute; top: 12px; left: 14px; z-index: 2;
  font-family: var(--font-serif); font-size: 13px; color: rgba(242, 245, 247, .8);
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(6px);
  padding: 3px 9px; border-radius: 4px; letter-spacing: .06em;
}
.case-item .yr {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 11px;
  color: rgba(242, 245, 247, .75); background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(6px); padding: 4px 9px; border-radius: 4px;
}
.case-item .chips { display: flex; gap: 6px; margin: 0 0 8px; }
.case-item .chips i {
  font-style: normal; font-size: 11px; letter-spacing: .08em;
  border: 1px solid rgba(242, 245, 247, .22); border-radius: 999px;
  padding: 2px 10px; color: rgba(242, 245, 247, .66);
}
.case-item .chips i.hot { border-color: var(--brand); color: var(--brand); }
/* 分节幽灵编号（North 式） */
.cd-sec { position: relative; }
.cd-sec .ghost {
  position: absolute; right: 0; top: -34px;
  font-family: var(--font-serif); font-size: clamp(48px, 7vw, 96px);
  line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(242,245,247,.14);
  pointer-events: none; letter-spacing: -.02em;
}

/* 暗色页筛选按钮 */
body.dark-page .filters button { background: transparent; border: 1px solid rgba(242,245,247,.18); }
body.dark-page .filters button:hover { color: #fff; border-color: rgba(242,245,247,.4); }
body.dark-page .filters button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 卡片内容溢出保护 */
.case-item { overflow: hidden; }
.case-item .body { min-width: 0; }

/* ==========================================================================
   案例详情页（case-<slug>.html）：暗色页内的档案排版
   ========================================================================== */
.cs-cover { margin: 0 0 34px; }
.cs-cover img {
  /* 不放大：源图多宽就显示多宽，撑满容器只会更糊 */
  width: auto; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: 12px; border: 1px solid rgba(242,245,247,.14);
  cursor: zoom-in; display: block;
}
.cs-cover figcaption, .cs-shot figcaption {
  font-size: 12.5px; color: rgba(242,245,247,.42); margin-top: 10px;
}
.cs-head { padding-bottom: 26px; border-bottom: 1px solid rgba(242,245,247,.14); }
.cs-head h1 {
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.18; letter-spacing: -.03em;
  margin: 8px 0 10px; color: #f2f5f7;
}
.cs-head .sub { font-size: 17px; color: rgba(242,245,247,.62); margin: 0; }

.cs-h2 {
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242,245,247,.5); margin: 0 0 16px; font-weight: 500;
}
body.dark-page .cd-meta { border-top-color: rgba(242,245,247,.16); }
body.dark-page .cd-meta dt { color: rgba(242,245,247,.4); }
body.dark-page .cd-meta dd { color: #f2f5f7; }
body.dark-page .cd-grid .card {
  background: rgba(242,245,247,.04); border-color: rgba(242,245,247,.12);
}
body.dark-page .cd-kv dt { color: rgba(242,245,247,.42); }
body.dark-page .cd-kv dd { color: #f2f5f7; }
body.dark-page .cd-kv dd em { color: rgba(242,245,247,.4); }

.cs-points { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.cs-points li {
  display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px;
  font-size: 15px; line-height: 1.75; color: rgba(242,245,247,.78);
  padding-bottom: 14px; border-bottom: 1px solid rgba(242,245,247,.1);
}
.cs-points li span {
  font-family: var(--font-serif); font-size: 12px; color: var(--brand); padding-top: 4px;
}
.cs-mods { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.cs-mods li {
  font-size: 12.5px; color: rgba(242,245,247,.7);
  border: 1px solid rgba(242,245,247,.18); border-radius: 999px; padding: 5px 13px;
}
.cs-shot { margin: 44px 0 0; }
.cs-shot img {
  width: auto; max-width: 100%; height: auto; margin: 0 auto;
  border-radius: 12px; cursor: zoom-in;
  border: 1px solid rgba(242,245,247,.14); display: block;
}
body.dark-page .cd-pager { border-color: rgba(242,245,247,.14); }
body.dark-page .cd-pager a { color: rgba(242,245,247,.6); }
body.dark-page .cd-pager a:hover { color: var(--brand); }
body.dark-page .cd-pager .all { color: #f2f5f7; }
body.dark-page .cd-cta { background: #0b0e12; border: 1px solid rgba(242,245,247,.12); }

/* 无整页长图时的提示行 */
.cs-tip {
  margin: 34px 0 0; padding: 14px 16px; font-size: 13px; line-height: 1.7;
  color: rgba(242,245,247,.45); border: 1px dashed rgba(242,245,247,.18);
  border-radius: 8px;
}

/* 暗色页：logo 主字与副标要用浅色（默认的 --ink 是给白底页的深色） */
body.dark-page .logo { color: #f2f5f7; }
body.dark-page .logo span { color: rgba(242,245,247,.45); }
body.dark-page .logo i { color: var(--brand); }

/* ==========================================================================
   品类方案页（industries.html）
   ========================================================================== */
.ind-table-wrap {
  overflow-x: auto; border: 1px solid rgba(242,245,247,.14); border-radius: 12px;
  background: rgba(242,245,247,.02);
}
.ind-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.ind-table th {
  text-align: left; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(242,245,247,.42); font-weight: 500; padding: 16px 20px;
  border-bottom: 1px solid rgba(242,245,247,.14); white-space: nowrap;
}
.ind-table td {
  padding: 15px 20px; color: rgba(242,245,247,.78);
  border-bottom: 1px solid rgba(242,245,247,.07); vertical-align: top;
}
.ind-table tr:last-child td { border-bottom: 0; }
.ind-table td:first-child { color: #f2f5f7; font-weight: 500; white-space: nowrap; }
.ind-table a { color: var(--brand); text-decoration: none; }
.ind-table a:hover { text-decoration: underline; }

.ind-block { padding: 40px 0; border-top: 1px solid rgba(242,245,247,.12); }
.ind-head { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 6px 10px; align-items: baseline; }
.ind-no { font-family: var(--font-serif); font-size: 13px; color: var(--brand); letter-spacing: .06em; }
.ind-head h2 { font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.02em; margin: 0; color: #f2f5f7; }
.ind-care { grid-column: 2; margin: 4px 0 0; font-size: 13.5px; color: rgba(242,245,247,.45); }

.ind-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,430px); gap: 40px; margin-top: 22px; }
.ind-text p { margin: 0 0 12px; font-size: 15px; line-height: 1.85; color: rgba(242,245,247,.72); }
.ind-mods { color: rgba(242,245,247,.45) !important; font-size: 13.5px !important; }
.ind-cases { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
.ind-case {
  color: var(--brand); font-size: 13.5px; text-decoration: none;
  border-bottom: 1px solid rgba(16,93,241,.45); padding-bottom: 2px;
}
.ind-case:hover { border-bottom-color: var(--brand); }
.ind-shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.ind-shots img {
  width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3;
  border-radius: 8px; border: 1px solid rgba(242,245,247,.12); display: block;
  filter: saturate(.92);
}

@media (max-width: 900px) {
  .ind-body { grid-template-columns: 1fr; gap: 22px; }
  .ind-shots { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   窄屏（≤760px）联系栏改用底部横条
   原来竖条贴在右缘会压住正文 / 表格最后一列，手机上必须换形态
   ========================================================================== */
@media (max-width: 760px) {
  .contact-rail {
    top: auto; bottom: 0; left: 0; right: 0; transform: none;
    flex-direction: row; align-items: stretch; justify-content: space-around;
    border-radius: 14px 14px 0 0; border: 1px solid rgba(242,245,247,.16); border-bottom: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  }
  .cr-item { flex: 1; }
  .cr-btn {
    width: 100%; flex-direction: row; gap: 7px; justify-content: center;
    padding: 9px 4px; border-radius: 10px;
  }
  .cr-btn svg { width: 18px; height: 18px; }
  .cr-btn span { font-size: 12px; }
  .cr-sep { display: none; }
  /* 给底部横条留出空间，别盖住页脚 */
  body { padding-bottom: 62px; }
  body .site .bottom { padding-bottom: 8px; }
}

/* 移动端汉堡图标（用 SVG，不用 ≡ 字符——某些字体里会渲染成空框） */
.nav-burger { width: 20px; height: 20px; display: block; stroke: currentColor; }
/* 桌面端必须隐藏汉堡；只有 ≤720px 才显示（之前写成 display:grid 把默认的 none 盖掉了） */
.nav-toggle { display: none; place-items: center; color: inherit; }
@media (max-width: 720px) { .nav-toggle { display: grid; } }
body.dark-page .nav-toggle { color: rgba(242,245,247,.85); border-color: rgba(242,245,247,.28); }
/* 黑白页上也让图标跟随文字色，避免深底深线看不见 */
.nav-bar .nav-toggle { color: var(--ink); }
body.dark-page .nav-bar .nav-toggle { color: rgba(242,245,247,.85); }

/* @@dark-mobile-menu@@ */
/* 移动端展开的导航面板默认是白底，暗色页的浅色链接会变成白底白字 */
@media (max-width: 720px) {
  body.dark-page .nav-links,
  body.dark-page .nav-links.open {
    background: #0a0d12 !important;
    border-bottom: 1px solid rgba(242,245,247,.14);
    box-shadow: 0 18px 36px rgba(0,0,0,.55);
  }
  body.dark-page .nav-links a {
    color: rgba(242,245,247,.82) !important;
    border-bottom: 1px solid rgba(242,245,247,.1);
  }
  body.dark-page .nav-links a.on { color: #fff !important; }
}

/* ==========================================================================
   案例详情正文（简介 / 挑战 / 方案 / 结果）
   参考 northwest.dev 的案例写法：左文右图，正文控制在可读行宽
   ========================================================================== */
.cs-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px; margin: 44px 0 0; align-items: start;
}
.cs-article { max-width: 720px; }
.cs-sec { margin: 0 0 44px; }
.cs-sec:last-child { margin-bottom: 0; }
.cs-sec h2 {
  font-size: 22px; font-weight: 600; letter-spacing: -.01em;
  color: #f2f5f7; margin: 0 0 14px;
}
.cs-sec > p {
  margin: 0 0 14px; font-size: 15.5px; line-height: 1.9;
  color: rgba(242,245,247,.74);
}
.cs-sec ul { margin: 0; padding: 0 0 0 4px; list-style: none; display: grid; gap: 10px; }
.cs-sec ul li {
  position: relative; padding-left: 18px;
  font-size: 15px; line-height: 1.85; color: rgba(242,245,247,.68);
}
.cs-sec ul li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 6px; height: 1px; background: var(--brand);
}

.cs-side { position: sticky; top: 92px; display: grid; gap: 18px; }
.cs-cover { margin: 0; }
.cs-cover img {
  width: 100%; height: auto; border-radius: 10px; display: block;
  border: 1px solid rgba(242,245,247,.14); cursor: zoom-in;
}
.cs-cover figcaption { font-size: 12px; color: rgba(242,245,247,.4); margin-top: 8px; }

.cs-card {
  border: 1px solid rgba(242,245,247,.12); border-radius: 12px;
  background: rgba(242,245,247,.03); padding: 20px 18px;
}
.cs-card h3 {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(242,245,247,.45); margin: 0 0 14px; font-weight: 500;
}
.cs-card dl { margin: 0; display: grid; gap: 11px; }
.cs-card dl div { display: grid; gap: 2px; }
.cs-card dt { font-size: 11.5px; color: rgba(242,245,247,.4); }
.cs-card dd { margin: 0; font-size: 13.5px; color: #f2f5f7; line-height: 1.6; overflow-wrap: anywhere; }
.cs-card dd em { font-style: normal; color: rgba(242,245,247,.42); }

@media (max-width: 980px) {
  .cs-body { grid-template-columns: 1fr; gap: 28px; }
  .cs-side { position: static; }
  .cs-cover { order: -1; }
  .cs-article { max-width: none; }
}

/* @@mobile-menu-solid@@ */
/* 移动端展开菜单：一律用深色面板 + 浅色链接。
   首页首屏是深色，导航处于 is-transparent 状态、链接是白色，
   如果面板还是白底 → 白底白字。这里不区分页面，统一深色。 */
@media (max-width: 720px) {
  .nav-links,
  .nav-links.open {
    background: #0a0d12 !important;
    border-bottom: 1px solid rgba(242,245,247,.14) !important;
    box-shadow: 0 18px 36px rgba(0,0,0,.55);
  }
  .nav-links a,
  .nav-links.open a,
  .nav-bar.is-transparent .nav-links a {
    color: rgba(242,245,247,.82) !important;
    border-bottom: 1px solid rgba(242,245,247,.1) !important;
  }
  .nav-links a.on,
  .nav-bar.is-transparent .nav-links a.on { color: #fff !important; }
  /* 菜单展开时顶栏也给个底色，别让透明导航压在深色首屏上分不清 */
  .nav-bar.is-transparent:has(.nav-links.open) { background: rgba(5,7,10,.92); }
}

/* ==========================================================================
   首屏视频背景（1.34MB / 16s / 720p，办公室实拍 + 图形标记）
   ========================================================================== */
.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  z-index: 0; pointer-events: none;
  filter: saturate(.88) contrast(1.0) brightness(1.14);
}
/* 压暗 + 顶部/底部渐变，保证文字对比度 */
.hero-video-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* 基本不遮画面，只在左侧文字区给一层薄暗，底部压一条给波形走线 */
    linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.20) 40%, rgba(0,0,0,0) 72%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,0) 74%, rgba(0,0,0,.45) 100%);
}
/* 有视频时，波纹线可以更轻一点 */
.hero-video ~ .hero-waves { opacity: .55; }

/* 窄屏 / 省流 / 减少动态：不播视频，用同帧静图兜底 */
.hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 42%;
  z-index: 0; pointer-events: none; display: none;
  filter: saturate(.7) contrast(1.05) brightness(.62);
}
@media (max-width: 760px) {
  /* 手机上同样播视频；只有浏览器禁止自动播放时才会露出 poster */
  .hero-video { display: block; object-position: center 38%; }
  .hero-poster { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-poster { display: block; }
}

/* 蒙版变薄后，靠文字阴影兜住对比度（只在首屏） */
.hero-x .fun-title { text-shadow: 0 2px 26px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35); }
.hero-x .fun-title .out { text-shadow: none; }
.hero-x .fun-sub { text-shadow: 0 1px 14px rgba(0,0,0,.7); }
.hero-x .fun-kicker { text-shadow: 0 1px 12px rgba(0,0,0,.7); }

/* ==========================================================================
   手机端：版式与 PC 一致（视频铺满做背景、文字压在上面），
   只把字号/间距按窄屏收一档
   ========================================================================== */
@media (max-width: 760px) {
  .hero-x-inner { padding: calc(var(--nav-h) + 26px) 18px 26px; }
  .fun-kicker { font-size: 10.5px; letter-spacing: .16em; gap: 8px; }
  .fun-title {
    font-size: clamp(34px, 10.2vw, 58px); line-height: 1.1;
    letter-spacing: -.035em; margin-top: 12px; max-width: none;
  }
  .fun-foot { margin-top: 18px; gap: 12px; }
  .fun-sub { font-size: 14px; line-height: 1.85; max-width: none; }
  .fun-scroll { display: none; }
  .hero-stream { padding: 0 18px 14px; }
  .hero-stream pre { font-size: 8.5px; }
  .hero-video, .hero-poster { object-position: 62% 42%; }
  .hero-globe { width: 92vw; height: 92vw; right: -34vw; opacity: .4; }
}

/* @@hero-mobile-height@@ */
/* 手机端首屏别再占满一屏：按内容高度，让下一段露出一点 */
@media (max-width: 760px) {
  .hero-x {
    display: flex; flex-direction: column;
    min-height: 0; justify-content: flex-start;
    padding-top: calc(var(--nav-h) + 26px); padding-bottom: 0;
  }
  .hero-x-inner { order: 1; padding: 0 18px 18px; }
  /* 走线从"绝对贴底"改成流内，排在文字之后，不会再压住副文 */
  .hero-stream {
    order: 2; position: static !important; inset: auto !important;
    margin: 0 !important; padding: 0 18px 16px;
  }
}
/* @@seam@@ */
/* 跑马灯两端渐隐：用两侧黑色遮罩（作用在 .band 上，
   mask 作用在 .band-track 上没用——它的宽度是内容宽度，百分比会算到很远的地方） */
.band { position: relative; }
.band::before, .band::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 84px; z-index: 2;
  pointer-events: none;
}
.band::before { left: 0; background: linear-gradient(90deg, #000 18%, rgba(0,0,0,0) 100%); }
.band::after { right: 0; background: linear-gradient(270deg, #000 18%, rgba(0,0,0,0) 100%); }

/* 黑白交界：用半调点阵做过渡（和站里的 dither 点阵同一套语言）
   顶部点密 → 底部散尽，读起来像"黑逐渐淡出成白" */
.seam-dither {
  height: 76px;
  background-color: #fff;
  background-image: radial-gradient(circle, #000 1.5px, transparent 1.6px);
  background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.12) 76%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.12) 76%, transparent 100%);
}
.sec--seam { position: relative; padding-top: 40px; border-top: 0; }
@media (max-width: 760px) {
  .seam-dither { height: 56px; background-size: 7px 7px; background-image: radial-gradient(circle, #000 1.2px, transparent 1.3px); }
  .sec--seam { padding-top: 30px; }
}
/* @@seam-mark@@ */

/* 接缝：不加装饰，只用留白和一条细线分开黑与白
   （试过竖刻度、点阵、跨界编号，都嫌重，回归最安静的版本） */
.sec--seam {
  position: relative; padding-top: 96px;
  border-top: 1px solid var(--line);
}
.seam-dither, .seam-mark { display: none !important; }
@media (max-width: 760px) {
  .sec--seam { padding-top: 64px; }
}

/* 黑白交界：黑块底部切一刀（约 2° 的斜边），白区顺着斜线开始 */
.band-slant {
  height: 46px; background: #000;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  margin-bottom: -1px;
}
/* 斜边已经承担过渡，白区的上留白收一点 */
.sec--seam { padding-top: 56px; border-top: 0; }
@media (max-width: 760px) {
  .band-slant { height: 26px; }
  .sec--seam { padding-top: 40px; }
}

/* ==========================================================================
   标题逐字刷出（配合 main.js 第 13 块）
   只有加过 .split-ready 的标题才会隐藏字身；JS 挂了始终显示原文
   ========================================================================== */
.split-ready .ch {
  /* 裁切盒要比字身高一点，再用负 margin 抵回去 —— 不动行高、不叠字
     （直接用 overflow:hidden + vertical-align:top 会让多行标题互相压住） */
  display: inline-block; overflow: hidden;
  padding: .18em .04em .14em;
  margin: -.18em -.04em -.14em;
  vertical-align: baseline;
}
.split-ready .ch > i {
  display: inline-block; font-style: normal;
  transform: translateY(112%);
  transition: transform .92s var(--ease-out);
  will-change: transform;
}
.split-ready.in .ch > i { transform: translateY(0); }
/* 空心字/描边字要保留描边，不被 i 破坏 */
.split-ready .out .ch > i { -webkit-text-stroke: inherit; }

/* 筛选条吸附到视口顶时给吸顶导航让位 */
.work-bar, .filters { scroll-margin-top: 96px; }

/* 手机端联系栏：点按后的二维码弹层（固定在底栏上方居中） */
@media (max-width: 760px) {
  .cr-pop {
    display: none !important;
    position: fixed !important;
    left: 50% !important; right: auto !important; top: auto !important;
    bottom: 74px !important;
    transform: translateX(-50%) translateY(6px) !important;
    opacity: 0; pointer-events: none;
    width: 200px; z-index: 60;
  }
  .cr-item.open .cr-pop {
    display: block !important;
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
    pointer-events: auto !important;
  }
}

/* 宽对比表（services）：手机端固定最小列宽 + 横向滑动，隐藏分类列省宽 */
@media (max-width: 760px) {
  table.cmp--wide { min-width: 780px; font-size: 13.5px; }
  table.cmp--wide th, table.cmp--wide td { padding: 11px 12px; }
  table.cmp--wide th:first-child, table.cmp--wide td:first-child { display: none; }
  .swipe-hint {
    font-size: 12px; color: var(--ink-2, #666);
    margin: 0 0 10px; display: block;
  }
  .dark-page .swipe-hint { color: rgba(242,245,247,.45); }
}
@media (min-width: 761px) { .swipe-hint { display: none; } }

/* 核心差异表首列是行标签，手机端保留显示 */
@media (max-width: 760px) {
  table.cmp--keepfirst th:first-child,
  table.cmp--keepfirst td:first-child { display: table-cell; }
}