/* ============================================================
   SparkAI 官网 · 固定侧边栏布局（style: sidebar-fixed）
   生成日期 2026-10-12 · 依据 STYLEKIT sidebar-fixed 规则
   合规偏离（已获用户批准）：
     1. 主色保留青绿 #0f766e（规则建议 blue-500，白字对比仅 3.68:1 不达标）
     2. 弱化文字用 zinc-500 #71717a（规则 token zinc-400 仅 2.46:1 不达标）
     3. 不放搜索框（静态站无搜索后端，避免假交互）
     4. 既有元素圆角收敛：.mobile-cta/.skip 由 pill(980px) 改为 10px/8px
        （规则禁止 rounded-full；列表装饰圆点 50%→6px）
     5. 字号尺度遵循原站流体 clamp()（超出规则 text-4xl/5xl 上限）：
        原站 h1 clamp(44,5.8vw,72) / h2 clamp(28,3.4vw,44) 是获奖级视觉
        层级所必需，用户「Awwwards 级」指令优先于字号上限规则；
        布局/禁止 class/交互态规则仍全部执行
   ============================================================ */

:root{
  --sb-w:256px;                 /* w-64，规则上限 280px 内 */
  --sb-bg:#fafafa;              /* bg-zinc-50 */
  --sb-line:#e4e4e7;            /* border-zinc-200 */
  --ink-900:#18181b;            /* text-zinc-900 */
  --ink-600:#52525b;            /* text-zinc-600 */
  --ink-500:#71717a;            /* 偏离2：替代 zinc-400，4.64:1 达标 */
  --sb-accent:#0f766e;          /* 偏离1：保留品牌青绿，5.42:1 */
  --sb-accent-hover:#0a655e;
  --sb-accent-soft:rgba(15,118,110,.07);
  --r-lg:8px;                   /* rounded-lg */
  --r-xl:12px;                  /* rounded-xl */
  --sh-sm:0 1px 2px rgba(0,0,0,.05);
  --sh-md:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);
  --t-fast:150ms;               /* duration-150 */
  --t-norm:200ms;               /* duration-200 */
  --head-h:57px;
}

/* ---- 移除旧顶部导航的 body 留白 ---- */
body{padding-top:0}
html{scroll-padding-top:calc(var(--head-h) + 12px)}

/* ---- 旧导航元素彻底隐藏（HTML 已删，此处兜底）---- */
.nav,.topic-bar{display:none}

/* ---- 固定侧边栏 ---- */
.sb{
  position:fixed;inset:0 auto 0 0;width:var(--sb-w);z-index:100;
  background:var(--sb-bg);border-right:1px solid var(--sb-line);
  display:flex;flex-direction:column;
}
.sb-brand{
  display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--sb-line);flex:0 0 auto;
}
.sb-brand-mark{
  display:grid;place-items:center;width:28px;height:28px;flex:0 0 auto;
  border-radius:var(--r-lg);background:#3edab2;color:#06312e;
  font:800 11px/1 var(--mono,ui-monospace,monospace);
}
.sb-brand-text{
  font-size:13px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-900);text-decoration:none;
}
.sb-brand-text em{font-style:normal;color:var(--sb-accent)}
.sb-brand-text:hover{color:var(--sb-accent)}

/* 主导航：可滚动（规则禁止溢出无滚动） */
.sb-nav{flex:1 1 auto;overflow-y:auto;padding:8px 0;scrollbar-width:thin}
.sb-group-label{
  padding:14px 16px 6px;font-size:11px;font-weight:600;
  color:var(--ink-500);letter-spacing:.02em;
}
.sb-nav a{
  position:relative;display:flex;align-items:center;gap:10px;
  padding:9px 16px;font-size:13.5px;font-weight:500;
  color:var(--ink-600);text-decoration:none;
  transition:color var(--t-fast) ease,background-color var(--t-fast) ease;
}
.sb-nav a .ico{
  width:16px;flex:0 0 auto;text-align:center;font-style:normal;
  transition:transform var(--t-fast) ease;   /* Magnetic Icon Shift */
}
.sb-nav a:hover{color:var(--ink-900);background:#f4f4f5}
.sb-nav a:hover .ico{transform:translateX(2px)}
/* Solid Active State：左侧强调线（稳定锚点） */
.sb-nav a[aria-current="page"]{
  color:var(--sb-accent);background:var(--sb-accent-soft);font-weight:600;
}
.sb-nav a[aria-current="page"]::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  background:var(--sb-accent);border-radius:0 2px 2px 0;
}
.sb-nav a:focus-visible{outline:2px solid var(--sb-accent);outline-offset:-2px}

