/* ==========================================================================
   组件与构成层   v3 — Industrial Luxe / Brass
   构成原则：非对称、破格（元素卡冲出栅格）、黄铜发丝线、等宽数据
   ========================================================================== */

.shell { position: relative; z-index: 2; }
.wrap  { max-width: var(--measure); margin: 0 auto; padding-inline: var(--gutter); }

/* ============================ 滚动进度轨 ============================ */
.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  z-index: 90; pointer-events: none;
  background-image: var(--grad-brass-text);
  box-shadow: 0 0 12px rgba(240,180,41,.55);
}

/* ============================ 顶部状态条 ============================ */
.topbar {
  position: sticky; top: 0; z-index: 60;
  border-bottom: 1px solid var(--color-border);
  background: rgba(11, 10, 9, .78);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
}
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background-image: var(--grad-brass-rule); opacity: .45;
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-5); height: 74px;
}
.brand { display: flex; align-items: baseline; gap: 12px; }
.brand-name {
  font-family: var(--font-display);
  font-size: var(--fs-base); letter-spacing: .2em; text-transform: uppercase;
}
.brand-tag {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .2em; color: var(--color-muted);
  border-left: 1px solid var(--color-border); padding-left: 12px;
}

.nav { display: flex; align-items: center; gap: var(--space-6); }
.nav a {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted);
  padding-block: 6px; position: relative;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background-image: var(--grad-brass-text);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav a:hover { color: var(--color-text); }
.nav a:hover::after { transform: scaleX(1); }

.topbar-right { display: flex; align-items: center; gap: var(--space-6); }
.chain {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .18em; color: var(--color-faint);
  display: flex; align-items: center; gap: 8px;
}
.chain i { font-style: normal; color: var(--color-accent); opacity: .7; }
.lang {
  display: flex; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); overflow: hidden;
  box-shadow: var(--bevel-edge);
}
.lang button {
  background: transparent; border: 0; cursor: pointer;
  padding: 7px 14px; min-height: 34px;
  font-family: var(--font-mono); font-size: var(--fs-3xs); letter-spacing: .14em;
  color: var(--color-muted);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.lang button:hover { color: var(--color-text); background: var(--color-surface-2); }
.lang button.is-on {
  background-image: var(--grad-brass-btn);
  color: var(--color-bg-deep); font-weight: 600;
}

/* ============================ 首屏 ============================ */
.hero {
  padding-block: clamp(60px, 9.5vw, 132px) var(--space-8);
  position: relative;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, .68fr);
  gap: var(--space-8); align-items: start;
}
.hero .eyebrow { margin-bottom: var(--space-5); }

