/* ============================================================================
   JAYAN® 嘉言 AI 健康声场 · 首页定制层
   ----------------------------------------------------------------------------
   加载顺序：home.base.css（参考站视觉基准）→ 本文件。
   本文件只作用于首页（body.site-public），内页继续使用 style.css，互不影响。
   命名沿用参考站的 .site-public / .section / .hero / .button 体系，不再另立一套。
   ========================================================================== */

/* ---------------------------------------------------------------------------
   0 · 字体与滚动出现
   正文继续用参考站的 Inter + 思源黑体栈；标题另立一档「宋体」显示字体
   （思源宋体 / 系统宋体），人文段落用它更耐看。本机已装 Noto Serif SC。
   ------------------------------------------------------------------------- */
.site-public {
  --font-display: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong",
                  "SimSun", serif;
}

.site-public .reveal { opacity: 1; transform: none; }
.site-public.motion-ready .reveal { transition: opacity .7s, transform .7s; }
.site-public.motion-ready .reveal:not(.is-visible) { opacity: 0; transform: translateY(22px); }

/* ---------------------------------------------------------------------------
   1 · Hero 首屏
   参考站是单张静态背景；这里保留其全部排版与装饰（kicker / 大标题 /
   导语 / 按钮 / 三点证明 / 底部格言 / 声场同心圆），把背景换成四图淡入轮播。
   ------------------------------------------------------------------------- */
.site-public .hero-slides { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.site-public .hero-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.5s ease;
}
.site-public .hero-slide.is-on { opacity: 1; }
.site-public .hero-slide img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  animation: 14s ease-in-out infinite alternate heroDrift;
}

