/* 易理吾科技 · 官网 */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body.is-loading {
  overflow: hidden;
}

.skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 300;
  padding: 12px 24px;
  background: var(--fg);
  color: var(--field-bg);
  transition: top 0.3s var(--ease-out);
}
.skip-link:focus {
  top: 16px;
}

/* ───── 开场动画 ─────
   0–400ms 光标方块闪两下 · 400–800ms 规则线从左画到右（方块领着线走）·
   JS 加 .open 后 400ms 从线向上下展开（同会话第二次：只有 350ms 展开）。
   reduced-motion 不显示；JS 失效时 4s 后自动让开。 */
.loader {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  animation: loaderFailsafe 0s 4s forwards;
}
.loader.done {
  display: none;
}
@keyframes loaderFailsafe {
  to { visibility: hidden; }
}
.loader-panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  background: var(--ink);
  transition: transform 400ms var(--ease-in-out);
}
.loader-panel.top { top: 0; }
.loader-panel.bottom { bottom: 0; }
/* 展开时规则线一分为二，骑在两块墨色的内沿上离场 */
.loader-panel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--vermilion);
  opacity: 0;
}
.loader-panel.top::after { bottom: 0; }
.loader-panel.bottom::after { top: 0; }
.loader-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
}
.loader-rule {
  position: absolute;
  left: var(--page-margin);
  right: var(--page-margin);
  top: -2px;
  height: 4px;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: left center;
  animation: loaderDraw 400ms var(--ease-out) 400ms forwards;
}
.loader-sq {
  position: absolute;
  left: var(--page-margin);
  top: -12px;
  width: 24px;
  height: 24px;
  background: var(--vermilion);
  animation:
    loaderBlink 400ms steps(1, end) forwards,
    loaderRun 400ms var(--ease-out) 400ms forwards;
}
@keyframes loaderBlink {
  0% { opacity: 1; }
  25% { opacity: 0; }
  50% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes loaderDraw {
  to { transform: scaleX(1); }
}
@keyframes loaderRun {
  to { transform: translateX(calc(100vw - var(--page-margin) * 2 - 24px)); }
}
.loader.open .loader-panel.top { transform: translateY(-100%); }
.loader.open .loader-panel.bottom { transform: translateY(100%); }
.loader.open .loader-panel::after { opacity: 1; }
.loader.open .loader-rule,
.loader.open .loader-sq {
  visibility: hidden;
}
/* 短版：线已画好、方块不出现，直接展开 */
[data-intro="quick"] .loader-rule {
  animation: none;
  transform: none;
}
[data-intro="quick"] .loader-sq {
  display: none;
}
[data-intro="quick"] .loader-panel {
  transition-duration: 350ms;
}
@media (prefers-reduced-motion: reduce) {
  .loader {
    display: none;
  }
}

/* ───── HUD ─────
   四角 L 形角标（上两角落在导航栏下沿下方）· 顶部每栏一个刻度 · 底栏：当前区块 / 滚动进度 / 区块刻度 / 电话与域名。
   手机宽度只保留四角。 */
.hud {
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  --hud-bar: 0px;
}
.hud-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--ash);
}
.hud-corner.tl { top: 84px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.hud-corner.tr { top: 84px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.hud-corner.bl { bottom: calc(var(--hud-bar) + 12px); left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.hud-corner.br { bottom: calc(var(--hud-bar) + 12px); right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.hud-ticks,
.hud-bar {
  display: none;
}
@media (min-width: 768px) {
  .hud {
    --hud-bar: 36px;
  }
  body {
    padding-bottom: 36px;
  }
  .hud-ticks {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .hud-ticks i {
    position: relative;
    height: 10px;
    border-left: 1px solid var(--ash);
  }
  .hud-ticks i:last-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 10px;
    border-right: 1px solid var(--ash);
  }
  .hud-ticks i:nth-child(n + 9) {
    display: none;
  }
  .hud-ticks i:nth-child(8)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 10px;
    border-right: 1px solid var(--ash);
  }
  .hud-bar {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hud-bar);
  }
  .hud-rail {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    border-top: 1px solid var(--graphite);
  }
  .hud-progress {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--bone);
    transform: scaleX(0);
    transform-origin: left center;
  }
  .hud-marks i {
    position: absolute;
    top: -1px;
    width: 1px;
    height: 8px;
    background: var(--ash);
  }
  .hud-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 100%;
    font-size: 12px;
    line-height: 1;
  }
  .hud-chapter {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--bone);
  }
  .hud-site {
    display: inline-flex;
    gap: 24px;
    color: var(--bone);
    text-transform: none;
  }
  .hud-tel {
    color: var(--ash);
  }
}
@media (min-width: 1200px) {
  .hud-ticks i:nth-child(n + 9) {
    display: block;
  }
  .hud-ticks i:nth-child(8)::after {
    content: none;
  }
}
@media (max-width: 1023px) {
  .hud-tel {
    display: none;
  }
}

