/* ============================================================
   NativeLike 精听教练 — landing page
   自包含：无外部字体、远程图片或第三方脚本。
   token 与应用的浅色 surface 保持一致
   （static/style.css，body.score-surface）。
   ============================================================ */

:root {
  --paper: #f3f4f6;
  --ink: #202735;
  --muted: #656d79;
  --faint: #a2a8b2;
  --rule: #dfe2e7;
  --blue: #253fe2;
  --blue-deep: #182ebd;
  --danger: #c43d3d;
  /* 导航里「精听教练」那行小字。取值同应用的 --nl-color-content-muted，
     对齐优先于对比度 —— 它只有 2.2:1，要改就两边一起改。 */
  --nav-sub: #9aa9a5;

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;

  --gutter: clamp(20px, 5.5vw, 64px);
  --wide: 1240px;
  --nav-h: 79px;   /* 同应用的 body.score-surface .topnav */

  --dur: 200ms;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 18px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ---------- background layers -------------------------------------------
   0 网格 + 底噪光晕   1 canvas 波形舞台   2 内容
   装饰恒低于内容层的视觉权重。 */

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* 极淡的网格，沿用 body.score-surface::before 的语言 */
body::before {
  background:
    linear-gradient(rgba(37, 63, 226, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 63, 226, .035) 1px, transparent 1px);
  background-size: 48px 48px;
}

body::after {
  background: radial-gradient(820px 560px at -12% 108%, rgba(37, 63, 226, .04), transparent 62%);
}

#stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.topnav, main, .footer { position: relative; z-index: 2; }

/* ---------- skip link ---------- */

.skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--blue);
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip:focus { transform: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- focus ---------- */

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------- top nav ----------
   逐项对齐 static/style.css 的 body.score-surface .topnav：
   高度 79/72、左右 4%/5%、毛玻璃、品牌字重 800、logo 用同一个 ◒。
   两页之间来回走时，顶栏不应该有位移或字形跳变。 */

.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 4%;
  padding: 0;
  height: var(--nav-h);
  background: rgba(243, 244, 246, .86);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 0 rgba(32, 39, 53, .035);
}

.brand {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  gap: 8px;
  margin-right: 12px;
  height: 100%;
  line-height: 1;
  color: var(--ink);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.025em;
  text-decoration: none;
}
/* 浅色主题下 --nl-color-accent 被改写为 --score-blue，所以这里是蓝色而非荧光绿 */
.brand::before { content: "◒"; color: var(--blue); font-size: 15px; }
.brand span { color: var(--nav-sub); font-size: 13px; font-weight: 500; letter-spacing: .02em; }

.topnav-links {
  display: flex;
  align-items: center;
  align-self: stretch;
  height: 100%;
  gap: 30px;
}
.topnav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  height: 100%;
  min-height: 40px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.topnav-links a:hover { color: var(--blue); background: rgba(255, 255, 255, .045); }
.topnav-links .nav-cta { color: var(--blue); }

@media (max-width: 560px) {
  :root { --nav-h: 72px; }
  .topnav { margin: 0 5%; }
  .brand { margin-right: auto; }
  .brand span { display: none; }
  .topnav-links { gap: 2px; }
  /* 落地页比应用多一个入口，窄屏只留品牌和出口 */
  .topnav-links a:not(.nav-cta) { display: none; }
}

/* ---------- hero ---------- */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100svh - var(--nav-h));
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(56px, 9vh, 120px) var(--gutter) clamp(48px, 8vh, 104px);
}

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(10px, .95vw, 11.5px);
  letter-spacing: .16em;
  color: var(--faint);
}
.hero .eyebrow { margin-bottom: clamp(18px, 2.6vw, 32px); }

.hero h1 {
  margin: 0;
  font-size: clamp(52px, 14.5vw, 188px);
  font-weight: 500;
  line-height: .94;
  letter-spacing: -.055em;
}

