/* 版权所有 © 八艾云 (www.8a.hk) 保留所有权利 */
/* ============================================================
   pagegroup.css — 关于我们页面组 (about / news / contact / agreement / privacy / sla)
   六个页面共用一套 Hero 骨架和一条页面组导航, 由 .pg-hero[data-theme] 区分配色。
   骨架走站内主流的浅色形制(浅蓝渐变 + 64px 网格 + 两团光晕 + 深色文字),
   与 /host/ /site/ 首页同源; 不复用 product.css 的 .byc-phero ——
   那套的 min-height:410 和两列比例是给"长副标题 + 4 特性 + 双按钮"配的,
   内容页套上去左栏永远撑不满。
   ============================================================ */
.pg-hero {
  position: relative;
  overflow: hidden;
  margin-top: -70px;      /* 背景铺到 sticky header 底下, 与站内其它 Hero 一致 */
  padding-top: 70px;
}
.pg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 44% 58% at 82% 16%, rgba(43, 109, 232, .14) 0%, transparent 62%),
    radial-gradient(ellipse 40% 48% at 6% 88%, var(--pg-glow, rgba(6, 182, 212, .1)) 0%, transparent 60%),
    linear-gradient(180deg, #EAF0FE 0%, #F5F7FE 60%, #fff 100%);
}
.pg-hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(43, 109, 232, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 109, 232, .04) 1px, transparent 1px);
  background-size: 64px 64px;
}
/* 六个页面的第二团光晕各用一色: 基底统一, 色调分页 —— 统一中有变化, 不是六套皮肤 */
.pg-hero[data-theme="news"]      { --pg-glow: rgba(6, 182, 212, .1); }
.pg-hero[data-theme="about"]     { --pg-glow: rgba(99, 102, 241, .13); }
.pg-hero[data-theme="contact"]   { --pg-glow: rgba(255, 106, 0, .1); }
.pg-hero[data-theme="agreement"] { --pg-glow: rgba(43, 109, 232, .14); }
.pg-hero[data-theme="privacy"]   { --pg-glow: rgba(16, 185, 129, .11); }
.pg-hero[data-theme="sla"]       { --pg-glow: rgba(6, 182, 212, .14); }
.pg-hero[data-theme="help"]     { --pg-glow: rgba(43, 109, 232, .12); }

.pg-hero .byc-container { position: relative; z-index: 1; }
.pg-hero-inner {
  display: flex;
  align-items: center;
  gap: 48px;
  padding: 48px 0 52px;
}
.pg-hero-main { flex: 1; min-width: 0; }

.pg-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  padding: 7px 18px;
  border: 1px solid var(--byc-primary-100);
  border-radius: var(--byc-r-full);
  background: var(--byc-primary-50);
  color: var(--byc-primary);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .02em;
}
/* 橙点 = 有新内容, 整屏唯一一处 --byc-accent, 只有资讯列表页亮 */
.pg-hero-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--byc-accent);
  box-shadow: 0 0 0 4px rgba(255, 106, 0, .18);
}
.pg-hero-title {
  margin: 0 0 18px;
  color: var(--byc-text);
  font-size: 46px;
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -.015em;
}
.pg-hero-sub {
  max-width: 520px;
  margin: 0;
  color: var(--byc-text-sec);
  font-size: 16px;
  line-height: 1.9;
}
.pg-hero-art { flex: none; width: 340px; }
.pg-hero-art svg { display: block; width: 100%; height: auto; }

@media (max-width: 1023px) {
  .pg-hero-art { width: 280px; }
  .pg-hero-inner { gap: 32px; }
  .pg-hero-title { font-size: 38px; }
}
@media (max-width: 767px) {
  .pg-hero-art { display: none; }
  .pg-hero-inner { padding: 34px 0 38px; }
  .pg-hero-title { font-size: 30px; }
  .pg-hero-sub { font-size: 15px; }
}

