/* ==========================================================================
   Soma 官网 · 设计系统
   暖纸底 + 墨色字 + 深青主色 + 金色强调
   令牌来源：Soma/src/renderer/src/assets/main.css（产品自身的浅色主题）
   规范见 website/DESIGN.md
   ========================================================================== */

/* ---------- 1 令牌 ---------- */
:root {
  color-scheme: light;
  --paper:#fafaf8; --white:#fff; --surface:#f4f4f1; --surface-2:#efeeeb; --surface-3:#e3e2dd;
  --line:#dededa; --line-soft:#e9e9e5;
  --ink:#121212; --ink-2:#3e403d; --muted:#646762; --faint:#95938e;
  --teal:#006d61; --teal-strong:#008f82; --teal-ink:#00544a; --teal-wash:rgba(0,109,97,.07);
  --gold:#e4ca6b; --gold-hover:#edd98e; --gold-wash:#facd78; --gold-ink:#262211;
  --success:#358d5a; --danger:#8d3535; --running:#1b65b9; --waiting:#c36f00;
  --night:#141619; --night-2:#1c1f23; --night-line:rgba(255,255,255,.12);
  --shadow-card:0 0 0 1px rgba(10,10,10,.06), 0 8px 28px rgba(10,10,10,.08);
  --shadow-lift:0 0 0 1px rgba(10,10,10,.07), 0 18px 44px rgba(10,10,10,.12);
  --max:1200px; --radius-xs:8px; --radius-sm:10px; --radius:14px; --radius-lg:20px;
  --font-sans:"Inter","PingFang SC","Hiragino Sans GB","Microsoft YaHei",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --nav-h:66px;
}

/* ---------- 2 基础 ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 20px); -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4 { margin:0; line-height:1.2; letter-spacing:-.02em; font-weight:660; }
h1 { font-size:clamp(2.1rem,4.4vw,3.5rem); letter-spacing:-.03em; }
h2 { font-size:clamp(1.55rem,2.7vw,2.25rem); }
h3 { font-size:1.08rem; }
p { margin:0; }
ul,ol { margin:0; padding:0; list-style:none; }
img,svg { display:block; max-width:100%; }
img { height:auto; }
figure,figcaption,pre,blockquote { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
code,kbd { font-family:var(--font-mono); font-size:.9em; }
:focus-visible { outline:2px solid var(--teal-strong); outline-offset:3px; border-radius:6px; }
::selection { background:var(--gold-wash); color:var(--gold-ink); }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:12px; z-index:99; background:var(--ink); color:#fff; padding:10px 16px; border-radius:var(--radius-sm); }

/* ---------- 3 布局工具 ---------- */
.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 24px; }
.wrap-wide { max-width:var(--max-wide); }
.section { padding:84px 0; }
.section-tight { padding:56px 0; }
.section-alt { background:var(--surface); }
.rule { height:1px; background:var(--line); border:0; margin:0; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--teal); }
.eyebrow-num { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:999px; background:var(--gold); color:var(--gold-ink); font-size:.76rem; font-weight:700; letter-spacing:0; }
.sec-head { max-width:760px; }
.sec-head h2 { margin-top:14px; }
.sec-head h1 { margin-top:14px; }
.sec-head p { margin-top:14px; color:var(--muted); font-size:1.02rem; }
.sec-head-center { margin:0 auto; text-align:center; }
.center { text-align:center; }
.mono { font-family:var(--font-mono); font-size:.86em; }
.muted { color:var(--muted); }
.faint { color:var(--faint); }
.hl { color:var(--teal); font-weight:600; }

