/* CodeFun2000 Intro 改版原型 · 共享样式
 * 与产品发布动画同一套视觉：浅蓝 · 纯色 · 无渐变
 * - 不依赖 Google Fonts（国内经常被墙且会阻塞首屏），只用系统字体
 * - 内容默认可见：动效只在 JS 加上 html.js 之后才启用，爬虫/慢网/无 JS 都能直接看到正文
 * - 尊重 prefers-reduced-motion
 */
:root {
  --bg: #F4F8FD; --bg-2: #FFFFFF; --panel: #F1F5FB; --code: #FAFCFF;
  --ink: #0F1B2D; --ink-2: #33445A; --ink-3: #55657A; --muted: #94A3B8;
  --line: #E1E9F4; --line-2: #EBF1F8; --line-3: #CBD8EA;
  --blue: #2B7FFF; --blue-deep: #1A5FD0; --blue-soft: #EAF2FF; --blue-line: #C9DDFF;
  --green: #1F9D55; --green-soft: #E8F7EF; --amber: #B07800; --amber-soft: #FFF6DD; --red: #D63A3F; --red-soft: #FDECEC;
  --teal: #12B5A6; --purple: #8B5CF6;
  --shadow-sm: 0 .25rem .875rem rgba(30,60,110,.06);
  --shadow: 0 .875rem 2.5rem rgba(30,60,110,.10);
  --shadow-lg: 0 1.875rem 5rem rgba(30,60,110,.16);
  --r: 1rem; --r-lg: 1.375rem;
  --surface: #FFFFFF; --surface-2: #F5F8FC; --nav-bg: rgba(244,248,253,.92); --sheet-bg: rgba(255,255,255,.96);
  --add-bg: #E6F6EC; --del-bg: #FDECEC; --on-blue: #FFFFFF;
  --k: #CF222E; --t: #953800; --f: #8250DF; --s: #0A3069; --n: #0550AE; --cm: #6E7781;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Microsoft YaHei", monospace;
  --max: 73.75rem; --gutter: 1.5rem;
}
/* 屏幕自适应：整页尺寸都用 rem，根字号随视口的宽和高一起缩放。
 * - 以约 2560×1290 的视口（27 寸 4K 屏、150% 缩放）为 16px 基准，这是目前看着最合适的尺寸；
 * - 视口更窄（2K 屏 125% 缩放约 2048 宽）或更矮（笔记本约 730 高）时按两者中更紧的一个缩小，
 *   这样大屏上每个版块不会显得过大，笔记本上也尽量一屏放得下；
 * - 下限 13px 保证正文可读，上限 16px；手机和平板（≤960px）固定 16px，由各自的断点负责排版。 */
html { font-size: 16px; }
@media (min-width: 961px) {
  html { font-size: clamp(13px, min(calc(8px + 0.3125vw), calc(4px + 0.95vh)), 16px); }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
code, .mono { font-family: var(--mono); font-variant-ligatures: none; }

/* 导航 */
.nav { position: sticky; top: 0; z-index: 50; background: var(--nav-bg); backdrop-filter: blur(.75rem); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 1.75rem; height: 4rem; }
.brand { display: flex; align-items: center; gap: .625rem; font-weight: 800; font-size: 1.1875rem; letter-spacing: .2px; white-space: nowrap; }
.brand i { width: 2rem; height: 2rem; border-radius: .5625rem; background: var(--blue); color: #fff; display: grid; place-items: center; font-style: normal; font-size: .9375rem; }
.brand b { color: var(--blue); }
.nav-links { display: flex; gap: 1.375rem; font-size: .9375rem; color: var(--ink-3); }
.nav-links a:hover { color: var(--ink); }
.nav-right { margin-left: auto; display: flex; gap: .625rem; align-items: center; }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 2.875rem; padding: 0 1.375rem; border-radius: .75rem; font-weight: 700; font-size: 1rem; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .15s, background .15s, box-shadow .15s; font-family: inherit; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 .5rem 1.25rem rgba(43,127,255,.28); }
.btn-primary:hover { background: var(--blue-deep); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-3); }
.btn-ghost:hover { border-color: var(--blue); color: var(--blue); }
.btn-sm { height: 2.375rem; padding: 0 1rem; font-size: .875rem; border-radius: .625rem; }
.btn-lg { height: 3.375rem; padding: 0 1.75rem; font-size: 1.0625rem; }
.play-dot { width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-size: .625rem; }

