:root {
  --font-ui: "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  --font-cjk: "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif;
  --font-data: "IBM Plex Mono", "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

body { font-family: var(--font-data); }
.auth-intro h1, .story-intro h2, .landing-section-heading h2, .result-copy h2 { font-family: var(--font-display); }
.auth-intro > p, .story-intro > p:last-child, .landing-section-heading > p:last-child, .result-copy p, .story-grid p, .test-timeline p, .integration-flow p, .landing-cta p { font-family: var(--font-ui); }
.landing-content { animation: fade .35s ease both; }

.signal-visual {
  display: grid;
  grid-template-columns: 1fr 150px 1fr;
  gap: 28px;
  align-items: center;
  margin: 58px 0 10px;
  padding: 30px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, transparent, rgba(85, 230, 223, .035), transparent);
}
.signal-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.signal-sources span { border: 1px solid #294149; background: #0a1113; padding: 12px; color: #88a09f; font-size: .6rem; letter-spacing: .12em; position: relative; }
.signal-sources span::after { content: ""; position: absolute; right: -29px; top: 50%; width: 28px; border-top: 1px solid #34545a; }
.signal-core { aspect-ratio: 1; display: grid; place-items: center; align-content: center; border: 1px solid var(--cyan); background: #0b181a; box-shadow: 0 0 45px rgba(85, 230, 223, .09); position: relative; text-align: center; }
.signal-core::before, .signal-core::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(85, 230, 223, .15); }
.signal-core::after { inset: 20px; border-style: dashed; }
.signal-core span, .signal-output span { font-size: .55rem; letter-spacing: .12em; color: var(--cyan); }
.signal-core strong { font-size: 2.5rem; line-height: 1; color: var(--text); margin: 8px; }
.signal-core small, .signal-output small { font-size: .52rem; letter-spacing: .1em; color: var(--lime); }
.signal-output { border-left: 2px solid var(--lime); padding: 18px 20px; background: #0b1413; display: grid; gap: 8px; position: relative; }
.signal-output::before { content: ""; position: absolute; left: -29px; top: 50%; width: 27px; border-top: 1px solid #456b48; }
.signal-output strong { font-size: .9rem; color: var(--text); overflow-wrap: anywhere; }

.landing-section-heading { max-width: 760px; }
.landing-section-heading h2, .result-copy h2 { font-size: clamp(2.2rem, 4.5vw, 4.5rem); line-height: 1; letter-spacing: -.045em; margin: 14px 0 20px; }
.landing-section-heading > p:last-child { color: #9cb0af; line-height: 1.75; max-width: 680px; margin: 0; }
.landing-test-guide, .landing-result-guide, .landing-integration { border-top: 1px solid var(--line); padding-top: 90px; margin-top: 90px; }
.scope-section { border-top: 1px solid var(--line); padding-top: 90px; margin-top: 90px; }
.scope-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 46px; }
.scope-grid article { border: 1px solid var(--line); background: #0b1214; padding: 22px; min-height: 220px; }
.scope-grid span { color: var(--cyan); font-size: .58rem; letter-spacing: .13em; }
.scope-grid h3 { font-family: var(--font-ui); font-size: .95rem; margin: 30px 0 10px; }
.scope-grid p { color: #829796; font-family: var(--font-ui); font-size: .76rem; line-height: 1.75; margin: 0; }

.test-timeline { list-style: none; padding: 0; margin: 50px 0 34px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.test-timeline li { padding: 22px 18px 0; border-top: 1px solid #315058; position: relative; min-width: 0; }
.test-timeline li::before { content: ""; position: absolute; top: -4px; left: 18px; width: 7px; height: 7px; background: var(--cyan); box-shadow: 0 0 12px rgba(85, 230, 223, .55); }
.test-timeline span { display: block; color: var(--cyan); font-size: .6rem; letter-spacing: .12em; margin-bottom: 30px; }
.test-timeline strong { display: block; font-family: var(--font-ui); font-size: .88rem; line-height: 1.35; min-height: 2.7em; }
.test-timeline p { font-size: .75rem; line-height: 1.7; color: #829796; }
.test-timeline code { font-family: var(--font-data); font-size: .68rem; color: #b4d8d3; overflow-wrap: anywhere; }
.test-actions { display: flex; align-items: center; gap: 24px; }
.text-link { color: var(--cyan); font-size: .72rem; text-decoration: none; font-weight: 700; }
.text-link:hover { color: #8cf4ef; }
.text-link span { display: inline-block; margin-left: 6px; }

.landing-result-guide { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr); gap: 80px; align-items: center; }
.result-terminal { border: 1px solid #294047; background: #070c0e; box-shadow: 0 32px 80px rgba(0, 0, 0, .36); min-width: 0; }
.terminal-bar { display: flex; justify-content: space-between; gap: 16px; padding: 12px 15px; border-bottom: 1px solid #294047; background: #0d1719; color: var(--cyan); font-size: .58rem; letter-spacing: .12em; }
.terminal-bar small { color: var(--lime); font-size: inherit; }
.result-terminal dl { margin: 0; padding: 12px 20px 20px; }
.result-terminal dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-bottom: 1px solid #172429; font-size: .72rem; }
.result-terminal dt { color: #698083; }
.result-terminal dd { margin: 0; color: #cfe0dd; overflow-wrap: anywhere; }
.result-terminal .value-good { color: var(--lime); }
.result-definitions { display: grid; margin-top: 30px; }
.result-definitions > div { display: grid; grid-template-columns: 160px 1fr; gap: 20px; border-top: 1px solid var(--line); padding: 17px 0; }
.result-definitions strong { font-family: var(--font-ui); font-size: .82rem; }
.result-definitions p { font-size: .76rem; line-height: 1.7; color: #829796; margin: 0; }
.result-definitions b { color: #b8cfcc; }
.evidence-notice { border-left: 3px solid var(--lime); background: #0d1713; padding: 15px 18px; margin-top: 22px; }
.evidence-notice strong { font-family: var(--font-ui); font-size: .8rem; color: var(--lime); }
.evidence-notice p { font-size: .73rem; color: #90a49d; margin: 5px 0 0; line-height: 1.65; }

.integration-flow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: stretch; margin: 48px 0; }
.integration-flow > div { border-top: 2px solid #315158; padding: 18px 10px 0; min-width: 0; }
.integration-flow > i { display: grid; place-items: center; color: #47666a; font-style: normal; }
.integration-flow span { font-size: .58rem; color: var(--cyan); letter-spacing: .1em; }
.integration-flow strong { display: block; font-family: var(--font-ui); font-size: .82rem; margin: 18px 0 8px; }
.integration-flow p { font-size: .7rem; color: #7f9493; line-height: 1.6; margin: 0; }
.landing-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 30px 0; }
.landing-cta strong { font-family: var(--font-display); font-size: 1.2rem; }
.landing-cta p { color: var(--muted); font-size: .76rem; margin: 6px 0 0; }
.landing-cta > div:last-child { display: flex; gap: 9px; flex: 0 0 auto; }
.integration-code-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; }
.integration-code-grid .section-label { margin: 0 0 9px; }
.integration-code-grid .code-sample { min-height: 100%; font-size: .68rem; line-height: 1.65; }

:lang(zh-CN) body { font-family: var(--font-cjk); font-size: 16px; color: #e4ecea; }
:lang(zh-CN) .auth-intro h1, :lang(zh-CN) .story-intro h2, :lang(zh-CN) .landing-section-heading h2, :lang(zh-CN) .result-copy h2 { font-family: var(--font-cjk); font-weight: 700; line-height: 1.14; letter-spacing: 0; }
:lang(zh-CN) .auth-intro h1 { font-size: clamp(3rem, 6vw, 6.4rem); }
:lang(zh-CN) .auth-intro > p, :lang(zh-CN) .story-intro > p:last-child, :lang(zh-CN) .landing-section-heading > p:last-child, :lang(zh-CN) .result-copy p, :lang(zh-CN) .story-grid p, :lang(zh-CN) .test-timeline p, :lang(zh-CN) .integration-flow p, :lang(zh-CN) .landing-cta p { font-family: var(--font-cjk); font-size: .88rem; line-height: 1.9; color: #a9bab8; }
:lang(zh-CN) .hero-kicker, :lang(zh-CN) .eyebrow, :lang(zh-CN) .section-label, :lang(zh-CN) .button, :lang(zh-CN) .console-nav button, :lang(zh-CN) label { font-family: var(--font-cjk); font-weight: 700; letter-spacing: .05em; }
:lang(zh-CN) .signal-sources span, :lang(zh-CN) .signal-core span, :lang(zh-CN) .signal-core small, :lang(zh-CN) .signal-output span, :lang(zh-CN) .signal-output small, :lang(zh-CN) .result-terminal, :lang(zh-CN) code, :lang(zh-CN) pre { font-family: var(--font-data); }
:lang(zh-CN) .story-grid h3, :lang(zh-CN) .test-timeline strong, :lang(zh-CN) .result-definitions strong, :lang(zh-CN) .integration-flow strong, :lang(zh-CN) .landing-cta strong { font-family: var(--font-cjk); font-weight: 700; line-height: 1.55; }
:lang(zh-CN) .test-timeline strong { min-height: 3.1em; }

@media (max-width: 1000px) {
  .test-timeline { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .landing-result-guide { grid-template-columns: 1fr; gap: 48px; }
  .result-terminal { max-width: 640px; }
  .integration-flow { grid-template-columns: 1fr; }
  .integration-flow > div { padding: 18px 12px 20px; border-top: 1px solid var(--line); border-left: 2px solid #315158; }
  .integration-flow > i { height: 28px; justify-content: start; padding-left: 14px; transform: rotate(90deg); }
  .integration-code-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .signal-visual { grid-template-columns: 1fr; gap: 20px; padding: 22px 16px; }
  .signal-sources span::after, .signal-output::before { display: none; }
  .signal-core { width: 150px; justify-self: center; }
  .signal-output { width: 100%; }
  .landing-test-guide, .landing-result-guide, .landing-integration, .scope-section { padding-top: 62px; margin-top: 62px; }
  .scope-grid { grid-template-columns: 1fr; }
  .scope-grid article { min-height: 0; }
  .test-timeline { grid-template-columns: 1fr; }
  .test-timeline strong { min-height: 0; }
  .test-actions, .landing-cta { align-items: flex-start; flex-direction: column; }
  .landing-cta > div:last-child { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .result-definitions > div { grid-template-columns: 1fr; gap: 7px; }
  .result-terminal dl > div { grid-template-columns: 100px 1fr; }
  .landing-section-heading h2, .result-copy h2 { font-size: 2.35rem; }
}

/* Calm, staged motion keeps the signal story readable while making the page feel live. */
.hero-feature-grid > div,
.story-grid article,
.scope-grid article,
.test-timeline li,
.integration-flow > div,
.landing-cta {
  animation: landing-rise 520ms var(--ease-out, cubic-bezier(.23, 1, .32, 1)) both;
}

.hero-feature-grid > div:nth-child(2),
.story-grid article:nth-child(2),
.scope-grid article:nth-child(2),
.test-timeline li:nth-child(2),
.integration-flow > div:nth-child(3) { animation-delay: 55ms; }

.hero-feature-grid > div:nth-child(3),
.story-grid article:nth-child(3),
.scope-grid article:nth-child(3),
.test-timeline li:nth-child(3),
.integration-flow > div:nth-child(5) { animation-delay: 110ms; }

.test-timeline li:nth-child(4), .integration-flow > div:nth-child(7) { animation-delay: 165ms; }
.test-timeline li:nth-child(5) { animation-delay: 220ms; }

.signal-visual {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.signal-visual::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -18%;
  width: 18%;
  background: linear-gradient(90deg, transparent, rgba(85, 230, 223, .08), transparent);
  pointer-events: none;
  animation: signal-sweep 7s var(--ease-in-out, ease-in-out) infinite;
}

.signal-core::before { animation: signal-orbit 14s linear infinite; }
.signal-core::after { animation: signal-orbit-reverse 20s linear infinite; }

.signal-sources span,
.result-terminal,
.scope-grid article,
.story-grid article,
.integration-flow > div {
  transition: transform var(--duration-ui, 200ms) var(--ease-out, ease), border-color var(--duration-ui, 200ms) var(--ease-out, ease), box-shadow var(--duration-ui, 200ms) var(--ease-out, ease), background-color var(--duration-ui, 200ms) var(--ease-out, ease);
}

@media (hover: hover) and (pointer: fine) {
  .signal-sources span:hover,
  .scope-grid article:hover,
  .story-grid article:hover,
  .integration-flow > div:hover {
    transform: translateY(-4px);
    border-color: #3a656b;
    background-color: #0d181b;
    box-shadow: 0 18px 34px rgba(0, 0, 0, .22);
  }

  .signal-sources span:hover { color: var(--text); }

  .result-terminal:hover {
    transform: translateY(-3px);
    border-color: #3b6268;
    box-shadow: 0 36px 88px rgba(0, 0, 0, .42), 0 0 28px rgba(85, 230, 223, .08);
  }
}

@keyframes landing-rise {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes signal-sweep {
  0%, 20% { transform: translateX(0); opacity: 0; }
  35% { opacity: 1; }
  65%, 100% { transform: translateX(640%); opacity: 0; }
}

@keyframes signal-orbit { to { transform: rotate(360deg); } }
@keyframes signal-orbit-reverse { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
  .hero-feature-grid > div,
  .story-grid article,
  .scope-grid article,
  .test-timeline li,
  .integration-flow > div,
  .landing-cta { animation: none; }
  .signal-visual::after,
  .signal-core::before,
  .signal-core::after { animation: none; }
  .signal-sources span:hover,
  .scope-grid article:hover,
  .story-grid article:hover,
  .integration-flow > div:hover,
  .result-terminal:hover { transform: none; }
}