/* ───── 导航 ─────
   墨色场、直角、发丝线底边；左品牌，中间等宽编号菜单（当前项前 8px 朱砂方块），右侧次级按钮 */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 72px;
  border-bottom: 1px solid var(--hair);
  transition: transform var(--dur) var(--ease-out);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 100%;
  max-width: calc(var(--maxw) + var(--page-margin) * 2);
  margin: 0 auto;
  padding-inline: var(--page-margin);
}
.nav.hide {
  transform: translateY(-100%);
}
.nav .brand {
  gap: 12px;
  min-height: 44px;
}
.nav .brand-mark {
  width: 32px;
  height: 32px;
}
.bm-sq {
  fill: var(--vermilion);
}
.nav .brand-name {
  flex-direction: row;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.nav .brand-name strong {
  font-size: 16px;
  letter-spacing: 0.08em;
}
.nav .brand-name small {
  font-size: 13px;
  letter-spacing: 0.12em;
}
.nav .brand-name small::before {
  content: "·";
  margin-right: 8px;
}
.nav-links {
  display: flex;
  gap: 0;
}
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 12px 12px 24px;
  font-size: 15px;
  line-height: 20px;
  color: var(--fg-2);
  transition: color 0.3s var(--ease-out);
}
.nav-links a em,
.mobile-menu nav a em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ash);
}
.nav-links a::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--vermilion);
  transform: scale(0);
  transition: transform 0.4s var(--ease-out);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--fg);
}
.nav-links a.active::before {
  transform: scale(1);
}
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ash);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
}
.nav-toggle i {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: currentColor;
  transition: transform 0.5s var(--ease-out), top 0.5s var(--ease-out);
}
.nav-toggle i:first-child { top: 16px; }
.nav-toggle i:last-child { top: 25px; }
.nav-toggle[aria-expanded="true"] i:first-child { top: 20.5px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:last-child { top: 20.5px; transform: rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 48px;
  padding: 96px var(--page-margin) 48px;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}
.mobile-menu[hidden] {
  display: none;
}
/* 关闭过渡期间（淡出的 400ms）不拦截点击 */
.mobile-menu:not(.open) {
  pointer-events: none;
}
.mobile-menu.open {
  opacity: 1;
}
.mobile-menu nav {
  display: grid;
  border-bottom: 1px solid var(--hair);
}
.mobile-menu nav a {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 12px 0;
  border-top: 1px solid var(--hair);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.3;
  transform: translateY(24px);
  opacity: 0;
  transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out);
}
.mobile-menu nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  background: var(--vermilion);
}
.mobile-menu.open nav a {
  transform: none;
  opacity: 1;
}
.mobile-menu.open nav a:nth-child(2) { transition-delay: 0.04s; }
.mobile-menu.open nav a:nth-child(3) { transition-delay: 0.08s; }
.mobile-menu.open nav a:nth-child(4) { transition-delay: 0.12s; }
.mobile-menu.open nav a:nth-child(5) { transition-delay: 0.16s; }
.mobile-menu-foot {
  display: grid;
  gap: 12px;
}