/* ---------- 4 按钮 ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 20px; border-radius:var(--radius-sm); font-size:.94rem; font-weight:600; white-space:nowrap; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); }
.btn:hover { transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-gold { background:var(--gold); color:var(--gold-ink); }
.btn-gold:hover { background:var(--gold-hover); }
.btn-teal { background:var(--teal); color:#fff; }
.btn-teal:hover { background:var(--teal-ink); }
.btn-outline { border:1px solid var(--line); background:var(--white); color:var(--ink); }
.btn-outline:hover { border-color:var(--faint); background:var(--surface); }
.btn-quiet { color:var(--teal); padding:0 4px; height:auto; }
.btn-quiet:hover { color:var(--teal-ink); }
.btn-sm { height:36px; padding:0 14px; font-size:.86rem; }
.btn-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.arrow { transition:transform .18s var(--ease); }
.btn:hover .arrow, .link-more:hover .arrow { transform:translateX(3px); }
.btn svg { width:17px; height:17px; flex:none; }
.link-more svg { width:15px; height:15px; flex:none; }
.card-tag svg, .cat-tag svg { width:12px; height:12px; }
.hero-pill .dot { flex:none; }

/* ---------- 5 顶栏 ---------- */
.topbar { position:sticky; top:0; z-index:50; height:var(--nav-h); background:rgba(250,250,248,.86); backdrop-filter:saturate(1.6) blur(12px); border-bottom:1px solid var(--line); }
.topbar-inner { display:flex; align-items:center; gap:28px; height:100%; }
.brand { display:flex; align-items:center; gap:10px; font-weight:700; font-size:1.06rem; letter-spacing:-.01em; }
.brand-mark { width:30px; height:30px; }
.brand-sub { font-size:.7rem; font-weight:600; letter-spacing:.14em; color:var(--faint); text-transform:uppercase; padding-left:9px; margin-left:1px; border-left:1px solid var(--line); }
.nav { display:flex; align-items:center; gap:4px; margin-left:6px; }
.nav-link { padding:8px 12px; border-radius:var(--radius-xs); font-size:.92rem; color:var(--ink-2); transition:background .16s var(--ease), color .16s var(--ease); }
.nav-link:hover { background:var(--surface-2); color:var(--ink); }
.nav-link[aria-current="page"] { background:var(--surface-2); color:var(--ink); font-weight:600; }
.topbar-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.lang { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; background:var(--white); }
.lang button { padding:6px 12px; font-size:.8rem; color:var(--muted); transition:background .16s var(--ease), color .16s var(--ease); }
.lang button[aria-pressed="true"] { background:var(--ink); color:var(--paper); font-weight:600; }
.menu-toggle { display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:var(--radius-xs); place-items:center; background:var(--white); }
.menu-toggle svg { width:18px; height:18px; }
.mobile-menu { display:none; border-bottom:1px solid var(--line); background:var(--white); }
.mobile-menu[data-open="true"] { display:block; }
.mobile-menu ul { padding:8px 24px 18px; }
.mobile-menu a { display:block; padding:11px 4px; border-bottom:1px solid var(--line-soft); font-size:.95rem; }
.mobile-menu a:last-child { border-bottom:0; }

/* ---------- 6 首屏 ---------- */
.hero { padding:64px 0 72px; overflow:hidden; }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1.18fr); gap:56px; align-items:center; }
.hero h1 { margin-top:20px; }
.hero-lede { margin-top:20px; max-width:34em; font-size:1.06rem; color:var(--muted); }
.hero-actions { margin-top:30px; }
.hero-note { margin-top:16px; font-size:.85rem; color:var(--faint); }
.hero-stats { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:32px; padding-top:22px; border-top:1px solid var(--line); }
.hero-stat { font-size:.86rem; color:var(--muted); }
.hero-stat b { display:block; font-size:1.32rem; font-weight:700; color:var(--ink); letter-spacing:-.02em; }
.hero-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 12px 5px 9px; border:1px solid var(--line); border-radius:999px; background:var(--white); font-size:.8rem; color:var(--muted); }
.hero-pill .dot { width:7px; height:7px; border-radius:999px; background:var(--success); }

/* 应用窗口 */
.frame { border-radius:var(--radius-lg); border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow-lift); overflow:hidden; }
.frame-bar { display:flex; align-items:center; gap:8px; height:38px; padding:0 14px; background:var(--surface); border-bottom:1px solid var(--line); }
.frame-dots { display:flex; gap:6px; }
.frame-dots i { width:10px; height:10px; border-radius:999px; background:var(--surface-3); }
.frame-title { font-size:.76rem; color:var(--faint); margin-inline:auto; font-family:var(--font-mono); }
.frame-badge { font-size:.68rem; font-weight:600; color:var(--teal); background:var(--teal-wash); padding:3px 9px; border-radius:999px; }
.frame-body { background:var(--surface); }
.frame-body img { width:100%; }

/* ---------- 7 主链路 ---------- */
.flow { display:grid; grid-template-columns:repeat(6,1fr); gap:0; margin-top:44px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--white); }
.flow-step { position:relative; padding:22px 18px; border-right:1px solid var(--line-soft); }
.flow-step:last-child { border-right:0; }
.flow-idx { display:grid; place-items:center; width:26px; height:26px; border-radius:999px; background:var(--surface-2); color:var(--muted); font-size:.74rem; font-weight:700; font-family:var(--font-mono); }
.flow-step b { display:block; margin-top:12px; font-size:.98rem; font-weight:640; }
.flow-step span { display:block; margin-top:6px; font-size:.82rem; color:var(--faint); line-height:1.55; }

