/* ============================================================================
   MotionLang · 产品网页（landing）
   ---------------------------------------------------------------------------
   设计语言**直接沿用应用本身**，不另起一套：
     · 同一批语义化 token（底色 / 悬空面 / 发丝线 / 标签层次）——值逐条抄自
       src/renderer/styles.css，改那边就应该同步改这里
     · 同一个字体栈（SF / 苹方 / Segoe UI / 微软雅黑）
     · 同一组弹簧曲线（临界阻尼，不过冲）
     · 同一个品牌标记（三段渐变小竖条 + 呼吸动画）
   所以这一页和应用看起来是同一个东西的两种尺寸，而不是「官网」和「产品」。

   与原应用的一处**有意分歧**：外观默认跟随系统。
   应用里默认白日（用户在应用里待很久，显式选择更稳）；
   这一页是一张纸，跟随系统更礼貌。
   ========================================================================= */

/* ============================================================ 设计 token */

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "PingFang SC", "Hiragino Sans", "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, "Cascadia Mono", Consolas, monospace;

  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --tint: #007aff;
  --tint-press: #0069d9;
  --on-accent: #fff;

  /* 弹簧：临界阻尼（不过冲）。带惯性手势才允许过冲，页面里没有这种手势。 */
  --spring-settle: 420ms cubic-bezier(0.32, 0.72, 0, 1);
  --spring-snappy: 300ms cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);

  --page-max: 1080px;
}

/* ------------------------------------------------------------- 白日外观 */
:root[data-appearance="light"] {
  color-scheme: light;
  --content-bg: #e8ebf1;
  --surface: #e8ebf1;
  --surface-float: #f7f9fc;
  --surface-float-2: #fff;
  --hairline: rgba(120, 132, 152, 0.24);

  --label: rgba(26, 30, 38, 0.93);
  --label-2: rgba(58, 66, 80, 0.72);
  --label-3: rgba(58, 66, 80, 0.46);

  --separator: rgba(120, 132, 152, 0.2);
  --fill: rgba(120, 132, 152, 0.14);

  --edge-highlight: rgba(255, 255, 255, 0.9);
  --float-edge: inset 0 1px 0 rgba(255, 255, 255, 0.95);
  --float-1: 0 1px 1.5px rgba(28, 39, 58, 0.08), 0 4px 10px -3px rgba(28, 39, 58, 0.1);
  --float-2: 0 1px 2px rgba(28, 39, 58, 0.09), 0 9px 22px -7px rgba(28, 39, 58, 0.16);
  --float-3: 0 2px 5px rgba(28, 39, 58, 0.1), 0 22px 48px -16px rgba(28, 39, 58, 0.24);
  --sink-sm: inset 0 2px 5px rgba(28, 39, 58, 0.15);

  --glow-1: rgba(10, 132, 255, 0.16);
  --glow-2: rgba(191, 90, 242, 0.13);
  --glow-3: rgba(255, 55, 95, 0.09);
}

/* ------------------------------------------------------------- 夜间外观 */
:root[data-appearance="dark"] {
  color-scheme: dark;
  --content-bg: #24262c;
  --surface: #24262c;
  --surface-float: #31343d;
  --surface-float-2: #3a3e48;
  --hairline: rgba(255, 255, 255, 0.13);

  --label: rgba(255, 255, 255, 0.95);
  --label-2: rgba(232, 236, 245, 0.68);
  --label-3: rgba(232, 236, 245, 0.42);

  --separator: rgba(255, 255, 255, 0.08);
  --fill: rgba(255, 255, 255, 0.07);

  --tint: #0a84ff;
  --tint-press: #0a74e0;

  --edge-highlight: rgba(255, 255, 255, 0.08);
  --float-edge: inset 0 1px 0 rgba(255, 255, 255, 0.075);
  --float-1: 0 1px 1.5px rgba(0, 0, 0, 0.45), 0 4px 10px -3px rgba(0, 0, 0, 0.42);
  --float-2: 0 1px 2px rgba(0, 0, 0, 0.5), 0 9px 22px -7px rgba(0, 0, 0, 0.58);
  --float-3: 0 2px 5px rgba(0, 0, 0, 0.55), 0 22px 48px -16px rgba(0, 0, 0, 0.72);
  --sink-sm: inset 0 2px 6px rgba(0, 0, 0, 0.55);

  --glow-1: rgba(10, 132, 255, 0.2);
  --glow-2: rgba(191, 90, 242, 0.16);
  --glow-3: rgba(255, 55, 95, 0.1);
}