/* 底部：CTA + 用户区 */
.sb-foot{flex:0 0 auto;padding:12px 16px;border-top:1px solid var(--sb-line)}
.sb-cta{
  display:flex;align-items:center;justify-content:center;width:100%;
  min-height:40px;padding:0 16px;border-radius:var(--r-lg);
  background:var(--sb-accent);color:#fff;text-decoration:none;
  font-size:13.5px;font-weight:500;
  transition:background-color var(--t-norm) ease;
}
.sb-cta:hover{background:var(--sb-accent-hover)}
.sb-cta:focus-visible{outline:2px solid var(--ink-900);outline-offset:2px}
.sb-user{
  display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--sb-line);
}
.sb-avatar{
  width:28px;height:28px;flex:0 0 auto;border-radius:var(--r-lg);
  background:#e4e4e7;display:grid;place-items:center;
  font-size:11px;font-weight:600;color:var(--ink-600);
}
.sb-user-meta{font-size:12px;line-height:1.45;color:var(--ink-600)}

/* ---- 主内容区：ml-64 + 独立滚动上下文 ---- */
.main{margin-left:var(--sb-w);min-height:100vh;background:var(--bg,#fffef9)}
.main-head{
  position:sticky;top:0;z-index:50;height:var(--head-h);
  display:flex;align-items:center;gap:12px;padding:0 24px;
  background:rgba(250,250,250,.95);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--sb-line);
}
.main-head-title{
  margin:0;font-size:15px;font-weight:600;letter-spacing:-.01em;
  color:var(--ink-900);
}
.burger{
  display:none;place-items:center;width:36px;height:36px;flex:0 0 auto;
  border:1px solid var(--sb-line);border-radius:var(--r-lg);
  background:#fff;color:var(--ink-900);font-size:16px;line-height:1;
  cursor:pointer;transition:background-color var(--t-fast) ease;
}
.burger:hover{background:#f4f4f5}
.burger:focus-visible{outline:2px solid var(--sb-accent);outline-offset:2px}

/* 遮罩层（仅移动端抽屉打开时） */
.sb-scrim{
  position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity var(--t-norm) ease;
}

/* ---- 字号尺度：恢复原站流体 clamp()（偏离记录 #4）----
   STYLEKIT 禁 text-4xl/5xl，但原站 h1 clamp(44,5.8vw,72) / h2 clamp(28,3.4vw,44)
   是获奖级层级所必需；用户「Awwwards 级」指令优先于字号上限规则。
   布局类规则（侧边栏/禁止 class/交互态）仍全部执行。 */
.hero-copy,.hero-note,.section-intro,.section-main>p,.start-card p,.evidence p{
  text-wrap:pretty;
}


/* ---- 主按钮 hover 微抬升（克制，符合 Content Lift 精神）---- */
.button.primary:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.button.primary:hover{transform:none}}

/* ---- 侧边栏图标列对齐 ---- */
.sb-nav a .ico{display:inline-flex;width:1.25em;justify-content:center;flex:none}

/* ---- Content Lift：仅微弱抬升 + 轻量阴影 ---- */
.evidence,.start-card,.fit-column,.case-card,.service-card,.report,.standard{
  transition:transform var(--t-fast) ease,box-shadow var(--t-fast) ease;
}
.evidence:hover,.start-card:hover,.case-card:hover,.service-card:hover{
  transform:translateY(-2px);box-shadow:var(--sh-md);
}

/* ---- 偏离4：既有元素圆角收敛（规则禁 rounded-full）---- */
.mobile-cta{border-radius:10px}
.skip{border-radius:var(--r-lg)}
.fit-column li::before,.faq summary::before{border-radius:6px}
.standard li::before{border-radius:2px}

/* ---- 响应式：<1024px 抽屉 + 汉堡 ---- */
@media(max-width:1023px){
  .sb{
    transform:translateX(-100%);
    transition:transform var(--t-norm) ease;
    box-shadow:var(--sh-md);
  }
  body.sb-open .sb{transform:translateX(0)}
  body.sb-open .sb-scrim{opacity:1;pointer-events:auto}
  body.sb-open{overflow:hidden}
  .main{margin-left:0}
  .burger{display:grid}
  .main-head{padding:0 16px}
}

/* ---- 规则要求：reduced-motion 备选 ---- */
@media(prefers-reduced-motion:reduce){
  .sb,.sb-scrim,.sb-nav a,.sb-nav a .ico,.burger,
  .evidence,.start-card,.fit-column,.case-card,.service-card{transition:none}
  .evidence:hover,.start-card:hover,.case-card:hover,.service-card:hover{transform:none}
  .sb-nav a:hover .ico{transform:none}
}

/* ---- 流程步骤编号（CSS counter，不动 HTML）---- */
.method-flow{counter-reset:mfstep}
.method-flow li::before{
  counter-increment:mfstep;
  content:"0" counter(mfstep);
  display:block;margin-bottom:10px;
  font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;color:var(--accent);
}

/* ---- 页脚收尾边界 ---- */
footer{border-top:1px solid var(--line)}