/* ───── 通用区块 ───── */
section {
  position: relative;
  padding-block: var(--s-4);
}
@media (min-width: 1200px) {
  section {
    padding-block: var(--s-5);
  }
}
.section-head {
  margin-bottom: var(--s-3);
}
@media (min-width: 768px) {
  .section-head {
    margin-bottom: var(--s-4);
  }
}
.split-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--s-2);
}
.kicker {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.section-title {
  margin: 0;
  max-width: 16em;
  font-size: var(--fs-section);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.section-desc {
  max-width: 40em;
  margin: var(--s-2) 0 0;
  font-size: var(--fs-body);
  color: var(--fg-2);
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: var(--s-2);
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid var(--hair);
}
.text-link .arrow {
  transition: transform 0.4s var(--ease-out);
}
.text-link:hover .arrow {
  transform: translateX(4px);
}
/* 直角发丝线标签 */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 4px 8px;
  border: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/* 入场：遮罩从下方升起 */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity var(--dur) var(--ease-out) var(--d, 0s), transform var(--dur) var(--ease-out) var(--d, 0s);
}
[data-reveal].in {
  opacity: 1;
  transform: none;
}

/* 大标题逐字上浮：每字间隔 20ms，裁掉基线以下的部分 = 从基线升起 */
[data-split] .ch {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 22%, 0);
  clip-path: inset(0 0 22% 0);
  transition:
    opacity var(--dur) var(--ease-out),
    transform var(--dur) var(--ease-out),
    clip-path var(--dur) var(--ease-out);
  transition-delay: calc(var(--i) * 20ms + var(--d, 0s));
}
[data-split].in .ch {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 -10% 0);
}

/* 规则线在所属元素入场后再画 */
.in .rule-text,
.rule-text.in {
  --draw: 1;
}
[data-split] .rule-text,
[data-reveal] .rule-text {
  --draw: 0;
}
[data-split].in .rule-text,
[data-reveal].in .rule-text {
  --draw: 1;
}
[data-split] .rule-text::after {
  transition-delay: calc(var(--d, 0s) + 0.45s);
}
[data-reveal] .rule-text::after {
  transition-delay: calc(var(--d, 0s) + 0.5s);
}

/* 色场切换：新色场从一条朱砂线向上下展开，只播一次 */
[data-spread] {
  --band: min(50%, 20vh);
}
.motion-ready [data-spread]:not(.in) {
  clip-path: inset(var(--band) 0 calc(100% - var(--band) - 2px) 0);
}
.motion-ready [data-spread] {
  transition: clip-path 900ms var(--ease-in-out);
}
.motion-ready [data-spread].in {
  clip-path: inset(0 0 0 0);
}
.motion-ready [data-spread]::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--band);
  z-index: 2;
  height: 2px;
  background: var(--vermilion);
  pointer-events: none;
  transition: opacity 300ms var(--ease-out) 600ms;
}
.motion-ready [data-spread].in::before {
  opacity: 0;
}

/* ───── Hero ───── */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding-block: calc(72px + var(--s-3)) var(--s-3);
  overflow: hidden;
}
.hero-inner {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-3);
  align-items: end;
}
.hero-head,
.hero-copy,
.hero-stage {
  grid-column: 1 / -1;
}
@media (min-width: 1200px) {
  .hero-copy {
    grid-column: 1 / span 6;
  }
  .hero-stage {
    grid-column: 8 / span 5;
  }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.eyebrow .dot {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--vermilion);
}
.hero-title {
  margin: 0;
  font-size: var(--fs-display);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.hero-title .line {
  display: block;
  white-space: nowrap;
}
@media (max-width: 559px) {
  .hero-title .seg {
    display: block;
  }
}
.hero-title .rule-text::after {
  bottom: 0.02em;
}
.hero-sub {
  max-width: 34em;
  margin: 0;
  color: var(--fg-2);
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s-3);
}
.hero-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-2);
}
.scroll-hint {
  display: grid;
  justify-items: center;
  width: 44px;
  height: 56px;
}
.scroll-hint i {
  width: 1px;
  height: 100%;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 900ms var(--ease-out) calc(var(--d, 0s) + 0.3s);
}
.hero-foot.in .scroll-hint i {
  transform: scaleY(1);
}