.lede {
  max-width: 26em;
  margin: clamp(24px, 3.4vw, 42px) 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: clamp(30px, 4.4vw, 54px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: 0;
  background: var(--blue);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 12px 28px -16px rgba(37, 63, 226, .8);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { background: var(--blue-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: default; box-shadow: none; }

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule);
  box-shadow: none;
}
.btn.ghost:hover { background: transparent; border-color: var(--blue); color: var(--blue); }

.cue {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: clamp(44px, 8vh, 92px) 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--faint);
}
.cue-rail {
  position: relative;
  display: block;
  flex: none;
  width: 1px;
  height: 46px;
  background: var(--rule);
  overflow: hidden;
}
.cue-rail::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 16px;
  background: var(--blue);
  animation: cue-drop 2.6s var(--ease) infinite;
}
@keyframes cue-drop {
  0%   { transform: translateY(-18px); }
  70%, 100% { transform: translateY(50px); }
}

/* ---------- sections ---------- */

.section {
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(68px, 11vh, 148px) var(--gutter) 0;
  scroll-margin-top: calc(var(--nav-h) + 18px);
}

.section-head { max-width: 40em; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head h2 {
  margin: 14px 0 0;
  font-size: clamp(28px, 4.2vw, 54px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.045em;
}
.section-head p:last-child:not(:first-child) {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(15px, 1.3vw, 17px);
}

/* ---------- 五步 ---------- */

.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.step {
  min-width: 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.step-num {
  display: block;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1;
  letter-spacing: .01em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.step-name {
  margin: 0 0 8px;
  font-size: clamp(17px, 1.5vw, 20px);
  font-weight: 500;
  letter-spacing: -.02em;
}

.step-desc {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.72;
  overflow-wrap: anywhere;
}

@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 34px; }
}
@media (min-width: 1060px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 26px; }
}

/* ---------- 功能 ---------- */

.features {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.feature {
  min-width: 0;
  padding: 20px 0 22px;
  border-top: 1px solid var(--rule);
}
.feature h3 {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.01em;
}
.feature p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

@media (min-width: 640px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
}
@media (min-width: 1080px) {
  .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- 界面截图 ----------
   截图本身是深色界面，装进深色屏幕框里，
   在雾白纸面上读起来是一块亮着的屏，而不是贴上去的图。 */

.shots {
  display: grid;
  gap: clamp(36px, 5vw, 76px);
}

.shot { margin: 0; min-width: 0; }

.shot-frame {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: #0b0f12;
  box-shadow: 0 44px 92px -52px rgba(32, 39, 53, .6), 0 2px 8px rgba(32, 39, 53, .05);
}
.shot-frame img { width: 100%; }

.shot figcaption {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13.5px;
}
.shot figcaption b {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--blue);
}

.shot.secondary { width: min(100%, 860px); justify-self: end; }

/* ---------- 邀请码 ---------- */

.invite-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 520px;
}

.invite-form input {
  flex: 1 1 240px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.invite-form input::placeholder { color: var(--faint); }
.invite-form input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 63, 226, .12);
}
.invite-form input[aria-invalid="true"] { border-color: var(--danger); }

/* 预留两行，出错时不推挤下面的内容 */
.invite-msg {
  margin: 14px 0 0;
  min-height: 3em;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
}
.invite-msg[data-kind="error"] { color: var(--danger); }

@media (max-width: 560px) {
  .invite-form { flex-direction: column; align-items: stretch; }
  /* flex-basis 在纵向容器里作用于主轴=高度，会把输入框撑成 240px 高 */
  .invite-form input { flex: 0 0 auto; }
}

/* ---------- footer ---------- */

.footer {
  margin-top: clamp(72px, 11vh, 150px);
  border-top: 1px solid var(--rule);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  max-width: var(--wide);
  margin-inline: auto;
  padding: clamp(26px, 4vw, 42px) var(--gutter);
  color: var(--faint);
  font-size: 13px;
}
.footer-inner p { margin: 0; }

/* ---------- reduced motion ----------
   canvas 的降级在 landing.js 里读取同一个偏好，
   只写 CSS 规则不算完成。 */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .cue-rail::after { display: none; }
}