/* ============================================================
   关于我们专属样式（前缀 pa-，作用域 .pa-page；公共底座见 page-g.css）
   设计稿：docs/preview/ai-images/二级页-G风格/3-关于我们.png
   结构：页头（右侧放大 App 图标带光晕）→ 图文「我们在做什么」→ 三条原则（细竖线分隔，不做卡片）
        → 官方入口三张白卡 + 唯一官网 → 联系与反馈横卡 + 运营主体
   ============================================================ */

/* ── 页头右侧：放大的 App 图标 ── */
.pa-hero-art {
  position: relative;
  height: 240px;
}
.pa-hero-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  margin: -150px 0 0 -150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .55) 0%, rgba(186, 230, 253, .35) 35%, transparent 70%);
  filter: blur(6px);
}
.pa-hero-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340px;
  height: 120px;
  margin: -40px 0 0 -170px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .45);
  transform: rotate(-12deg);
}
.pa-hero-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 196px;
  height: 196px;
  margin: -98px 0 0 -98px;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 28px 60px rgba(15, 23, 42, .32), 0 0 0 6px rgba(255, 255, 255, .22);
  animation: pgFloat 6s ease-in-out infinite;
}
.pa-page .pa-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
/* App 图标两侧漂浮的 3D 小图（直接放，不套玻璃方块） */
.pa-page .pa-hero-chip {
  position: absolute;
  width: 92px;
  height: 92px;
  object-fit: contain;
  filter: drop-shadow(0 14px 24px rgba(15, 23, 42, .28));
  animation: pgFloat 6s ease-in-out infinite;
}
.pa-hero-chip--t { left: 0; top: 6px; animation-delay: -2s; }
.pa-hero-chip--p { right: 0; bottom: 0; animation-delay: -4s; }

/* ── 我们在做什么 ── */
.pa-intro { padding-top: 32px; }
.pa-intro-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}
.pa-intro-photo {
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--g-shadow);
  aspect-ratio: 3 / 2;
}
.pa-page .pa-intro-photo img { width: 100%; height: 100%; object-fit: cover; }
/* 区块标题字号跟底座 .pg-head h2 走，这里只调间距 */
.pa-intro-head { margin-bottom: 18px; }
.pa-intro-head h2 { margin-top: 16px; }
.pa-intro-copy p {
  font-size: 16px;
  line-height: 1.9;
  color: #4B5563;
}
.pa-intro-copy p + p { margin-top: 12px; }

/* ── 三条原则：编号 + 细竖线分隔 ── */
.pa-rule-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pa-rule-list li { padding: 4px 36px; }
.pa-rule-list li:first-child { padding-left: 0; }
.pa-rule-list li + li { border-left: 1px solid #D7DEE8; }
.pa-rule-no {
  display: block;
  font-size: 52px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--g-blue) 0%, var(--g-blue-darker) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pa-rule-list h3 {
  margin-top: 18px;
  font-size: 21px;
  line-height: 1.4;
  font-weight: 800;
  color: var(--g-title);
}
.pa-rule-list p {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--g-muted);
}

/* ── 官方入口 ── */
.pa-chan { background: var(--g-bg-blue); }
.pa-chan-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.pa-chan-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 24px;
}
.pa-chan-body { min-width: 0; }
.pa-chan-body p {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--g-muted);
}
.pa-chan-body .pg-btn { margin-top: 16px; }
/* 入口主图标：3D 图标直接放 */
.pa-page .pa-chan-ico {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 12px 20px rgba(37, 99, 235, .22));
}
.pa-qr {
  flex-shrink: 0;
  width: 112px;
  height: 112px;
  border-radius: 16px;
  border: 1px solid var(--g-line);
  background: #fff;
}
.pa-page img.pa-qr { padding: 6px; object-fit: contain; }
.pa-official {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin-top: 28px;
  font-size: 15px;
  line-height: 1.8;
  color: #4B5563;
  text-align: center;
}
.pa-page .pa-official svg.lucide { margin-top: 4px; color: var(--g-blue); }
.pa-official a { font-weight: 700; color: var(--g-blue-deep); }
.pa-official a:hover { text-decoration: underline; }

