/* ==========================================================================
   小马上岸 · 官网（营销站）基础样式（Reset + 营销站壳 + 排版工具）
   布局：顶部说明栏（独立预览）+ 顶栏导航 + 多屏纵向内容 + CTA 横幅 + 页脚
   画框：1440 营销站，大留白版式（间距刻度 24 / 48 / 96），内容最大宽 1200
   说明：官网为响应式整页滚动，不做固定画框缩放；聚合预览按真实高度展开
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--color-on-surface);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: clip;
  transition: background-color var(--dur-base), color var(--dur-base);
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; outline: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
i[data-ico] { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: none; }

/* ---------- 说明栏（独立打开可见，iframe 聚合预览内隐藏） ---------- */
:root { --note-h: 30px; }
body[data-embed="1"] { --note-h: 0px; }
.note-bar {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--space-2);
  height: var(--note-h); padding: 0 var(--space-6);
  font-size: var(--fs-14);
  color: var(--color-on-surface-variant);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-outline);
  white-space: nowrap; overflow: hidden;
  transition: height var(--dur-base);
}
.note-bar .note-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex: none; }
.note-bar strong { color: var(--color-on-surface); font-weight: var(--fw-semibold); }
.note-bar .note-bar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }
.note-bar a, .note-bar button {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 10px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600; color: var(--color-on-surface-variant);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.note-bar a:hover, .note-bar button:hover { color: var(--color-primary); background: var(--color-surface); }
.note-bar { display: none !important; }

/* ---------- 营销站壳 ---------- */
.site { display: flex; flex-direction: column; min-height: 100vh; }

/* 顶部导航 */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  display: flex; align-items: center; gap: var(--space-6);
  height: var(--nav-h); padding: 0 clamp(20px, 5vw, 80px);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), top var(--dur-base);
}
.nav.is-scrolled { border-bottom-color: var(--color-outline); box-shadow: var(--shadow-xs); }

.nav .brand { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: var(--fs-18); flex: none; }
/* 品牌标识：几何与配色唯一来源见 ui/README.md §4.2；--bm 是唯一尺寸变量 */
.nav .brand-mark {
  --bm: var(--brand-mark-lg);
  width: var(--bm); height: var(--bm); flex: none;
  border-radius: calc(var(--bm) * .30);
  background: var(--brand-gradient); color: #fff;
  display: grid; place-items: center;
  font-size: calc(var(--bm) * .58);
  box-shadow: var(--brand-shadow);
}
.nav .brand-sub { font-family: var(--font-num); font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); letter-spacing: .02em; }

.nav .nav-links { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav .nav-links a {
  display: inline-flex; align-items: center; height: 38px; padding: 0 14px;
  border-radius: var(--radius-full); font-size: var(--fs-14); font-weight: 600;
  color: var(--color-on-surface-variant);
  transition: color var(--dur-fast), background var(--dur-fast);
}
.nav .nav-links a:hover { color: var(--color-on-surface); background: var(--color-surface-2); }
.nav .nav-links a.active { color: var(--color-primary); background: var(--color-primary-container); }

.nav .nav-tools { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex: none; }

/* 主内容 */
main { flex: 1 0 auto; }

/* 内容容器 */
.container { width: 100%; max-width: var(--content-max); margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }

/* 内容屏 */
.section { padding-block: var(--section-gap); }
.section--tint { background: var(--color-surface); }
.section--tint-2 { background: var(--color-bg-tint); }

/* 屏头 */
.section-head { max-width: 720px; margin-bottom: var(--space-12); }
.section-head.center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-num); font-size: 13px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary);
}
.eyebrow::before { content: ""; width: 20px; height: 2px; border-radius: 2px; background: var(--gradient-accent); }

/* ---------- 排版 ---------- */
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.02em; line-height: var(--lh-tight); }
.display { font-size: clamp(36px, 5vw, var(--fs-56)); font-family: var(--font-num); }
.display-lg { font-size: clamp(44px, 6vw, var(--fs-72)); font-family: var(--font-num); }
.h2 { font-size: clamp(28px, 3.4vw, var(--fs-40)); }
.h3 { font-size: var(--fs-24); }
.lead { font-size: var(--fs-18); color: var(--color-on-surface-variant); line-height: var(--lh-relaxed); }
.section-sub { font-size: var(--fs-16); color: var(--color-on-surface-variant); }

.grad-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.grad-text-ai {
  background: var(--gradient-ai);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.muted { color: var(--color-on-surface-variant); }
.tertiary { color: var(--color-text-tertiary); }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

/* ---------- 布局工具 ---------- */
.row { display: flex; align-items: center; }
.row.gap-2 { gap: var(--space-2); }
.row.gap-4 { gap: var(--space-4); }
.row.gap-6 { gap: var(--space-6); }
.row.items-start { align-items: flex-start; }
.col { display: flex; flex-direction: column; }
.col.gap-2 { gap: var(--space-2); }
.col.gap-4 { gap: var(--space-4); }
.col.gap-6 { gap: var(--space-6); }
.flex-1 { flex: 1; min-width: 0; }
.flex-none { flex: none; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.wrap { flex-wrap: wrap; }
.mt-6 { margin-top: var(--space-6); }
.mt-12 { margin-top: var(--space-12); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-12 { margin-bottom: var(--space-12); }

/* 内容网格 */
.grid { display: grid; gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 光晕背景 ---------- */
.glow-bg::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(820px 520px at 14% -8%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 64%),
    radial-gradient(680px 500px at 92% 4%, color-mix(in srgb, var(--color-primary) 20%, transparent), transparent 66%),
    radial-gradient(700px 520px at 50% 110%, color-mix(in srgb, var(--color-ai) 12%, transparent), transparent 70%);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  :root { --section-gap: 72px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .nav .nav-links { display: none; }
}
@media (max-width: 640px) {
  :root { --section-gap: 48px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 主题切换过渡 ---------- */
body, .nav, .section, .footer, .card { transition: background-color var(--dur-base), color var(--dur-base), border-color var(--dur-base); }

/* ---------- 无障碍：焦点可见 ---------- */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: 4px; }

/* ---------- 滚动条美化 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-outline-strong); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--color-text-tertiary); }