/* 构建日志：五行逐行亮起，对勾画出，进度条填满后出现「已上线」 */
.build-log {
  --base: calc(var(--d, 0s) + 0.5s);
  --step: 0.32s;
  border: 1px solid var(--hair);
}
.bl-head {
  margin: 0;
  padding: 12px 24px;
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.bl-rows {
  margin: 0;
  padding: 12px 24px 0;
  list-style: none;
}
.bl-rows li {
  display: grid;
  grid-template-columns: 48px 1fr 24px;
  align-items: center;
  min-height: 42px;
  border-bottom: 1px solid var(--hair);
  color: var(--fg-2);
  transition: color 300ms var(--ease-out) calc(var(--base) + var(--i) * var(--step));
}
.bl-no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ash);
}
.bl-check {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--fg);
  stroke-width: 2;
}
.bl-check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 400ms var(--ease-out) calc(var(--base) + var(--i) * var(--step) + 0.12s);
}
.bl-bar {
  height: 4px;
  margin: 12px 24px 0;
  background: var(--hair);
}
.bl-bar i {
  display: block;
  height: 100%;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(var(--step) * 5) linear var(--base);
}
.bl-done {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 24px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 400ms var(--ease-out) calc(var(--base) + var(--step) * 5 + 0.15s),
    transform 400ms var(--ease-out) calc(var(--base) + var(--step) * 5 + 0.15s);
}
.build-log.in .bl-rows li { color: var(--fg); }
.build-log.in .bl-check path { stroke-dashoffset: 0; }
.build-log.in .bl-bar i { transform: scaleX(1); }
.build-log.in .bl-done { opacity: 1; transform: none; }