/* ---------- 8 图文段 ---------- */
.pillar { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:56px; align-items:center; padding:64px 0; border-top:1px solid var(--line); }
.pillar:first-of-type { border-top:0; }
.pillar-flip .pillar-copy { order:2; }
.pillar-copy h2 { margin-top:16px; }
.pillar-copy > p { margin-top:16px; color:var(--muted); }
.points { margin-top:24px; display:grid; gap:11px; }
.points li { display:flex; gap:10px; font-size:.93rem; color:var(--ink-2); }
.points svg { width:16px; height:16px; margin-top:4px; color:var(--teal); flex:none; }
.pillar-copy .link-more { display:inline-flex; align-items:center; gap:6px; margin-top:24px; font-size:.92rem; font-weight:600; color:var(--teal); }
.pillar-media { position:relative; }
.media-card { border-radius:var(--radius); border:1px solid var(--line); background:var(--white); box-shadow:var(--shadow-card); overflow:hidden; }
.media-card img { width:100%; }
.media-cap { padding:10px 14px; border-top:1px solid var(--line-soft); font-size:.78rem; color:var(--faint); }

/* ---------- 9 卡片网格 ---------- */
.grid { display:grid; gap:18px; margin-top:40px; }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-4 { grid-template-columns:repeat(4,1fr); }
.card { display:flex; flex-direction:column; padding:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); transition:border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.card:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); }
.card-tag { display:inline-flex; align-items:center; gap:6px; align-self:flex-start; padding:3px 10px; border-radius:999px; background:var(--surface); font-size:.72rem; font-weight:600; color:var(--muted); }
.card h3 { margin-top:14px; }
.card p { margin-top:10px; font-size:.9rem; color:var(--muted); }
.card-foot { margin-top:auto; padding-top:18px; }
.card-icon { display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-xs); background:var(--teal-wash); color:var(--teal); }
.card-icon svg { width:20px; height:20px; }

/* ---------- 10 目录（数据库 / 技能） ---------- */
.toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:28px; }
.tabs { display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:999px; background:var(--surface); }
.tabs button { padding:7px 16px; border-radius:999px; font-size:.88rem; color:var(--muted); font-weight:500; }
.tabs button[aria-selected="true"] { background:var(--white); color:var(--ink); font-weight:640; box-shadow:var(--shadow-card); }
.search { position:relative; flex:1 1 240px; min-width:200px; }
.search input { width:100%; height:42px; padding:0 14px 0 38px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); font-size:.9rem; outline:none; }
.search input:focus { border-color:var(--teal-strong); box-shadow:0 0 0 3px var(--teal-wash); }
.search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--faint); }
.select { height:42px; padding:0 34px 0 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2395938e' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; font-size:.88rem; color:var(--ink-2); appearance:none; }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chip { padding:5px 12px; border:1px solid var(--line); border-radius:999px; background:var(--white); font-size:.82rem; color:var(--muted); transition:all .16s var(--ease); }
.chip:hover { border-color:var(--faint); color:var(--ink); }
.chip[aria-pressed="true"] { background:var(--teal); border-color:var(--teal); color:#fff; font-weight:600; }
.cat-meta { display:flex; flex-wrap:wrap; gap:16px; align-items:baseline; margin-top:28px; font-size:.85rem; color:var(--faint); }
.cat-meta b { color:var(--ink); font-size:1rem; font-weight:700; }
.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px; }
.cat-item { display:flex; flex-direction:column; padding:18px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); transition:border-color .18s var(--ease), transform .18s var(--ease); }
.cat-item:hover { border-color:var(--teal-strong); transform:translateY(-2px); }
.cat-item-top { display:flex; align-items:center; gap:10px; }
.cat-logo { display:grid; place-items:center; width:32px; height:32px; border-radius:var(--radius-xs); background:var(--surface); color:var(--teal); font-weight:700; font-size:.82rem; flex:none; }
.cat-name { font-weight:640; font-size:.96rem; }
.cat-item p { margin-top:11px; font-size:.86rem; color:var(--muted); line-height:1.62; }
.cat-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; padding-top:14px; }
.cat-tag { padding:2px 9px; border-radius:999px; background:var(--surface); font-size:.7rem; color:var(--muted); }
.cat-tag.on { background:var(--teal-wash); color:var(--teal); font-weight:600; }
.cat-empty { padding:56px 0; text-align:center; color:var(--faint); font-size:.92rem; }
.cat-more { display:flex; justify-content:center; margin-top:28px; }

