/* ============================================================
   沐川官网样式层
   取值来自用户 2026-10-14 提供的 Figma Make 导出（绿色创作风），
   原件存 docs/design/figma-make-20261014/，改动要逐项对得回去。
   三条与原件的有意偏离（记在 docs/design/README.md）：
     1) 不引第三方图床与 logo CDN（simpleicons / unsplash 在国内既慢又不稳），
        平台图标一律本地色块 + 首字，产品示意图用 CSS 画的窗口，不发外链；
     2) 不出现无法核实的数字（原件的「80% 节省」「7 / 7 成功」一律换成接口给的数）；
     3) 客户端仍是 Linear 那套（web/style.css），两面不共用色板。
   ============================================================ */

:root {
  color-scheme: light;

  /* 品牌绿：主按钮、强调字、选中态 */
  --brand: #16a34a;
  --brand-press: #12652f;
  --brand-ink: #16803b;
  --brand-soft: #ecf8ef;
  --brand-dot: #69d58b;
  --brand-halo: #e4f8e9;
  --brand-tint: #f0faf2;

  /* 柠檬绿只给大色块瓦片，不拿去当文字色 */
  --lime: #b9f04a;
  --lime-ink: #0e371b;
  --lime-deep: #25b957;

  /* 墨色与灰阶：绿味灰，纯灰会跟绿色打架 */
  --ink: #102218;
  --ink-deep: #0b1710;
  --muted: #657269;
  --muted-2: #758079;
  --muted-3: #4f5f54;
  --faint: #98a29b;
  --faint-2: #8a958d;
  --grey-text: #69766d;
  --grey-body: #6d776f;
  --grey-card: #5f6b62;
  --grey-plan: #526057;
  --grey-step: #879189;
  --grey-cta: #7b867d;
  --grey-para: #748078;
  --grey-bento: #6c786f;

  /* 表面与分隔线 */
  --bg: #ffffff;
  --surface: #f2f8f3;
  --surface-2: #eff9f1;
  --surface-3: #f5f8f5;
  --line: rgba(10, 45, 25, 0.08);
  --line-2: #dce5de;
  --line-3: #e9eee9;
  --line-4: #e4e9e5;
  --line-5: #e0e7e1;
  --line-6: #dfe7e0;
  --line-8: #dfe8e1;
  --line-10: #dce4de;
  --dot-idle: #dce3dd;
  --icon-edge: rgba(12, 40, 20, 0.07);

  /* 模拟窗口标题栏那三个点 */
  --light-red: #ff6b61;
  --light-yellow: #f8c64e;
  --light-green: #54c568;

  /* 语义色 */
  --warn: #d58b13;

  /* 圆角：按钮与导航是胶囊，内容块是大圆角瓦片 */
  --r-xs: 10px;
  --r-sm: 14px;
  --r-md: 24px;
  --r-lg: 34px;
  --r-xl: 48px;
  --r-pill: 999px;

  /* 间距 */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 18px;
  --s-5: 28px;
  --s-6: 40px;
  --s-7: 64px;
  --s-8: 90px;
  --s-9: 135px;

  /* 阴影只给浮起来的东西：主按钮、模拟窗口、图标、白卡 */
  --shadow-brand: 0 10px 28px rgba(22, 163, 74, 0.22);
  --shadow-window: 0 40px 100px rgba(33, 86, 33, 0.25);
  --shadow-card: 0 25px 60px rgba(28, 70, 39, 0.09);
  --shadow-icon: 0 7px 20px rgba(19, 51, 28, 0.08);
  --shadow-icon-lg: 0 16px 35px rgba(43, 85, 46, 0.18);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
          "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --font-num: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --ease: 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* 版面共用一套对齐栅格：顶栏、各段、瓦片左右沿都在同一条线上 */
  --page: 1240px;
  --pad: 28px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--font);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.wrap { width: min(100%, var(--page)); margin: 0 auto; padding: 0 var(--pad); }
.wrap.wide { width: min(100%, 1440px); }

.mono { font-family: var(--font-mono); }
.hint { font-size: 12.5px; color: var(--faint); line-height: 1.7; }