/* ───── 技术栈跑马灯 ───── */
.marquee {
  display: grid;
  padding-block: var(--s-2);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.marquee-head {
  max-width: none;
  padding-bottom: 12px;
}
.marquee-label {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.marquee-row {
  overflow: hidden;
  padding-block: 12px;
  font-family: var(--font-mono);
  font-size: clamp(18px, 2vw, 28px);
  line-height: 1.4;
  white-space: nowrap;
}
.marquee-row.reverse {
  color: var(--fg-2);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee-row.reverse .marquee-track {
  animation-duration: 80s;
  animation-direction: reverse;
}
.marquee-set {
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
}
.marquee-set b {
  font-weight: 400;
  color: var(--fg-2);
}
.marquee-row.reverse .marquee-set b {
  color: var(--graphite);
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}
@media (min-width: 768px) {
  .marquee {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .marquee-head {
    grid-row: 1 / span 2;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 var(--s-2) 0 var(--page-margin);
    border-right: 1px solid var(--hair);
  }
}

/* ───── 品牌释义：易理吾 ───── */
.meaning-grid {
  display: grid;
  border-top: 1px solid var(--hair);
}
.glyph-card {
  container-type: inline-size;
  padding: var(--s-2) 0 var(--s-3);
}
.glyph-card + .glyph-card {
  border-top: 1px solid var(--hair);
}
@media (min-width: 768px) {
  .meaning-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .glyph-card {
    padding: var(--s-2) var(--s-2) var(--s-3);
  }
  .glyph-card:first-child {
    padding-left: 0;
  }
  .glyph-card + .glyph-card {
    border-top: 0;
    border-left: 1px solid var(--hair);
  }
}
.glyph {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100cqw, 320px);
  aspect-ratio: 1;
  font-size: min(74cqw, 236px);
  font-weight: 600;
  line-height: 1;
}
.glyph-grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--hair);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.glyph-grid path {
  vector-effect: non-scaling-stroke;
}
.glyph span {
  position: relative;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1000ms var(--ease-in-out) calc(var(--d, 0s) + 0.2s);
}
.glyph-card.in .glyph span {
  clip-path: inset(0 0 0 0);
}
.glyph-meta h3 {
  margin: var(--s-2) 0 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.glyph-meta h3 small {
  font-size: inherit;
}
.glyph-meta h3 small::before {
  content: "· ";
}
.glyph-meta p {
  max-width: 26em;
  margin: 0;
  color: var(--fg-2);
}
.meaning-quote {
  margin: var(--s-4) 0 0;
  font-size: clamp(32px, 4.4vw, 72px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.02em;
}
.meaning-quote > span {
  display: block;
}

/* ───── PSNVV ───── */
.psnvv-letters {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}
.psnvv-letters li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: var(--s-2);
  padding-block: var(--s-2);
  border-bottom: 1px solid var(--hair);
}
.psnvv-l {
  grid-row: 1 / span 3;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 96px;
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.psnvv-en {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
}
.psnvv-zh {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 600;
}
.psnvv-letters p {
  grid-column: 2;
  margin: 8px 0 0;
  font-size: 15px;
  color: var(--fg-2);
}
@media (min-width: 768px) {
  .psnvv-letters {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .psnvv-letters li {
    display: flex;
    flex-direction: column;
    border-bottom: 0;
  }
  .psnvv-l {
    font-size: min(17vw, 240px);
    margin-bottom: var(--s-2);
  }
  .psnvv-zh {
    font-size: 28px;
  }
  .psnvv-letters p {
    font-size: 14px;
  }
}
.psnvv-line {
  margin: var(--s-4) 0 0;
  font-size: clamp(24px, 3vw, 44px);
  font-weight: 600;
  line-height: 1.4;
}
.psnvv-line span {
  display: block;
}
.psnvv-line .dim {
  color: var(--fg-2);
}
.psnvv-domain {
  margin: var(--s-3) 0 0;
  font-family: "Inter", sans-serif;
  font-size: var(--fs-section);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* ───── 服务：六行通栏 ───── */
.svc-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--hair);
}
.svc-rows > li {
  border-bottom: 1px solid var(--hair);
}
.svc-row {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px 0;
  padding: var(--s-2) 0;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.svc-row::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  background: var(--vermilion);
  transform: scale(0);
  transition: transform 0.4s var(--ease-out);
}
.svc-row-no {
  align-self: baseline;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-2);
  transition: opacity 0.3s;
}
.svc-row-name {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.svc-row-desc,
.svc-row .tags,
.svc-row-more {
  grid-column: 2;
}
.svc-row-desc {
  margin: 0;
  font-size: 15px;
  color: var(--fg-2);
}
.svc-row-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}
.svc-row-more .arrow {
  transition: transform 0.4s var(--ease-out);
}
.svc-row:hover {
  background: var(--fg);
  color: var(--field-bg);
}
.svc-row:hover .svc-row-desc,
.svc-row:hover .svc-row-no {
  color: var(--field-bg);
}
.svc-row:hover .tags li {
  border-color: color-mix(in srgb, var(--field-bg) 45%, transparent);
}
.svc-row:hover .svc-row-more .arrow {
  transform: translateX(4px);
}
@media (hover: hover) {
  .svc-row:hover::before {
    transform: scale(1);
  }
  .svc-row:hover .svc-row-no {
    opacity: 0;
  }
}
@media (min-width: 1200px) {
  .svc-row {
    grid-template-columns: 48px minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr) 120px;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-2) var(--s-2) 0;
  }
  .svc-row-desc,
  .svc-row .tags,
  .svc-row-more {
    grid-column: auto;
  }
  .svc-row-name {
    font-size: 28px;
  }
  .svc-row-more {
    justify-self: end;
  }
}

/* 一次打通：六层横条，朱砂方块沿竖线走一遍 */
.stack {
  margin-top: var(--s-4);
  border: 1px solid var(--hair);
}
.stack-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 12px var(--s-2);
  border-bottom: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.stack-body {
  position: relative;
  padding-left: 48px;
}
.stack-rail {
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hair);
}
.stack-pen {
  position: absolute;
  left: -12px;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--vermilion);
  transform: translateY(var(--y0, 16px));
}
.stack.in .stack-pen {
  animation: stackPen 2.6s var(--ease-in-out) 0.3s 1 both;
}
@keyframes stackPen {
  0% { transform: translateY(var(--y0, 16px)); }
  70% { transform: translateY(var(--y1, 16px)); }
  100% { transform: translateY(var(--y0, 16px)); }
}
.stack-layers {
  margin: 0;
  padding: 0;
  list-style: none;
}
.stack-layers li {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 56px;
  padding: 12px var(--s-2) 12px 12px;
  border-bottom: 1px solid var(--hair);
}
.stack-layers li:last-child {
  border-bottom: 0;
}
.stack.in .stack-layers li {
  animation: layerFlash 0.55s var(--ease-out) calc(0.3s + var(--i) * 0.364s) 1 both;
}
@keyframes layerFlash {
  0%, 100% { background-color: transparent; color: var(--fg); }
  20%, 60% { background-color: var(--fg); color: var(--field-bg); }
}
.stack-name {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
}
.stack-tech {
  font-size: 15px;
  opacity: 0.8;
}
@media (min-width: 768px) {
  .stack-layers li {
    grid-template-columns: 120px minmax(0, 1fr);
  }
}

