/* ============================================================
   MercNex Alliance — Awwwards-grade Design System
   Paper & ink editorial language · brass accent · film grain
   Motion: GSAP + ScrollTrigger + Lenis (smooth scroll)
   ============================================================ */

/* ---------- Theme tokens（参考 econmind.group 配色体系） ---------- */
:root {
  --bg: #f6f7f4;
  --bg-soft: #e8edeb;
  --bg-invert: #06141b;
  --ink: #101613;
  --ink-soft: #4c5a54;
  --ink-faint: #7d8a84;
  --line: rgba(16, 22, 19, 0.14);
  --line-strong: rgba(16, 22, 19, 0.32);
  --accent: #0b6b4f;
  --accent-soft: rgba(11, 107, 79, 0.12);
  --accent-ink: #06141b;
  --accent2: #b06616;
  --accent2-soft: rgba(176, 102, 22, 0.12);
  --accent3: #06b6d4;
  --on-invert: #e9f2ef;
  --chart-line: rgba(11, 107, 79, 0.55);
  --chart-grid: rgba(16, 22, 19, 0.1);
}

html.dark {
  --bg: #06141b;
  --bg-soft: #0c2029;
  --bg-invert: #f6f7f4;
  --ink: #e9f2ef;
  --ink-soft: #a8b8b1;
  --ink-faint: #6c7d76;
  --line: rgba(233, 242, 239, 0.14);
  --line-strong: rgba(233, 242, 239, 0.3);
  --accent: #72ead8;
  --accent-soft: rgba(114, 234, 216, 0.12);
  --accent-ink: #06141b;
  --accent2: #f0b866;
  --accent2-soft: rgba(240, 184, 102, 0.12);
  --accent3: #22d3ee;
  --on-invert: #101613;
  --chart-line: rgba(114, 234, 216, 0.5);
  --chart-grid: rgba(233, 242, 239, 0.1);
}

/* ---------- Mono（经济数字） ---------- */
.mono {
  font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: auto; /* Lenis 接管滚动 */
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

body {
  font-family: 'Space Grotesk Variable', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background 0.5s ease, color 0.5s ease;
  overflow-x: hidden;
}

#app {
  min-height: 100vh;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ---------- Display font ---------- */
.display {
  font-family: 'Fraunces Variable', 'Songti SC', 'STSong', serif;
  font-weight: 540;
  letter-spacing: -0.02em;
  line-height: 1.02;
}

.display-italic {
  font-style: italic;
  font-weight: 420;
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}

/* ---------- Marquee ---------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 20px 0;
}

.marquee-track {
  display: inline-flex;
  gap: 0;
  will-change: transform;
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 48px;
  padding-right: 48px;
  font-size: clamp(22px, 2.6vw, 40px);
  letter-spacing: -0.01em;
}

.marquee-item::after {
  content: '◆';
  font-size: 0.35em;
  color: var(--accent);
}

.marquee-outline .marquee-item {
  color: transparent;
  -webkit-text-stroke: 1px var(--line-strong);
}

.marquee-solid .marquee-item {
  color: var(--ink);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 36px;
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  transition: color 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: -1;
}

.btn:hover {
  color: var(--accent-ink);
  border-color: var(--accent);
}

.btn:hover::before {
  transform: scaleX(1);
}

.btn .arrow {
  display: inline-block;
  transition: transform 0.35s;
}

.btn:hover .arrow {
  transform: translateX(6px) rotate(-45deg);
}

.btn-dark {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.btn-dark:hover {
  color: var(--ink);
}

/* ---------- Layout ---------- */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 56px;
}

@media (max-width: 720px) {
  .container {
    padding: 0 22px;
  }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 6px;
}


