:root {
  --bg: #061426;
  --bg-soft: #081a2e;
  --fg: #e9eff8;
  --dim: #8095ad;
  --line: rgba(120, 160, 210, 0.18);
  --accent: #4da3ff;
  --accent-soft: #7bb8ff;
  --cyan: #6ef0c8;
  --pink: #d4b05e;
  --mono: 'SFMono-Regular', 'JetBrains Mono', Menlo, Consolas, monospace;
  --serif: 'Times New Roman', 'Songti SC', 'STSong', serif;
  --sans: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { font-family: inherit; }

/* ---------- CRT 屏幕效果 ---------- */
.crt { position: fixed; inset: 0; z-index: 90; pointer-events: none; }
.crt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
.crt::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, 0.55) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  opacity: 0.5;
}

/* ---------- 顶部条 ---------- */
.bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 18px 34px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, rgba(5, 6, 10, 0.92), rgba(5, 6, 10, 0.55));
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.bar-brand { display: flex; align-items: center; gap: 10px; color: var(--fg); font-size: 12px; }
.bar-brand i { font-style: normal; color: var(--dim); }
.bar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.bar-nav { display: flex; gap: 26px; margin-left: auto; }
.bar-nav a { color: var(--dim); transition: color 0.25s; }
.bar-nav a:hover { color: var(--accent); }
.bar-enter { color: var(--accent); border: 1px solid rgba(77, 163, 255, 0.35); padding: 7px 14px; transition: all 0.25s; }
.bar-enter:hover { background: var(--accent); color: var(--bg); }

/* ---------- 3D 舞台 ---------- */
.stage { position: fixed; inset: 0; z-index: 0; transition: opacity 0.4s linear; }
.stage canvas { display: block; width: 100% !important; height: 100% !important; }
.stage-loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--dim);
  animation: blink 1.4s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }

/* ---------- 滚动叙事 ---------- */
.scrolly { position: relative; height: 500vh; }
.scene {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  padding: 0 6vw;
}
.scene-copy {
  max-width: 640px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(34px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.7s;
}
.scene.is-active .scene-copy { opacity: 1; visibility: visible; transform: none; }
.scene-hud, .scene-note { opacity: 0; visibility: hidden; transition: opacity 0.6s, visibility 0.6s; }
.scene.is-active .scene-hud, .scene.is-active .scene-note { opacity: 1; visibility: visible; }
.scene-copy.right { margin-left: auto; text-align: right; max-width: 560px; }
.scene-copy.right .scene-stats { justify-content: flex-end; }
.scene-copy.right .scene-actions { justify-content: flex-end; }
.scene-copy.center { margin: 0 auto; text-align: center; }
.scene-copy.center .scene-actions { justify-content: center; }

.hero-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--dim);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}
.scene-copy.center .hero-meta { justify-content: center; }
.blink { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; animation: blink 1.4s steps(2) infinite; }

.scene h1 {
  font-family: var(--serif);
  font-size: clamp(62px, 10.5vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-weight: 400;
  text-shadow: 2px 0 rgba(77, 163, 255, 0.3), -2px 0 rgba(110, 231, 255, 0.22);
}
.scene h2 {
  font-family: var(--serif);
  font-size: clamp(36px, 5vw, 70px);
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.scene h1 em, .scene h2 em { font-style: italic; color: var(--accent); }

.scene-text { margin-top: 24px; font-size: 15px; line-height: 2; color: #b9c2cf; }
.scene-actions { display: flex; gap: 14px; margin-top: 32px; }

.scene-stats { display: flex; gap: 44px; margin-top: 34px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--dim); }
.scene-stats b { display: block; font-size: 30px; color: var(--accent); font-weight: 400; letter-spacing: 0.02em; margin-bottom: 4px; text-shadow: 0 0 24px rgba(77, 163, 255, 0.25); }

.scene-note, .scene-hud {
  position: absolute;
  right: 6vw;
  bottom: 7vh;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
  text-align: right;
}
.scene-hud b { color: var(--fg); font-weight: 400; margin-left: 10px; }
.scene-hud b.ok { color: var(--accent); }
.scene-copy.right ~ .scene-note { left: 6vw; right: auto; text-align: left; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  padding: 13px 26px;
  transition: all 0.25s;
}
.btn-solid { background: var(--accent); color: var(--bg); }
.btn-solid:hover { background: #7bb8ff; transform: translateY(-2px); }
.btn-line { border: 1px solid var(--line); color: var(--fg); }
.btn-line:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- 内容区 ---------- */
.content { position: relative; z-index: 1; background: var(--bg); }
.section { max-width: 1280px; margin: 0 auto; padding: 110px 34px; }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; color: var(--accent); margin-bottom: 30px; }

/* ---------- 页脚 ---------- */
.footer { position: relative; z-index: 1; background: var(--bg); border-top: 1px solid var(--line); padding: 26px 34px; }
.footer-row {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--dim);
}

@media (prefers-reduced-motion: reduce) {
  .blink, .stage-loading { animation: none; }
  html { scroll-behavior: auto; }
  .scene-copy { transition: none; opacity: 1; transform: none; }
}

@media (max-width: 700px) {
  .bar { padding: 14px 18px; gap: 14px; }
  .bar-brand i { display: none; }
  .bar-nav { display: none; }
  .bar-enter { margin-left: auto; }
  .scrolly { height: 420vh; }
  .scene { padding: 0 20px; align-items: flex-end; padding-bottom: 12vh; }
  .scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5, 6, 10, 0.15) 0%, rgba(5, 6, 10, 0.72) 52%, rgba(5, 6, 10, 0.96) 100%);
    pointer-events: none;
  }
  .scene-copy { position: relative; z-index: 2; }
  .hero-meta { font-size: 9px; letter-spacing: 0.1em; }
  .scene-copy, .scene-copy.right, .scene-copy.center { margin: 0; text-align: left; }
  .scene-copy.right .scene-stats { justify-content: flex-start; }
  .scene-copy.center .scene-actions, .scene-copy.center .hero-meta { justify-content: flex-start; }
  .scene h1 { font-size: clamp(44px, 14vw, 72px); }
  .scene h2 { font-size: clamp(30px, 8vw, 44px); }
  .scene-note, .scene-hud { display: none; }
  .stage { opacity: 0.55; }
  .section { padding: 74px 20px; }
  .footer-row { flex-direction: column; gap: 8px; }
}