/* 单页升级公共样式（10-19 夜 王朋友：参照关于页的风格，把 GEO、内容工厂、星盒星盒！、产品总览、案例、诊断页适当升级）
   只在这些页面加载。类名前缀 up-，不和全站其他类名冲突。
   动效只用滚动淡入、数字滚动、进度线、依次点亮、轻微推近；不倾斜、不锁屏；减少动效时直接显示最终画面。 */

/* ── 滚动淡入 / 推近（只在有脚本时先隐藏） ── */
/* 10-19 夜 王朋友：滚动渐隐泛滥、影响体验，全站去掉，内容直接显示；数字滚动、进度线、依次点亮等保留（.rv 只作脚本的触发点） */

/* ── 区块标题：放大到关于页的字号 ── */
.pg-sh{max-width:880px}
.pg-sh h2{font-size:clamp(32px,4.6vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1.12}
.pg-split h1,.phero h1{font-weight:700;letter-spacing:-.04em;line-height:1.04}
.phero h1{font-size:clamp(40px,6.4vw,84px)}
.pg-split h1{font-size:clamp(36px,4.4vw,58px)}
.up-k{font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--k3);text-transform:uppercase}
.up-h2{font-size:clamp(32px,4.6vw,56px);font-weight:700;letter-spacing:-.03em;line-height:1.12;margin-top:14px}
.up-h2 span{color:var(--k4)}
.up-lead{font-size:19px;line-height:1.65;color:var(--k2);max-width:760px;margin-top:20px}
.up-sec{padding:120px 0;margin-top:110px}
.up-sec+.sec{padding-top:120px}
.up-sec.flush{margin-top:0}
.up-gray{background:var(--s1)}
.up-dark{background:#0E0E0F;color:#F5F5F7}
.up-dark .up-k,.up-dark .up-h2 span{color:#86868B}
.up-dark .up-lead{color:#A1A1A6}

/* ── 黑色数字通栏 ── */
.up-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:64px}
.up-nums>div{padding:8px 28px;border-left:1px solid #2C2C2E}
.up-nums>div:first-child{border-left:0;padding-left:0}
.up-nums b{display:block;font-size:clamp(48px,6.4vw,84px);font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.up-nums b i{font-style:normal;color:#61CC4B}
.up-nums b small{font-size:.36em;font-weight:600;letter-spacing:0;margin-left:6px;color:#A1A1A6}
.up-nums .lb{display:block;margin-top:12px;font-size:15px;color:#A1A1A6;line-height:1.55}
.up-src{margin-top:40px;font-size:13px;color:#6E6E73}

/* ── 依次点亮的步骤条（深色区块用 .up-flow，浅色区块加 .lt） ── */
.up-flow{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:10px;margin-top:56px;padding:0}
.up-flow li{list-style:none;border-radius:16px;padding:22px 14px 20px;background:#1C1C1E;text-align:center;transition:background .35s,color .35s,transform .35s}
.up-flow li small{display:block;font-size:12px;font-weight:600;color:#6E6E73;letter-spacing:.06em}
.up-flow li b{display:block;font-size:16px;margin-top:8px;color:#A1A1A6;transition:color .35s}
.up-flow li.on{background:#F5F5F7;transform:translateY(-4px)}
.up-flow li.on small{color:#2E8A1E}
.up-flow li.on b{color:#1A1A1A}
.up-flow li.done b{color:#F5F5F7}
.up-flow li.done small{color:#61CC4B}
.up-flow.lt li{background:var(--s1)}
.up-flow.lt li b{color:var(--k3)}
.up-flow.lt li.on{background:#1A1A1A}
.up-flow.lt li.on b{color:#fff}
.up-flow.lt li.on small{color:#61CC4B}
.up-flow.lt li.done b{color:var(--k)}
.up-flow.lt li.done small{color:#2E8A1E}

/* ── 大字母底纹卡片 ── */
.up-lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:56px}
.up-lines.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.up-line{position:relative;overflow:hidden;display:block;color:inherit;background:#fff;border-radius:28px;padding:36px 32px 34px;min-height:320px;transition:transform .4s ease-out,box-shadow .4s ease-out}
.up-line:hover{transform:translateY(-6px);box-shadow:0 24px 48px -24px rgba(0,0,0,.18)}
.up-gray .up-line,.up-line.wt{background:#fff}
.up-line.gy{background:var(--s1)}
.up-line .bg{position:absolute;right:-8px;bottom:-26px;font-size:128px;font-weight:800;letter-spacing:-.05em;color:#F0F0F0;line-height:1;pointer-events:none;transition:color .4s}
.up-line.gy .bg{color:#EAEAEA}
.up-lines:not(.c2) .up-line .bg{font-size:104px}
.up-line:hover .bg{color:#E8F7E4}
.up-line small{position:relative;font-size:13px;font-weight:600;color:var(--k3);letter-spacing:.04em}
.up-line h3{position:relative;font-size:28px;font-weight:700;letter-spacing:-.02em;margin-top:14px;line-height:1.25}
.up-line p{position:relative;font-size:15.5px;line-height:1.7;color:var(--k2);margin-top:14px}
.up-line .go{position:relative;display:inline-block;margin-top:22px;font-size:14px;font-weight:600}

/* ── 横向路线：进度线滚到时画出 ── */
.up-tl{position:relative;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:24px;margin-top:72px;padding-top:44px}
.up-tl::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:#E4E4E4}
.up-tl .bar{position:absolute;left:0;top:9px;height:2px;width:0;background:#1A1A1A;transition:width 2.2s cubic-bezier(.2,.7,.2,1)}
.up-tl.go .bar{width:100%}
.up-st{position:relative;display:block;color:inherit}
.up-st::before{content:"";position:absolute;top:-44px;left:0;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #D2D2D7;transition:box-shadow .4s,background .4s;transition-delay:var(--d,0s)}
.up-tl.go .up-st::before{background:#1A1A1A;box-shadow:inset 0 0 0 5px #61CC4B}
.up-st .yr{font-size:clamp(26px,3vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.up-st b{display:block;font-size:19px;margin-top:14px}
.up-st p{font-size:15px;line-height:1.7;color:var(--k2);margin-top:10px}
.up-st .go{display:inline-block;margin-top:12px;font-size:14px;font-weight:600}

/* ── 大字块（编号 + 标题 + 说明） ── */
.up-mt{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:12px;margin-top:56px}
.up-mt>div,.up-mt>a{display:block;color:inherit;background:#fff;border-radius:22px;padding:28px 24px;transition:transform .3s,box-shadow .3s}
.up-mt.gy>div,.up-mt.gy>a{background:var(--s1)}
.up-mt>a:hover{transform:translateY(-4px);box-shadow:0 18px 36px -22px rgba(0,0,0,.2)}
.up-mt small{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#2E8A1E;letter-spacing:.04em}
.up-mt b{display:block;font-size:22px;font-weight:700;letter-spacing:-.01em;margin-top:12px;line-height:1.3}
.up-mt p{font-size:14.5px;color:var(--k3);line-height:1.7;margin-top:10px}
.up-mt .big{display:block;font-size:clamp(40px,4.4vw,56px);font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--k)}

/* ── 细格子网格（2px 间隙，关于页「六条原则」） ── */
.up-grid{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:2px;margin-top:56px;background:#E4E4E4;border-radius:24px;overflow:hidden}
.up-grid>*{background:#fff;padding:30px 28px 28px;transition:background .3s;color:inherit;display:block}
.up-grid>*:hover{background:#FAFAFA}
.up-grid small{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:#2E8A1E;letter-spacing:.04em}
.up-grid b{display:block;font-size:20px;margin-top:10px}
.up-grid p{font-size:14.5px;line-height:1.7;color:var(--k3);margin-top:10px}

/* ── 对照表：推荐一列突出 ── */
.up-vs{margin-top:56px;border-radius:24px;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--ln)}
.up-vs table{width:100%;border-collapse:collapse}
.up-vs th,.up-vs td{padding:20px 22px;text-align:left;font-size:15px;border-bottom:1px solid #EFEFEF;vertical-align:top;line-height:1.6}
.up-vs th{font-size:13px;font-weight:600;color:var(--k3)}
.up-vs tr:last-child td{border-bottom:0}
.up-vs td:first-child{color:var(--k3);width:24%}
.up-vs .me{background:#F6FBF4;font-weight:600;color:#1A1A1A}
.up-vs td a{font-weight:600}
.up-vs tr{transition:background .25s}
.up-vs tbody tr:hover td{background:#FAFAFA}

/* ── 已有区块的小升级 ── */
.vs-c{position:relative;overflow:hidden}
.vs-c>*{position:relative}
.vs-c .up-bg{position:absolute;right:-6px;bottom:-22px;font-size:112px;font-weight:800;letter-spacing:-.05em;color:#EAEAEA;line-height:1;pointer-events:none}
.rs-k b{font-variant-numeric:tabular-nums}

@media (max-width:1000px){
  .up-mt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .up-flow{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .up-sec{padding:84px 0;margin-top:84px}
  .up-nums{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.up-nums>div:nth-child(3){border-left:0;padding-left:0}
  .up-lines,.up-lines.c2{grid-template-columns:minmax(0,1fr)}.up-line{min-height:0}
  .up-tl{grid-template-columns:minmax(0,1fr);padding-top:0;padding-left:40px;gap:36px}
  .up-tl::before,.up-tl .bar{left:9px;top:0;bottom:0;width:2px;height:auto}.up-tl .bar{height:0;transition:height 2.2s cubic-bezier(.2,.7,.2,1)}.up-tl.go .bar{width:2px;height:100%}
  .up-st::before{top:2px;left:-40px}
  .up-grid{grid-template-columns:minmax(0,1fr)}
  .up-vs{overflow-x:auto}.up-vs table{min-width:600px}
}
@media (max-width:560px){
  .up-mt{grid-template-columns:minmax(0,1fr)}
  .up-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .up-nums>div{padding:8px 16px}
}
@media (prefers-reduced-motion:reduce){
  .up-tl .bar{transition:none}
}

/* ── 星盒星盒！「本站搭建」三项依次点亮 ── */
.xs-c li{transition:background .4s,transform .4s}
.xs-c li b,.xs-c li span,.xs-c li small{transition:color .4s}
.xs-c li.on{background:#F5F5F7;transform:translateX(6px)}
.xs-c li.on b{color:#1A1A1A}.xs-c li.on span{color:#3D3D3D}.xs-c li.on small{color:#2E8A1E}
.xs h2{font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.xv-n{transition:color .4s}
.xv-c:hover .xv-n{color:#2E8A1E}
.up-line .gos{position:relative;display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:22px}
.up-line .gos a{font-size:14px;font-weight:600}
.up-line .gos a:hover{text-decoration:underline}