.hero h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: .98; letter-spacing: -.038em;
}
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; }
.hero h1 .ln > span {
  display: block;
  animation: riseIn var(--dur-slow) var(--ease-out) both;
}
.hero h1 .ln:nth-child(1) > span { animation-delay: .06s; }
.hero h1 .ln:nth-child(2) > span { animation-delay: .20s; }
@keyframes riseIn {
  from { transform: translateY(108%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.hero h1 em { font-style: normal; }

.hero .lead { max-width: 46ch; margin-top: var(--space-6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-7); }

/* 按钮：黄铜实心 / 描边擦除 */
.btn {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 28px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .18em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate;
  box-shadow: var(--bevel-edge);
  transition: color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: var(--grad-brass-btn);
  transform: translateY(101%);
  transition: transform var(--dur-base) var(--ease-out);
}
.btn:hover { color: var(--color-bg-deep); border-color: var(--color-accent); }
.btn:hover::before { transform: translateY(0); }
.btn--solid {
  background-image: var(--grad-brass-btn);
  color: var(--color-bg-deep); font-weight: 600;
  border-color: transparent; box-shadow: var(--shadow-brass);
}
.btn--solid::before { background-image: none; background-color: var(--color-text); }
.btn--solid:hover { color: var(--color-bg-deep); }
.btn .arw { font-family: var(--font-mono); opacity: .65; }

/* 硫元素卡：右侧冲出栅格并倾斜 —— 全页记忆点 */
.element {
  position: relative;
  padding: var(--space-7) var(--space-6) var(--space-6);
  background-image: var(--grad-panel);
  box-shadow: var(--shadow-3), var(--bevel-top);
  transform: translateY(-18px) rotate(-1.6deg);
  overflow: hidden;
}
.element::before { border-radius: 0; }         /* .frame 的渐变描边 */
.element::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 20% 0%, rgba(240,180,41,.13), transparent 62%);
}
.element .sym {
  font-family: var(--font-display);
  font-size: clamp(84px, 12vw, 148px); line-height: .8;
  letter-spacing: -.045em; position: relative;
  filter: drop-shadow(0 3px 12px rgba(184, 135, 26, .32));
}
.element .name {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: .34em; text-transform: uppercase; margin-top: var(--space-4);
  color: var(--color-text);
}
.element .stamp {
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .22em; color: var(--color-faint); text-transform: uppercase;
}
.element dl {
  display: grid; grid-template-columns: auto 1fr; gap: 9px var(--space-4);
  margin-top: var(--space-5);
}
.element dt {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .16em; color: var(--color-muted);
}
.element dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-2xs);
  text-align: right; font-variant-numeric: tabular-nums;
  padding-bottom: 8px; border-bottom: 1px solid var(--color-line);
}

/* ============================ 参数跑马带 ============================ */
.marquee {
  margin-top: var(--space-9);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding-block: var(--space-4);
  overflow: hidden; position: relative;
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
  display: flex; gap: var(--space-7); width: max-content;
  animation: slide 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: .26em; text-transform: uppercase; color: var(--color-muted);
  display: flex; align-items: center; gap: var(--space-7); white-space: nowrap;
}
.marquee-track span::after {
  content: ""; width: 5px; height: 5px;
  background-image: var(--grad-brass-text);
  transform: rotate(45deg);
}
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================ 数据条 ============================ */
.stats { border-bottom: 1px solid var(--color-border); }
.stats-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--color-line);
  border-inline: 1px solid var(--color-border);
}
.stat {
  background: var(--color-bg); padding: var(--space-7) var(--space-6);
  position: relative; overflow: hidden;
  transition: background var(--dur-base) var(--ease-out);
}
.stat:hover { background: var(--color-surface); }
.stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background-image: var(--grad-brass-text);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.stat:hover::before { opacity: 1; }
.stat .fig {
  font-family: var(--font-display); font-size: var(--fs-stat);
  line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat .cap {
  margin-top: var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--color-muted);
}

/* ============================ 区块通用 ============================ */
.section { padding-block: clamp(60px, 8.5vw, 116px); position: relative; }
.section-head {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6); align-items: end;
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.7vw, 46px); letter-spacing: -.032em;
  margin-top: var(--space-4);
}
.section-head .lead { font-size: var(--fs-sm); max-width: 52ch; }
/* 幽灵编号：巨大描边数字，压在区块头部 */
.ghost {
  position: absolute; right: -8px; bottom: -34px;
  font-family: var(--font-display); font-size: clamp(90px, 13vw, 172px);
  line-height: .78; letter-spacing: -.05em; pointer-events: none;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240, 180, 41, .13);
  text-stroke: 1px rgba(240, 180, 41, .13);
  user-select: none;
}

/* ============================ 能力清单 ============================ */
.ledger { margin-top: var(--space-2); }
.ledger-row {
  display: grid; grid-template-columns: 96px minmax(0, 300px) minmax(0, 1fr);
  gap: var(--space-5); align-items: start;
  padding: var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-line);
  position: relative; isolation: isolate;
  transition: background var(--dur-base) var(--ease-out);
}
.ledger-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--color-accent-dim), transparent 68%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-out);
}
.ledger-row:hover::before { opacity: 1; }
.ledger-row:hover .num { color: var(--color-accent); }
.num {
  font-family: var(--font-mono); font-size: var(--fs-md); color: var(--color-faint);
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-base) var(--ease-out);
}
.ledger-row h3 { font-size: var(--fs-md); font-weight: 700; letter-spacing: -.01em; }
.ledger-row p  { color: var(--color-muted); font-size: var(--fs-sm); }