/* ---------- 顶栏：胶囊导航 + 右侧下载按钮 ---------- */

header.site {
  position: sticky; z-index: 50; top: 0;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
}

header.site .bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  width: min(100%, var(--page)); height: 64px; margin: 0 auto; padding: 0 var(--s-6);
}

.brand { display: flex; align-items: center; gap: 11px; font-weight: 800;
         letter-spacing: -0.03em; font-size: 16px; }
.brand-mark {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; border-radius: var(--r-xs);
  background: var(--brand); color: #fff;
  font-size: 15px; font-weight: 900; transform: rotate(-5deg);
}

nav.main { display: flex; gap: var(--s-1); }
nav.main a {
  border-radius: var(--r-pill); padding: 8px 14px;
  color: var(--muted); font-size: 13px;
  transition: background var(--ease), color var(--ease);
}
nav.main a:hover, nav.main a.on { background: var(--brand-soft); color: var(--brand-press); }

/* ---------- 按钮：胶囊，主按钮带一点绿影 ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 46px; padding: 0 22px;
  border: 1px solid transparent; border-radius: var(--r-pill);
  background: var(--brand); color: #fff;
  font-size: 14px; font-weight: 700;
  transition: transform var(--ease), background var(--ease), box-shadow var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.green { background: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.btn.dark { background: var(--ink); color: #fff; }
.btn.light { border-color: var(--line-2); background: #fff; color: var(--ink); }
.btn.ghost { background: none; color: var(--brand-ink); }
.btn.ghost:hover { background: var(--brand-soft); }
.btn.lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.btn.slim { min-height: 38px; padding: 0 18px; font-size: 13px; }
.btn.off {
  background: var(--surface-3); color: var(--faint); border-color: var(--line-3);
  cursor: not-allowed; transform: none; box-shadow: none;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8;
           stroke-linecap: round; stroke-linejoin: round; }
.btn:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid var(--brand-halo); outline-offset: 2px;
}

/* ---------- 首屏 ---------- */

.hero { max-width: 1440px; margin: 0 auto; padding: 100px var(--s-6) 80px; text-align: center; }
.hero-copy { max-width: 1000px; margin: 0 auto; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--brand-ink); font-size: 13px; font-weight: 750; letter-spacing: 0.08em;
}
.eyebrow .pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-dot); box-shadow: 0 0 0 6px var(--brand-halo);
}

.hero h1 {
  margin: 28px 0 24px; color: var(--ink-deep);
  font-size: clamp(58px, 8.6vw, 110px); font-weight: 850;
  line-height: 1.06; letter-spacing: -0.075em;
}
.hero h1 em { color: var(--brand); font-style: normal; }
.hero-copy > p { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 19px; line-height: 1.65; }
.hero .fine { display: block; margin-top: 15px; color: var(--faint); font-size: 12px; }

.download-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 34px; }

/* 首屏产品演示：柠檬绿台子 + 白窗口 + 飘着的平台图标 */
.product-stage {
  position: relative; overflow: hidden;
  height: 660px; margin-top: 75px; border-radius: var(--r-xl);
  background: var(--lime);
}
.stage-word {
  position: absolute; top: 42px; left: 0; right: 0;
  color: rgba(14, 55, 27, 0.08);
  font: 950 230px/1 var(--font-num); letter-spacing: -0.09em;
  pointer-events: none;
}

.app-window {
  position: absolute; z-index: 2; top: 110px; left: 50%;
  width: min(970px, 82%); padding: 0 20px 20px;
  border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 27px;
  background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-window);
  transform: translateX(-50%); text-align: left;
}
.window-bar { display: flex; align-items: center; gap: 7px; height: 54px;
              border-bottom: 1px solid var(--line-3); }
.window-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot-idle); }
.window-bar .dot.r { background: var(--light-red); }
.window-bar .dot.y { background: var(--light-yellow); }
.window-bar .dot.g { background: var(--light-green); }
.window-bar b { margin-left: 12px; color: var(--faint-2); font-size: 11px; font-weight: 500; }

