/* ============================================================
   观智悦心 · 独立页面样式（产品中心 / 沉浸式体验 / 资讯中心）
   ------------------------------------------------------------
   依赖 design-system.css + main.css
   1) .p-hero      页面级标题区（统一观感）
   2) .p-nav       页面内锚点导航
   3) .pf-group    产品中心的分组区块
   4) 首页微调：4 列数字区 / 技术卡模型名 / 产品区尾部链接
   ============================================================ */

/* ============================================================
   1 · 页面级标题区
   ============================================================ */
.p-hero {
  position: relative; overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(30px, 4.4vw, 56px));
  padding-bottom: clamp(20px, 2.4vw, 34px);
  background:
    radial-gradient(120% 120% at 88% 0%, rgba(0, 102, 180, .07), transparent 58%),
    radial-gradient(90% 110% at 4% 100%, rgba(48, 174, 36, .10), transparent 62%),
    #FAFBFA;
  border-bottom: 1px solid var(--c-line-2);
}
.p-hero__inner { position: relative; z-index: 1; display: grid; gap: var(--s-6); }
.p-hero__title { margin-top: var(--s-4); max-width: 22em; }
.p-hero__lead {
  margin-top: var(--s-5);
  max-width: 46em;
  font-size: clamp(1rem, 1.15vw, 1.14rem);
  line-height: 1.85;
  color: var(--c-slate);
}
.p-hero__aside {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  margin-top: var(--s-4);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-line);
  font-size: var(--fs-xs);
  color: var(--c-mute);
}
.p-hero__aside b {
  display: block;
  font-family: var(--font-latin);
  font-size: 1.35rem;
  line-height: 1.1;
  color: var(--c-brand-600);
  font-weight: 600;
}

/* ============================================================
   2 · 页面内锚点导航
   ============================================================ */
.p-nav {
  position: sticky; top: var(--header-h); z-index: 60;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(150%) blur(10px);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--c-line);
}
.p-nav__inner { display: flex; align-items: center; gap: var(--s-2); overflow-x: auto; padding: 12px 0; }
.p-nav__a {
  flex: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-size: var(--fs-sm); color: var(--c-slate);
  transition: background-color var(--t-base) var(--e-out), color var(--t-base) var(--e-out), border-color var(--t-base) var(--e-out);
}
.p-nav__a b {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .1em;
  color: var(--c-brand-500); font-weight: 700;
}
.p-nav__a:hover { background: var(--c-brand-050); color: var(--c-brand-700); border-color: var(--c-brand-100); }

/* ============================================================
   3 · 产品中心：分组区块
   ============================================================ */
/* 带页内锚点导航的页面：锚点落位要把吸顶导航一起让出来 */
html.has-pnav { scroll-padding-top: calc(var(--header-h) + 78px); }

.pf-groups { display: grid; gap: clamp(48px, 6vw, 88px); }
.pf-group { scroll-margin-top: 0; }
.pf-group__head {
  display: flex; align-items: flex-start; gap: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--s-7);
}
.pf-group__letter {
  flex: none;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-latin); font-size: 1.5rem; color: var(--c-brand-600);
  background: var(--c-brand-050);
  border: 1px solid var(--c-brand-100);
}
.pf-group__tx { flex: 1 1 auto; min-width: 0; }
.pf-group__t {
  font-size: clamp(1.2rem, 1.6vw, 1.5rem);
  font-weight: 700; color: var(--c-ink); letter-spacing: .02em;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.pf-group__t i {
  font-style: normal; font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--c-tech-600);
}
.pf-group__d { margin-top: 10px; font-size: var(--fs-sm); color: var(--c-slate); line-height: 1.75; max-width: 62em; }
.pf-group__count {
  flex: none; align-self: center;
  font-family: var(--font-latin); font-size: var(--fs-xs); color: var(--c-mute);
  letter-spacing: .06em;
}
.pf-group .pm-grid { margin-top: 0; }

/* ============================================================
   4 · 首页微调
   ============================================================ */
/* 数字区改为三项后收紧间距，避免在窄栏里换行 */
.hero__meta--3 { gap: clamp(22px, 3.6vw, 60px); }

/* 技术卡：绿色模型名升级为卡片主标题（原黑色产品名已去掉） */
.tf-card__model {
  margin: 18px 0 0;
  font-size: clamp(1.2rem, 1.62vw, 1.56rem);
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.4;
  color: var(--c-tech-700);
  /* 2026-11-05：卡片改成「图标 + 标题」成组居中，不再预留两行高度 */
  min-height: 0;
}

/* 产品区尾部的「进入产品中心」链接 */
.pm-more { margin-top: var(--s-6); display: flex; justify-content: center; }

/* ============================================================
   5 · 响应式
   ============================================================ */
@media (max-width: 900px) {
  .p-nav { top: var(--header-h); }
  .pf-group__head { flex-wrap: wrap; gap: var(--s-4); }
  .pf-group__count { align-self: flex-start; }
  .tf-card__model { margin-top: var(--s-7); }
}

@media (max-width: 640px) {
  .p-hero { padding-top: calc(var(--header-h) + 22px); }
  .p-nav__inner { padding: 10px 0; gap: 4px; }
  .p-nav__a { padding: 8px 12px; font-size: var(--fs-xs); }
  .pf-group__letter { width: 44px; height: 44px; font-size: 1.2rem; }
  .hero__meta--3 { gap: var(--s-5) var(--s-6); }
  .hero__meta--3 .hero__meta-item { flex: 1 1 28%; }
}

/* 内页标题下的小字去掉后，标题与下方内容之间补一点呼吸 */
.p-hero__title { margin-bottom: clamp(14px, 1.6vw, 22px); }
.main-scenes .p-hero__title { margin-bottom: 0; }