/* ───── 交付承诺 ───── */
.stats-label {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--hair);
}
.stat {
  padding: var(--s-2) 12px var(--s-3);
  border-left: 1px solid var(--hair);
}
.stat:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}
.stat:nth-child(n + 3) {
  border-top: 1px solid var(--hair);
}
@media (min-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .stat {
    padding: var(--s-2) var(--s-2) var(--s-3);
  }
  .stat:nth-child(odd) {
    padding-left: var(--s-2);
    border-left: 1px solid var(--hair);
  }
  .stat:first-child {
    padding-left: 0;
    border-left: 0;
  }
  .stat:nth-child(n + 3) {
    border-top: 0;
  }
}
.stat-num {
  display: flex;
  align-items: flex-start;
  font-family: "Inter", var(--font-zh);
  font-size: clamp(56px, 8vw, 132px);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat-num em {
  margin: 0.06em 0 0 0.06em;
  font-size: 0.5em;
  font-style: normal;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
.stat p {
  margin: var(--s-2) 0 0;
  font-size: 15px;
  color: var(--fg-2);
}
.stats-rule {
  margin-top: var(--s-3);
}
.stats-rule.draw-in {
  transition-delay: 1.2s;
}

/* ───── 流程：PSNVV 五步，朱砂笔头随滚动下移 ───── */
.process-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}
.process-tag {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.process-body {
  position: relative;
}
.process-rail {
  display: none;
}
.process-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pstep {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--s-2);
  padding-block: var(--s-3);
  border-top: 1px solid var(--hair);
  transition: opacity 0.5s var(--ease-out);
}
.pstep-letter {
  font-family: "Inter", sans-serif;
  font-size: 56px;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.pstep-text h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 var(--s-2);
}
.pstep-zh {
  font-size: 28px;
  font-weight: 600;
}
.pstep-en {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.pstep-items {
  display: grid;
  gap: var(--s-2);
}
.step-no {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
}
.step h4 {
  margin: 4px 0 8px;
  font-size: 18px;
  font-weight: 600;
}
.step p {
  margin: 0;
  font-size: 15px;
  color: var(--fg-2);
}
.step .text-link {
  margin-top: 12px;
}
@media (min-width: 1200px) {
  .pstep-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--s-3);
  }
}
/* 桌面：竖线 + 笔头；未到达的行淡出，经过的行转灰 */
@media (min-width: 900px) {
  .process-body {
    padding-left: 96px;
  }
  .process-rail {
    display: block;
    position: absolute;
    left: 36px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--hair);
  }
  .process-trail {
    position: absolute;
    left: -1.5px;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--vermilion);
    transform: scaleY(var(--pen-p, 0));
    transform-origin: top;
  }
  .process-pen {
    position: absolute;
    left: -12px;
    top: -12px;
    width: 24px;
    height: 24px;
    background: var(--vermilion);
    transform: translateY(var(--pen-y, 0px));
  }
  .pstep {
    grid-template-columns: 160px minmax(0, 1fr);
  }
  .pstep-letter {
    font-size: 92px;
  }
  .process.driven .pstep {
    opacity: 0.18;
  }
  .process.driven .pstep.on {
    opacity: 1;
  }
  .process.driven .pstep.past {
    opacity: 0.62;
  }
}