/* 深色底图（夜空 / 声场地平线）：右侧留出画面，把遮罩减弱一档 */
.site-public .hero[data-dark="1"] .hero-shade {
  background:
    linear-gradient(90deg, #05090ee0 0%, #070c1275 42%, #070c1200 78%),
    linear-gradient(#0000 52%, #080d13a6);
}

/* 大标题：整行 JAYAN® 嘉言 AI 健康声场，两行排布；主题字是全页最大的一档字号 */
.site-public .hero h1 {
  font-size: clamp(48px, 5.8vw, 94px);
  letter-spacing: -.05em; margin: 0 0 28px;
}
.site-public .hero h1 .h1-row { display: block; }
.site-public .hero h1 sup {
  font-size: .34em; font-weight: 500; letter-spacing: 0;
  vertical-align: super; line-height: 0; margin-left: .06em;
}
.site-public .hero-tagline {
  margin: 22px 0 0; color: #b6c4ce;
  font-size: clamp(15px, 1.25vw, 17.5px); letter-spacing: .08em; font-weight: 400;
  text-wrap: balance;
}
.site-public .hero-tagline i { font-style: normal; color: #55b8f380; margin: 0 .45em; }

/* 右下角注脚：这句原本挤在主文案块里，现在收成小字、靠右下角安放 */
.site-public .hero-note {
  position: absolute; right: var(--gutter); bottom: 64px; z-index: 2;
  max-width: 440px; margin: 0; padding-right: 14px;
  text-align: right; color: #9fabb5;
  font-size:15px; line-height: 1.85; letter-spacing: .02em;
  border-right: 2px solid #55b8f359;
}

/* 轮播控制点：当前项拉长为胶囊，右侧与格言分列两端 */
.site-public .hero-dots {
  position: absolute; right: var(--gutter); bottom: 26px; z-index: 3;
  display: flex; align-items: center; gap: 9px;
}
.site-public .hero-dot {
  width: 9px; height: 9px; padding: 0; border-radius: 9px; cursor: pointer;
  background: #ffffff2b; border: 1px solid #ffffff4d;
  transition: width .38s cubic-bezier(.2,.7,.3,1), background .38s, box-shadow .38s, border-color .38s;
}
.site-public .hero-dot:hover { background: #ffffff57; border-color: #ffffff8f; }
.site-public .hero-dot.is-on {
  width: 30px; background: var(--blue); border-color: var(--blue);
  box-shadow: 0 0 16px #55b8f3b3;
}
.site-public .hero-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* Hero 首屏内容在 HTML 中即标记为可见，避免 JS 未执行时首屏空白 */
.site-public .hero-content { transition: opacity .9s, transform .9s; }

/* ---------------------------------------------------------------------------
   2 · 政策条：三栏在窄屏改为堆叠（参考站已有），此处只补日期胶囊的对齐
   ------------------------------------------------------------------------- */
.site-public .policy-date {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px;
  border-radius: 999px; border: 1px solid #55b8f34d; background: #55b8f314;
  color: var(--blue); font-size:15px; font-weight: 700; letter-spacing: .06em;
}

/* ---------------------------------------------------------------------------
   3 · 课堂三个「隐形问题」
   正文不铺满，改用三个声波柱作为触发点：柱身由静止刻度线生长而成，
   悬停 / 聚焦时升高并点亮，详情从上方浮出。
   ------------------------------------------------------------------------- */
.site-public .pain-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.site-public .pain-card {
  position: relative; display: flex; flex-direction: column;
  padding: 26px 30px 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s, border-color .5s;
}
/* 图标统一走描边：home_lib 里的自绘图标已在 <svg> 上声明 fill="none"，
   这里再兜一层，防止个别 path 忘了写 fill 而被涂成实心黑。 */
.site-public .entry-ico svg,
.site-public .value-ico svg { fill: none; }
/* 顶部细光束：悬停时向两侧展开 */
.site-public .pain-card:before {
  content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #0000, var(--blue), #0000);
  opacity: 0; transition: opacity .55s, left .55s, right .55s;
}
.site-public .pain-card:hover {
  transform: translateY(-7px); border-color: #c6e2f6;
  box-shadow: 0 30px 66px #080d1317;
}
.site-public .pain-card:hover:before { opacity: 1; left: 6%; right: 6%; }

/* ⚠ 气泡悬在**整张卡的下方**（.hint-pop 的定位容器是 .pain-card，不是触发点），
   必然压到下一张卡的区域。这里必须把卡片本身抬到兄弟之上 —— 否则气泡的
   z-index:30 会被困在卡内：移动端点按会带上**粘滞 :hover**，触发上面的
   transform:translateY(-7px)，而 transform 让卡片成为**层叠上下文**，
   于是后一张卡按 DOM 顺序直接盖在气泡上（手机端实测被盖掉下半截）。
   桌面鼠标悬停同理。 */
.site-public .pain-card:hover,
.site-public .pain-card:focus-within { z-index: 6; }

.site-public .pain-en {
  margin: 0 0 8px; color: var(--blue-strong);
  font-size:15px; font-weight: 700; letter-spacing: .26em;
}
/* 卡片标题：思源宋体，比正文的黑体更有分量、更耐看 */
.site-public .pain-card h3 {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 28px; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
}
.site-public .pain-sub { margin: 0 0 22px; color: #5f6870; font-size: 16px; }

/* 声波簇：卡片底部一条细线，线下居中排三簇声波柱。
   每簇 5 根柱，高度按 33 / 60 / 95 / 60 / 33 的对称包络 —— 一道真正扫过的
   声波形状；三簇相距 24px，聚成一小组，不再拉满整卡宽度。 */
.site-public .pain-rail {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  gap: 24px; margin-top: auto; padding-top: 22px;
}
.site-public .pain-rail:before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: linear-gradient(90deg, #0000, #e8ecee 16%, #e8ecee 84%, #0000);
}
.site-public .hint { display: block; }
.site-public .hint-trigger {
  display: flex; align-items: flex-end; gap: 3px; height: 34px; padding: 0;
  background: 0 0; border: 0; cursor: pointer;
}
.site-public .hint-trigger i {
  display: block; width: 4px; height: 33%; border-radius: 3px 3px 1px 1px;
  background: #c3ced7; transform-origin: bottom;
  transition: height .5s cubic-bezier(.2,.8,.3,1), background .3s,
              box-shadow .3s, transform .3s;
}
.site-public .hint-trigger i:nth-child(1) { height: 33%; }
.site-public .hint-trigger i:nth-child(2) { height: 60%; }
.site-public .hint-trigger i:nth-child(3) { height: 95%; }
.site-public .hint-trigger i:nth-child(4) { height: 60%; }
.site-public .hint-trigger i:nth-child(5) { height: 33%; }

/* 有 JS 时才做生长动效（先压平，进入视口后依次长起）；
   无 JS 时保持上面的终态，三簇波形依然可辨认。 */
.site-public.motion-ready .hint-trigger i { height: 12%; }
.site-public.motion-ready .pain-card.is-visible .hint-trigger i:nth-child(1) { height: 33%; transition-delay: .04s; }
.site-public.motion-ready .pain-card.is-visible .hint-trigger i:nth-child(2) { height: 60%; transition-delay: .09s; }
.site-public.motion-ready .pain-card.is-visible .hint-trigger i:nth-child(3) { height: 95%; transition-delay: .14s; }
.site-public.motion-ready .pain-card.is-visible .hint-trigger i:nth-child(4) { height: 60%; transition-delay: .19s; }
.site-public.motion-ready .pain-card.is-visible .hint-trigger i:nth-child(5) { height: 33%; transition-delay: .24s; }

/* 悬停 / 聚焦：整簇升高、变蓝、发光，并像实时电平一样轻轻跳动 */
.site-public .hint:hover .hint-trigger i,
.site-public .hint:focus-within .hint-trigger i {
  transition-delay: 0s; background: var(--blue-strong);
  box-shadow: 0 0 10px #55b8f3a6;
  animation: painWave 1.05s ease-in-out infinite;
}
.site-public .hint:hover .hint-trigger i:nth-child(1),
.site-public .hint:focus-within .hint-trigger i:nth-child(1) { height: 45%; }
.site-public .hint:hover .hint-trigger i:nth-child(2),
.site-public .hint:focus-within .hint-trigger i:nth-child(2) { height: 73%; animation-delay: .12s; }
.site-public .hint:hover .hint-trigger i:nth-child(3),
.site-public .hint:focus-within .hint-trigger i:nth-child(3) { height: 100%; animation-delay: .24s; }
.site-public .hint:hover .hint-trigger i:nth-child(4),
.site-public .hint:focus-within .hint-trigger i:nth-child(4) { height: 73%; animation-delay: .36s; }
.site-public .hint:hover .hint-trigger i:nth-child(5),
.site-public .hint:focus-within .hint-trigger i:nth-child(5) { height: 45%; animation-delay: .48s; }
@keyframes painWave {
  0%, 100% { transform: scaleY(.78); }
  50%      { transform: scaleY(1); }
}
.site-public .hint-trigger:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }

/* 详情气泡：从声波簇下方展开，避免遮住卡片自身的标题区；
   左端对齐、中间居中、右端右对齐，三角跟着触发点走。字号提到 15px。 */
.site-public .hint-pop {
  position: absolute; left: 0; top: calc(100% + 16px); z-index: 30;
  width: min(336px, 100%); padding: 20px 22px;
  border-radius: 15px; border: 1px solid #55b8f33d;
  background: #080d13f5;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: #cdd7de; font-size: 15px; line-height: 1.8;
  box-shadow: 0 26px 62px #080d1347;
  opacity: 0; visibility: hidden; transform: translateY(-9px);
  transition: opacity .32s, transform .32s, visibility .32s;
}
.site-public .hint:nth-child(2) .hint-pop {
  left: 50%; transform: translate(-50%, -9px);
}
.site-public .hint:nth-child(3) .hint-pop { left: auto; right: 0; }

.site-public .hint:hover .hint-pop,
.site-public .hint:focus-within .hint-pop {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.site-public .hint:nth-child(2):hover .hint-pop,
.site-public .hint:nth-child(2):focus-within .hint-pop {
  transform: translate(-50%, 0);
}
.site-public .hint-pop-t {
  display: block; margin-bottom: 7px;
  color: var(--blue); font-size:15px; font-weight: 700; letter-spacing: .06em;
}
.site-public .hint-pop b { color: var(--white); font-weight: 600; }
.site-public .hint-pop:after {
  content: ""; position: absolute; top: -6px; width: 10px; height: 10px;
  background: #080d13f5; border-left: 1px solid #55b8f33d; border-top: 1px solid #55b8f33d;
  transform: rotate(45deg);
}
.site-public .hint:nth-child(1) .hint-pop:after { left: 5px; }
.site-public .hint:nth-child(2) .hint-pop:after { left: 50%; margin-left: -5px; }
.site-public .hint:nth-child(3) .hint-pop:after { left: auto; right: 5px; }

.site-public .pain-tip {
  margin: 12px 0 0; text-align: center; color: #93a0a9;
  font-size:15px; letter-spacing: .05em;
}

/* ---------------------------------------------------------------------------
   4 · 系统组成三个入口
   底色跟上面那张设备全家福走同一套浅灰：白 → 极浅蓝灰的渐变卡 + 细描边，
   深空夜底会和棚拍图的浅灰背景打架，这里换成同色系才连成一整块。
   右侧大号英文水印平时只是一道浅描边，悬停时填充为告示蓝并泛起光晕。
   ------------------------------------------------------------------------- */
.site-public .entry-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.site-public .entry-block {
  position: relative; isolation: isolate; overflow: hidden; display: block;
  min-height: 238px; padding: 32px 30px 28px;
  border-radius: var(--radius); border: 1px solid #d3dfe9;
  background: linear-gradient(158deg, #fdfefe 0%, #e6eef5 100%);
  box-shadow: 0 10px 30px #080d130d;
  color: #1b242c; text-decoration: none;
  transition: transform .5s cubic-bezier(.2,.7,.3,1), border-color .5s, box-shadow .5s;
}
.site-public .entry-block:hover {
  transform: translateY(-7px);
  border-color: #a6d3f1; box-shadow: 0 30px 68px #080d131f;
}
.site-public .entry-mark {
  position: absolute; right: 14px; top: 50%; z-index: 0;
  font-size: 62px; font-weight: 800; line-height: 1; letter-spacing: -.01em;
  white-space: nowrap; pointer-events: none; user-select: none;
  color: transparent; -webkit-text-stroke: 1.4px #c6d4e0;
  transform: translateY(-50%);
  transition: color .55s, -webkit-text-stroke-color .55s, text-shadow .55s, transform .55s;
}
.site-public .entry-block:hover .entry-mark {
  color: #2ca9f4; -webkit-text-stroke-color: transparent;
  text-shadow: 0 6px 30px #55b8f366;
  transform: translateY(-50%) translateX(-5px);
}
.site-public .entry-body {
  position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%;
}
.site-public .entry-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: #1d8fe0; background: #e9f4fd; border: 1px solid #cfe6f9;
  transition: background .5s, color .5s, box-shadow .5s, border-color .5s;
}
.site-public .entry-ico svg { width: 23px; height: 23px; }
.site-public .entry-block:hover .entry-ico {
  background: #2ca9f4; color: #fff; border-color: #2ca9f4;
  box-shadow: 0 12px 30px #55b8f347;
}
.site-public .entry-foot {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-top: auto; padding-top: 56px;
}
.site-public .entry-name {
  display: block; font-size: 25px; font-weight: 600; letter-spacing: -.01em;
}
.site-public .entry-count {
  display: block; margin-top: 8px; color: #7d8892;
  font-size:15px; letter-spacing: .06em;
}
.site-public .entry-go {
  flex: none; color: #a4b1bb; transition: color .4s, transform .4s;
}
.site-public .entry-go svg { display: block; }
.site-public .entry-block:hover .entry-go { color: #2ca9f4; transform: translateX(4px); }
.site-public .entry-block:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }

/* 系统大图：与三个入口块同宽，上圆角 */
.site-public .band-figure {
  margin: 0 0 34px; border-radius: var(--radius); overflow: hidden;
  background: #eef1f3; box-shadow: 0 18px 60px #080d130f;
}
.site-public .band-figure img { width: 100%; height: auto; display: block; }

/* ---------------------------------------------------------------------------
   5 · 章节标题导语（参考站标题块只放英文小标 + 大标题，这里补一层导语）
   ------------------------------------------------------------------------- */
.site-public .section-title .sec-lead {
  max-width: 820px; margin: 22px 0 0;
  color: var(--muted); font-size: 16px; line-height: 1.8;
}
.site-public .section-title.inverted .sec-lead { color: #a3aeb6; }

/* 导语里的加粗项跟着主色走，避免在浅底/深底上各写一套 */
.site-public .sec-lead b { color: var(--blue-strong); font-weight: 600; }
.site-public .section-title.inverted .sec-lead b { color: var(--blue); }

/* 中文大标题在窄屏容易出现「孤字掉行」，统一交给 balance 处理 */
.site-public .hero h1,
.site-public .section-title h2,
.site-public .intro-copy h2,
.site-public .comparison-head h2,
.site-public .installation-copy h2,
.site-public .company-copy h2,
.site-public .contact h2 { text-wrap: balance; }

/* 页头品牌锁定：组合图 logo（® 已烘进矢量标、含中文「嘉言」）+ 「AI 健康声场」 */
.site-public .brand .brand-sub { display: inline; }
.site-public .brand img { width: 126px; }
.site-public .site-header nav a.active { color: var(--white); }

/* ---------------------------------------------------------------------------
   5.1 · 区块底色
   参考站各区块自带底色，但相邻两块同为白底时，两段 120px 内边距会连成
   一大片空场。这里按「浅灰 / 纯白」交替排一遍，节奏更清楚。
   ------------------------------------------------------------------------- */
.site-public #value { background: var(--paper); }
.site-public #compare { background: var(--white); }

/* 公司介绍：左列与右侧资质图垂直居中对齐，避免右图把左列拉空 */
.site-public .company-copy { align-self: center; }
.site-public .company-copy h2 { text-wrap: balance; }
.site-public .company-copy p:last-child { max-width: 470px; }

/* ---------------------------------------------------------------------------
   5.2 · 产品核心价值：由「细线五格」改成五张圆角卡
   图标徽章 + 右上角编号，悬停抬起并亮出顶部蓝线；字号整体上提一档。
   ------------------------------------------------------------------------- */
.site-public .value-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px;
  border: 0;
}
.site-public .value-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  min-height: 0; padding: 26px 22px 28px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  transition: transform .45s cubic-bezier(.2,.7,.3,1), box-shadow .45s, border-color .45s;
}
/* 顶部蓝线：平时藏起来，悬停时亮起 */
.site-public .value-card:before {
  content: ""; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, #2ca9f4, #8ed3f9);
  opacity: 0; transition: opacity .45s;
}
.site-public .value-card:hover {
  transform: translateY(-6px); border-color: #cfe6f7;
  box-shadow: 0 26px 56px #080d1314;
}
.site-public .value-card:hover:before { opacity: 1; }
.site-public .value-ico {
  width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  color: #1d8fe0; background: #eaf5fd; border: 1px solid #d3e9fa;
  transition: background .45s, color .45s, box-shadow .45s, border-color .45s;
}
.site-public .value-ico svg { width: 23px; height: 23px; }
.site-public .value-card:hover .value-ico {
  background: #2ca9f4; color: #fff; border-color: #2ca9f4;
  box-shadow: 0 12px 26px #55b8f340;
}
.site-public .value-card h3 {
  margin: 22px 0 12px; color: #1b242c;
  font-size: 26px; font-weight: 600; letter-spacing: -.01em;
}
.site-public .value-card p { margin: 0; color: #5c656d; font-size: 15.5px; line-height: 1.78; }

/* 5.3 · 「少一点设备感」对照表 —— 2026-09-17 已重做为**双栏对照**（样式见 8.2 节），
   原先这里的整表字号上调规则随之删除（表格本身已不存在）。 */

/* ---------------------------------------------------------------------------
   5.4 · 「让学校好用」四格：同样把字号提上来
   ------------------------------------------------------------------------- */
.site-public .partner-grid span { font-size:15px; }
.site-public .partner-grid h3 { margin: 48px 0 16px; font-size: 26px; font-weight: 600; }
.site-public .partner-grid p { color: #b3bfc7; font-size: 16px; line-height: 1.8; }

/* ---------------------------------------------------------------------------
   5.5 · 安装实景标签 / 结尾 CTA 品牌锁定
   ------------------------------------------------------------------------- */
.site-public .image-labels .label { font-size:15px; padding: 7px 15px; }
.site-public .contact-content .cta-lock { display: inline-flex; align-items: flex-start; margin-bottom: 30px; }
/* 结尾 CTA 的品牌标：原为 124px（高仅 23px，相对 h2 明显偏小）。
   口径取标题视觉字高的 ~0.7：h2 是 clamp(38px,4.6vw,68px)，
   标宽 = 0.7×0.91×5.484×h2字号 ≈ 3.09×字号 → clamp(182px,15.8vw,234px)，
   1440 视口下 228×42（相对原来放大 1.8 倍）。
   下限必须抬到 182px：窄屏 h2 只有 7.6vw，纯按比例算会掉到 92px，比原来还小。 */
.site-public .contact-content .cta-lock img {
  width: clamp(182px, 15.8vw, 234px); height: auto; display: block;
  aspect-ratio: 1532.574 / 279.467;
}

/* ---------------------------------------------------------------------------
   6 · 页头断点：本站导航有 7 项，比参考站多 2 项，
      折叠阈值相应提前到 900px，避免 760~900 之间挤压换行。
   ------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .site-public .site-header { gap: 22px; }
  .site-public .site-header nav { gap: 16px; }
  .site-public .site-header nav a { font-size:15px; }
}

@media (max-width: 900px) {
  .site-public .site-header { grid-template-columns: 1fr auto; height: 64px; gap: 16px; }
  .site-public .site-header .header-cta { display: none; }
  .site-public .menu-button { display: block; }
  .site-public .site-header nav {
    color: var(--white); background: #0d141cfa; border: 1px solid #ffffff1f;
    border-radius: 14px; flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px; display: none; position: absolute; top: 70px; left: 12px; right: 12px;
    box-shadow: 0 20px 50px #00000059;
  }
  .site-public .site-header nav.open { display: flex; }
  .site-public .site-header nav a { min-height: 46px; padding: 14px; font-size: 15px; }
  .site-public .site-header nav a:after { display: none; }
}

@media (max-width: 560px) {
  /* 品牌名在窄屏收一档字号继续保留（参考站此处直接隐藏了文字） */
  .site-public .brand { gap: 8px; font-size:15px; }
  .site-public .brand img { width: 102px; }
}

/* ---------------------------------------------------------------------------
   7 · 窄屏适配
   ------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .site-public .pain-grid,
  .site-public .entry-grid { grid-template-columns: 1fr; }
  .site-public .value-grid { grid-template-columns: repeat(3, 1fr); }
  .site-public .entry-block { min-height: 190px; }
  .site-public .entry-mark { font-size: 54px; }
  .site-public .entry-foot { padding-top: 34px; }
  .site-public .hint-pop { width: 100%; }
}

@media (max-width: 760px) {
  /* 底部格言在窄屏会被裁切，让位给轮播点 */
  .site-public .hero-philosophy { display: none; }
  .site-public .hero-dots { left: var(--gutter); right: auto; bottom: 22px; }
  .site-public .hero h1 { font-size: clamp(36px, 10.2vw, 54px); }
  .site-public .hero-tagline { font-size:15px; letter-spacing: .05em; }
  .site-public .hero-note { bottom: 56px; font-size:15px; }
  /* 窄屏大标题收到 30px 上下：中文长标题在 390px 下会「断词」，收一档就整句换行 */
  .site-public .section-title h2,
  .site-public .intro-copy h2,
  .site-public .comparison-head h2,
  .site-public .installation-copy h2,
  .site-public .company-copy h2,
  .site-public .contact h2 { font-size: clamp(28px, 7.6vw, 40px); }
  .site-public .value-grid { grid-template-columns: repeat(2, 1fr); }
  .site-public .pain-card { padding: 22px 22px 18px; }
  .site-public .pain-card h3 { font-size: 25px; }
  .site-public .pain-rail { gap: 18px; }
  .site-public .entry-block { padding: 26px 24px 24px; }
  .site-public .entry-mark { font-size: 46px; right: 10px; }
  .site-public .entry-name { font-size: 22px; }

  /* 单列时卡片宽度有限，气泡统一左对齐铺满，避免中间那枚从卡片两侧溢出 */
  .site-public .hint-pop,
  .site-public .hint:nth-child(2) .hint-pop,
  .site-public .hint:nth-child(3) .hint-pop {
    left: 0; right: auto; width: 100%; transform: translateY(-9px);
  }
  .site-public .hint:hover .hint-pop,
  .site-public .hint:focus-within .hint-pop,
  .site-public .hint:nth-child(2):hover .hint-pop,
  .site-public .hint:nth-child(2):focus-within .hint-pop,
  .site-public .hint:nth-child(3):hover .hint-pop,
  .site-public .hint:nth-child(3):focus-within .hint-pop { transform: translateY(0); }
  .site-public .hint-pop:after,
  .site-public .hint:nth-child(2) .hint-pop:after,
  .site-public .hint:nth-child(3) .hint-pop:after {
    left: 5px; right: auto; margin-left: 0;
  }
}

@media (max-width: 560px) {
  .site-public .value-grid { grid-template-columns: 1fr; }
  .site-public .pain-rail { gap: 16px; }
  .site-public .hint-trigger i { width: 3.5px; }
}

/* ===========================================================================
   8 · 第二轮细化：首屏重排 / 对照表 / 四卡 / 资质叠加 / 页脚
   =========================================================================== */

/* ---------------------------------------------------------------------------
   8.1 · 首屏：从「缩在中间的一小簇」改成参考站那种「高挑舒展」的一整列
   ---------------------------------------------------------------------------
   参考站 hero 的内容块是「品牌标 → 英文小标 → 大标题 → 导语 → 按钮 → 三点证明」，
   1440×900 下块高约 516px、底边落到画面的 82%。本站：
     ① 品牌标用**组合图**（JAYAN + 嘉言，自带 ®），h1 只留「AI 健康声场」，
        不再重复品牌名，也不再排英文小标；
     ② 大标题 / 导语 / 按钮 / 三点之间逐层放开间距；
     ③ 内边距改成上大下小，整块中心下移；
     ④ 矮屏与窄屏各压一档字号，避免与右下角导语注脚打架。
   ------------------------------------------------------------------------- */
.site-public .hero {
  padding-top: clamp(168px, 21svh, 222px);
  padding-bottom: clamp(56px, 7svh, 78px);
}
/* ⚠ 参考站基准里写死了 .hero-logo{width:124px}（它那个标是纯英文横标），必须显式覆盖。
   尺寸口径：组合标（JAYAN + 嘉言 **并排**）的整体墨迹高**由汉字决定**
   —— 实测 1000px 宽下：汉字＝182（＝整体高）、英文＝138（0.76×整体）、® 悬在英文字顶。
   所以「标要跟大标题一样大」= 整体墨迹高 = h1 的中文视觉字高（≈0.91×h1 字号）。
   h1 字号 clamp(48px,5.8vw,94px) → 标宽 = 0.91×5.484×字号 ≈ clamp(240px,28.9vw,469px)。
   1440 视口下 = 416×76，与「健康声场」四字等高。
   aspect-ratio 按 viewBox 写死，免得 img 的 HTML 属性比例（417/76）带进 0.2% 误差。 */
.site-public .hero-logo {
  display: block; height: auto; margin-bottom: 40px;
  width: clamp(240px, 28.9vw, 469px);
  aspect-ratio: 1532.574 / 279.467;
}
.site-public .hero h1 { margin: 0 0 32px; line-height: 1.04; }
.site-public .hero-tagline {
  margin: 0; max-width: 620px; color: #bcc9d3; letter-spacing: .04em;
  font-size: clamp(15.5px, 1.35vw, 19px); line-height: 1.8;
}
.site-public .hero-actions { margin-top: 36px; }
.site-public .hero-proof { margin-top: 46px; }

@media (max-height: 880px) {
  .site-public .hero { padding-top: clamp(132px, 17svh, 176px); padding-bottom: 52px; }
  .site-public .hero h1 { font-size: clamp(42px, 5.2vw, 78px); margin: 0 0 26px; }
  .site-public .hero-logo { width: clamp(210px, 26vw, 389px); margin-bottom: 30px; }
  .site-public .hero-actions { margin-top: 28px; }
  .site-public .hero-proof { margin-top: 32px; }
}

@media (max-width: 760px) {
  .site-public .hero { padding-top: 104px; padding-bottom: 68px; }
  .site-public .hero h1 { font-size: clamp(36px, 10.2vw, 54px); margin: 0 0 22px; }
  .site-public .hero-logo { width: clamp(180px, 51vw, 269px); margin-bottom: 24px; }
  .site-public .hero-tagline { font-size:15px; line-height: 1.75; }
  .site-public .hero-actions { margin-top: 24px; }
  .site-public .hero-proof { margin-top: 28px; }
  /* 注脚原为 440px 定宽，390px 屏幕上会顶出右边被裁掉 */
  .site-public .hero-note { max-width: min(440px, 74vw); font-size:15px; }
}

/* ---------------------------------------------------------------------------
   8.2 · 「少一点设备感」—— 双栏对照（2026-09-17 第 2 版）
   ---------------------------------------------------------------------------
   演进：三列表格 →（老板：占空间 / 字小 / 配色 / PPT 感）→ 双栏对照
        →（老板：**字还是太小、面积还是太大、两边小标题左右重复**）→ 本版。

   本版三条：
   ① **不再有左右重复的维度小标题** —— 每行就是一对句子，句子自己讲清"这是什么"；
   ② **字号从小往大走**：正文 18px、列头 15px（老板原话："网站要尽量避免太小的字，
      很多人会用手机看，字小就会更难受"）；窄屏正文 17px，**不再往下降**；
   ③ 收紧行距与留白，把区块高度压下来。
   ⚠ `.comparison-head` 是参考站留下的 **grid**（eyebrow 与 h2 分列，`.65fr 1.35fr / gap 80`），
      往里加元素必须 `grid-column: 1 / -1`，否则被塞进网格列里、宽度只剩 ~390px。
   ⚠⚠ 2026-09-17 第 3 版：标题换成「重点从来不是把声音放得多大，而是对声场精细的控制」后
      **分列版式被压垮** —— 14 字的半句在 821px 的右列里排不下，标题碎成 3 行、右侧留白难看。
      ⇒ 把这块头部**改成单列堆叠**（eyebrow → h2 → 副标，全部左对齐），跟站内其它 section
        标题同一套读法；标题用显式 `<br>` 断成两行，两行都能整行放下。
   ⚠ 亮蓝 #55b8f3 **只可用于深底**（项目硬规矩），这里线与标签一律用深蓝 #0b6aa8。
   ------------------------------------------------------------------------- */
.site-public .comparison-head {
  display: grid; grid-template-columns: 1fr; gap: 0;
  align-items: start; margin-bottom: 48px;
}
.site-public .comparison-head .eyebrow { margin: 0 0 14px; align-self: auto; }
.site-public .comparison-head h2 { margin: 0; }
.site-public .comparison-head .vs-lead {
  grid-column: 1 / -1;
  margin: 22px 0 0; max-width: 40em;
  font-size: 18px; line-height: 1.75; color: #6b7885; text-align: left;
}
.site-public .vs-cols,
.site-public .vs-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(30px, 4.4vw, 88px);
}
.site-public .vs-cols { margin-top: 40px; border-bottom: 1px solid #e7ebee; }
.site-public .vs-cols p {
  margin: 0; padding-bottom: 12px;
  font-size: 15px; font-weight: 600; letter-spacing: .06em;
}
.site-public .vs-cols p:first-child { color: #93a0ac; }
/* ⚠ 右栏列头要跟右栏内容**同一个左边界**：.vs-us 有 padding-left，这里必须补上 */
.site-public .vs-cols p:last-child {
  color: #0b6aa8; padding-left: clamp(16px, 2.2vw, 30px);
}

.site-public .vs-list { list-style: none; margin: 0; padding: 0; }
.site-public .vs-row { padding: 20px 0; border-bottom: 1px solid #e7ebee; }
.site-public .vs-txt { margin: 0; font-size: 18px; line-height: 1.6; }

/* 左：现在的课堂 —— 压灰，读作「背景」 */
.site-public .vs-now { color: #8b96a1; }
.site-public .vs-now b { font-weight: 600; color: #6b7885; }

/* 右：嘉言的课堂 —— 深色 + 一条品牌色立标，读作「主角」 */
.site-public .vs-us {
  padding-left: clamp(16px, 2.2vw, 30px);
  border-left: 2px solid #0b6aa8;
  color: #17212b; font-weight: 500;
}
.site-public .vs-us b { font-weight: 700; color: #0b3f63; }

/* ---------------------------------------------------------------------------
   8.3 · 「让项目更好落地」四格：四张横向长方形的玻璃卡
   ---------------------------------------------------------------------------
   不排 01/02 序号、也不放小图标（四张并排时都只是重复噪音）；只留
   「小标 + 标题 + 说明」，配一条顶部蓝线，卡身压扁成窄长方形。
   ------------------------------------------------------------------------- */
.site-public .partner-grid {
  grid-template-columns: repeat(4, 1fr); gap: 20px;
  border-top: 0; border-left: 0;
}
.site-public .partner-grid article {
  position: relative; overflow: hidden; min-height: 0;
  padding: 24px 26px 26px;
  border: 1px solid #ffffff1f; border-radius: 18px;
  background: linear-gradient(163deg, #ffffff14 0%, #ffffff05 100%);
  transition: transform .5s cubic-bezier(.2,.7,.3,1), border-color .5s,
              background .5s, box-shadow .5s;
}
.site-public .partner-grid article:before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, #2ca9f4, #8ed3f9);
  opacity: 0; transition: opacity .45s;
}
.site-public .partner-grid article:hover {
  transform: translateY(-6px); border-color: #55b8f35c;
  background: linear-gradient(163deg, #55b8f321 0%, #ffffff08 100%);
  box-shadow: 0 30px 64px -30px #55b8f366;
}
.site-public .partner-grid article:hover:before { opacity: 1; }
.site-public .pv-tag {
  display: block; margin: 0 0 10px;
  color: var(--blue); font-size:15px; font-weight: 700; letter-spacing: .2em;
}
.site-public .partner-grid h3 { margin: 0 0 12px; font-size: 24px; font-weight: 600; }
.site-public .partner-grid p { color: #b3bfc7; font-size: 15.5px; line-height: 1.8; }

/* ---------------------------------------------------------------------------
   8.4 · 资质证书：15 张叠加展示（不再平铺，也不需要清晰化）
   ---------------------------------------------------------------------------
   15 项 = 10 软著 + 4 外观设计专利 + 1 商标注册证。全部绝对定位叠成一摞，
   每张的位移 / 旋转 / 缩放由生成器按序号写进 --x / --y / --r / --s
   （确定性算法，不用随机数，重建结果每次都一样）；
   悬停时整摞按同一比例散开，露出被压住的证书。
   尺寸刻意收小（整摞 ≤380px 宽、单张 50%）——上一版铺到 430×570，在版面上
   抢戏且左右不对称。
   ------------------------------------------------------------------------- */
.site-public .cred-deck {
  position: relative; width: 100%; max-width: 396px; aspect-ratio: 1 / 1;
}
.site-public .cred-deck .cd {
  position: absolute; left: 50%; top: 50%;
  width: 50%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 10px; background: #fff;
  box-shadow: 0 1px 3px #080d1314, 0 20px 44px -14px #080d1347, 0 0 0 1px #080d1312;
  transform: translate(-50%, -50%) translate(var(--x, 0), var(--y, 0))
             rotate(var(--r, 0deg)) scale(var(--s, 1));
  transform-origin: 50% 62%;
  transition: transform .85s cubic-bezier(.2,.7,.3,1), box-shadow .5s;
  z-index: var(--z, 1);
}
.site-public .cred-deck .cd.is-ph { filter: saturate(.92); }
@media (hover: hover) {
  .site-public .cred-deck:hover .cd {
    transform: translate(-50%, -50%) translate(calc(var(--x) * 2), calc(var(--y) * 2))
               rotate(calc(var(--r) * 1.7)) scale(var(--s));
    box-shadow: 0 2px 6px #080d131f, 0 28px 54px -16px #080d1347, 0 0 0 1px #080d1312;
  }
}
.site-public .credentials {
  align-self: center;
  display: flex; flex-direction: column; align-items: center;
}
.site-public .credentials span {
  display: block; margin-top: 14px;
  text-align: center; color: #98a1a7; font-size:15px; letter-spacing: .04em;
}
.site-public .cred-count {
  position: absolute; left: 0; bottom: 4%; z-index: 60;
  display: flex; align-items: baseline; gap: 9px;
  padding: 10px 18px 11px; border-radius: 999px;
  background: #080d13f2; color: #fff;
  box-shadow: 0 20px 44px -18px #080d13a6;
}
.site-public .cred-count b { font-size: 22px; font-weight: 700; line-height: 1; color: var(--blue); }
.site-public .cred-count span { color: #cbd5dc; font-size:15px; letter-spacing: .1em; text-align: left; }

/* ---------------------------------------------------------------------------
   8.5 · 页脚：导航改 3 行；右侧公司信息下留出二维码位
   ---------------------------------------------------------------------------
   原页脚导航是纵向单列 7 项（一长条）；改成 2 行后又是「列优先」填充，
   7 项落成 4+3，「关于我们」被顶到第 1 行最右侧 → 整块重心右偏。
   这里改成**行优先 3 列**：第 1 行 3 项、第 2 行 3 项、第 3 行 1 项，
   读序自然（左→右、上→下），重心回到左侧。
   右侧在「公司名 + 网址」下方预留公众号 / 视频号两个二维码位。
   列模板用 1fr / auto / 1fr，导航（auto 列）正好落在版面中央，
   公司信息贴右缘（justify-self:end），三块重心对称。
   ------------------------------------------------------------------------- */
.site-public footer {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 48px;
}
.site-public .footer-nav {
  display: grid; grid-template-columns: repeat(3, minmax(0, max-content));
  align-content: start; justify-content: start; justify-self: start;
  gap: 14px 30px;
}
.site-public .footer-aside { justify-self: end; }
.site-public .footer-aside {
  display: flex; flex-direction: column; align-items: flex-start; gap: 22px;
}
.site-public .footer-company { align-items: flex-start; }
.site-public .footer-qr { display: flex; gap: 18px; }
.site-public .qr-slot {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.site-public .qr-box {
  display: grid; place-items: center; width: 96px; height: 96px;
  border-radius: 12px; color: #6d7a84;
  background: #ffffff0a; border: 1px dashed #ffffff30;
}
.site-public .qr-box svg { width: 34px; height: 34px; }
.site-public .qr-label { color: #8e99a1; font-size:15px; letter-spacing: .05em; }

@media (max-width: 1020px) {
  .site-public footer { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-public footer > div:first-child,
  .site-public footer > small { grid-column: 1 / -1; }
  .site-public .partner-grid { grid-template-columns: repeat(2, 1fr); }
  .site-public .cred-deck { width: min(100%, 340px); }
}
@media (max-width: 720px) {
  .site-public footer { grid-template-columns: 1fr; gap: 34px; }
  .site-public footer > div:first-child,
  .site-public footer > small { grid-column: auto; }
  .site-public .footer-nav { gap: 12px 26px; }
  .site-public .partner-grid { grid-template-columns: 1fr; }
  /* 「现在的课堂 / 嘉言的课堂」窄屏堆成上下两段（样式定义见 8.2 节） */
  .site-public .vs-cols { display: none; }
  .site-public .vs-row { grid-template-columns: 1fr; gap: 12px 0; padding: 18px 0; }
  .site-public .vs-us { padding-left: 15px; }
  .site-public .comparison-head .vs-lead { margin-top: 16px; font-size: 17px; }
  .site-public .vs-txt { font-size: 17px; }
  /* 窄屏列头藏了 ⇒ 每句前面补回归属，否则看不出哪句是"现在的"、哪句是"嘉言的" */
  .site-public .vs-now::before { content: "现在 · "; color: #c3cdd6; }
  .site-public .vs-us::before { content: "嘉言 · "; color: #7fa6c4; }
}
@media (max-width: 460px) {
  .site-public .footer-nav { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 12px 22px; }
  .site-public .footer-qr { gap: 14px; }
  .site-public .qr-box { width: 82px; height: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-public .hero-slide { transition: none; }
  .site-public .hero-slide img { animation: none; }
  .site-public .pain-card .hint-trigger i { transform: none; animation: none; }
  .site-public .cred-deck .cd { transition: none; }
}
/* ---------------------------------------------------------------------------
   8.7 · 页脚联系方式 + 备案号（2026-09-16 老板提供）
   .footer-company 本身是 flex 竖列（基准里定义的），这里只补新增的 p 与链接配色。
   --------------------------------------------------------------------------- */
.site-public .footer-company p { margin: 0; font-size:15px; line-height: 1.65; color: #8e99a1; }
.site-public .footer-company p a { color: #a5b0b8; }
.site-public .footer-company p a:hover { color: var(--blue); }
.site-public footer > small a { color: #8b979f; }
.site-public footer > small a:hover { color: var(--blue); }