/* ================================================================ 基础 */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  /* 页面本体不滚出横条：光晕是固定定位的，宽高按视口算，不该被它撑开 */
  overflow-x: hidden;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--content-bg);
  color: var(--label);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  transition:
    background-color var(--spring-settle),
    color var(--spring-settle);
}

/* 三团品牌色光晕：蓝 → 紫 → 粉，和品牌标记同一个渐变的三段。
   它们给这一页一点纵深和一丁点颜色，但**不是图案** ——
   不需要被"看见"，只需要让那片空白不像没做完。
   固定在视口上，滚动时不跟着走（跟着走会变成廉价的背景动画）。 */
body::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 78vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(46% 58% at 22% 12%, var(--glow-2), transparent 68%),
    radial-gradient(40% 54% at 78% 6%, var(--glow-1), transparent 66%),
    radial-gradient(30% 40% at 54% 30%, var(--glow-3), transparent 70%);
  filter: blur(6px);
}

.topbar,
main,
.foot {
  position: relative;
  z-index: 1;
}

.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 键盘焦点：只在键盘操作时露出来，鼠标点击不留圈 */
:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ================================================================ 顶栏 */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 26px 32px 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-md);
}

/* 品牌标记 —— 与应用侧栏里那一枚是同一条 CSS（渐变色、竖条、呼吸动画都一样） */
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(145deg, #0a84ff, #bf5af2 52%, #ff375f);
  display: grid;
  grid-auto-flow: column;
  place-items: center;
  gap: 2.5px;
  flex: none;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.28),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
}

.brand-mark span {
  width: 2.5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.95);
  animation: brandPulse 1.8s var(--spring-settle) infinite;
}
.brand-mark span:nth-child(1) { height: 7px; animation-delay: 0s; }
.brand-mark span:nth-child(2) { height: 13px; animation-delay: 0.14s; }
.brand-mark span:nth-child(3) { height: 9px; animation-delay: 0.28s; }

@keyframes brandPulse {
  0%, 100% { transform: scaleY(0.5); opacity: 0.6; }
  50% { transform: scaleY(1); opacity: 1; }
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-text strong {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.012em;
}
.brand-text > span {
  font-size: 11px;
  color: var(--label-3);
  letter-spacing: 0.012em;
}

.topbar-end {
  position: relative;
  display: flex;
  align-items: center;
}

/* 右上角设置齿轮。悬空面 + 发丝线，和「设置」按钮在应用里是同一个东西。 */
.gear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-float);
  color: var(--label-2);
  cursor: pointer;
  box-shadow: var(--float-1), var(--float-edge);
  transition:
    transform var(--spring-snappy),
    box-shadow var(--spring-snappy),
    color var(--spring-snappy);
}
.gear:hover {
  color: var(--label);
  box-shadow: var(--float-2), var(--float-edge);
}
.gear:active {
  transform: translateY(1px) scale(0.97);
  box-shadow: var(--sink-sm);
}
.gear[aria-expanded="true"] {
  color: var(--tint);
}

/* ------------------------------------------------------------ 设置浮层 */
.popover {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 232px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface-float-2);
  box-shadow: var(--float-3), var(--float-edge), inset 0 0 0 0.5px var(--hairline);
  z-index: 20;
  /* 从齿轮那一点长出来，而不是淡入 —— 空间关系更明确 */
  transform-origin: top right;
  animation: popIn var(--spring-settle) both;
}

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.popover .field + .field {
  margin-top: 14px;
}

.field-label {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 500;
  color: var(--label-3);
  letter-spacing: 0.012em;
}

/* 分段控件：与应用里的 .seg 同一套观感（内凹槽 + 悬空滑块） */
.seg {
  position: relative;
  display: flex;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--fill);
  box-shadow: inset 0 0 0 0.5px var(--hairline);
}