/* ModelChart 语义颜色变量 */
:root {
  --c-blue: #2b6cb0;
  --c-red: #d04444;
  --c-green: #2f8f5b;
  --c-orange: #d97a1f;
  --c-purple: #8b5cf6;
  --c-gray: #8a97a3;
  --c-yellow: #d4a017;
  --c-ink: #12242f;
  --fill-h: rgba(43, 108, 176, 0.1);
  --fill-f: rgba(208, 68, 68, 0.08);
  --fill-g: rgba(212, 160, 23, 0.1);
  --fill-fin: rgba(122, 138, 148, 0.12);
  --fill-row: rgba(47, 143, 91, 0.1);
  --fill-cs: rgba(173, 216, 230, 0.42);
  --fill-ps: rgba(255, 235, 160, 0.5);
  --fill-cs-new: rgba(173, 216, 230, 0.16);
  --fill-ps-new: rgba(255, 235, 160, 0.18);
  --fill-cs-faint: rgba(173, 216, 230, 0.14);
  --fill-ps-faint: rgba(255, 235, 160, 0.16);
  --fill-dwl: rgba(211, 47, 47, 0.24);
  --fill-transfer: rgba(64, 116, 202, 0.28);
  --fill-tax: rgba(139, 92, 246, 0.28);
  --fill-profit: rgba(47, 143, 91, 0.28);
  --fill-loss: rgba(211, 47, 47, 0.28);
  --fill-ext: rgba(64, 116, 202, 0.22);
  --fill-feasible: rgba(120, 130, 140, 0.12);
  --fill-trap: rgba(211, 211, 211, 0.55);
  --fill-crowd: rgba(255, 160, 160, 0.55);
  --fill-gov: rgba(255, 200, 150, 0.55);
  --fill-mult: rgba(173, 216, 230, 0.55);
  --fill-exit: rgba(244, 204, 204, 0.75);
  --fill-lorenz-a: rgba(211, 47, 47, 0.2);
  --fill-lorenz-b: rgba(64, 116, 202, 0.2);
  --fill-jdip: rgba(245, 183, 161, 0.55);
  --fill-jgain: rgba(169, 223, 191, 0.55);
  --fill-gap-rec: rgba(64, 116, 202, 0.18);
  --fill-gap-inf: rgba(211, 47, 47, 0.18);
  --fill-gap-exp: rgba(64, 116, 202, 0.2);
  --fill-fx-short: rgba(240, 180, 110, 0.45);
  --fill-fx-surp: rgba(110, 170, 240, 0.45);
  --fill-econ-scale: rgba(224, 134, 46, 0.14);
  --fill-disecon-scale: rgba(110, 140, 200, 0.14);
}

html.dark {
  --c-blue: #7db4e8;
  --c-red: #e88a8a;
  --c-green: #7fd4a2;
  --c-orange: #f0b46e;
  --c-purple: #b39df7;
  --c-gray: #9fb0ba;
  --c-yellow: #e8c35a;
  --c-ink: #e9f2ef;
  --fill-h: rgba(125, 180, 232, 0.14);
  --fill-f: rgba(232, 138, 138, 0.12);
  --fill-g: rgba(232, 195, 90, 0.14);
  --fill-fin: rgba(159, 176, 186, 0.16);
  --fill-row: rgba(127, 212, 162, 0.14);
  --fill-cs: rgba(120, 160, 190, 0.32);
  --fill-ps: rgba(190, 170, 110, 0.34);
  --fill-cs-new: rgba(120, 160, 190, 0.13);
  --fill-ps-new: rgba(190, 170, 110, 0.15);
  --fill-cs-faint: rgba(120, 160, 190, 0.1);
  --fill-ps-faint: rgba(190, 170, 110, 0.12);
  --fill-dwl: rgba(220, 100, 100, 0.26);
  --fill-transfer: rgba(110, 140, 220, 0.26);
  --fill-tax: rgba(179, 157, 247, 0.26);
  --fill-profit: rgba(127, 212, 162, 0.26);
  --fill-loss: rgba(220, 100, 100, 0.26);
  --fill-ext: rgba(110, 140, 220, 0.2);
  --fill-feasible: rgba(160, 175, 185, 0.1);
  --fill-trap: rgba(160, 170, 180, 0.4);
  --fill-crowd: rgba(200, 120, 120, 0.4);
  --fill-gov: rgba(190, 150, 110, 0.4);
  --fill-mult: rgba(120, 160, 190, 0.4);
  --fill-exit: rgba(180, 120, 120, 0.5);
  --fill-lorenz-a: rgba(220, 100, 100, 0.2);
  --fill-lorenz-b: rgba(110, 140, 220, 0.2);
  --fill-jdip: rgba(190, 130, 110, 0.4);
  --fill-jgain: rgba(110, 180, 140, 0.4);
  --fill-gap-rec: rgba(110, 140, 220, 0.16);
  --fill-gap-inf: rgba(220, 100, 100, 0.16);
  --fill-gap-exp: rgba(110, 140, 220, 0.18);
  --fill-fx-short: rgba(190, 150, 100, 0.35);
  --fill-fx-surp: rgba(100, 150, 210, 0.35);
  --fill-econ-scale: rgba(240, 180, 110, 0.12);
  --fill-disecon-scale: rgba(110, 150, 210, 0.12);
}