/* =============================================================================
   SQB 主站 · 渠道合作页（/partnership）
   -------------------------------------------------------------
   复刻 https://shouqianba.com/zh/partnership 的信息结构，但视觉按本站语言重做：
   配色全部走 var(--*)，亮/暗主题自动跟随；不引任何第三方库与图片素材。
   ⚠️ 本文件必须排在 ui-flat.css **之后**加载：悬停态与 [data-reveal].is-in 是同特异性，
      靠文件顺序分胜负（先加载就被吃掉）。
   ========================================================================== */

/* ---- 色档：每个 data-tone 一套渐变，卡片/图标共用 ---- */
[data-tone] { --pt-a: #7aa2ff; --pt-b: #3ee0c8; }
[data-tone="violet"] { --pt-a: #8b7cff; --pt-b: #c48bff; }
[data-tone="teal"]   { --pt-a: #2fc4d8; --pt-b: #6ee7a8; }
[data-tone="amber"]  { --pt-a: #ffb648; --pt-b: #ff8a5b; }
[data-tone="rose"]   { --pt-a: #ff7ab8; --pt-b: #ff9a7a; }

/* ---- 通用标题块 ---- */
.pt-head { margin: 0 0 clamp(30px, 3.4vw, 46px); }
.pt-head--center { text-align: center; }
.pt-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.pt-h2 {
  margin: 0; font-size: clamp(21px, 2.4vw, 34px); font-weight: 400;
  letter-spacing: -.03em; color: var(--ink); line-height: 1.18;
}
.pt-sub { margin: 10px 0 0; font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 62ch; }
.pt-head--center .pt-sub { margin-left: auto; margin-right: auto; }

/* ---- 通用按钮 / 箭头 ---- */
.pt-btn {
  display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 22px;
  border-radius: var(--radius-pill); background: var(--grad); color: #fff;
  font-size: 14.5px; font-weight: 400; text-decoration: none; white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(43, 107, 255, .8);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease);
}
.pt-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -16px rgba(43, 107, 255, .9); }
.pt-btn i { width: 6px; height: 6px; border-right: 2px solid currentColor; border-top: 2px solid currentColor;
  transform: rotate(45deg); margin-left: 2px; }
.pt-btn--ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); box-shadow: none; }
.pt-btn--ghost:hover { border-color: var(--line-3); box-shadow: var(--shadow-soft); }
/* ⚠️ .pt-arrow 是「圆形箭头按钮」通用类：主视觉轮播废除后，现由城市轨道
   （city_carousel.php）复用 —— 删此类会连带干掉城市轨道箭头。 */
.pt-arrow {
  width: 38px; height: 38px; flex: none; display: inline-grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-2); cursor: pointer; padding: 0;
  transition: border-color .25s, color .25s, transform .25s;
}
.pt-arrow:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.pt-arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.pt-hero__arrows { display: inline-flex; gap: 10px; }

/* =============================================================================
   一、主视觉（单张 · 点阵地球；2026-10-17 起无轮播）
   ========================================================================== */
.pt-hero {
  position: relative; overflow: hidden; isolation: isolate;
  /* 顶栏让位由 page.php 的 .phead__pad 负责（compact 首屏），这里不再重复加 --nav-h，
     否则 100px + 74px 叠加会把首屏内容推得离导航太远 */
  padding: clamp(8px, 1.6vw, 22px) 0 clamp(30px, 4vw, 60px);
  /* 2026-10-19：向源站 shouqianba.com/zh/partnership 看齐（1920px 实测取色）——
     源站 hero 没有彩色 radial 堆叠、也没有 blur 色斑，只有**顶部一条渐变带**：
     中线 rgb(157,214,255) 天蓝、左上 rgb(197,204,255) 紫、右上 rgb(194,242,235) 青，
     向下渐隐进 #F7F9FC 纯净底，中下部完全留白（实测就是纯底色）。
     本站旧实现是 4 条截止在 60% 的 radial + 3 个 blur 漂移色斑：覆盖不完整、
     色斑相位漂移，中下部明度比上半部亮 15~20 度，形成一块边界突兀的「白块」
     （站长 3.jpg 两轮反馈）。改为同款顶部渐变带：三条 top-anchored radial
     渐隐到 transparent，过渡连续无断层，中下部坦然留纯净底——留白就是设计。 */
  background:
    radial-gradient(120% 68% at 50% -8%, rgba(120, 190, 255, .50), rgba(120, 190, 255, 0) 68%),
    radial-gradient(72% 52% at 4% -4%, rgba(160, 140, 255, .34), rgba(160, 140, 255, 0) 66%),
    radial-gradient(72% 52% at 96% -2%, rgba(80, 220, 195, .30), rgba(80, 220, 195, 0) 64%);
}

