/* 🍞 @FILE static/base.css — 全站基础层（设计令牌单一真源 + reset + 全站通用组件）
 * @WHY 设计令牌（颜色/间距/圆角/阴影）必须**只定义一次** —— 对外页、法律页等多页共用，
 *      若各页各自复制一份 :root，改一处必漏一处（双真源）。故抽为本文件，各页 <link> 引用。
 * @GOTCHA 本文件必须在各页专属样式**之前**加载（about.css / legal.css 依赖这里的令牌与 .wrap/.btn/.foot）
 * @COUPLED static/about.css、static/legal.css（均依赖本文件；此处 class 改名须同步两页）
 * @ASSUME 零外部依赖：不引 CDN、不引 Google Fonts（国内可达性差，回退系统字体）
 * 令牌来源：ui-ux-pro-max-skill 的 scripts/search.py --design-system
 *          Pattern = Trust & Authority + Conversion ｜ Style = Accessible & Ethical
 */
:root{
  /* 颜色：Primary #0F172A（深海军蓝，权威）/ Accent #0369A1（**仅用于 CTA**，稀缺性保有效） */
  --color-primary:#0F172A; --color-on-primary:#FFFFFF;
  --color-secondary:#334155;
  --color-accent:#0369A1; --color-on-accent:#FFFFFF;
  --color-background:#F8FAFC; --color-foreground:#020617;
  --color-card:#FFFFFF;
  --color-muted:#E8ECF1; --color-muted-foreground:#475569;
  --color-border:#E2E8F0; --color-ring:#0F172A;
  --font-sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  /* 间距刻度 */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:88px;
  /* CTA 专用强调色（橙）：ui-ux-pro-max 的规范要求 Accent for CTA only —— 与深海军蓝主色形成强对比，
     让主行动按钮真正「跳」出来。仅用于主要 CTA，不用于装饰。 */
  --color-cta:#EA580C; --color-on-cta:#FFFFFF;
  --radius:12px;
  --radius-lg:16px;
  --shadow-card:0 1px 2px rgba(2,6,23,.04), 0 2px 6px rgba(2,6,23,.05);
  --shadow-lift:0 6px 20px rgba(2,6,23,.09), 0 2px 6px rgba(2,6,23,.05);
  /* @WHY 新增"浮起"层级：ui-ux-pro-max 的 Depth Layering 规范明确反对纯扁平面板
     （Don't: Flat opaque panels / bg-white），要求用 z-offset 区分内容与背景。 */
  --shadow-float:0 18px 44px rgba(2,6,23,.12), 0 4px 12px rgba(2,6,23,.06);
  --glass-bg:rgba(255,255,255,.82);
  /* @WHY 1120→1200：对齐主流 SaaS 官网容器宽（对标实测 1200px）。法律页正文另有 76ch 限宽，不受影响。 */
  --maxw:1200px;
}
*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ background:var(--color-background); color:var(--color-secondary); font-family:var(--font-sans);
      font-size:16px; line-height:1.75; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ color:var(--color-foreground); font-weight:700; letter-spacing:-.01em; line-height:1.3; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--s5); }

/* 可访问性：键盘焦点可见 + 跳转链接 */
:focus-visible{ outline:3px solid var(--color-ring); outline-offset:2px; border-radius:6px; }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:var(--s4); top:var(--s4); z-index:99; background:#fff; padding:10px 16px; border-radius:8px; box-shadow:var(--shadow-lift); }

/* 按钮（最小 44px 触摸目标） */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--s2); min-height:44px;
      padding:11px 22px; border:1px solid transparent; border-radius:var(--radius); font-size:15px; font-weight:600;
      font-family:inherit; text-decoration:none; cursor:pointer;
      transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease; }
.btn-accent{ background:var(--color-accent); color:var(--color-on-accent); }
.btn-accent:hover{ background:#025a8c; box-shadow:var(--shadow-lift); }
/* CTA 按钮（橙）：仅用于页面的主行动点（申请开通），与主色形成对比 */
.btn-cta{ background:var(--color-cta); color:var(--color-on-cta); box-shadow:0 2px 8px rgba(234,88,12,.28); }
.btn-cta:hover{ background:#C2410C; box-shadow:0 8px 22px rgba(234,88,12,.34); }
.btn-outline{ background:transparent; color:var(--color-primary); border-color:var(--color-border); }
.btn-outline:hover{ border-color:var(--color-primary); background:#fff; }
.btn-sm{ min-height:38px; padding:8px 16px; font-size:14px; }

/* 全站页脚（对外页与法律页共用） */
.foot{ background:#0B1220; color:rgba(255,255,255,.6); font-size:14px; padding:var(--s7) 0 var(--s5); }
.foot-grid{ display:grid; gap:var(--s6); grid-template-columns:1fr; }
.foot h4{ color:#fff; font-size:14px; font-weight:700; margin-bottom:var(--s3); letter-spacing:.02em; }
.foot ul{ list-style:none; }
.foot li{ padding:3px 0; }
.foot a{ color:rgba(255,255,255,.66); text-decoration:none; }
.foot a:hover{ color:#fff; text-decoration:underline; }
.foot-brand{ display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:17px; margin-bottom:var(--s3); }
.foot-brand i{ width:28px; height:28px; border-radius:7px; background:var(--color-accent); color:#fff; display:grid; place-items:center; font-size:14px; font-weight:800; font-style:normal; }
.foot-note{ font-size:13.5px; color:rgba(255,255,255,.5); }
.foot-bottom{ margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.12);
              display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); justify-content:space-between; font-size:13.5px; }

/* 滚动淡入（原生 IntersectionObserver；尊重 prefers-reduced-motion） */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .35s ease,transform .35s ease; }
.reveal.on{ opacity:1; transform:none; }

@media (min-width:768px){
  .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none!important; animation:none!important; }
  .reveal{ opacity:1; transform:none; }
}