/* ---------- 页面组导航: Hero 下面独立一条白底, 居中, 图标 + 渐变下划线 ---------- */
.about-nav {
  border-bottom: 1px solid var(--byc-border);
  background: #fff;
}
.about-nav-row {
  display: flex;
  justify-content: center;
  gap: 44px;
}
.about-nav-row a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 25px 0;
  color: var(--byc-text-sec);
  font-size: 15.5px;
  white-space: nowrap;
  transition: color .18s;
}
.about-nav-row a svg { width: 17px; height: 17px; flex: none; color: var(--byc-text-mut); transition: color .18s; }
.about-nav-row a:hover { color: var(--byc-text); }
.about-nav-row a:hover svg { color: var(--byc-text-sec); }
.about-nav-row a.is-on { color: var(--byc-primary); font-weight: 700; }
.about-nav-row a.is-on svg { color: var(--byc-primary); }
/* 下划线走渐变而不是平涂, 与站内主按钮同一种质感 */
.about-nav-row a.is-on::after {
  content: '';
  position: absolute;
  right: 0; bottom: -1px; left: 0;
  height: 3px;
  border-radius: 2px 2px 0 0;
  background: linear-gradient(90deg, var(--byc-primary) 0%, #5B8DEF 100%);
}
@media (max-width: 1023px) {
  .about-nav-row {
    justify-content: flex-start;
    gap: 30px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .about-nav-row::-webkit-scrollbar { display: none; }
  .about-nav-row a { padding: 19px 0; font-size: 14.5px; }
}

/* ---------- 内容区: 与资讯详情页的正文卡同一套外壳 ---------- */
.pg-main { padding: var(--byc-sec-y, 48px) 0; background: var(--byc-bg-light); }
@media (min-width: 1024px) { .pg-main { padding: var(--byc-sec-y-desktop, 64px) 0; } }
.pg-article {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px 48px 44px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  background: #fff;
  box-shadow: var(--byc-sd-sm);
  color: var(--byc-text);
  font-size: 15px;
  line-height: 1.95;
}
@media (max-width: 767px) { .pg-article { padding: 24px 20px 28px; } }

/* 条款类正文里的小标题: 内容是 h2/h3 混排, 统一压到一个层级差 */
.pg-article h2 { margin: 34px 0 14px; font-size: 20px; font-weight: 700; }
.pg-article h3 { margin: 26px 0 12px; font-size: 16.5px; font-weight: 700; }
.pg-article h2:first-child, .pg-article h3:first-child { margin-top: 0; }
.pg-article p { margin: 0 0 14px; color: var(--byc-text-sec); }
.pg-article ul, .pg-article ol { margin: 0 0 16px; padding-left: 22px; color: var(--byc-text-sec); }
.pg-article li { margin-bottom: 7px; }
.pg-article strong { color: var(--byc-text); font-weight: 650; }
.pg-article a { color: var(--byc-primary); }

/* 联系方式那种"标签 + 值"的条目 */
.pg-facts { display: grid; gap: 12px; margin: 22px 0 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.pg-fact {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-md);
  background: var(--byc-bg-light);
}

/* 公司简介里的数字条 */
/* 固定 4 列: 数据就是 4 个, auto-fit 在这个卡片宽度下会多算出一个 0px 空列 */
.pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 26px 0 10px; }
@media (max-width: 767px) { .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-stat {
  padding: 18px 16px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-md);
  background: linear-gradient(180deg, var(--byc-primary-50) 0%, #fff 100%);
  text-align: center;
}
.pg-stat b { display: block; color: var(--byc-primary); font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.pg-stat span { display: block; margin-top: 2px; color: var(--byc-text-sec); font-size: 13px; }

/* ============================================================
   区块式内容 (公司简介 / 联系我们)
   条款类页面是长文档, 一张白卡合适; 但介绍和联系这种页面塞进同一张卡里
   就成了"从头堆到尾的一篇文章"。这里按站内分区的做法来: .byc-sec 的 64/64
   节奏 + --byc-bg-light 交替 + 网格卡片。
   ============================================================ */
.pg-sec { padding: var(--byc-sec-y, 48px) 0; }
@media (min-width: 1024px) { .pg-sec { padding: var(--byc-sec-y-desktop, 64px) 0; } }
.pg-sec-light { background: var(--byc-bg-light); }

.pg-sec-head { max-width: 680px; margin: 0 auto 36px; text-align: center; }
.pg-sec-title { margin: 0; color: var(--byc-text); font-size: 32px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
.pg-sec-desc { margin: 10px 0 0; color: var(--byc-text-sec); font-size: 15px; line-height: 1.85; }
@media (max-width: 767px) {
  .pg-sec-head { margin-bottom: 26px; }
  .pg-sec-title { font-size: 24px; }
}

/* 介绍正文: 限宽到易读区间, 不铺满 1200 */
.pg-prose { max-width: 800px; margin: 0 auto; }
.pg-prose p { margin: 0 0 16px; color: var(--byc-text-sec); font-size: 15.5px; line-height: 2; }
.pg-prose p:last-child { margin-bottom: 0; }

/* 四张理念卡 */
.pg-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1023px) { .pg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pg-cards { grid-template-columns: minmax(0, 1fr); } }
.pg-card {
  padding: 26px 24px 24px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  background: #fff;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pg-card:hover { border-color: var(--byc-primary-100); box-shadow: var(--byc-sd-md); transform: translateY(-2px); }
.pg-card-ico {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  margin-bottom: 16px;
  border-radius: var(--byc-r-md);
  background: linear-gradient(135deg, var(--byc-primary) 0%, #5B8DEF 100%);
  color: #fff;
}
.pg-card-ico svg { width: 21px; height: 21px; }
.pg-card h3 { margin: 0 0 8px; color: var(--byc-text); font-size: 17px; font-weight: 700; }
.pg-card p { margin: 0; color: var(--byc-text-sec); font-size: 14px; line-height: 1.8; }

/* 产品清单: 一行几个的小条目 */
/* 9 个产品排 3x3, 跟正文同一条 800 轴 —— auto-fill 会排成 6+3 不齐 */
.pg-prods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 800px; margin: 0 auto; }
@media (max-width: 599px) { .pg-prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pg-prod {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-md);
  background: #fff;
  color: var(--byc-text);
  font-size: 14.5px;
  transition: border-color .18s, color .18s;
}
a.pg-prod:hover { border-color: var(--byc-primary); color: var(--byc-primary); }
.pg-prod svg { width: 17px; height: 17px; flex: none; color: var(--byc-primary); }
.pg-prod-note { margin: 18px 0 0; color: var(--byc-text-mut); font-size: 13.5px; text-align: center; }

/* 联系方式: 比正文里那版大一号, 独立成区 */
.pg-contacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1023px) { .pg-contacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .pg-contacts { grid-template-columns: minmax(0, 1fr); } }
.pg-contact {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 24px 22px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.pg-contact:hover { border-color: var(--byc-primary-100); box-shadow: var(--byc-sd-md); }
.pg-contact-ico {
  display: flex; align-items: center; justify-content: center;
  flex: none;
  width: 42px; height: 42px;
  border-radius: var(--byc-r-md);
  background: var(--byc-primary-50);
  color: var(--byc-primary);
}
.pg-contact-ico svg { width: 20px; height: 20px; }
.pg-contact-t { display: block; margin-bottom: 3px; color: var(--byc-text-mut); font-size: 13px; }
.pg-contact-v { display: block; color: var(--byc-text); font-size: 16px; font-weight: 650; line-height: 1.6; word-break: break-all; }
.pg-contact-v.is-sm { font-size: 14.5px; font-weight: 500; line-height: 1.75; }

/* 两栏说明块 */
.pg-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 767px) { .pg-two { grid-template-columns: minmax(0, 1fr); } }
.pg-two-item {
  padding: 26px 26px 24px;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  background: #fff;
}
.pg-two-item h3 { margin: 0 0 10px; color: var(--byc-text); font-size: 17px; font-weight: 700; }
.pg-two-item p { margin: 0; color: var(--byc-text-sec); font-size: 14.5px; line-height: 1.9; }
.pg-two-item p + p { margin-top: 10px; }

/* 区块里的数字条: 跟正文同一条 800 轴, 不铺满 1200 */
.pg-sec .pg-stats { max-width: 800px; margin: 36px auto 0; }

/* ============================================================
   条款类长文档 (服务协议 / 隐私政策 / SLA)
   左目录 + 右正文, 布局值与资讯页一致(232 + 1fr, gap 24), 整站一套布局语言。
   服务协议有 11 章, 没有目录就只能一路滚到底。
   ============================================================ */
.pg-doc { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 1023px) { .pg-doc { grid-template-columns: minmax(0, 1fr); } }

.pg-toc {
  position: sticky;
  top: 90px;              /* 与 content.css 的侧栏取值一致(72 的 sticky header + 18) */
  overflow: hidden;
  border: 1px solid var(--byc-border);
  border-radius: var(--byc-r-lg);
  background: #fff;
  box-shadow: var(--byc-sd-sm);
}
@media (max-width: 1023px) { .pg-toc { display: none; } }
.pg-toc-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--byc-border);
  background: linear-gradient(180deg, var(--byc-primary-50) 0%, #fff 100%);
  color: var(--byc-text);
  font-size: 14px;
  font-weight: 700;
}
.pg-toc-head::before { content: ''; width: 3px; height: 15px; border-radius: 2px; background: var(--byc-primary); }
.pg-toc ul { margin: 0; padding: 8px; list-style: none; max-height: calc(100vh - 200px); overflow-y: auto; }
.pg-toc a {
  display: block;
  padding: 9px 10px 9px 13px;
  border-radius: var(--byc-r-md);
  color: var(--byc-text-sec);
  font-size: 13.5px;
  line-height: 1.6;
  transition: background-color .18s, color .18s;
}
.pg-toc a:hover { background: var(--byc-bg-light); color: var(--byc-text); }
.pg-toc a.is-on { background: var(--byc-primary-50); color: var(--byc-primary); font-weight: 700; }

/* 正文卡: 在两栏里由 grid 定宽, 不再自己限宽居中 */
.pg-doc .pg-article { max-width: none; margin: 0; }
/* 章节锚点: 跳转时给 sticky header 让出位置 */
.pg-doc .pg-article h2 { scroll-margin-top: 92px; }

.pg-doc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--byc-border);
  color: var(--byc-text-mut);
  font-size: 13px;
}
.pg-doc-meta i { color: var(--byc-border-strong); font-style: normal; }