/* ============================================================
   趣牛 v4 · 信息架构与页面风格层（ia.css）
   灵感参照：Stripe（背骨数据带 / 客户故事卡）、Vercel（五段式导航 + Mega 菜单）、
            Linear（编辑式区块编号 Fig. / 大留白与呼吸感）
   落地要点：① 栏目从 8 项扁平导航压成 5 栏 + 下拉；② 建立统一排版阶梯与间距节奏；
            ③ pagehead / footer 全站同构升级；④ 区块编辑感编号增强。
   依赖：必须在 assets/style.css 之后加载。
   ============================================================ */

/* ---------- 排版阶梯（全站统一，消除散落字号） ---------- */
:root{
  --fs-display:clamp(34px,4.4vw,58px);
  --fs-h1:clamp(28px,3.6vw,44px);
  --fs-h2:clamp(26px,3.1vw,38px);
  --fs-h3:18px;
  --fs-lead:clamp(17px,2vw,21px);
  --fs-body:16.5px;
  --fs-sm:14.5px;
  --fs-xs:12.5px;
  /* 8pt 间距节奏 */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px;
  --sp-5:48px; --sp-6:64px; --sp-7:88px; --sp-8:120px;
}
body{font-size:var(--fs-body)}
h1.display{font-size:var(--fs-display)}
h2.tit{font-size:var(--fs-h2)}
h3.subtit{font-size:var(--fs-h3)}
.sub{font-size:var(--fs-lead)}
.pagehead h1{font-size:var(--fs-h1)}
.section-pad{padding:var(--sp-7) 0}

/* ============================================================
   顶栏 + Mega 菜单（Vercel 式）
   ============================================================ */
header.bar{
  background:rgba(253,251,244,.86);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(13,13,13,.02);
}
.bar-in{height:72px;gap:22px}
nav.links{gap:6px;align-items:center}
nav.links a{
  position:relative;color:var(--fg-2);font-size:14.5px;font-weight:500;
  padding:8px 12px;border-radius:8px;transition:color .16s,background .16s;
}
nav.links a:hover{color:var(--brand-deep);background:var(--brand-soft)}
/* 当前栏目：渐变下划线（比旧版实心色底更精致） */
nav.links a.on{color:var(--fg);font-weight:700}
nav.links a.on::after{
  content:"";display:block;position:absolute;left:12px;right:12px;bottom:2px;
  height:2px;background:var(--grad-brand);border-radius:2px;
}
nav.links a.lang{padding:5px 11px;margin-left:6px;border-radius:99px}

/* 带下拉的导航组 */
.nav-item{position:relative}
.nav-item > a{display:inline-flex;align-items:center;gap:5px}
.nav-item > a::before{content:none}          /* 清掉 .on 的 ::after 冲突 */
.nav-item .caret{
  width:7px;height:7px;flex:none;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-2px);opacity:.55;transition:transform .2s;
}
.nav-item:hover .caret{transform:rotate(225deg) translateY(-2px)}

/* 悬停桥接：填补触发链接与面板之间的间隙，避免鼠标下移时 :hover 丢失导致面板闪退。
   伪元素属于 .nav-item，宽=触发链接宽，高覆盖间隙；桌面端生效，移动端在下方 media 中禁用。 */
.nav-item::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:12px;
}

/* Mega 面板 */
.mega{
  position:absolute;top:calc(100% + 8px);left:-8px;z-index:80;
  min-width:520px;max-width:min(680px,calc(100vw - 48px));
  background:rgba(253,251,244,.97);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 2px rgba(13,13,13,.04),0 24px 60px -20px rgba(13,13,13,.28);
  padding:22px 24px;
  /* 隐藏态用 display:none：visibility:hidden 仍参与滚动区计算，会让全站多出横向滚动条 */
  display:none;grid-template-columns:180px 1fr;gap:26px;
}
.nav-item:hover .mega,.nav-item:focus-within .mega{
  display:grid;animation:megaIn .2s cubic-bezier(.2,.7,.2,1);
}
@keyframes megaIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* 面板一律相对触发项向右对齐展开：
   左对齐时（left:-8px）面板宽 520px，中后段栏目会顶出视口右边缘被裁切。
   统一右对齐后，全部面板稳定落在视口内。 */
