/* 启航AI平台 — marketing site
   设计令牌 + Tailwind 无法干净表达的部分(关键帧/渐变意象/排版细节)。
   Tailwind 负责布局工具类,这里负责"启航"的视觉个性。 */

:root {
  /* 暖纸感中性 —— 中性往品牌色微调以求潜意识统一,避免纯白纯灰 */
  --paper:    oklch(98.6% 0.006 95);
  --paper-2:  oklch(96.2% 0.009 92);
  --paper-3:  oklch(93.5% 0.012 90);
  --line:     oklch(89% 0.012 90);

  --ink:      oklch(26% 0.03 258);   /* 主文字:深蓝墨,非纯黑 */
  --ink-soft: oklch(46% 0.025 258);  /* 次文字:同色相变浅,不用灰 */
  --ink-mute: oklch(60% 0.02 258);

  /* 钴蓝主色 —— 信任 + 航向感 */
  --brand:      oklch(55% 0.17 256);
  --brand-deep: oklch(42% 0.155 258);
  --brand-tint: oklch(94% 0.03 256);

  /* 日出暖橙 —— "启航"的地平线之光,只做点缀与 CTA */
  --sun:      oklch(74% 0.155 52);
  --sun-deep: oklch(67% 0.175 40);
  --sun-tint: oklch(95% 0.035 60);

  --shadow-sm: 0 1px 2px oklch(26% 0.03 258 / 0.06), 0 2px 6px oklch(26% 0.03 258 / 0.05);
  --shadow-md: 0 10px 30px oklch(40% 0.06 258 / 0.10), 0 2px 8px oklch(40% 0.06 258 / 0.06);
  --shadow-lg: 0 30px 60px oklch(40% 0.08 258 / 0.16), 0 8px 20px oklch(40% 0.06 258 / 0.08);

  --display: "Bricolage Grotesque", "PingFang SC", "HarmonyOS Sans SC", system-ui, sans-serif;
  --sans: "Hanken Grotesk", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--ink); background: var(--paper); }

::selection { background: var(--sun); color: oklch(28% 0.05 40); }

/* 流体字号:在大屏自然呼吸 */
.display { font-family: var(--display); letter-spacing: -0.025em; line-height: 0.98; font-weight: 700; }
.h-hero  { font-size: clamp(2.6rem, 6.5vw, 5.2rem); }
.h-sec   { font-size: clamp(2rem, 3.8vw, 3.2rem); letter-spacing: -0.02em; line-height: 1.04; }
.eyebrow { letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; font-size: 0.72rem; }

/* CJK 标题加重 + 收紧字距,撑出年轻有力的气质(系统 CJK 字体没有 800,用 700+收紧近似) */
:lang(zh), .cjk { letter-spacing: -0.01em; }

/* ---- 启航意象:日出地平线背景带 ---- */
.horizon {
  background:
    radial-gradient(120% 90% at 78% -10%, var(--sun-tint) 0%, transparent 46%),
    radial-gradient(140% 120% at 8% -20%, var(--brand-tint) 0%, transparent 50%),
    var(--paper);
}
.sun-arc {
  background: conic-gradient(from 200deg at 50% 100%,
    var(--sun) 0deg, var(--sun-deep) 40deg, var(--brand) 120deg, var(--brand-deep) 160deg);
}

/* 细网格底纹:克制的"工具感",不喧宾夺主 */
.grid-faint {
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}

/* 按钮 */
.btn { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 999px;
  font-weight: 600; line-height: 1; transition: transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s, background .18s; }
.btn:active { transform: translateY(1px); }
.btn-sun { background: var(--sun); color: oklch(27% 0.06 40); box-shadow: 0 6px 18px oklch(67% 0.175 40 / .35); }
.btn-sun:hover { box-shadow: 0 10px 26px oklch(67% 0.175 40 / .45); transform: translateY(-2px); }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-mute); }

/* 产品窗口拟态(明亮,非玻璃拟态) */
.window { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); }
.chip { border: 1px solid var(--line); background: var(--paper); border-radius: 999px; }

/* 能力行的序号大字 */
.idx { font-family: var(--display); font-weight: 700; color: var(--paper-3); font-size: clamp(3rem, 7vw, 6rem); line-height: 0.8; }

/* 滚动后导航条:磨砂实底(var 色 + 透明度,需自定义类) */
#navbar.nav-solid {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
          backdrop-filter: saturate(140%) blur(10px);
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

/* 链接下划线动画 */
.ulink { position: relative; }
.ulink::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.ulink:hover::after { transform: scaleX(1); }

/* ---- 入场动画:一次编排良好的页面载入胜过零散微交互 ---- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }

@keyframes float-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero-stagger > * { animation: float-up .8s cubic-bezier(.16,1,.3,1) both; }
.hero-stagger > *:nth-child(1) { animation-delay: .05s; }
.hero-stagger > *:nth-child(2) { animation-delay: .15s; }
.hero-stagger > *:nth-child(3) { animation-delay: .25s; }
.hero-stagger > *:nth-child(4) { animation-delay: .35s; }
.hero-stagger > *:nth-child(5) { animation-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal], .hero-stagger > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
}

/* ---- 完整客户端界面 showcase:固定 1280×760 设计稿,按容器宽度等比缩放(JS) ---- */
.app-showcase {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  background: var(--paper);
}
.app-showcase-scale { transform-origin: top left; width: 1280px; }
.app-showcase .cm-full { border-radius: 18px; }
/* 缩放就绪前先撑住高度,避免布局跳动(按 max-shell≈1120 → s≈0.875 估算) */
.app-showcase { min-height: 0; }