/* 版块 */
.section { padding: clamp(3.5rem, 9vh, 6rem) 0; }
.section-sm { padding: 4rem 0; }
.kicker { display: inline-block; font: 600 .8125rem var(--mono); letter-spacing: .1875rem; color: var(--blue); padding: .25rem .75rem; border-radius: 62.4375rem; background: var(--blue-soft); border: 1px solid var(--blue-line); }
.h1 { font-size: clamp(2.125rem, 5.2vw, 3.75rem); line-height: 1.12; font-weight: 800; letter-spacing: -.5px; }
.h2 { font-size: clamp(1.625rem, 3.4vw, 2.5rem); line-height: 1.2; font-weight: 800; letter-spacing: -.3px; margin-top: .875rem; }
.lead { font-size: clamp(1rem, 1.6vw, 1.1875rem); color: var(--ink-3); margin-top: 1rem; max-width: 40rem; }
.center { text-align: center; } .center .lead { margin-left: auto; margin-right: auto; }
.accent { color: var(--blue); }

/* 卡片 & 标签 */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-sm); }
.chip { display: inline-flex; align-items: center; gap: .375rem; height: 1.875rem; padding: 0 .75rem; border-radius: 62.4375rem; background: var(--surface); border: 1px solid var(--line); font-size: .8438rem; color: var(--ink-2); white-space: nowrap; }
.chip.blue { background: var(--blue-soft); border-color: var(--blue-line); color: var(--blue-deep); }
.tag { font-size: .75rem; padding: 2px .5625rem; border-radius: .375rem; background: var(--panel); color: var(--ink-3); }
.tag.blue { background: var(--blue-soft); color: var(--blue-deep); }
.lv { font-size: .75rem; font-weight: 700; padding: 2px .5625rem; border-radius: 62.4375rem; }
.lv.e { background: var(--green-soft); color: var(--green); } .lv.m { background: var(--amber-soft); color: var(--amber); } .lv.h { background: var(--red-soft); color: var(--red); }
.ic { width: 2.75rem; height: 2.75rem; border-radius: .75rem; display: grid; place-items: center; font: 700 .9375rem var(--mono); color: #fff; background: var(--c, var(--blue)); flex: none; }

/* 信任条 */
.trust { display: flex; flex-wrap: wrap; gap: .625rem 1.625rem; align-items: center; color: var(--ink-3); font-size: .9062rem; }
.trust b { color: var(--ink); font-size: 1.125rem; margin-right: .25rem; }
.logos { display: flex; flex-wrap: wrap; gap: .625rem; }
.logo-chip { height: 2.5rem; padding: 0 1rem 0 .5rem; border-radius: .75rem; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--ink-2); }
.logo-chip i { width: 1.625rem; height: 1.625rem; border-radius: .4375rem; background: var(--c); color: #fff; display: grid; place-items: center; font-style: normal; font-size: .8125rem; font-weight: 700; }

/* 产品窗口外框（演示用的“截图”都用 DOM 画，轻量且清晰） */
.window { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-lg); overflow: hidden; }
.win-bar { height: 2.375rem; display: flex; align-items: center; gap: .4375rem; padding: 0 .875rem; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.win-bar i { width: .6875rem; height: .6875rem; border-radius: 50%; }
.win-bar i:nth-child(1) { background: #FF5F57; } .win-bar i:nth-child(2) { background: #FEBC2E; } .win-bar i:nth-child(3) { background: #28C840; }
.win-bar span { margin-left: .75rem; font: .75rem var(--mono); color: var(--muted); }

/* 代码配色（GitHub Light） */
.k { color: var(--k); } .t { color: var(--t); } .f { color: var(--f); } .s { color: var(--s); } .n { color: var(--n); } .c { color: var(--cm); }

/* FAQ：高度用 grid 0fr/1fr 过渡，问题行样式保持原来的加号 */
.faq { max-width: 51.25rem; margin: 2.5rem auto 0; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q { cursor: pointer; font-weight: 700; font-size: 1.0625rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; text-align: left; background: none; border: 0; color: inherit; font-family: inherit; padding: 1.125rem .25rem; }
.faq-q::after { content: "+"; color: var(--blue); font-weight: 400; font-size: 1.375rem; line-height: 1; flex: none; }
.faq-item.is-open .faq-q::after { content: "−"; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s cubic-bezier(.22,1,.36,1); }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-clip { min-height: 0; overflow: hidden; }
.faq-clip p { color: var(--ink-3); margin: 0; padding: 0 .25rem 1.125rem; font-size: .9688rem; }
@media (prefers-reduced-motion: reduce) { .faq-a { transition: none; } }

/* 评价占位 */
.quote { padding: 1.5rem; }
.quote p { font-size: .9688rem; color: var(--ink-2); }
.quote footer { display: flex; align-items: center; gap: .625rem; margin-top: 1rem; font-size: .8438rem; color: var(--ink-3); }
.quote footer i { width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-style: normal; font-weight: 700; }
.placeholder-note { display: inline-block; font-size: .75rem; color: var(--amber); background: var(--amber-soft); padding: 2px .5rem; border-radius: .375rem; margin-bottom: .625rem; }

/* 结尾 CTA */
.cta-final { background: var(--blue); color: #fff; border-radius: 1.75rem; padding: 4rem 2.5rem; text-align: center; }
.cta-final .h2 { color: #fff; margin: 0; }
.cta-final p { color: rgba(255,255,255,.82); margin-top: .75rem; font-size: 1.0625rem; }
.cta-final .btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.5); }
.cta-final .btn-white { background: #fff; color: var(--blue-deep); }

.footer { padding: 2.5rem 0 3.5rem; color: var(--muted); font-size: .875rem; }
.footer .wrap { display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; }

/* 进入视口的淡入：仅在 JS 可用时启用 */
.js .reveal { opacity: 0; transform: translateY(1.125rem); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* 视频弹窗 */
.vmodal { position: fixed; inset: 0; z-index: 100; background: rgba(15,27,45,.72); display: none; align-items: center; justify-content: center; padding: 1.25rem; }
.vmodal.open { display: flex; }
.vmodal .box { width: min(68.75rem, 100%); background: #000; border-radius: 1rem; overflow: hidden; position: relative; }
.vmodal video { width: 100%; aspect-ratio: 16/9; background: #000; }
.vmodal .x { position: absolute; top: -2.75rem; right: 0; color: #fff; font-size: 1.75rem; background: none; border: 0; cursor: pointer; }

/* 移动端底部常驻 CTA */
.mobile-cta { display: none; }

@media (max-width: 960px) {
  .nav-links { display: none; }
  .section { padding: 4.5rem 0; }
}
@media (max-width: 640px) {
  :root { --gutter: 1.125rem; }
  .nav .wrap { height: 3.5rem; }
  .nav-right .btn-ghost { display: none; }
  .section { padding: 3.5rem 0; }
  .btn-lg { height: 3.125rem; padding: 0 1.375rem; font-size: 1rem; }
  .cta-final { padding: 2.75rem 1.375rem; border-radius: 1.375rem; }
  .mobile-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; gap: .625rem; padding: .625rem .875rem calc(.625rem + env(safe-area-inset-bottom)); background: var(--sheet-bg); border-top: 1px solid var(--line); backdrop-filter: blur(.625rem); }
  .mobile-cta .btn { flex: 1; height: 2.875rem; }
  body.has-mobile-cta { padding-bottom: 4.75rem; }
}

/* ===== 深色模式（html[data-theme="dark"]）：同一套结构，只换变量 ===== */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0B1220; --bg-2: #0F1828; --panel: #16223A; --code: #0E1729;
  --surface: #111B2E; --surface-2: #0F1828; --nav-bg: rgba(11,18,32,.88); --sheet-bg: rgba(15,24,40,.96);
  --ink: #E6EDF7; --ink-2: #C3CFE0; --ink-3: #8FA1BA; --muted: #65758E;
  --line: #1E2B44; --line-2: #19253B; --line-3: #2B3B58;
  --blue: #4C93FF; --blue-deep: #8DB9FF; --blue-soft: rgba(76,147,255,.14); --blue-line: rgba(76,147,255,.38);
  --green: #3FCB80; --green-soft: rgba(63,203,128,.14); --amber: #F0B429; --amber-soft: rgba(240,180,41,.14); --red: #FF6B6B; --red-soft: rgba(255,107,107,.14);
  --add-bg: rgba(63,203,128,.12); --del-bg: rgba(255,107,107,.12);
  --k: #FF7B72; --t: #FFA657; --f: #D2A8FF; --s: #A5D6FF; --n: #79C0FF; --cm: #8B949E;
  --shadow-sm: 0 .25rem .875rem rgba(0,0,0,.25); --shadow: 0 .875rem 2.5rem rgba(0,0,0,.35); --shadow-lg: 0 1.875rem 5rem rgba(0,0,0,.5);
}
html[data-theme="dark"] .btn-primary { box-shadow: 0 .5rem 1.5rem rgba(76,147,255,.25); }
/* 主题切换按钮 */
.theme-btn { width: 2.375rem; height: 2.375rem; border-radius: .625rem; border: 1px solid var(--line-3); background: var(--surface); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.theme-btn:hover { color: var(--blue); border-color: var(--blue); }
.theme-btn svg { width: 1.125rem; height: 1.125rem; }
.theme-btn .moon { display: none; }
html[data-theme="dark"] .theme-btn .sun { display: none; }
html[data-theme="dark"] .theme-btn .moon { display: block; }