.pt-hero__wrap { position: relative; z-index: 1; }   /* 文字叠在 3D 地球画布之上 */
/* 单张主视觉：一套「左文右图」。入场保留一次「推进景深」（只有进入、没有离开） */
.pt-slide {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center; gap: clamp(20px, 3vw, 48px);
  /* 2026-10-17 九批：地球全幅化后，hero 高度决定球的直径（≈0.79×hero高），
     加高到 ~570px 让球有源站级别的存在感（源站 hero 600px） */
  min-height: clamp(420px, 41vw, 620px);
  /* 2026-10-19：入场不再从 opacity:0 / 3D 远景起（配合去掉整页淡入）——
     文字首帧即可见，只做一次轻微上浮归位。任何「从透明淡入」的初始态在
     重负载页上都会被解读成「闪白」，所以干脆不淡、只位移。 */
  animation: ptEnter .6s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ptEnter {
  from { transform: translate3d(0, 14px, 0); }
  to   { transform: none; }
}

/* 行间距加大（2026-10-17 七批批注：两行大标题挤在一起，1.06 → 1.3） */
.pt-h { margin: 0; font-size: clamp(30px, 4.6vw, 62px); font-weight: 400; letter-spacing: -.04em; line-height: 1.3; }
.pt-h__l1 { display: block; color: var(--ink); }
.pt-h__l2 { display: block; }
.pt-hero__lead { margin: 20px 0 0; font-size: clamp(14.5px, 1.2vw, 17px); color: var(--ink-2); line-height: 1.7; }
.pt-hero__cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }

.pt-slide__art { display: grid; place-items: center; min-width: 0; }
.pt-slide__art img { width: 100%; height: auto; border-radius: 20px; }
/* 3D 透视地球（2026-10-17 十二批：按源站 bundle 逐行复刻）。
   源站布局 Kn：文字块 h-[600px]，地球画布 absolute 推到右侧，
   球径 = 0.786×750 ≈ 589px，在**所有桌面视口都是这个固定尺寸**。
   画布背后【不】加任何背光光晕：地球 canvas 与定格海报都是透明底，应像「透明 PNG
   直接浮在 hero 渐变背景上」，源站那种 #f1f6fd 背光只会在本站青蓝渐变带上显成白块
   （站长 2026-10-19：「透明图层叠上去怎么会有白块」）。
   宽高由 JS 按「文字右缘到视口右边」的余量写死（可用宽不足时按比例缩高），
   这里只是 JS 跑之前的兜底值。
   2026-10-19：源站 top-[30px] 的球心偏高、且球底快贴 hero 下缘（站长：
   「总感觉之前的地球位置要往下一点」），桌面档下移 40px —— JS 的 fit() 不写
   top，垂直位置全凭这条；hero 最小高度按 host.offsetTop 自适应，不会裁切光晕。

   2026-10-19（续）：默认透明，JS 布局收敛后由 .is-sized 淡入 —— 宽高是 fit() 动态
   算的（初始 750px 只是兜底），不藏起来会亲眼看到「CSS 750 → JS 首算 → 字体落位后
   重算」的三段位置跳变（站长：「地球从靠右一点的地方入画，往左抖动一下」）。
   右缘靠 right:0 固定，宽度每变一次左缘就跳一次，收敛前绝不能让人看见。 */
.pt-globe3d { position: absolute; top: 70px; right: 0; width: 750px; height: 750px; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .5s ease; }
.pt-globe3d.is-sized { opacity: 1; }
/* 2026-10-19：删除原 .pt-globe3d::before 近白背光光晕（#f1f6fd）。
   地球 canvas / 定格海报已是透明底，叠加白色光晕会在青蓝渐变带上显成白块，
   违背「透明图层浮于背景」的原则。删后地球即纯透明浮层，无白块。 */