.seg-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  border-radius: 8px;
  background: var(--surface-float-2);
  box-shadow: var(--float-1), var(--float-edge);
  transition:
    transform var(--spring-snappy),
    width var(--spring-snappy);
  pointer-events: none;
  z-index: 0;
}

.seg button {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 5px 4px;
  border: 0;
  background: none;
  border-radius: 8px;
  color: var(--label-2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--spring-snappy);
}
.seg button[aria-pressed="true"] {
  color: var(--label);
  font-weight: 600;
}

/* ================================================================== 首屏 */

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 76px 32px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 20px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--label-3);
  text-transform: none;
}

/* 大字号收紧字距 —— 这是 macOS 的做法，也是应用里 --tk-largetitle 的做法。
   中文同样受益：大字号松开字距会散架。 */
.display {
  margin: 0;
  font-size: clamp(30px, 5.2vw, 52px);
  line-height: 1.14;
  font-weight: 700;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.lede {
  max-width: 596px;
  margin: 22px auto 0;
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.68;
  color: var(--label-2);
  text-wrap: pretty;
}

/* ------------------------------------------------------------ 主按钮 */
.cta {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 26px;
  border-radius: var(--r-xl);
  background: var(--tint);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.006em;
  text-decoration: none;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--tint) 45%, rgba(0, 0, 0, 0.3)),
    0 10px 24px -8px color-mix(in srgb, var(--tint) 55%, transparent);
  transition:
    transform var(--spring-snappy),
    box-shadow var(--spring-snappy),
    background-color 160ms var(--ease-out);
}
.btn-primary:hover {
  background: var(--tint-press);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--tint) 45%, rgba(0, 0, 0, 0.3)),
    0 14px 30px -8px color-mix(in srgb, var(--tint) 60%, transparent);
}
.btn-primary:active {
  transform: translateY(1px) scale(0.985);
}
/* 箭头在悬停时向前挪一点点 —— 一个方向提示，不是装饰动画 */
.btn-primary svg {
  transition: transform var(--spring-snappy);
}
.btn-primary:hover svg {
  transform: translateX(2px);
}

.cta-note {
  margin: 0;
  font-size: 12px;
  color: var(--label-3);
}

/* ======================================================= 演示（不是截图） */

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: 18px;
  margin: 64px auto 0;
  max-width: 880px;
  text-align: left;
}

.showcase-stage {
  display: grid;
  /* 内容在凹槽里居中。用 place-content 而不是 place-items：
     min-height 给出的多余空间要均分到上下，不能全堆在卡片上方（那样看着像没对齐）。 */
  place-content: center;
  place-items: center;
  min-height: 190px;
  padding: 22px;
  border-radius: var(--r-lg);
  /* 舞台是「凹进去」的：和底色同色 + 内阴影，演示内容悬在它上面 */
  background: color-mix(in srgb, var(--label) 4%, transparent);
  box-shadow: inset 0 1px 3px rgba(28, 39, 58, 0.07);
}
:root[data-appearance="dark"] .showcase-stage {
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* 被演示的对象：一张通知卡片。用产品自己演示素材的观感（悬空面 + 发丝线）。 */
.demo-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 268px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--surface-float-2);
  box-shadow: var(--float-2), var(--float-edge), inset 0 0 0 0.5px var(--hairline);
  will-change: transform, opacity;
}

.demo-ico {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: linear-gradient(145deg, #0a84ff, #bf5af2);
  box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
}

.demo-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.demo-txt b {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.008em;
}
.demo-txt i {
  font-style: normal;
  font-size: 11px;
  color: var(--label-3);
}

/* 文字面板：这就是产品真正交付的东西 —— 一段能直接粘给 AI 的话 */
.showcase-panel {
  display: flex;
  flex-direction: column;
  padding: 16px 18px;
  border-radius: var(--r-lg);
  background: var(--surface-float-2);
  box-shadow: var(--float-2), var(--float-edge), inset 0 0 0 0.5px var(--hairline);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 11px;
  font-weight: 500;
  color: var(--label-3);
  letter-spacing: 0.012em;
}

/* 三个点 = 这一轮演示的进度。当前那条是实心。 */
.panel-dots {
  display: flex;
  gap: 5px;
}
.panel-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--label-3);
  opacity: 0.35;
  transition:
    opacity var(--spring-snappy),
    background-color var(--spring-snappy);
}
.panel-dots i.on {
  opacity: 1;
  background: var(--tint);
}