/* ============================ 规格表 ============================ */
.spec {
  margin-top: var(--space-8);
  background-image: var(--grad-panel);
  box-shadow: var(--shadow-2), var(--bevel-top);
  overflow: hidden; position: relative;
}
.spec::before { border-radius: 0; }
.spec-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(90deg, rgba(240,180,41,.09), transparent 55%);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--color-muted);
}
.spec-bar b { font-weight: 500; letter-spacing: .24em; }
.spec dl { display: grid; grid-template-columns: 1fr 1fr; }
.spec .cell {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-line);
  display: grid; grid-template-columns: 132px 1fr; gap: var(--space-4); align-items: baseline;
  transition: background var(--dur-base) var(--ease-out);
}
.spec .cell:nth-child(odd) { border-right: 1px solid var(--color-line); }
.spec .cell:hover { background: rgba(240,180,41,.045); }
.spec dt {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .18em; text-transform: uppercase; color: var(--color-muted);
}
.spec dd {
  margin: 0; font-family: var(--font-mono); font-size: var(--fs-xs);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
.spec dd small {
  display: block; font-family: var(--font-body); font-size: var(--fs-2xs);
  color: var(--color-faint); letter-spacing: .04em; margin-top: 6px;
}
/* 表格右下角的水印元素符号 */
.spec .wm {
  position: absolute; right: var(--space-5); bottom: -18px;
  font-family: var(--font-display); font-size: 150px; line-height: .7;
  color: transparent; -webkit-text-stroke: 1px rgba(240,180,41,.10);
  pointer-events: none; user-select: none;
}

/* ============================ 引言 / 主张 ============================ */
.statement {
  padding-block: clamp(64px, 9vw, 128px);
  position: relative; overflow: hidden;
  background:
    radial-gradient(46rem 30rem at 50% 0%, rgba(240,180,41,.09), transparent 66%);
  border-block: 1px solid var(--color-border);
}
.statement .wrap { text-align: center; }
.statement .mark {
  width: 34px; height: 34px; margin: 0 auto var(--space-6);
  background-image: var(--grad-brass-text);
  transform: rotate(45deg);
}
.statement q {
  quotes: none; display: block;
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 44px);
  line-height: 1.24; letter-spacing: -.025em;
  max-width: 22ch; margin-inline: auto;
}
.statement .src {
  margin-top: var(--space-6);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .26em; text-transform: uppercase; color: var(--color-faint);
}

/* ============================ 关于 ============================ */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: var(--space-8); align-items: start; margin-top: var(--space-8);
}
.about-body p + p { margin-top: var(--space-5); }
.base-line {
  margin-top: var(--space-6); padding-top: var(--space-5); padding-left: var(--space-5);
  border-top: 1px solid var(--color-border); border-left: 2px solid var(--color-accent);
  font-family: var(--font-mono); font-size: var(--fs-2xs);
  letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted);
}
.panel {
  background-image: var(--grad-panel);
  box-shadow: var(--shadow-1), var(--bevel-top);
  padding: var(--space-7) var(--space-6);
  position: relative; overflow: hidden;
}
.panel h4 {
  font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: 500;
  letter-spacing: .22em; text-transform: uppercase; color: var(--color-accent);
  padding-bottom: var(--space-4); margin-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.panel li {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--space-4);
  padding-block: var(--space-4); border-bottom: 1px dashed var(--color-line);
  font-size: var(--fs-sm); color: var(--color-muted);
}
.panel li:last-child { border-bottom: 0; }
.panel li .tick {
  color: var(--color-accent); font-family: var(--font-mono);
  font-size: var(--fs-2xs); opacity: .85;
}
.panel li b { color: var(--color-text); font-weight: 600; }