.window-content { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-4); padding-top: 20px; }

.video-card {
  position: relative; overflow: hidden; min-height: 360px; border-radius: var(--r-sm);
  background: var(--ink);
}
.video-card .frame {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(185, 240, 74, 0.42), transparent 60%),
    linear-gradient(160deg, #1a3b26 0%, #0d2016 60%, #123021 100%);
}
.video-card .caption {
  position: absolute; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column; gap: 5px;
  padding: 52px 22px 20px; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));
}
.video-card .caption strong { font-size: 16px; }
.video-card .caption span { font-size: 11px; opacity: 0.7; }
.video-card .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 62px; height: 62px;
  border: 0; border-radius: 50%; background: #fff; color: var(--brand-ink);
}
.video-card .play svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }

.publish-list { padding: 6px; }
.publish-head { display: flex; justify-content: space-between; padding: 5px 3px 14px;
                color: var(--grey-body); font-size: 11px; }
.publish-head em { color: var(--brand-ink); font-style: normal; }
.publish-item {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-2); padding: 12px; border-radius: var(--r-sm);
  background: var(--surface-3); font-size: 12px;
}
.publish-item .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.publish-item .who b { display: block; font-size: 12px; }
.publish-item .who span { color: var(--faint); font-size: 10.5px; }
.publish-item .limit { color: var(--brand-ink); font-size: 10px; font-weight: 700; white-space: nowrap; }

/* 平台图标：本地色块 + 首字，不引外部 logo */
.brand-icon {
  display: grid; place-items: center; flex: none;
  border: 1px solid var(--icon-edge); border-radius: 27%;
  background: #fff; color: #fff;
  box-shadow: var(--shadow-icon);
  font-weight: 800; letter-spacing: -0.02em;
}
.brand-icon.sm { width: 36px; height: 36px; border-radius: var(--r-xs); font-size: 14px; }
.brand-icon.md { width: 48px; height: 48px; font-size: 18px; }
.brand-icon.lg { width: 64px; height: 64px; font-size: 24px; }

