/* ==========================================================================
   How it works — asymmetric 36/64: sticky masthead + a vertical "governed
   pipeline" of oversized ghost ordinals hugging a gradient spine with node
   beads. Ghost numerals ignite on hover; spine draws + beads pop on scroll.
   Monochrome blue only (depth from opacity/glow). Site scroll-reveal motion.
   ========================================================================== */
.pg-cnhow { position:relative; background-color:#f4f7fd; padding:104px 0; overflow:hidden; }
.pg-cnhow::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(52% 55% at 84% 10%, rgba(0,54,250,0.07), transparent 60%);
  pointer-events:none;
}
.pg-cnhow__inner {
  position:relative; max-width:1280px; margin:0 auto; padding:0 80px;
  display:grid; grid-template-columns:minmax(0,0.36fr) minmax(0,0.64fr); gap:80px; align-items:start;
}

.pg-cnhow__head { position:sticky; top:100px; }
.pg-cnhow__kicker {
  font-family:"Cabin",sans-serif; font-weight:600; font-size:14px; line-height:16px;
  letter-spacing:0.1em; text-transform:uppercase;
  background:linear-gradient(90deg,#0036fa,#4e87fc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pg-cnhow__title {
  font-family:"Cabin",sans-serif; font-weight:700; font-size:40px; line-height:1.14;
  letter-spacing:-0.01em; color:#12140f; margin-top:18px;
}
.pg-cnhow__lead {
  font-family:"Cabin",sans-serif; font-weight:400; font-size:16px; line-height:26px;
  color:#4d4d4d; margin-top:20px; max-width:320px;
}

.pg-cnhow__steps { position:relative; }
.pg-cnhow__steps::before {
  content:""; position:absolute; left:105px; top:26px; bottom:34px; width:2px; border-radius:2px;
  background:linear-gradient(180deg,#0036fa,#4e87fc); opacity:0.24;
  transform:scaleY(0); transform-origin:top; transition:transform 0.9s ease;
}
.pg-cnhow__steps.is-in::before { transform:scaleY(1); }

.pg-cnhow__step {
  position:relative; display:grid; grid-template-columns:88px 1fr; column-gap:34px; align-items:start;
  padding:12px 0 36px; opacity:0; transform:translateY(16px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.pg-cnhow__step:last-child { padding-bottom:0; }
.pg-cnhow__step.is-in { opacity:1; transform:none; }
.pg-cnhow__step.is-in:nth-child(1) { transition-delay:0.06s; }
.pg-cnhow__step.is-in:nth-child(2) { transition-delay:0.14s; }
.pg-cnhow__step.is-in:nth-child(3) { transition-delay:0.22s; }
.pg-cnhow__step.is-in:nth-child(4) { transition-delay:0.30s; }
.pg-cnhow__step.is-in:nth-child(5) { transition-delay:0.38s; }

.pg-cnhow__step::after {
  content:""; position:absolute; left:105px; top:28px; width:11px; height:11px; border-radius:50%;
  background:linear-gradient(135deg,#0036fa,#4e87fc);
  box-shadow:0 0 0 4px #f4f7fd, 0 6px 14px rgba(0,54,250,0.3);
  transform:translateX(-50%) scale(0);
  transition:transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
.pg-cnhow__step.is-in::after { transform:translateX(-50%) scale(1); transition-delay:0.24s; }

.pg-cnhow__num {
  grid-column:1; justify-self:end;
  font-family:"Cabin",sans-serif; font-weight:700; font-size:58px; line-height:0.8; letter-spacing:-0.03em;
  background:linear-gradient(135deg,#0036fa,#4e87fc);
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:0.22;
  transition:opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease;
}
.pg-cnhow__step:hover .pg-cnhow__num {
  opacity:1; transform:translateY(-2px); filter:drop-shadow(0 8px 16px rgba(0,54,250,0.28));
}

.pg-cnhow__body { grid-column:2; padding-top:4px; }
.pg-cnhow__name {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:#6b7180; transition:color 0.3s ease;
}
.pg-cnhow__step:hover .pg-cnhow__name { color:#0036fa; }

.pg-cnhow__step-title {
  position:relative; display:inline-block;
  font-family:"Cabin",sans-serif; font-weight:600; font-size:21px; line-height:27px; color:#12140f; margin-top:7px;
}
.pg-cnhow__step-title::after {
  content:""; position:absolute; left:0; bottom:-5px; width:0; height:2px; border-radius:2px;
  background:linear-gradient(90deg,#0036fa,#4e87fc); transition:width 0.35s ease;
}
.pg-cnhow__step:hover .pg-cnhow__step-title::after { width:34px; }

.pg-cnhow__text {
  font-family:"Cabin",sans-serif; font-weight:400; font-size:15px; line-height:24px;
  color:#4d4d4d; margin-top:12px; max-width:520px;
}

.pg-cnhow__head { opacity:0; transform:translateY(16px); transition:opacity 0.6s ease, transform 0.6s ease; }
.pg-cnhow__head.is-in { opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce) {
  .pg-cnhow__head, .pg-cnhow__step, .pg-cnhow__num, .pg-cnhow__step::after { opacity:1; transform:none; transition:none; }
  .pg-cnhow__num { opacity:0.32; }
  .pg-cnhow__step::after { transform:translateX(-50%) scale(1); }
  .pg-cnhow__steps::before { transform:scaleY(1); }
}

@media (max-width:1040px) {
  .pg-cnhow { padding:80px 0; }
  .pg-cnhow__inner { grid-template-columns:1fr; gap:40px; padding:0 24px; }
  .pg-cnhow__head { position:static; }
  .pg-cnhow__lead { max-width:none; }
}
@media (max-width:600px) {
  .pg-cnhow__title { font-size:30px; }
  .pg-cnhow__steps::before { left:66px; }
  .pg-cnhow__step { grid-template-columns:54px 1fr; column-gap:24px; }
  .pg-cnhow__step::after { left:66px; }
  .pg-cnhow__num { font-size:42px; }
  .pg-cnhow__step-title { font-size:19px; line-height:25px; }
}