/* =========================================================================
   base.css — reset + 全局排版 + 响应式断点 + 布局骨架
   （design-spec §2 字体阶梯 / §3 间距与栅格 / §5 响应式 / §1.1 背景）
   ========================================================================= */

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*,*::before,*::after{ margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; }
body{ min-height:100vh; }
img,svg{ display:block; max-width:100%; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input,select,textarea{ font:inherit; color:inherit; }
:focus{ outline:none; }

/* ---------- 全站背景（design-spec §1.1，background-attachment:fixed） ---------- */
body{
  font-family:var(--font-sans);
  font-size:16px;            /* Body 16px，移动端不缩 */
  line-height:1.75;
  font-weight:400;
  color:var(--text-100);
  background-color:var(--bg-900);
  background-image:
    radial-gradient(1200px 600px at 78% -10%, var(--bg-glow-purple), transparent 60%),
    radial-gradient(900px 500px at 12% 8%, var(--bg-glow-orange), transparent 55%),
    linear-gradient(160deg, #0A0A12 0%, #1A0B2E 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- 字体阶梯（design-spec §2，仅 H1/H2/H3 在 ≤640 收一档） ---------- */
h1,h2,h3,h4{ font-weight:700; line-height:1.2; color:var(--text-100); }
h1{ font-size:56px; line-height:1.10; font-weight:800; letter-spacing:-0.02em; }
h2{ font-size:36px; line-height:1.20; font-weight:700; letter-spacing:-0.01em; }
h3{ font-size:22px; line-height:1.35; font-weight:600; }
.lead{ font-size:20px; line-height:1.60; font-weight:400; color:var(--text-200); }
.caption{ font-size:13px; line-height:1.50; font-weight:400; color:var(--text-200); letter-spacing:0.01em; }
.text-muted{ color:var(--text-200); }
.placeholder-num{ color:var(--text-300); }   /* 【待替换】灰显 */

/* ---------- 布局骨架 ---------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--gutter);   /* 桌面留白 24px */
}
.container-narrow{ max-width:var(--container-narrow); margin-inline:auto; padding-inline:var(--gutter); }

.grid-12{ display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gutter); }

/* 区块纵向 padding：桌面 96/96，移动 56/56 */
.section{ padding-block:var(--sp-24); position:relative; }
.section-title{ margin-bottom:var(--sp-6); }
.section-head{ max-width:760px; margin-bottom:var(--sp-12); }
.section-head .lead{ margin-top:var(--sp-3); }

/* 锚点滚动时避开固定导航（桌面 64 / 移动 56） */
:target{ scroll-margin-top:calc(var(--header-h) + 16px); }
@media (max-width:639px){
  :target{ scroll-margin-top:calc(var(--header-h-m) + 12px); }
}

/* ---------- 玻璃卡片基类（design-spec §4.3） ---------- */
.glass{
  position:relative;
  overflow:hidden;
  background:var(--glass-bg);
  -webkit-backdrop-filter:var(--glass-blur);
  backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-border);
  border-radius:var(--radius-lg);
  box-shadow:var(--glass-shadow);
  padding:28px;
}
.glass::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(400px 200px at 100% 0, var(--bg-glow-purple), transparent 70%);
  opacity:.5;
  pointer-events:none;
}

/* ---------- 标签 chip（design-spec §4.2） ---------- */
.tag-row{ display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-bottom:var(--sp-6); }
.tag-chip{
  border:1px solid var(--glass-border-strong);
  border-radius:var(--radius-pill);
  padding:6px 14px;
  color:var(--text-200);
  font-size:13px;
  font-weight:500;
  background:var(--glass-bg);
}

/* ---------- 通用焦点态（design-spec §7.2） ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--accent-purple);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* ---------- skip-link（design-spec §7.3） ---------- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--accent-orange);
  color:var(--on-accent);
  font-weight:600;
  padding:10px 16px;
  border-radius:var(--radius);
}
.skip-link:focus{
  left:12px;
  top:12px;
  outline:2px solid var(--focus-orange);
  outline-offset:2px;
}

/* ---------- 响应式断点（design-spec §5） ---------- */
@media (max-width:1023px){
  .grid-12{ gap:16px; }
}
@media (max-width:639px){
  h1{ font-size:34px; line-height:1.15; }
  h2{ font-size:26px; line-height:1.25; }
  h3{ font-size:19px; line-height:1.40; }
  .lead{ font-size:17px; line-height:1.55; }
  .section{ padding-block:var(--sp-16); }       /* 56px 收敛 */
  .container{ padding-inline:20px; }
  .glass{ padding:20px; }                         /* 卡片内边距 20px */
}

/* ---------- 减少动效（design-spec §7.6，全局兜底） ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
}

/* 尊重 reduced-motion：Hero 卡阵等组件各自的媒体查询在 components.css 内处理 */