/* ==========================================================================
启凡官网 · Design Tokens（设计规范变量 · 全站唯一来源）
提炼自：官网初版 v4/index.html + css/style.css
风格定位：科技 SaaS 企业官网 · 1300px 栅格 · 主色 #1677FF
用法：新页面先引本文件，再引页面自己的样式
断点：≤1199px 双列布局 · ≤768px 移动端 · ≤480px 小屏
========================================================================== */
:root{
/* ---------- 1. 品牌色 ---------- */
--primary:#1677FF; /* 主色·科技蓝：按钮/链接/强调 */
--primary-hover:#0F66DD; /* 主色悬停加深 */
--primary-soft:#EAF3FF; /* 主色浅底：标签底/选中底/高亮 mark */
--primary-border:#BFD8FF; /* 主色系悬停边框（卡片 hover 时边框变这个） */
--primary-border-soft:#D6E6FC; /* 主色系浅边框（胶囊标签边框） */
/* ---------- 2. 深色系（深蓝大区块 / 页脚 / CTA） ---------- */
--navy:#0B1B33; /* 深蓝底（设计稿主深色） */
--navy-2:#142E52; /* 深蓝备用：深色面板/表头 */
--on-dark:#FFFFFF; /* 深底主文字/标题 */
--on-dark-2:#A9BFD9; /* 深底正文 */
--on-dark-muted:#8FA6C4; /* 深底辅助文字 */
--on-dark-faint:#6C84A3; /* 深底最弱文字（页脚版权行） */
--on-dark-accent:#4D9AFF; /* 深底强调：电话号、数字渐变终点 */
--on-dark-accent-soft:#6EA8FF; /* 深底 eyebrow 文字 */
--on-dark-tag:#9CC3FF; /* 深底标签文字 */
--on-dark-line:rgba(255,255,255,.10); /* 深底分隔线 */
--on-dark-card:rgba(255,255,255,.045); /* 深底半透明卡片底 */
--on-dark-card-border:rgba(255,255,255,.12); /* 深底卡片边框 */
/* ---------- 3. 中性色（浅色区） ---------- */
--white:#FFFFFF;
--text:#102033; /* 正文主色（近黑的深蓝灰） */
--text-2:#34475B; /* 次要文字 */
--muted:#6B7C8F; /* 辅助文字 */
--muted-2:#94A3B3; /* 最弱文字：日期、编号、版权 */
--bg:#F4F7FC; /* 浅色区底（灰蓝白）：隔行板块、输入框底 */
--bg-soft:#EDF2F8; /* 占位/骨架底 */
--border:#E5ECF4; /* 常规边框、分隔线 */
--border-strong:#C9D5E3; /* 幽灵按钮边框 */
/* ---------- 4. 功能色 ---------- */
--success:#16A36A;
--warning:#F59E0B;
--danger:#EF4444;
/* ---------- 5. 字体 ---------- */
--font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif;
--lh-base:1.7; /* 正文行高 */
--lh-lead:1.8; /* 导语行高 */
--lh-tight:1.3; /* 标题行高 */
--fs-h1:40px; /* 首屏大标题 */
--fs-h2:34px; /* 板块标题 */
--fs-h3:19px; /* 卡片标题 */
--fs-h4:16.5px; /* 小卡标题 */
--fs-lead:15.5px; /* 导语 */
--fs-body:14px; /* 正文 */
--fs-small:13px; /* 辅助说明 */
--fs-meta:12.5px; /* 角标、标签、徽章 */
--fw-medium:500;
--fw-semibold:600;
--fw-bold:700;
--ls-eyebrow:.14em; /* eyebrow 字距 */
/* ---------- 6. 布局与间距 ---------- */
--container:1300px; /* 内容栅格最大宽 */
--gutter:48px; /* 容器两侧留白 */
--section-y:96px; /* 板块上下内边距 */
--header-h:72px; /* 顶栏高度 */
--gap-grid:20px; /* 常规网格间距 */
--gap-card:24px; /* 卡片网格间距 */
--pad-card:24px; /* 卡片内边距 */
/* ---------- 7. 圆角 ---------- */
--radius-xs:6px; /* 小标签、下拉菜单项 */
--radius-sm:8px; /* 按钮 */
--radius-md:12px; /* 标准卡片 */
--radius-lg:16px; /* 大白卡（AI 回答卡等） */
--radius-xl:24px; /* 预留 */
--radius-pill:99px; /* 胶囊：tab、徽章、圆点 */
/* ---------- 8. 阴影 ---------- */
--shadow-header:0 4px 20px rgba(16,32,51,.06); /* 吸顶 header */
--shadow-hover-sm:0 8px 22px rgba(16,32,51,.08); /* 小卡上浮 */
--shadow-hover:0 12px 32px rgba(16,32,51,.10); /* 卡片上浮 */
--shadow-pop:0 12px 32px rgba(16,32,51,.10); /* 浮层/下拉菜单 */
--shadow-arrow:0 4px 14px rgba(16,32,51,.14); /* 悬浮箭头按钮 */
--shadow-primary:0 8px 22px rgba(22,119,255,.32); /* 主按钮悬停 */
/* ---------- 9. 动效 ---------- */
--ease:cubic-bezier(0.22,1,0.36,1); /* 全站统一缓动 */
--dur-fast:.16s; /* 颜色/边框过渡 */
--dur-base:.2s; /* 常规过渡 */
--dur-card:.22s; /* 卡片上浮 */
--dur-img:.3s; /* 图片缩放 */
--dur-reveal:.6s; /* 进场动效 */
--dist-reveal:16px;/* 进场上移距离 */
/* ---------- 10. 层级 ---------- */
--z-header:1000;
--z-overlay:2000; /* 预留：全屏遮罩 */
}
/* ---------- 移动端 token 覆盖（≤768px 自动生效） ---------- */
@media (max-width:768px){
:root{
--gutter:32px;
--section-y:52px;
--header-h:60px;
--fs-h1:25px;
--fs-h2:22px;
--fs-h3:17px;
--fs-h4:15.5px;
--fs-lead:14px;
}
}
/* ==========================================================================
附：组件书写约定（配合上面 token 使用，保持全站一致）
--------------------------------------------------------------------------
· 板块标题 .section-eyebrow{font-size:13px;font-weight:600;
letter-spacing:var(--ls-eyebrow);color:var(--primary)}
前置短横线 ::before{width:16px;height:3px;border-radius:2px;
background:var(--primary)}，标题下 margin-bottom:10px
· 板块头 标题左 + 说明/链接右，两端对齐，margin-bottom:44px
· 卡片 background:#fff;border:1px solid var(--border);
border-radius:var(--radius-md);
hover: 只变 border-color:var(--primary-border)，
不上移、不加阴影，图片 scale(1.03)
· 标签/徽章 font-size:var(--fs-meta);color:var(--primary);
background:var(--primary-soft);border-radius:var(--radius-xs);
padding:2px 10px；胶囊款用 var(--radius-pill)
· 按钮 .btn{height:44px;padding:0 22px;font-size:15px;
font-weight:600;border-radius:var(--radius-sm)}
大按钮 .btn-lg{height:50px;padding:0 28px;font-size:16px}
primary：蓝底白字，hover 加深 + var(--shadow-primary)
ghost：白底灰边，hover 边框和文字变主色
plain：透明底蓝边，hover 变浅蓝底
· 数字 一律 font-variant-numeric:tabular-nums
· 深色区块 底色 var(--navy)（可叠 radial-gradient 光晕），
文字用 --on-dark-* 系列，强调用 --on-dark-accent
· 深浅节奏 浅色板块底交替：#fff 与 var(--bg)，避免同底色连排
· 焦点 :focus-visible{outline:2px solid var(--primary);
outline-offset:2px}
· 选中文本 ::selection{background:var(--primary);color:#fff}
· 锚点定位 section[id]{scroll-margin-top:80px}
· 进场动效 html.js 下 .reveal 初始 opacity:0 + translateY
(var(--dist-reveal))，进场过渡 var(--dur-reveal) var(--ease)
========================================================================== */