.i-douyin { background: #161823; }
.i-kuaishou { background: #ff5722; }
.i-shipinhao { background: #07c160; }
.i-xiaohongshu { background: #ff2442; }
.i-bilibili { background: #fb7299; }
.i-toutiao { background: #e5322b; }
.i-qq { background: #12b7f5; }
.i-youtube { background: #ff0000; }
.i-x { background: #101010; }
.i-desktop { background: var(--ink); }
.i-mobile { background: var(--brand); }
.i-extension { background: #ff5722; }
.i-unknown { background: var(--muted-2); }

.float-icon { position: absolute; z-index: 4; }
.f0 { top: 75px; left: 6%; }
.f1 { top: 270px; left: 3%; }
.f2 { bottom: 58px; left: 15%; }
.f3 { top: 62px; right: 7%; }
.f4 { top: 250px; right: 3%; }
.f5 { right: 15%; bottom: 55px; }
.float-icon .brand-icon { box-shadow: var(--shadow-icon-lg); }

/* ---------- 平台横带 ---------- */

.platform-ribbon { padding: 45px 24px; border-bottom: 1px solid var(--line-3); text-align: center; }
.platform-ribbon > p { margin: 0 0 25px; color: var(--faint); font-size: 11px; letter-spacing: 0.12em; }
.platform-ribbon .row { display: flex; flex-wrap: wrap; justify-content: center; gap: 34px; }
.platform-ribbon .row .one { display: flex; align-items: center; gap: 9px;
                             color: var(--muted-3); font-size: 13px; }

/* ---------- 段落通用 ---------- */

.section { width: min(100%, var(--page)); margin: 0 auto; padding: var(--s-9) var(--pad); }
.section-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 60px; margin-bottom: 65px;
}
.section-heading > div { max-width: 720px; }
.section-heading h2 { margin: 12px 0 0; color: var(--ink);
                      font-size: clamp(42px, 5vw, 74px); line-height: 0.98; letter-spacing: -0.055em; }
.section-heading > p { max-width: 380px; margin: 0; color: var(--muted-2); font-size: 16px; line-height: 1.7; }
.kicker { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 0.12em; }

/* ---------- Bento 三块 ---------- */

.bento { display: grid; grid-template-columns: 1.35fr 0.85fr; gap: var(--s-4); }
.bento > article { position: relative; overflow: hidden; border-radius: 38px; }
.card-index { color: var(--brand-ink); font-size: 10px; font-weight: 800; letter-spacing: 0.14em; }
.bento h3 { margin: 20px 0 14px; font-size: 42px; line-height: 1.02; letter-spacing: -0.05em; }
.bento p { max-width: 430px; color: var(--grey-bento); line-height: 1.65; }

.bento-ai { grid-row: span 2; min-height: 690px; padding: 50px; background: var(--surface-2); }
.ai-suggestions {
  position: absolute; right: 42px; bottom: 42px; left: 42px;
  padding: 13px; border-radius: var(--r-md); background: #fff; box-shadow: var(--shadow-card);
}
.ai-suggestions .one {
  display: flex; gap: 16px; margin: 5px; padding: 17px; border-radius: var(--r-sm);
  color: var(--grey-card); font-size: 13px;
}
.ai-suggestions .one .n { color: #a7b0a9; font-size: 10px; }
.ai-suggestions .one.selected { background: var(--brand); color: #fff; }
.ai-suggestions .one.selected .n { color: rgba(255, 255, 255, 0.72); }

.bento-platform { min-height: 335px; padding: 40px; background: var(--ink); color: #fff; }
.bento-platform .card-index { color: #82e7a1; }
.bento-platform h3 { font-size: 34px; }
.bento-platform p { color: #9fb0a4; font-size: 13px; }
.icon-cloud { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 28px 0; }

.bento-speed {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 335px; padding: 40px; background: var(--lime); color: var(--lime-ink);
}
.bento-speed h3 { font-size: 34px; }
.bento-speed > div { max-width: 52%; }
.bento-speed p { color: rgba(14, 55, 27, 0.72); }
.bento-speed .big { font: 850 80px/0.8 var(--font-num); letter-spacing: -0.08em; }
.bento-speed .big small { display: block; margin-top: 15px; font-size: 11px; font-weight: 600;
                          letter-spacing: 0; font-family: var(--font); }

/* ---------- 深色横幅（原件是外链照片，这里改成本地渐层瓦片） ---------- */

.story-section {
  position: relative; overflow: hidden;
  width: calc(100% - var(--pad) * 2); max-width: var(--page); height: 620px;
  margin: 0 auto; border-radius: 46px;
  background:
    radial-gradient(90% 70% at 82% 18%, rgba(185, 240, 74, 0.30), transparent 62%),
    linear-gradient(120deg, #0c2116 0%, #14371f 52%, #0a1a11 100%);
}
.story-section::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4, 17, 9, 0.78), rgba(4, 17, 9, 0.08));
}
.story-copy {
  position: absolute; z-index: 2; top: 50%; left: 8%; max-width: 500px;
  color: #fff; transform: translateY(-50%);
}
.story-copy > span { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: #82e7a1; }
.story-copy h2 { margin: 20px 0; font-size: clamp(36px, 4.6vw, 60px); line-height: 1; letter-spacing: -0.055em; }
.story-copy p { color: rgba(255, 255, 255, 0.72); font-size: 17px; line-height: 1.7; }
.story-copy .btn { margin-top: 18px; }

/* 界面缩略：深色瓦片里叠两块假窗口，用来说"长这样" */
.story-shots { position: absolute; z-index: 1; top: 90px; right: 6%; width: 38%; min-width: 260px; }
.story-shots .shot {
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px;
  background: rgba(255, 255, 255, 0.07); padding: 14px;
}
.story-shots .shot + .shot { margin-top: -46px; margin-left: 12%; }
.story-shots .dots { display: flex; gap: 6px; margin-bottom: 12px; }
.story-shots .dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); }
.story-shots .line { height: 8px; margin-bottom: 7px; border-radius: var(--r-pill);
                     background: rgba(255, 255, 255, 0.16); }
.story-shots .w70 { width: 70%; }
.story-shots .w45 { width: 45%; background: rgba(185, 240, 74, 0.55); }
.story-shots .w88 { width: 88%; }

/* ---------- 四步 ---------- */

.step-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-10); }
.step-grid article { padding: 28px 20px 0 0; }
.step-grid .no { color: var(--brand); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; }
.step-grid h3 { margin: 36px 0 8px; font-size: 26px; letter-spacing: -0.03em; }
.step-grid p { margin: 0; color: var(--grey-step); font-size: 13px; line-height: 1.65; }

/* ---------- 结尾 CTA：绿底 + 平台轨道 ---------- */

.final-cta {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - var(--pad) * 2); max-width: var(--page); min-height: 590px;
  margin: 0 auto var(--s-8); padding: 75px;
  border-radius: var(--r-xl); background: var(--brand); color: #fff; overflow: hidden;
}
.final-cta > div:first-child { position: relative; z-index: 2; }
.final-cta > div > span { font-size: 12px; letter-spacing: 0.12em; opacity: 0.85; }
.final-cta h2 { margin: 20px 0 36px; font-size: clamp(40px, 5.4vw, 68px); line-height: 0.95;
                letter-spacing: -0.06em; }
.final-cta .download-row { justify-content: flex-start; }

.cta-orbit { position: relative; width: 380px; height: 380px;
             border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; }
.cta-orbit::after { content: ""; position: absolute; inset: 65px;
                    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; }
.cta-orbit .brand-icon { position: absolute; }
.cta-orbit .brand-icon:nth-child(1) { top: -32px; left: 158px; }
.cta-orbit .brand-icon:nth-child(2) { top: 74px; right: -22px; }
.cta-orbit .brand-icon:nth-child(3) { right: 28px; bottom: 15px; }
.cta-orbit .brand-icon:nth-child(4) { bottom: -25px; left: 120px; }
.cta-orbit .brand-icon:nth-child(5) { bottom: 62px; left: -24px; }
.cta-orbit .brand-icon:nth-child(6) { top: 48px; left: 4px; }

/* ---------- 内页大标题 ---------- */

.inner-hero { width: min(100%, 900px); max-width: 900px; margin: 0 auto;
              padding: 130px var(--pad) 110px; text-align: center; }
.inner-hero > span { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 0.16em; }
.inner-hero h1 { margin: 24px 0; color: var(--ink);
                 font-size: clamp(52px, 7.4vw, 104px); line-height: 1.1; letter-spacing: -0.07em; }
.inner-hero > p { max-width: 670px; margin: 0 auto; color: var(--grey-para); font-size: 18px; line-height: 1.7; }

/* ---------- 功能页：成对行 ---------- */

.feature-rows { width: min(100%, var(--page)); margin: 0 auto; padding: 0 var(--pad) 120px; }
.feature-rows article {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: 7%; padding: 90px 0; border-top: 1px solid var(--line-4);
}
.feature-rows article:first-child { border-top: 0; padding-top: 0; }
.feature-rows article.reverse .feature-image { order: 2; }
.feature-image {
  position: relative; overflow: hidden; height: 550px; border-radius: 40px;
  background: var(--surface-2);
}
.feature-image .no {
  position: absolute; top: 25px; left: 25px; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--brand-ink); font-size: 12px; font-weight: 800;
}
.feature-copy { max-width: 500px; }
.feature-copy em { color: var(--brand); font-size: 12px; font-style: normal; font-weight: 800;
                   letter-spacing: 0.1em; }
.feature-copy h2 { margin: 18px 0; font-size: clamp(34px, 3.6vw, 52px); line-height: 1.02;
                   letter-spacing: -0.055em; }
.feature-copy > p { margin: 0; color: var(--grey-para); line-height: 1.75; }
.feature-copy ul { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin: 30px 0 0;
                   padding: 0; list-style: none; }
.feature-copy li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; }
.feature-copy li svg { flex: none; width: 18px; color: var(--brand); fill: none; stroke: currentColor;
                       stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* 功能图里画的界面碎片 */
.mock { position: absolute; inset: 84px 26px 26px; display: flex; flex-direction: column; gap: 12px; }
.mock .row {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow-icon);
  font-size: 12.5px; color: var(--muted);
}
.mock .row b { color: var(--ink); font-size: 13px; }
.mock .grow { flex: 1; }
.mock .chip { padding: 4px 10px; border-radius: var(--r-pill); background: var(--brand-soft);
              color: var(--brand-press); font-size: 11px; font-weight: 700; white-space: nowrap; }
.mock .bar { height: 6px; border-radius: var(--r-pill); background: var(--line-8); overflow: hidden; }
.mock .bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--lime-deep); }

/* ---------- 平台明细 ---------- */

.platform-detail { padding: 120px var(--pad); background: var(--surface); text-align: center; }
.platform-detail > span { color: var(--brand-ink); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; }
.platform-detail > h2 { margin: 20px 0 60px; font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.055em; }
.platform-detail .tiles { display: grid; grid-template-columns: repeat(5, 1fr);
                          width: min(100%, var(--page)); margin: 0 auto; }
.platform-detail .tiles article { position: relative; padding: 32px 10px;
                                  border-right: 1px solid var(--line-6); }
.platform-detail .tiles article:nth-child(5n) { border-right: 0; }
.platform-detail .brand-icon { margin: 0 auto; }
.platform-detail h3 { margin: 18px 0 5px; font-size: 14px; }
.platform-detail p { margin: 0; color: var(--faint-2); font-size: 11px; line-height: 1.6; }
.platform-detail .tick { width: 16px; margin: 18px auto 0; display: block; color: var(--brand);
                         fill: none; stroke: currentColor; stroke-width: 2.4;
                         stroke-linecap: round; stroke-linejoin: round; }

/* ---------- 规格表 ---------- */

table.mat { width: 100%; border-collapse: collapse; font-size: 14px; }
table.mat th, table.mat td { padding: 13px 14px; text-align: left;
                             border-bottom: 1px solid var(--line-5); }
table.mat th { color: var(--faint); font-size: 12px; font-weight: 700; letter-spacing: 0.02em; }
table.mat td b { color: var(--ink); }
table.mat .num { font-family: var(--font-num); }
table.mat code { font-family: var(--font-mono); font-size: 13px; }

/* ---------- 简单 CTA ---------- */

.simple-cta { padding: 130px var(--pad); text-align: center; }
.simple-cta h2 { margin: 0; font-size: clamp(36px, 4.6vw, 64px); letter-spacing: -0.055em; }
.simple-cta > p { max-width: 560px; margin: 16px auto 0; color: var(--grey-cta); }
.simple-cta .download-row { margin: 26px 0 20px; }
.simple-cta .more { display: inline-flex; align-items: center; gap: 7px;
                    border: 0; background: none; color: var(--brand-ink); font-size: 14px;
                    font-weight: 700; }

/* ---------- 价格 ---------- */

.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
             align-items: stretch; gap: var(--s-4);
             width: min(100%, var(--page)); margin: 0 auto; padding: 0 var(--pad); }
.plan-grid > * { position: relative; display: flex; flex-direction: column;
                 min-height: 500px; padding: 40px 28px;
                 border: 1px solid var(--line-5); border-radius: var(--r-lg); background: #fff; }
.plan-grid > *.hot { border: 2px solid var(--brand); background: var(--brand-tint); }
.hot-label {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 0 0 12px 12px;
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 800;
}
.plan-grid h2 { margin: 0; text-align: center; font-size: 18px; }
.plan-grid .pnote { margin: 6px 0 0; text-align: center; color: var(--faint-2); font-size: 12px;
                    min-height: 18px; }
.price { display: flex; align-items: flex-end; justify-content: center; gap: 2px; margin: 30px 0; }
.price span { align-self: flex-start; font-size: 18px; font-weight: 700; }
.price strong { font: 850 54px/1 var(--font-num); letter-spacing: -0.06em; }
.price em { color: var(--faint); font-size: 12px; font-style: normal; }
.plan-grid ul { margin: 30px 0 0; padding: 0; list-style: none; }
.plan-grid li { display: flex; align-items: center; gap: 9px; margin: 15px 0;
                color: var(--grey-plan); font-size: 13px; }
.plan-grid li svg { flex: none; width: 17px; color: var(--brand); fill: none; stroke: currentColor;
                    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.plan-grid > * > .btn { margin-top: auto; }

/* ---------- 段落底色与 FAQ ---------- */

.block { padding: var(--s-8) 0; }
.block.tint { background: var(--surface); }
.block.tight { padding: var(--s-7) 0; }
.lead { max-width: 40em; margin: 0 auto var(--s-6); text-align: center; }
.lead h2 { margin: 0 0 12px; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05;
           letter-spacing: -0.045em; }
.lead p { margin: 0; color: var(--grey-para); font-size: 17px; }

.faq { border-top: 1px solid var(--line-5); }
.faq details { border-bottom: 1px solid var(--line-5); }
.faq summary { padding: 20px 0; cursor: pointer; list-style: none;
               font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--faint); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 22px; max-width: 62em; font-size: 14.5px; color: var(--muted-2); line-height: 1.75; }

.pay-terms { margin: 34px 0 0; font-size: 13px; color: var(--faint); text-align: center; line-height: 1.7; }

/* ---------- 下载卡片 ---------- */

.dl-group { margin: 0 0 var(--s-4); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-4); }

.download-card {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  padding: 30px; border: 1px solid var(--line-5); border-radius: var(--r-lg); background: #fff;
}
.download-card .head { display: flex; align-items: center; gap: 13px; }
.download-card .name { font-weight: 700; font-size: 16px; }
.download-card .meta { font-size: 13px; color: var(--muted-2); }
.download-card .notes { font-size: 13px; color: var(--muted); white-space: pre-wrap; line-height: 1.7; }
.download-card .btn { margin-top: 6px; align-self: flex-start; }
.download-card .sha { font-size: 11px; color: var(--faint); font-family: var(--font-mono); }

.tag {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: var(--r-pill);
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 2px;
}

.empty {
  padding: 46px 24px; border-radius: var(--r-lg); background: var(--surface);
  color: var(--muted); text-align: center; font-size: 14.5px; line-height: 1.7;
}

/* ---------- 更新日志 ---------- */

ul.entries { margin: 0; padding: 0; list-style: none; }
ul.entries li { padding: 26px 0; border-bottom: 1px solid var(--line-5); }
ul.entries li:last-child { border-bottom: 0; }
ul.entries .v { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
ul.entries .d { margin-left: 10px; font-size: 13px; color: var(--faint); }
ul.entries p { margin: 8px 0 0; color: var(--muted-2); white-space: pre-wrap; line-height: 1.75; }

/* ---------- 协议正文 ---------- */

.doc { padding: 72px 0 96px; }
.doc h1 { margin: 0 0 8px; font-size: clamp(30px, 4.6vw, 52px); letter-spacing: -0.045em; }
.doc .stamp { margin: 0 0 44px; font-size: 13px; color: var(--faint); }
.doc section { margin-bottom: 38px; }
.doc h2 { margin: 0 0 10px; font-size: 19px; font-weight: 700; }
.doc p { margin: 0 0 12px; font-size: 15px; line-height: 1.8; color: var(--muted-2); }
.doc p:last-child { margin-bottom: 0; }
.doc code { font-family: var(--font-mono); font-size: 13.5px; }

/* ---------- 结尾与页脚 ---------- */

.closer { padding: var(--s-9) 0; text-align: center; background: var(--surface); }
.closer h2 { margin: 0 0 12px; font-size: clamp(30px, 4.4vw, 52px); letter-spacing: -0.045em; }
.closer p { margin: 0 auto 26px; max-width: 32em; color: var(--grey-para); font-size: 17px; }

footer.site {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px;
  padding: 55px max(var(--pad), calc((100% - var(--page)) / 2));
  border-top: 1px solid var(--line-5); background: var(--surface-3);
}
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-brand strong { font-size: 14px; }
.footer-brand p { margin: 3px 0 0; color: var(--faint-2); font-size: 11px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a { color: var(--grey-text); font-size: 12px; }
.footer-links a:hover { color: var(--brand-press); }
footer.site .legal-line { grid-column: 1 / -1; margin: 15px 0 0; color: var(--faint);
                          font-size: 11px; line-height: 1.8; }

/* ---------- 入场：滚到视口里再淡入；不支持 JS 时不影响显示 ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(18px);
                    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
  .js [data-rise].in { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  :root { --pad: 20px; }
  header.site .bar { padding-inline: var(--pad); }
  nav.main { display: none; }
  .hero { padding: 75px 18px 55px; }
  .hero h1 { font-size: 56px; line-height: 1.08; }
  .download-row { flex-direction: column; align-items: stretch; }
  .download-row .btn { width: 100%; }
  .product-stage { height: 500px; margin-top: 55px; border-radius: 30px; }
  .stage-word { font-size: 120px; }
  .app-window { top: 85px; width: 88%; padding: 0 12px 12px; }
  .window-content { grid-template-columns: 1fr; }
  .publish-list { display: none; }
  .video-card { min-height: 330px; }
  .float-icon { display: none; }
  .platform-ribbon .row { gap: 15px; }
  .platform-ribbon .row .one span { display: none; }
  .section { padding: var(--s-8) var(--pad); }
  .section-heading { display: block; }
  .section-heading > div, .section-heading > p { max-width: none; }
  .section-heading > p { margin-top: 22px; }
  .bento { grid-template-columns: 1fr; }
  .bento-ai { grid-row: auto; min-height: 600px; }
  .story-section { width: 100%; height: 620px; border-radius: 0; }
  .story-copy { right: 25px; left: 25px; max-width: none; }
  .story-shots { display: none; }
  .step-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .final-cta { display: block; width: calc(100% - var(--pad) * 2); margin: 0 auto var(--s-7);
               padding: 48px 28px; }
  .final-cta h2 { font-size: 44px; }
  .cta-orbit { display: none; }
  .feature-rows article { grid-template-columns: 1fr; gap: 35px; padding: 60px 0; }
  .feature-rows article.reverse .feature-image { order: 0; }
  .feature-image { height: 420px; }
  .feature-copy, .feature-copy > p { max-width: none; }
  .feature-copy h2 { font-size: 38px; }
  .platform-detail .tiles { grid-template-columns: repeat(2, 1fr); }
  .platform-detail .tiles article { border-right: 0; border-bottom: 1px solid var(--line-6); }
  .plan-grid { grid-template-columns: 1fr; }
  .inner-hero { width: 100%; padding: 90px 20px 70px; }
  .inner-hero h1 { font-size: 48px; }
  .simple-cta h2 { font-size: 42px; }
  footer.site { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  :root { --pad: 16px; }
  .nav-download { display: none; }
  .hero h1 { font-size: 44px; }
  .hero-copy > p { font-size: 16px; }
  .product-stage { height: 430px; }
  .app-window { top: 70px; }
  .video-card { min-height: 300px; }
  .section-heading h2 { font-size: 38px; }
  .bento h3 { font-size: 34px; }
  .bento-ai { min-height: 570px; padding: 32px; }
  .ai-suggestions { right: 20px; bottom: 20px; left: 20px; }
  .bento-platform, .bento-speed { padding: 30px; }
  .bento-speed { display: block; }
  .bento-speed > div { max-width: none; }
  .bento-speed .big { display: block; margin-top: 35px; }
  .step-grid { grid-template-columns: 1fr; }
  .feature-image { height: 330px; }
  .feature-copy ul { grid-template-columns: 1fr; }
  .plan-grid > * { padding: 30px 22px; }
  .final-cta { padding: 44px 24px; }
  .final-cta h2 { font-size: 36px; }
  .platform-detail .tiles { grid-template-columns: 1fr; }
}