/* ───── 客户中心 ───── */
.portal-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-4);
}
.portal-copy,
.portal-visual {
  grid-column: 1 / -1;
}
@media (min-width: 1200px) {
  .portal-copy {
    grid-column: 1 / span 6;
  }
  .portal-visual {
    grid-column: 8 / span 5;
    align-self: end;
  }
}
.portal-title {
  font-size: clamp(56px, 8vw, 120px);
  line-height: 1.04;
}
.portal-points {
  display: grid;
  gap: 12px;
  margin: var(--s-3) 0;
  padding: 0;
  list-style: none;
}
.portal-points li {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.portal-points li::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--fg);
}
.portal-visual {
  padding: var(--s-2);
  border: 1px solid var(--hair);
}
.pv-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
.pv-pct {
  display: flex;
  align-items: flex-start;
  margin: var(--s-3) 0 var(--s-3);
  font-family: "Inter", sans-serif;
  font-size: clamp(96px, 12vw, 184px);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.pv-pct em {
  font-size: 0.4em;
  font-style: normal;
}
.pv-track {
  position: relative;
  height: 2px;
  margin: 0 12px 72px;
  background: var(--graphite);
}
.pv-fill {
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 4px;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1200ms var(--ease-out) 0.3s;
}
.portal-visual.in .pv-fill {
  transform: scaleX(var(--p));
}
.pv-nodes {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pv-nodes li {
  position: absolute;
  top: -5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
  white-space: nowrap;
  transform: translateX(-50%);
}
.pv-nodes li::before {
  content: "";
  width: 12px;
  height: 12px;
  border: 1px solid var(--ash);
  background: var(--field-bg);
}
.pv-nodes li.done {
  color: var(--fg);
}
.pv-nodes li.done::before {
  border-color: var(--fg);
  background: var(--fg);
}
.pv-nodes li:nth-child(1) { left: 0; }
.pv-nodes li:nth-child(2) { left: 25%; }
.pv-nodes li:nth-child(3) { left: 50%; }
.pv-nodes li:nth-child(4) { left: 75%; }
.pv-nodes li:nth-child(5) { left: 100%; }
.pv-latest {
  display: grid;
  gap: 4px;
  margin: 0 0 var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hair);
}
.pv-latest span,
.pv-latest small {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-2);
}
.pv-files {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pv-files li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px;
  border: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 12px;
}
.pv-files li span:last-child {
  color: var(--fg-2);
}

/* ───── 联系 ───── */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-4);
}
.contact-info,
.contact-form {
  grid-column: 1 / -1;
}
@media (min-width: 1200px) {
  .contact-info {
    grid-column: 1 / span 6;
  }
  .contact-form {
    grid-column: 8 / span 5;
  }
}
.contact-title {
  margin: 0;
  font-size: clamp(56px, 8.5vw, 132px);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.contact-lines {
  margin-top: var(--s-3);
}
.phone-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.phone {
  display: block;
}
.phone-num {
  display: block;
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  font-size: clamp(30px, 4.6vw, 64px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.call-row {
  display: flex;
  align-items: center;
  margin-top: var(--s-2);
}
.call-row .rule {
  flex: 1;
}
.call-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-left: 12px;
  font-weight: 600;
}
.call-btn i {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  background: var(--vermilion);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 18px;
  font-style: normal;
  transition: transform 0.4s var(--ease-out);
}
.call-btn:hover i {
  transform: translateX(4px);
}
.contact-web {
  margin: var(--s-3) 0 0;
}
.contact-web a {
  display: inline-block;
  margin-top: 12px;
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: var(--s-3);
}

/* ───── 在线留言 ───── */
.lead-form {
  position: relative;
  padding-top: var(--s-2);
  border-top: 1px solid var(--fg);
}
.lead-head h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.3;
}
.lead-head p {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--fg-2);
}
.lead-grid {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
@media (min-width: 768px) {
  .lead-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lf-full {
    grid-column: 1 / -1;
  }
}
.lf label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.lf label b {
  font-weight: 400;
  color: var(--vermilion);
}
.lf input,
.lf textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-size: 16px;
  transition: border-color 0.2s;
}
.lf textarea {
  min-height: 168px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  resize: vertical;
}
.lf input::placeholder,
.lf textarea::placeholder {
  color: color-mix(in srgb, var(--fg) 62%, transparent);
}
.lf input:focus,
.lf textarea:focus {
  outline: none;
  padding-bottom: 11px;
  border-bottom: 2px solid var(--fg);
}
.lf [aria-invalid="true"] {
  border-bottom-color: var(--vermilion);
}
.lf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.lf-hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.lf-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-3);
}
.lf-msg {
  flex: 1 1 200px;
  margin: 0;
  font-size: 14px;
}
.lf-msg:empty {
  display: none;
}
.lf-msg[data-type="error"],
.lf-msg[data-type="ok"] {
  padding: 4px 0 4px 12px;
  border-left: 4px solid var(--vermilion);
  color: var(--fg);
}
.lf-msg[data-type="ok"] {
  border-left-color: var(--fg);
}