.panel-body {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.72;
  color: var(--label-2);
  letter-spacing: -0.002em;
}

/* ------------------------------------------------------------ 底数 */
.stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 58px 0 0;
  padding: 0;
  list-style: none;
}
.stats li {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  color: var(--label-3);
}
.stats b {
  font-size: 15px;
  font-weight: 600;
  color: var(--label-2);
  letter-spacing: -0.012em;
  font-variant-numeric: tabular-nums;
}

/* ================================================================== 页脚 */

.foot {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 32px 40px;
}

.foot-nav {
  display: flex;
  justify-content: center;
  padding: 22px 0 6px;
  border-top: 0.5px solid var(--separator);
}

.foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--label-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    color var(--spring-snappy),
    background-color var(--spring-snappy);
}
.foot-link:hover {
  color: var(--label);
  background: var(--fill);
}
.foot-link .chev {
  transition: transform var(--spring-snappy);
}
.foot-link[aria-expanded="true"] .chev {
  transform: rotate(180deg);
}

/* 作者卡片：内联展开，不用弹窗。
   展开高度靠 grid-template-rows 0fr → 1fr（不需要预先知道内容高度）。 */
.about-panel {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows var(--spring-settle);
}
.about-panel[data-open="1"] {
  grid-template-rows: 1fr;
}

.about-inner {
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 10px 0 22px;
}

.about-qr {
  width: 132px;
  height: 132px;
  border-radius: var(--r-lg);
  background: #fff; /* 二维码必须压在白底上，深色模式下也要能扫 */
  padding: 8px;
  box-shadow: var(--float-2), var(--float-edge);
  flex: none;
}

.about-txt {
  max-width: 340px;
}

.about-lead {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--label-2);
}

.about-contacts {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.about-contacts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
}
.about-k {
  flex: none;
  width: 40px;
  color: var(--label-3);
  font-size: 12px;
}
.about-v {
  color: var(--label-2);
}
.about-mail {
  color: var(--tint);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--tint) 35%, transparent);
  padding-bottom: 1px;
  transition: border-color var(--spring-snappy);
}
.about-mail:hover {
  border-bottom-color: var(--tint);
}

.foot-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--label-3);
  letter-spacing: 0.012em;
}

/* ============================================================== 响应式 */

/* 窄屏：演示改成上下两段，段落收窄。
   分栏是给宽屏的奢侈，手机上硬挤两栏两边都读不了。 */
@media (max-width: 760px) {
  .topbar {
    padding: 20px 20px 0;
  }
  .hero {
    padding: 52px 20px 64px;
  }
  .showcase {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 46px;
  }
  .showcase-stage {
    min-height: 150px;
    padding: 18px;
  }
  .stats {
    margin-top: 40px;
    gap: 8px 20px;
  }
  .foot {
    padding: 0 20px 32px;
  }
  .about-inner {
    gap: 18px;
  }
  /* 手机上二维码居中、文字也居中 */
  .about-txt {
    text-align: center;
  }
  .about-contacts li {
    justify-content: center;
  }
}

/* ============================================== 无障碍：减弱动效 */

/* 用系统信号关掉所有"自己会动"的东西（光晕呼吸、品牌脉动、演示轮播由 JS 停）。
   按下反馈保留 —— 那是交互，不是动画。 */
@media (prefers-reduced-motion: reduce) {
  .brand-mark span {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .popover {
    animation: none;
  }
  .about-panel,
  .seg-thumb,
  .btn-primary,
  .gear,
  .foot-link {
    transition: none;
  }
}

/* 减弱透明度：光晕直接去掉，别用模糊去模拟它 */
@media (prefers-reduced-transparency: reduce) {
  body::before {
    display: none;
  }
}

/* 增强对比度：把新拟物的软边界换成明确描边 */
@media (prefers-contrast: more) {
  .popover,
  .showcase-panel,
  .demo-card,
  .seg,
  .gear {
    box-shadow: inset 0 0 0 1px var(--label-3);
  }
  .showcase-stage {
    box-shadow: inset 0 0 0 1px var(--separator);
  }
}