.pt-globe3d canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100% !important; height: 100% !important; }
/* 2026-10-19 定稿：删除"定格海报"整层（原 .pt-poster）。
   旧海报是 901×900 的不透明 RGB 图、自带蓝绿粉渐变底，object-fit:contain 会在
   构建期画出一个异色方框（站长：「一大块闪现」「怎么会有白块」）；且海报宽高比固定，
   而 fit() 让容器宽高比随视口在 0.94~1.35 浮动，contain 反而会黑边错位。
   现在改为：容器在 .is-sized（布局收敛）后直接透明淡入，构建期地球区就是 hero 背景，
   hex 就绪后点阵出现在透明 canvas 上 —— 全程数学上没有色块，与源站一致。 */
/* WebGL 不可用的兜底：淡淡的球影占位（正常浏览器永远看不到） */
.pt-globe3d.is-fallback::after { content: ''; position: absolute; left: 50%; top: 50%;
  width: 52%; max-width: 520px; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(2, 123, 255, .12), rgba(2, 123, 255, .04) 62%, transparent 74%); }

/* =============================================================================
   二、收益理由卡片墙（分列视差）
   ========================================================================== */
/* ⚠️ padding-top 是给「只向上」的视差留的余量：三列系数最大 0.78 × AMP 84 ≈ 65px，
   减掉第 2 列自带的 46px 下沉后还会上浮 ~20px。不留余量时窄桌面（961~1100px，
   标题下边距只有 33px）会被顶进区块标题里。 */
.pt-cards { padding-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); }
/* ⚠️ 视差只作用在「列」上：卡片自己的 transform 留给 data-reveal 与 hover，互不打架 */
.pt-col { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); will-change: transform; }
.pt-col:nth-child(2) { margin-top: clamp(18px, 3vw, 46px); }
.pt-col:nth-child(3) { margin-top: clamp(6px, 1.2vw, 20px); }

.pt-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 20px; border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease-out), border-color .45s, box-shadow .45s;
}
.pt-card:hover { transform: translateY(-6px); border-color: transparent; box-shadow: var(--shadow); }
.pt-card__media {
  position: relative; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(135deg, var(--pt-a), var(--pt-b));
}
/* 点阵纹理 + 同心圆环：纯渐变块太"素"，加两层装饰才有封面感
   （2026-10-17 站长反馈「仅仅是几个色块」） */
.pt-card__media::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .30) 1.1px, transparent 1.2px);
  background-size: 13px 13px; opacity: .55;
}
.pt-card__media::after {
  content: ''; position: absolute; z-index: 0;
  left: 50%; top: 50%; width: 58%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .40);
  box-shadow: 0 0 0 16px rgba(255, 255, 255, .09);
}
.pt-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.pt-card:hover .pt-card__media img { transform: scale(1.06); }
.pt-card__glow {
  position: absolute; inset: 0;
  background: radial-gradient(120% 100% at 18% 12%, rgba(255, 255, 255, .45), transparent 52%);
}
.pt-card__ico { position: relative; font-size: 44px; line-height: 1; color: #fff;
  filter: drop-shadow(0 6px 14px rgba(20, 30, 60, .28)); }
/* emoji 图标套白圆托底：从「飘在色块上」变成「徽章」，和参考站的图标徽章同思路 */
.pt-card__ico--emoji {
  width: 74px; height: 74px; display: grid; place-items: center; font-size: 38px;
  background: rgba(255, 255, 255, .93); border-radius: 50%;
  box-shadow: 0 10px 22px -8px rgba(20, 30, 60, .38);
  filter: none;
}
img.pt-card__ico { width: 38%; height: auto; object-fit: contain; filter: none; }
.pt-card__body { padding: 18px 20px 20px; }
.pt-card__t { margin: 0; font-size: 19px; font-weight: 400; color: var(--ink); letter-spacing: -.02em; }
/* 描述默认摊开（2026-10-17）：原来藏到 hover 才显示，静态截图就是几块纯色 */
.pt-card__d {
  margin: 9px 0 0; font-size: 14px; color: var(--muted); line-height: 1.65;
  max-height: 96px; opacity: 1; overflow: hidden;
}

