@import url("/typography.css?v=2");
@import url("/semantic_title.css?v=7");
@import url("/semantic_prose.css?v=3");

/* KeyMoment 站点外壳：六个页面共用的设计令牌、页眉、页脚与版式基元 */

:root {
  color-scheme: dark;
  --ink: #02070b;
  --white: #f1f8fa;
  --muted: #9bb2bc;
  --cyan: #73e8ff;
  --teal: #3addc3;
  --blue: #4097ff;
  --amber: #ffbc52;
  --edge: 4.3vw;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  /* 文字浮现用的缓动：起步快、收尾长，位移停下来不带回弹 */
  --ease-reveal: cubic-bezier(.28, .16, .22, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; background: var(--ink); color: var(--white); }
button, a { font: inherit; }
a { color: inherit; }

h1, h2 { margin: 0; }
.eyebrow { color: var(--cyan); }

.site-header {
  position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center;
  justify-content: space-between; padding: 24px var(--edge); pointer-events: none;
  /* 首页视频章节的画面是满亮度实拍，页眉必须自带足够深的压底才读得出导航 */
  background: linear-gradient(180deg, rgba(2,7,11,.92), rgba(2,7,11,.5) 58%, transparent);
}
.site-header a, .site-header button { pointer-events: auto; text-decoration: none; }
.brand-mark {
  display: flex; align-items: center; gap: 10px;
  animation: shell-fade-in 900ms var(--ease-out) 120ms both;
}
.brand-mark img { display: block; width: 30px; height: 30px; }
.brand-wordmark {
  display: flex; align-items: baseline; column-gap: 0.08em; line-height: 1;
  font-size: 17px; font-weight: 650; letter-spacing: -.025em;
}
.brand-wordmark b { color: #f5f5f7; font-style: oblique 10deg; font-weight: 550; padding-inline-end: 0.08em; }
.brand-wordmark em { color: var(--cyan); font-style: normal; font-weight: 750; }

.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a {
  position: relative; padding-bottom: 6px; color: rgba(241,248,250,.72);
  transition: color 200ms var(--ease-out);
}
.site-nav a::after {
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: var(--cyan); opacity: 0; transition: opacity 200ms var(--ease-out);
}
.site-nav a[aria-current="page"] { color: var(--cyan); }
.site-nav a[aria-current="page"]::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { color: var(--cyan); } }

/* ── 「产品」下拉 ────────────────────────────────────────
   两个交付端（小程序、网页版）各自一页，导航上仍只占一项。

   ── 悬停的空档必须长在命中面里 ──
   苹果的下拉之所以不会「指针往下走一半菜单就没了」，是因为面板与导航条之间
   压根没有空档：`--r-globalnav-background-opened` 那张面板直接贴着条的底边铺开。
   我们要留出视觉上的空档，那就把空档做进命中面：`.nav-drop-panel` 从触发器底边
   （top: 100%）起算，用透明的上内边距撑出那 12px，指针全程都在同一个悬停目标里。

   另一半是 `.nav-drop` 必须自己写 `pointer-events: auto`。页眉整体是
   `pointer-events: none`，只有 `a` 与 `button` 被恢复成 auto；下拉的外壳是个 div，
   不写这一行，它和它的伪元素就都不参与命中——早先那层 ::after 桥正是这么失效的，
   指针一离开按钮，菜单立刻关掉。

   ── 面板 ──
   深色站点的两种做法量过：Vercel 干脆不画面板，Linear 只留一道 1px 描边加一层
   柔和的暗投影。我们这一层压在首页的比赛实拍上，全透明读不出字，取 Linear 那一档。
   苹果那张是通栏、不透明、无圆角无描边无投影——通栏才撑得住，两项撑不住。
   项就是一行字加一枚线性图标：无底衬、无圆角，hover 只改字色。 */

.nav-drop { position: relative; pointer-events: auto; }
/* 触发器必须与旁边的 <a> 用同一副盒子：导航是 align-items: center，
   链接的内边距是不对称的（只有下边 6px），触发器若配成上下对称的内边距，
   文字就会比邻项低半个内边距——「产品」二字整体下沉的 bug 正是这么来的。 */
.nav-drop-trigger {
  display: flex; align-items: center; gap: 7px;
  padding: 0 0 6px; border: 0; background: none; cursor: pointer;
  color: rgba(241,248,250,.72);
  transition: color 200ms var(--ease-out);
}
.nav-drop-trigger[aria-current="page"] { color: var(--cyan); }
.nav-drop-caret {
  display: block; width: 5px; height: 5px;
  border-right: 1.2px solid currentColor; border-bottom: 1.2px solid currentColor;
  opacity: .5;
  /* 折角以自身中心转，展开时翻上去；translateY 补回旋转后重心的偏移 */
  transform: translateY(-2px) rotate(45deg);
  transition: transform 220ms var(--ease-out), opacity 200ms var(--ease-out);
}
.nav-drop.is-open .nav-drop-caret { opacity: 1; transform: translateY(1px) rotate(-135deg); }

/* 定位与显隐都归这一层：它从触发器底边起算，上内边距是透明的视觉空档 */
.nav-drop-panel {
  /* 左对齐的是字，不是盒子：偏移 = −（描边 1 + 卡片左内边距 14），
     菜单里的图标与导航上的「产品」二字落在同一条竖线上。 */
  position: absolute; top: 100%; left: -15px; padding-top: 12px;
  /* 收起时不参与命中也不占焦点顺序，只留一层淡出与位移 */
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out),
    visibility 0s linear 220ms;
}
.nav-drop.is-open .nav-drop-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s;
}
.nav-drop-menu {
  display: grid; gap: 12px; width: max-content; padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid rgba(241,248,250,.08);
  background: #080c11;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
.site-nav .nav-drop-menu a {
  display: flex; align-items: center; gap: 9px; padding: 0;
  white-space: nowrap;
  color: rgba(241,248,250,.62);
  transition: color 200ms var(--ease-out);
}
/* 菜单项就是一行字，不要导航链接那条青色下划线 */
.site-nav .nav-drop-menu a::after { content: none; }
.site-nav .nav-drop-menu a[aria-current="page"] { color: var(--cyan); }
/* 图标随文字走色，不单独配色：线宽固定 1.2，缩放时不跟着变粗 */
.nav-drop-icon {
  flex: none; width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .78;
}
@media (hover: hover) and (pointer: fine) {
  .site-nav .nav-drop-menu a:hover { color: var(--white); }
  .nav-drop:hover .nav-drop-trigger { color: var(--cyan); }
  /* 悬停展开时折角也要翻上去，否则只有点开的那一路对得上 */
  .nav-drop:hover .nav-drop-caret { opacity: 1; transform: translateY(1px) rotate(-135deg); }
  /* 展开与否只有两个来源：悬停（这一条）与 JS 写的 is-open。
     这里不能再挂 :focus-within——Esc 收起时焦点要送回触发器，焦点还在下拉里，
     :focus-within 就把刚收起的菜单又按回展开，JS 争不过它，Esc 形同虚设。
     键盘进出下拉改由 site_nav.js 的 focusin/focusout 显式开合。 */
  .nav-drop:hover .nav-drop-panel {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
    transition: opacity 200ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s;
  }
}

.site-nav-divider { width: 1px; height: 13px; background: rgba(241,248,250,.18); }
.lang-switch { display: flex; align-items: center; gap: 7px; }
.lang-switch button {
  padding: 0; border: 0; background: none; cursor: pointer;
  color: rgba(241,248,250,.34);
  transition: color 200ms var(--ease-out);
}
.lang-switch button[aria-pressed="true"] { color: var(--cyan); }
.lang-sep { color: rgba(241,248,250,.22); }

.page { padding: 25vh var(--edge) 10vh; }
.page > * { max-width: 1400px; }
.page-hero { max-width: 1180px; }
.page-section { margin-top: 10vh; }
.page-section-head { margin-bottom: 26px; }

.site-footer {
  position: relative; z-index: 1; background: var(--ink);
  display: grid; grid-template-columns: minmax(220px, 1fr) minmax(420px, 1.4fr) auto;
  align-items: start; gap: 32px;
  padding: 6vh var(--edge) 7vh; border-top: 1px solid rgba(124,166,255,.12);
  color: rgba(241,248,250,.4);
}
.site-footer img { display: block; width: 24px; height: 24px; opacity: .7; }
.footer-identity { display: grid; gap: 11px; }
.footer-brand { display: flex; align-items: center; gap: 8px; width: fit-content; }
.footer-brand .brand-wordmark { font-size: 14px; }
.footer-email {
  display: flex; gap: 8px; width: fit-content;
  color: rgba(241,248,250,.4);
}
.footer-email span:first-child { color: rgba(241,248,250,.26); }
.site-footer nav {
  display: grid; grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: clamp(28px, 4vw, 64px);
}
.footer-nav-group { display: grid; align-content: start; gap: 9px; }
.footer-nav-heading {
  margin: 0 0 4px; color: rgba(241,248,250,.26);
  font: inherit; font-weight: 600;
}
.site-footer small { align-self: end; justify-self: end; }
.site-footer a { text-decoration: none; transition: color 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .site-footer a:hover { color: var(--cyan); } }

@keyframes shell-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 960px) {
  :root { --edge: 6vw; }
  .site-header {
    display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: auto auto; row-gap: 12px; padding: 20px var(--edge);
  }
  .site-header .brand-mark { grid-column: 1 / 6; grid-row: 1; justify-self: start; }
  .site-header .site-nav { display: contents; }
  /* 导航项不再全是 <a>：「产品」是一个下拉容器，列位因此按 nth-child 排，
     七个导航项排在 DOM 的前七位，分隔线与语言开关跟在后面另行安置。 */
  .site-header .site-nav > a,
  .site-header .site-nav > .nav-drop {
    grid-row: 2; width: 100%;
    text-align: center;
  }
  /* 下沉的那一档内边距只能加一次：链接自己带，下拉是外壳、内边距归触发器。
     两处都加就等于 8px 对 4px，栅格拉伸后「产品」二字会比邻项高出一截。 */
  .site-header .site-nav > a { padding-bottom: 4px; }
  .site-header .site-nav > a, .site-header .nav-drop-trigger { font-size: clamp(10px, 2.4vw, 13px); }
  .site-header .site-nav > :nth-child(1) { grid-column: 1; }
  .site-header .site-nav > :nth-child(2) { grid-column: 2; }
  .site-header .site-nav > :nth-child(3) { grid-column: 3; }
  .site-header .site-nav > :nth-child(4) { grid-column: 4; }
  .site-header .site-nav > :nth-child(5) { grid-column: 5; }
  .site-header .site-nav > :nth-child(6) { grid-column: 6; }
  .site-header .site-nav > :nth-child(7) { grid-column: 7; }
  /* 窄屏下触发器撑满所在列，与同一语义角色的链接保持居中。 */
  .site-header .nav-drop-trigger {
    justify-content: center; width: 100%; padding: 0 0 4px;
  }
  .nav-drop-caret { width: 4px; height: 4px; }
  /* 这一档没有悬停，面板由点按打开；栏很窄，改成在触发器下居中 */
  .nav-drop-panel { left: 50%; transform: translate(-50%, -6px); }
  .nav-drop.is-open .nav-drop-panel { transform: translate(-50%, 0); }
  .site-header .lang-switch { grid-column: 7; grid-row: 1; justify-self: end; }
  .site-nav-divider { display: none; }
  .lang-switch { gap: 5px; }
  .page { padding-top: 22vh; }
  .site-footer { grid-template-columns: 1fr; gap: 28px; }
  .site-footer nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 32px; width: 100%;
  }
  .site-footer small { justify-self: start; }
}

@media (max-width: 640px) {
  html[lang="en"] .site-header { grid-template-columns: .65fr .9fr .95fr 1fr 1.25fr .65fr .85fr; }
  html[lang="en"] .site-header .site-nav > a,
  html[lang="en"] .site-header .nav-drop-trigger { font-size: 10px; line-height: 1.35; }
}

@media (max-width: 420px) {
  .site-nav { gap: 9px; }
  .site-header .nav-drop-trigger { gap: 5px; }
  .brand-mark img { width: 26px; height: 26px; }
}

@media (max-width: 360px) {
  :root { --edge: 4vw; }
  .site-header { column-gap: 3px; }
  html[lang="en"] .site-header .site-nav > a,
  html[lang="en"] .site-header .nav-drop-trigger {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .brand-mark { animation: none; }
}