/* ───── 页脚 ───── */
.footer {
  position: relative;
  padding-bottom: var(--s-3);
}
.footer-rule {
  display: block;
}
.footer-top {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--s-3);
  padding-top: var(--s-4);
}
.footer-brand,
.footer-cols {
  grid-column: 1 / -1;
}
@media (min-width: 1200px) {
  .footer-brand {
    grid-column: 1 / span 5;
  }
  .footer-cols {
    grid-column: 7 / span 6;
  }
}
.footer-word {
  display: inline-block;
  font-size: clamp(56px, 7vw, 112px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
}
.footer-domain {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.footer-slogan {
  margin: var(--s-2) 0 0;
  font-size: 15px;
  color: var(--fg-2);
}
.footer-phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--s-2);
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-weight: 700;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3) var(--gutter);
}
@media (min-width: 768px) {
  .footer-cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.footer-cols h2 {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.footer-cols ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-cols a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 15px;
}
.footer-cols a::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--vermilion);
  transform: scale(0);
  transition: transform 0.3s var(--ease-out);
}
.footer-cols a:hover::before,
.footer-cols a:focus-visible::before {
  transform: scale(1);
}
@media (pointer: coarse) {
  .footer-cols a {
    min-height: 44px;
  }
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-2);
  border-top: 1px solid var(--hair);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}
.footer-inner p {
  margin: 0;
}

/* ───── 案例卡片（首页与案例页共用） ───── */
.case-grid {
  display: grid;
  gap: var(--gutter);
}
@media (min-width: 768px) {
  .case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .case-grid .case-card.wide {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1200px) {
  .case-grid.home {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.case-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--hair);
}
.case-card::after {
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: 4px;
  background: var(--vermilion);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.case-card:hover::after,
.case-card:focus-visible::after {
  transform: scaleX(1);
}
.case-cover {
  aspect-ratio: 640 / 440;
  border-bottom: 1px solid var(--hair);
  background: var(--tint-a);
  overflow: hidden;
}
.cover-svg {
  width: 100%;
  height: 100%;
}
.case-card.wide .case-cover {
  aspect-ratio: 16 / 7;
}
.case-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: var(--s-2);
}
.case-no {
  font-family: "Inter", sans-serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ash);
  transition: color 0.3s var(--ease-out);
}
.case-card:hover .case-no {
  color: var(--fg);
}
.case-meta {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--fg-2);
}
.case-body h2,
.case-body h3 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.case-sum {
  margin: 0;
  font-size: 15px;
  color: var(--fg-2);
}
.case-stack {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-2);
}
.case-stack span {
  color: var(--fg);
}
.case-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
}
.case-more .arrow {
  transition: transform 0.4s var(--ease-out);
}
.case-card:hover .case-more .arrow {
  transform: translateX(4px);
}

/* ───── Toast ───── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 60px;
  z-index: 120;
  padding: 12px 24px;
  border: 1px solid var(--graphite);
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 13px;
  opacity: 0;
  transform: translate(-50%, 12px);
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ───── 响应式 ───── */
@media (max-width: 1080px) {
  .nav-contact {
    display: none;
  }
}
@media (max-width: 899px) {
  .nav-links,
  .nav-portal {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
}

/* ───── 减少动态效果：一律直接处于最终状态 ───── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-split] .ch,
  .bl-done {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .glyph span {
    clip-path: none !important;
  }
  .rule,
  .rule-text,
  [data-split] .rule-text,
  [data-reveal] .rule-text {
    --draw: 1 !important;
  }
  .build-log .bl-rows li { color: var(--fg); }
  .build-log .bl-check path { stroke-dashoffset: 0; }
  .build-log .bl-bar i { transform: scaleX(1); }
  .scroll-hint i { transform: none; }
  .pv-fill { transform: scaleX(var(--p)); }
  .marquee-track {
    animation: none;
  }
  .marquee-row {
    overflow-x: auto;
  }
  .stack-pen,
  .stack-layers li {
    animation: none !important;
  }
}