.mega{left:auto;right:-8px}
.mega::before{left:auto;right:20px}
/* 面板左上小尖角 */
.mega::before{
  content:"";position:absolute;top:-5px;left:20px;width:10px;height:10px;
  background:rgba(253,251,244,.97);border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg);border-radius:2px 0 0 0;
}
.mega-intro b{
  display:block;font-size:16px;font-weight:850;letter-spacing:-.01em;color:var(--fg);margin-bottom:6px;
}
.mega-intro p{font-size:13px;line-height:1.7;color:var(--fg-2)}
.mega-intro .tagline{
  display:inline-block;margin-top:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.14em;color:var(--brand-deep);border:1px solid var(--brand-line);
  border-radius:99px;padding:3px 10px;background:var(--brand-soft);font-weight:600;
}
.mega-list{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.mega-list a{
  display:block;padding:10px 12px;border-radius:10px;background:transparent;
  transition:background .16s;
}
.mega-list a b{display:block;font-size:14.5px;font-weight:700;color:var(--fg);margin-bottom:2px}
.mega-list a span{display:block;font-size:12.5px;line-height:1.6;color:var(--fg-2)}
.mega-list a:hover{background:var(--brand-soft)}
.mega-list a:hover b{color:var(--brand-deep)}
.mega-foot{
  grid-column:1 / -1;margin-top:4px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--fg-3);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.mega-foot a{color:var(--brand-deep);font-weight:600}

/* 移动端：下拉转为静态列表 */
@media(max-width:1040px){
  nav.links,.nav-item{position:static}
  nav.links.open .mega{
    position:static;display:grid;
    box-shadow:none;border:0;background:transparent;padding:6px 0 10px;
    grid-template-columns:1fr;gap:8px;min-width:0;max-width:none;
  }
  nav.links.open .mega::before{display:none}
  nav.links.open .mega-list{grid-template-columns:1fr}
  nav.links.open .mega-intro{display:none}
  nav.links.open .mega-foot{display:none}
  nav.links.open .mega-list a{padding:8px 0}
  .nav-item::after{display:none}   /* 移动端下拉转为静态列表，禁用桌面桥接 */
}

/* ============================================================
   内页头部：全站同构升级（编辑式编号 + 双光晕 + 细网格）
   ============================================================ */
.pagehead{padding:72px 0 52px;background:var(--bg)}
.pagehead::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:56px 56px;opacity:.6;
  mask-image:linear-gradient(180deg,#000 0%,transparent 82%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 82%);
}
.pagehead::before{
  background:
    radial-gradient(760px 340px at 8% -10%,rgba(253,214,24,.16),transparent 62%),
    radial-gradient(620px 320px at 88% 18%,rgba(249,168,0,.12),transparent 62%),
    radial-gradient(520px 280px at 50% 110%,rgba(253,197,2,.10),transparent 62%);
}
.pagehead h1{
  position:relative;padding-left:20px;
}
/* 左侧渐变竖线：编辑感锚点 */
.pagehead h1::before{
  content:"";position:absolute;left:0;top:.28em;bottom:.28em;width:4px;border-radius:3px;background:var(--grad-brand);
}
.crumb{
  display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--fg-3);text-transform:uppercase;
}
.crumb a{color:var(--fg-2)}
.crumb a:hover{color:var(--brand-deep)}
.crumb .sep{opacity:.5}
.pagehead .lede{margin-top:18px;font-size:var(--fs-lead);color:var(--fg-2);max-width:68ch;line-height:1.75}

/* ============================================================
   区块编辑感：编号 + 双语小标题（Linear "Fig 0.1" 手法）
   ============================================================ */
.sec-label{
  font-size:10.5px;letter-spacing:.2em;font-weight:700;
  padding:4px 10px;border-radius:99px;
  /* 背景取纯白而非 brand-soft：品牌蓝压在浅蓝底上仅 4.34:1（小字号不达 AA），
     压在白底为 5.15:1。白胶囊同时保证在任何区块背景上都可读。 */
  background:var(--surface);color:var(--brand-deep);
  border:1px solid var(--brand-line);margin-bottom:16px;
}
.sec-label::before{display:none}   /* 胶囊已承担视觉锚点，去掉短横线 */
.bottomless .sec-label,.principle .k{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.20);color:rgba(255,255,255,.86)}
.principle .k{border-radius:99px;padding:5px 14px}

/* 区块标题与副标题的字距节奏 */
h2.tit{letter-spacing:-.022em;margin-bottom:14px}
h2.tit + .sub{margin-top:2px}
.sub{line-height:1.75}

/* ============================================================
   页脚：与新 IA 对齐的四栏 + 资质行
   ============================================================ */
footer{position:relative;padding:64px 0 30px;background:var(--bg);border-top:1px solid var(--line)}
footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--grad);
  opacity:.85;
}
.foot-grid{gap:44px}
footer h5{
  font-size:10.5px;letter-spacing:.16em;color:var(--fg-3);margin-bottom:14px;
}
footer p,footer li{font-size:13.5px;line-height:1.9;color:var(--fg-2)}
footer ul li{margin-bottom:2px}
footer a{color:var(--fg-2);transition:color .16s}
footer a:hover{color:var(--brand)}
.foot-logo{font-size:17.5px;margin-bottom:16px}
footer .foot-desc{max-width:38ch;line-height:1.85}
.foot-bot{
  margin-top:44px;padding-top:22px;display:flex;gap:18px;
  justify-content:space-between;align-items:center;flex-wrap:wrap;
}
.foot-badges{display:flex;gap:8px;flex-wrap:wrap}
.foot-badge{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--fg-2);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px;background:var(--surface);
}

/* ============================================================
   组件质感微升级（统一动作：抬升 + 品牌阴影）
   ============================================================ */
.card,.why,.num-card,.blk,.blist{border-radius:14px}
.card:hover,.why:hover,.num-card:hover{transform:translateY(-3px)}
.card,.why,.num-card,.blk,.blist,.chain .node,.ov a,.toc a{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s,border-color .2s,background .2s}

/* CTA / 统计带：加大呼吸 */
.cta{padding:104px 0}
.stat-grid{padding:8px 0}

/* 响应式：768 以下收敛 hero/pagehead 留白 */
@media(max-width:600px){
  .pagehead{padding:52px 0 38px}
  .pagehead h1{padding-left:14px}
  .cta{padding:64px 0}
  .foot-grid{gap:28px}
}