/* ============================ 联系区 ============================ */
.contact { border-top: 1px solid var(--color-border); }
.contact-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px; margin-top: var(--space-8);
  background: var(--color-line);
  box-shadow: var(--shadow-2);
}
.contact-cell {
  background: var(--color-bg); padding: var(--space-7) var(--space-6);
  transition: background var(--dur-base) var(--ease-out);
  position: relative;
}
.contact-cell:hover { background: var(--color-surface); }
.contact-cell .lb {
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .24em; text-transform: uppercase; color: var(--color-accent);
}
.contact-cell .vl {
  margin-top: var(--space-4); font-size: var(--fs-md); word-break: break-word;
}
.contact-cell .vl a {
  border-bottom: 1px solid var(--color-border); padding-bottom: 3px;
  transition: border-color var(--dur-fast), color var(--dur-fast);
}
.contact-cell .vl a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.contact-cell .vl.mono { font-size: var(--fs-sm); }
.contact-cell .vl.sub {
  margin-top: 10px; font-size: var(--fs-2xs);
  color: var(--color-faint); letter-spacing: .04em; line-height: 1.5;
}

/* ============================ 页脚 ============================ */
footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-deep);
  padding-block: var(--space-8) var(--space-7);
  position: relative;
}
footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px;
  background-image: var(--grad-brass-rule); opacity: .5;
}
/* 节点链路：四个业务节点常驻页脚（顶栏在窄屏会隐藏这条） */
.foot-nodes {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .22em; text-transform: uppercase; color: var(--color-muted);
  padding-bottom: var(--space-5); margin-bottom: var(--space-7);
  border-bottom: 1px solid var(--color-line);
}
.foot-nodes i { font-style: normal; color: var(--color-accent); opacity: .55; }
.foot-nodes .k { color: var(--color-accent); opacity: .8; margin-right: 6px; }
.foot-mark {
  font-family: var(--font-display);
  font-size: clamp(46px, 11vw, 132px);
  line-height: .84; letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(240, 180, 41, .30);
  text-stroke: 1px rgba(240, 180, 41, .30);
  margin-bottom: var(--space-7);
  user-select: none;
}
.foot-in {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-5); flex-wrap: wrap;
  padding-top: var(--space-6); border-top: 1px solid var(--color-line);
  font-family: var(--font-mono); font-size: var(--fs-3xs);
  letter-spacing: .2em; text-transform: uppercase; color: var(--color-faint);
}
.foot-in a { color: var(--color-muted); transition: color var(--dur-fast); }
.foot-in a:hover { color: var(--color-accent); }

/* ============================ 响应式 ============================ */
@media (max-width: 1300px) {
  /* 四节点链路变宽，品牌+导航+语言在 1200 版心下会挤——顶栏链路提前隐藏，
     但节点信息在页脚常驻显示（见 .foot-nodes），不会丢。 */
  .topbar-right .chain { display: none; }
}
@media (max-width: 1060px) {
  .nav { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .element { transform: none; max-width: 480px; }
  .section-head { grid-template-columns: 1fr; align-items: start; }
  .about-grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .ledger-row { grid-template-columns: 72px 1fr; }
  .ledger-row p { grid-column: 2; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .topbar-in { height: 64px; }
  .topbar-right { gap: var(--space-4); }
  .spec dl { grid-template-columns: 1fr; }
  .spec .cell:nth-child(odd) { border-right: 0; }
  .spec .cell { grid-template-columns: 104px 1fr; padding: var(--space-5); }
  .spec .wm { display: none; }
  .ledger-row { grid-template-columns: 1fr; gap: var(--space-3); }
  .ledger-row p { grid-column: 1; }
  .num { font-size: var(--fs-sm); }
  .hero .lead { font-size: var(--fs-base); }
  .stats-grid { grid-template-columns: 1fr; border-inline: 0; }
  .ghost { display: none; }
  .statement q { max-width: none; }
}