/* =============================================================================
   三、支持体系网格
   ========================================================================== */
.pt-support { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.pt-sup {
  display: flex; align-items: flex-start; gap: 14px; padding: 18px 18px;
  border-radius: 16px; transition: background .35s, transform .35s var(--ease-out);
}
.pt-sup:hover { background: var(--surface); transform: translateY(-3px); }
.pt-sup__ico {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px;
  background: linear-gradient(135deg, var(--pt-a), var(--pt-b));
  box-shadow: 0 10px 22px -12px var(--pt-a);
}
.pt-sup__ico svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.pt-sup__ico img { width: 22px; height: 22px; object-fit: contain; }
.pt-sup__emoji { font-size: 21px; line-height: 1; }
.pt-sup__txt h3 { margin: 0; font-size: 15.5px; font-weight: 400; color: var(--ink); letter-spacing: -.01em; }
.pt-sup__txt p { margin: 5px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* =============================================================================
   四、巡回大会盛况（横向轨道）
   ========================================================================== */
.pt-city {
  display: flex; gap: clamp(14px, 1.4vw, 20px); overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 2px 14px; scrollbar-width: thin;
}
.pt-city::-webkit-scrollbar { height: 6px; }
.pt-city::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 99px; }
.pt-city__card {
  flex: 0 0 clamp(230px, 26vw, 320px); margin: 0; scroll-snap-align: start;
  border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-soft);
  transition: transform .45s var(--ease-out), box-shadow .45s, border-color .45s;
}
.pt-city__card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.pt-city__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: linear-gradient(140deg, var(--brand), #3ee0c8); }
.pt-city__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.pt-city__card:hover .pt-city__media img { transform: scale(1.07); }
.pt-city__ph { position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 44px; font-weight: 400; color: rgba(255, 255, 255, .82); letter-spacing: .04em; }
.pt-city__date {
  position: absolute; left: 12px; top: 12px; padding: 3px 10px; border-radius: 999px;
  background: rgba(10, 20, 40, .5); color: #fff; font-size: 11.5px; letter-spacing: .06em;
  backdrop-filter: blur(6px);
}
.pt-city__card figcaption { padding: 13px 16px 15px; display: flex; flex-direction: column; gap: 4px; }
.pt-city__card figcaption b { font-size: 15.5px; font-weight: 400; color: var(--ink); }
.pt-city__card figcaption span { font-size: 13px; color: var(--muted); line-height: 1.55; }

/* =============================================================================
   响应式
   ========================================================================== */
@media (max-width: 960px) {
  .pt-slide { grid-template-columns: 1fr; }
  /* ⚠️ 不做 order:-1（把地球提到标题前）：手机上首屏先看到的应该是「收钱吧全国合作伙伴」，
     而不是一张只占位的大图。标题在前、地球在后，且整体压扁。
     2026-10-17 九批：地球 div 在 DOM 里位于 wrap 之后 —— 桌面 absolute 铺满不看位置；
     这里转回 static 就自然落到文字下方，回到老的堆叠构图。 */
  .pt-slide { min-height: 0; gap: 22px; }
  .pt-globe3d { position: relative; inset: auto; top: auto; right: auto;
    width: 100%; height: auto; max-width: 300px; aspect-ratio: 1; margin: 26px auto 0; }
  .pt-globe3d.is-fallback::after { left: 50%; width: 118%; }
  .pt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-col:nth-child(2) { margin-top: 26px; }
  .pt-col:nth-child(3) { margin-top: 0; }
  .pt-support { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .pt-h { font-size: clamp(26px, 8.4vw, 36px); }
  .pt-hero__lead { margin-top: 14px; }
  .pt-hero__cta { margin-top: 22px; }
  .pt-globe3d { max-width: 236px; }
  .pt-cards { grid-template-columns: 1fr; }
  .pt-col:nth-child(2) { margin-top: 0; }
  .pt-support { grid-template-columns: 1fr; }
}

/* 无障碍：尊重系统的「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .pt-slide { animation: none; }
}