/* ---------- 11 文档 ---------- */
.docs { display:grid; grid-template-columns:236px minmax(0,1fr); gap:56px; align-items:start; padding:48px 0 84px; }
.docs-side { position:sticky; top:calc(var(--nav-h) + 24px); }
.docs-side h4 { font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:10px; }
.docs-nav { display:grid; gap:1px; margin-bottom:26px; }
.docs-nav a { display:block; padding:7px 11px; border-radius:var(--radius-xs); font-size:.88rem; color:var(--ink-2); border-left:2px solid transparent; }
.docs-nav a:hover { background:var(--surface); }
.docs-nav a[aria-current="page"] { color:var(--teal); font-weight:620; background:var(--teal-wash); border-left-color:var(--teal); }
.prose { max-width:760px; }
.prose h1 { margin-bottom:16px; }
.prose h2 { margin-top:48px; padding-top:24px; border-top:1px solid var(--line); }
.prose > h2:first-child, .prose > h1:first-child { margin-top:0; padding-top:0; border-top:0; }
.prose h3 { margin-top:30px; font-size:1.02rem; }
.prose p { margin-top:14px; color:var(--ink-2); }
.prose ul,.prose ol { margin-top:14px; padding-left:2px; display:grid; gap:9px; }
.prose ul li { display:flex; gap:10px; color:var(--ink-2); font-size:.95rem; }
.prose ul li::before { content:""; width:5px; height:5px; border-radius:999px; background:var(--gold); flex:none; margin-top:11px; }
.prose ol { counter-reset:n; }
.prose ol li { display:flex; gap:12px; color:var(--ink-2); font-size:.95rem; counter-increment:n; }
.prose ol li::before { content:counter(n); display:grid; place-items:center; width:22px; height:22px; flex:none; border-radius:999px; background:var(--surface-2); font-size:.74rem; font-weight:700; color:var(--muted); margin-top:4px; }
.prose a { color:var(--teal); text-decoration:underline; text-underline-offset:3px; }
.crumb { display:flex; gap:8px; align-items:center; font-size:.82rem; color:var(--faint); }
.crumb a:hover { color:var(--teal); }
.lead { font-size:1.06rem; color:var(--muted); }
.callout { display:flex; gap:12px; margin-top:22px; padding:16px 18px; border:1px solid var(--line); border-left:3px solid var(--teal); border-radius:var(--radius-sm); background:var(--white); }
.callout svg { width:18px; height:18px; color:var(--teal); flex:none; margin-top:3px; }
.callout p { margin:0; font-size:.9rem; }
.callout-warn { border-left-color:var(--gold); }
.callout-warn svg { color:var(--waiting); }
.code { margin-top:18px; padding:16px 18px; border-radius:var(--radius-sm); background:var(--night); color:#e8eae6; font-family:var(--font-mono); font-size:.84rem; line-height:1.75; overflow-x:auto; }
.code .c { color:#8b918a; }
.code .k { color:#8fd3c4; }
.doc-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:30px; }
.kbd { padding:2px 7px; border:1px solid var(--line); border-bottom-width:2px; border-radius:5px; background:var(--white); font-size:.76rem; font-family:var(--font-mono); }

/* ---------- 11b 案例与文档 ---------- */
.narrow { max-width:820px; }
.crumb { margin-bottom:22px; }
.crumb-sep { color:var(--faint); }
.steps { display:grid; margin-top:26px; border-top:1px solid var(--line); }
.steps > li { display:grid; grid-template-columns:30px minmax(0,1fr); gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.steps > li:last-child { border-bottom:0; }
.steps .s-idx { display:grid; place-items:center; width:26px; height:26px; border-radius:999px; background:var(--teal-wash); color:var(--teal); font-size:.75rem; font-weight:700; }
.steps b { display:block; font-size:.98rem; font-weight:640; }
.steps .s-body { display:block; margin-top:7px; font-size:.9rem; color:var(--muted); line-height:1.72; }
.steps .s-body + .s-body { margin-top:6px; }
.facts { display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
.facts > div { flex:1 1 168px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--white); }
.facts b { display:block; font-size:1rem; letter-spacing:-.01em; }
.facts span { display:block; margin-top:5px; font-size:.78rem; color:var(--faint); }
.table-wrap { margin-top:24px; border:1px solid var(--line); border-radius:var(--radius); background:var(--white); overflow-x:auto; }
.table-wrap { max-width:100%; }
.table { width:100%; min-width:520px; border-collapse:collapse; font-size:.89rem; }
.table th { padding:13px 16px; text-align:left; font-size:.74rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); border-bottom:1px solid var(--line); background:var(--surface); white-space:nowrap; }
.table td { padding:14px 16px; border-bottom:1px solid var(--line-soft); color:var(--ink-2); vertical-align:top; line-height:1.7; }
.table tr:last-child td { border-bottom:0; }
.table td b { color:var(--ink); font-weight:640; }
.case-nav { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.case-nav a { display:inline-flex; align-items:center; gap:8px; flex:none; white-space:nowrap; padding:10px 16px; border:1px solid var(--line); border-radius:999px; background:var(--white); font-size:.88rem; color:var(--ink-2); transition:border-color .16s var(--ease), color .16s var(--ease); }
.case-nav a:hover { border-color:var(--teal-strong); color:var(--teal); }
.prose .table-wrap { margin-top:26px; }
.prose .steps { max-width:760px; }

/* ---------- 12 CTA / 页脚 ---------- */
.cta { padding:76px 0; }
.cta-box { position:relative; overflow:hidden; padding:56px; border-radius:var(--radius-lg); background:var(--night); color:#f2f3ef; }
.cta-box h2 { color:#fff; max-width:22em; }
.cta-box p { margin-top:16px; max-width:34em; color:#a9afa7; }
.cta-box .btn-row { margin-top:30px; }
.cta-box .btn-gold { color:var(--gold-ink); }
.cta-glow { position:absolute; right:-80px; top:-80px; width:320px; height:320px; border-radius:999px; background:radial-gradient(circle,rgba(228,202,107,.22),transparent 68%); pointer-events:none; }
.cta-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:34px; padding-top:30px; border-top:1px solid var(--night-line); }
.cta-grid div b { display:block; font-size:1.3rem; color:var(--gold); font-weight:700; }
.cta-grid div span { font-size:.82rem; color:#a9afa7; }
.footer { background:var(--night); color:#a9afa7; padding:56px 0 30px; font-size:.88rem; }
.footer-grid { display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:36px; }
.footer-brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:700; font-size:1.04rem; }
.footer-brand .brand-mark { width:28px; height:28px; }
.footer p { margin-top:14px; max-width:30em; line-height:1.7; }
.footer h4 { color:#fff; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px; }
.footer-col a { display:block; padding:5px 0; transition:color .16s var(--ease); }
.footer-col a:hover { color:var(--gold); }
.footer-bar { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-top:44px; padding-top:22px; border-top:1px solid var(--night-line); font-size:.8rem; color:#7d837c; }

/* ---------- 13 动效 ---------- */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .btn:hover,.card:hover,.cat-item:hover { transform:none; }
}

/* ---------- 14 响应式 ---------- */
@media (max-width:1024px) {
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .pillar { grid-template-columns:1fr; gap:34px; padding:52px 0; }
  .pillar-flip .pillar-copy { order:0; }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .cat-grid { grid-template-columns:repeat(2,1fr); }
  .docs { grid-template-columns:1fr; gap:32px; }
  .docs { grid-template-columns:minmax(0,1fr); }
  .docs-content { min-width:0; }
  .docs-side { position:static; }
  .docs-nav { display:flex; flex-wrap:wrap; gap:6px; }
  .docs-nav a { border-left:0; border:1px solid var(--line); border-radius:999px; padding:6px 13px; }
  .flow { grid-template-columns:repeat(3,1fr); }
  .flow-step:nth-child(3n) { border-right:0; }
  .flow-step:nth-child(-n+3) { border-bottom:1px solid var(--line-soft); }
}
@media (max-width:760px) {
  .section { padding:60px 0; }
  .nav,.brand-sub { display:none; }
  .menu-toggle { display:grid; }
  .grid-2,.grid-3,.grid-4,.cat-grid,.doc-cards,.cta-grid { grid-template-columns:1fr; }
  .flow { grid-template-columns:repeat(2,1fr); }
  .flow-step:nth-child(3n) { border-right:1px solid var(--line-soft); }
  .flow-step:nth-child(2n) { border-right:0; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .cta-box { padding:34px 24px; }
  .hero { padding:40px 0 52px; }
  .wrap { padding:0 18px; }
  .toolbar > * { width:100%; }
  .tabs { justify-content:center; }
}