/* ============================================================
   product-hero.css —— 八大产品页顶部大字统一规范
   2026-11-05 建立
   2026-11-05 v2：统一「页眉 → 大字」距离 = 32px（以企业服务页为基准）

   【一】大字本身
     · 字号 40px / 字重 700 / 手机端 28px→24px
     · 标题前一个 1em 线性矢量图标，与文字同色，间距 12px

   【二】页眉 → 大字的距离 = 32px
   页眉 fixed 56px，body 已补 56px 让位。各页又在自己
   main / hero 容器上叠了 0~119px 不等的 padding 和 margin，
   改前实测：1px / 40px / 40px / 52px / 54px / 117px / 166px / 173px。
   现全部对齐 32px（企业服务页为基准）。

   测量口径：
     距离 = 大字 getBoundingClientRect().top − 页眉 .header 底边
     桌面 1280 宽实测，八页逐一核对。
   ============================================================ */

.zf-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}

/* ============================================================
   【配色】科技感渐变标题
   蓝 → 青 → 紫，深色底和浅色底都够亮，渐变角度 100deg
   用 background-clip:text 实现，同时给 color 兜底色，
   浏览器不支持时退回 #2563eb，不会出现白字看不见
   ============================================================ */
.zf-hero-title,
h1.zf-hero-title,
h2.zf-hero-title,
.academy-header h1.zf-hero-title,
.hero h1.zf-hero-title,
.studio-hero h2.zf-hero-title,
.sv-hero h1.zf-hero-title,
.sv-main .sv-hero h1.zf-hero-title,
.px-title {
  color: #1d4ed8; /* 兜底色 */
  background-image: linear-gradient(100deg, #0b63f6 0%, #0ea5e9 38%, #6366f1 70%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 图标：文字走渐变，图标单独用科技蓝描边，保证清晰可见 */
.zf-hero-title .zf-hero-ico,
.zf-hero-title .zf-hero-icon {
  stroke: #0b63f6;
  color: #0b63f6;
  -webkit-text-fill-color: #0b63f6;
}

/* ★ 各页自己的 h1 规则优先级更高（如课程页 .academy-header h1{2.4rem}），
   这里用同等偏高的权重压住，保证八页字号真的一致 */
h1.zf-hero-title,
h2.zf-hero-title,
.academy-header h1.zf-hero-title,
.hero h1.zf-hero-title,
.studio-hero h2.zf-hero-title,
.sv-hero h1.zf-hero-title,
.sv-main .sv-hero h1.zf-hero-title {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
}

/* 图标：SVG 与 PNG 两种写法统一尺寸
   —— SVG 用 currentColor 描边；PNG 用 object-fit 撑满同尺寸方框。
   尺寸固定 40px（不是 1em），因为 40px 大字的 1em 在部分页会因继承字号漂移。 */
.zf-hero-ico,
.zf-hero-icon {
  width: 40px;
  height: 40px;
  flex: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  display: inline-block;
  vertical-align: middle;
}
/* PNG 图标（AI 生成）：圆角随尺寸缩放，避免 40px 下变成方块 */
img.zf-hero-ico,
img.zf-hero-icon {
  object-fit: contain;
  border-radius: 10px;
  stroke: none;
}
/* 手机端略缩，避免挤占文字 */
@media (max-width: 640px) {
  .zf-hero-ico, .zf-hero-icon { width: 32px; height: 32px; }
  img.zf-hero-ico, img.zf-hero-icon { border-radius: 8px; }
}

/* ============================================================
   【二】页眉 → 大字 = 32px（逐页 hook）
   每页只调该页"多余的让位层"，不动全站共用 style.css。
   ============================================================ */

/* ① 智方工具 toolbox/（改前 40px，.top 顶部 24 → 16） */
.zf-page-toolbox .top {
  padding-top: 16px !important;
}

/* ② 智方课程 academy.html（改前 40px，.academy-main 顶部 24 → 16） */
.zf-page-academy .academy-main {
  padding-top: 16px !important;
}

/* ③ 智方积分 points/
   大字已提到最前（工具栏「小朋友 / 保存积分」移到标题下方），
   现在可以直接对齐 32px：
   body 已有 56px 让位（fixed 页眉），wrap 顶部再给 32px */
.zf-page-points .wrap {
  padding-top: 32px !important;
}
.zf-page-points .wrap > .zf-hero-title {
  margin-top: 0 !important;
}

/* ★★ 手机端修：header-align.css 在 (max-width:768px) 里用
   body{padding-top:0 !important} 把页眉让位清零，注释说"手机端页眉
   不再是固定高度"，但实测手机端页眉仍是 position:fixed、高 56px。
   结果大字直接顶到屏幕最上面、被页眉压住。
   这里把让位补回来：body 恢复 56px，wrap 只留 16px。 */
@media (max-width: 768px) {
  body.zf-page-points {
    padding-top: 56px !important;
  }
  .zf-page-points .wrap {
    padding-top: 16px !important;
  }
}

/* ④ 智方问数 dev/bazi/（改前 52px：容器 20px + 内层 32px）
   大字外层容器顶部归零，只留 32px 一档 → 32px */
.zf-page-bazi .baziContainer {
  padding-top: 0 !important;
}
.zf-page-bazi .zf-hero-title {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ⑤ 智方视频 studio.html（改前 54px，.studio-wrap 24 → 2） */
.zf-page-studio .studio-wrap {
  padding-top: 2px !important;
}

/* ⑥ 智方图谱 math/（改前 117px）
   大字上方是图谱自己的二级导航 .site-header（品牌 + 学科切换，
   static 占流、实测 67px，且顶部被 fixed 页眉压住），
   压到 55px 后大字刚好 32px；学科切换仍完整可见。
   同时把学科说明 .eyebrow 移到标题下方后，不再顶在上面。 */
.zf-page-math .site-header {
  height: 55px;
  overflow: hidden;
}
/* 大字与二级导航之间统一留 32px（与其余七页一致）。
   注意：main/.hero 自身有 padding，标题又拆成「智方图谱 + 副标题」两行，
   所以这里不能再用 0，否则大字会贴到 1px。用 32px 显式给足。 */
.zf-page-math main {
  padding-top: 32px !important;
}
.zf-page-math .hero {
  padding-top: 0 !important;
}
.zf-page-math .zf-hero-title {
  margin-top: 0 !important;
}

/* 图谱页学科覆盖范围：改成标签块，自动换行居中，不再挤成一长条 */
.zf-subj-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 860px;
  margin: 18px auto 0;
  padding: 0 16px;
}
.zf-subj {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #f1f5fd;
  border: 1px solid #dfe8f8;
  color: #5b6b8c;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: nowrap;
}
.zf-subj b {
  color: #0b63f6;
  font-weight: 600;
}
@media (max-width: 640px) {
  .zf-subj-wrap {
    gap: 6px;
    margin-top: 14px;
  }
  .zf-subj {
    padding: 5px 11px;
    font-size: 12.5px;
  }
}

/* ⑦ 企业服务 services.html —— 基准 32px，不动 */
.zf-page-services .sv-main {
  margin-top: 0 !important;
  padding-top: 32px !important;
}
.zf-page-services .sv-hero {
  padding-top: 0 !important;
}

/* ⑧ 智方助理 zhifang.html（改前 173px）
   原结构：88px 大图标独占一行 → 标题在其下方 → 距页眉 173px
   改后：图标收到 1em 并排在标题前面（同一行）；
   标题上方有个 .hd 粘性顶栏（返回首页 / 网页版直接使用，63px 撑高），
   收到 56px 后大字正好 32px，与其余七页一致 */
.zf-page-zhifang .hd {
  height: 56px;
}
.zf-page-zhifang .hero {
  padding-top: 32px !important;
  margin-top: 0 !important;
}
.zf-page-zhifang .zf-hero-title {
  margin-top: 0 !important;
}
/* 该页图标是 <img>，按 1em 收齐，与其他页 SVG 图标同尺寸 */
.zf-page-zhifang .zf-hero-title > img.zf-hero-ico {
  width: 1em;
  height: 1em;
  object-fit: contain;
  border-radius: 20%;
  flex: none;
}
.zf-page-zhifang .zf-hero-title > span {
  display: inline;
}

/* 各页原有副标题统一灰度与字号 */
.zf-hero-sub {
  font-size: 15px;
  color: #5b6b8c;
  line-height: 1.7;
  margin: 12px 0 0;
  text-align: center;
}

/* 手机端：字号收敛，避免长标题换行挤爆 */
@media (max-width: 640px) {
  .zf-hero-title,
  h1.zf-hero-title,
  h2.zf-hero-title,
  .academy-header h1.zf-hero-title,
  .hero h1.zf-hero-title,
  .studio-hero h2.zf-hero-title,
  .sv-hero h1.zf-hero-title {
    font-size: 28px;
    gap: 9px;
  }
}

@media (max-width: 380px) {
  .zf-hero-title,
  h1.zf-hero-title,
  h2.zf-hero-title,
  .academy-header h1.zf-hero-title,
  .hero h1.zf-hero-title,
  .studio-hero h2.zf-hero-title,
  .sv-hero h1.zf-hero-title {
    font-size: 24px;
    gap: 8px;
  }
}

/* ★ 企业服务页：图标在左、文案在右，整体居中 */
.sv-hero h1.zf-hero-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  line-height: 1.25;
}
.sv-hero h1.zf-hero-title > span {
  display: inline-block;
}


/* ============================================================
   【三】大字副标题（标题下面那行小字）
   例：智方图谱 → 从小学到初中 全量知识点诊断
   ============================================================ */
.zf-hero-sub {
  margin: 8px 0 0;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  color: #5b6478;
  letter-spacing: .2px;
}
.zf-hero-sub b { color: #0b63f6; font-weight: 600; }

/* ============================================================
   【四】首页主标语「把想法变成能用的东西」：图标 + 背景
   ============================================================ */
.px-hero {
  position: relative;
  /* 上下留白由 index.html 的内联 .px-hero 规则控制（32px），
     这里只管左右/背景，避免两处叠加导致间距变 65px。 */
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 24px;
  overflow: hidden;
  /* 极淡的科技渐变底：够明显但不抢字 */
  background:
    radial-gradient(1200px 320px at 12% -30%, rgba(11,99,246,.13), transparent 60%),
    radial-gradient(900px 300px at 88% 130%, rgba(168,85,247,.13), transparent 62%),
    linear-gradient(180deg, #f7f9ff 0%, #ffffff 100%);
  border: 1px solid rgba(11,99,246,.10);
  box-shadow: 0 10px 30px -18px rgba(37,64,150,.35);
}
/* 背景网格：科技感，很淡 */
.px-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(11,99,246,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,99,246,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(circle at 50% 45%, #000 12%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 12%, transparent 72%);
  pointer-events: none;
}
.px-hero > * { position: relative; z-index: 1; }
/* 标题行：图标 + 文字 */
.px-hero h1.px-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0;
}
.px-hero img.px-title-ico {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: contain;
  flex: none;
  box-shadow: 0 6px 16px -8px rgba(37,64,150,.55);
  /* ★ 父级 h1 用了 background-clip:text + 透明文字色，
     img 会跟着变透明（实测 webkit-text-fill-color 被继承成 rgba(0,0,0,0)）。
     这里显式恢复，否则图标只剩一个不显示的占位。 */
  -webkit-text-fill-color: initial !important;
  color: initial !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  opacity: 1 !important;
  visibility: visible !important;
}
@media (max-width: 640px) {
  .px-hero { padding: 24px 16px 28px; border-radius: 18px; }
  .px-hero img.px-title-ico { width: 36px; height: 36px; border-radius: 9px; }
  .zf-hero-sub { font-size: 14px; }
}