/* ── 联系与反馈 ── */
.pa-contact-sec { padding-top: 56px; }
.pa-contact { padding: 32px 36px 20px; }
.pa-contact-main {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 22px;
}
.pa-page .pa-contact-ico {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: contain;
  filter: drop-shadow(0 12px 22px rgba(37, 99, 235, .22));
}
.pa-contact-copy { flex: 1; min-width: 0; }
.pa-contact-copy h2 {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 800;
  color: var(--g-title);
}
.pa-contact-copy p {
  margin-top: 6px;
  font-size: 15px;
  color: var(--g-muted);
}
.pa-contact-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.pa-company {
  padding-top: 16px;
  border-top: 1px solid var(--g-line);
  font-size: 13px;
  color: var(--g-muted);
  text-align: center;
}

/* ── 响应式 ── */
@media (max-width: 1100px) {
  .pa-chan-card { flex-direction: column; align-items: flex-start; gap: 16px; }
  .pa-contact-main { flex-wrap: wrap; }
  .pa-contact-btns { width: 100%; padding-left: 104px; }
}
@media (max-width: 960px) {
  .pa-intro-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pa-rule-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pa-rule-list li { padding: 22px 0; }
  .pa-rule-list li + li { border-left: 0; border-top: 1px solid #D7DEE8; }
  .pa-rule-list li:first-child { padding-top: 0; }
}
.pa-nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  .pa-br { display: none; }
  .pa-hero-art { display: none; }
  .pa-intro { padding-top: 16px; }
  .pa-rule-no { font-size: 40px; }
  .pa-rule-list h3 { margin-top: 12px; font-size: 19px; }
  .pa-chan-cards { grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* 640 以下才变一列；768～960 保持三列竖排卡 */
  .pa-chan-card { flex-direction: row; align-items: center; padding: 18px; gap: 16px; }
  .pa-page .pa-chan-ico { width: 72px; height: 72px; }
  .pa-qr { width: 88px; height: 88px; }
  .pa-official { font-size: 14px; text-align: left; }
  .pa-contact { padding: 22px 18px 16px; }
  .pa-contact-main { gap: 16px; }
  .pa-page .pa-contact-ico { width: 60px; height: 60px; }
  .pa-contact-copy h2 { font-size: 20px; }
  .pa-contact-btns { padding-left: 0; }
  .pa-contact-btns .pg-btn { flex: 1 1 0; padding: 0 12px; }
}

/* ============ 动效（全站统一参数：悬停 .22s、进场 .6s、缓动 cubic-bezier(.2,.7,.2,1)）============
   入口卡悬停上浮用独立的 translate 属性，不和进场动效 [data-reveal] 的 transform 抢；3D 图标用 scale 放大。
   照片在 overflow:hidden 的 figure 里悬停放大 1.03。首屏的页头和「我们在做什么」不加 data-reveal。 */
.pa-page {
  --pa-ease: cubic-bezier(.2, .7, .2, 1);
  --pa-hover-shadow: 0 16px 40px rgba(37, 99, 235, .12);
}
.js-motion .page-g.pa-page .pa-chan-card[data-reveal].is-in,
.pa-page .pa-chan-card {
  transition:
    opacity .6s var(--pa-ease) var(--reveal-delay, 0s),
    transform .6s var(--pa-ease) var(--reveal-delay, 0s),
    translate .22s var(--pa-ease),
    box-shadow .22s var(--pa-ease);
}
.pa-page .pa-chan-card:hover {
  translate: 0 -4px;
  box-shadow: var(--pa-hover-shadow);
}
.pa-page .pa-chan-ico,
.pa-page img.pa-qr,
.pa-page .pa-contact-ico { transition: scale .22s var(--pa-ease); }
.pa-page .pa-chan-card:hover .pa-chan-ico,
.pa-page .pa-chan-card:hover img.pa-qr { scale: 1.06; }
.pa-page .pa-contact:hover .pa-contact-ico { scale: 1.06; }
.pa-page .pa-intro-photo img { transition: scale .6s var(--pa-ease); }
.pa-page .pa-intro-photo:hover img { scale: 1.03; }
@media (prefers-reduced-motion: reduce) {
  .pa-page .pa-chan-card:hover { translate: none; }
  .pa-page .pa-chan-card:hover .pa-chan-ico,
  .pa-page .pa-chan-card:hover img.pa-qr,
  .pa-page .pa-contact:hover .pa-contact-ico,
  .pa-page .pa-intro-photo:hover img { scale: none; }
}

/* 图片骨架屏（A 扫光）：变量、动画、失败占位在 page-g.css 末尾 */
.pa-page .pa-intro-photo img:not(.is-sk-done) {
  background: var(--sk-shine) 150% 0 / 200% 100% no-repeat, var(--sk-icon) center / 48px auto no-repeat, var(--sk-bg);
  animation: sk-shimmer 1.5s linear infinite;
}