/* ===== How I Work: scroll-driven pinned process timeline ===== */
.pr-h{position:relative;height:340vh;z-index:2}
.pr-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;padding:64px 5vw 36px;box-sizing:border-box;overflow:hidden}
.pr-head{max-width:1180px;width:100%;margin:0 auto 46px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.pr-tag{display:inline-flex;align-items:center;gap:10px;font-family:'JetBrains Mono',monospace;font-size:clamp(0.95rem,1.4vw,1.25rem);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#f4f1ec;line-height:1.2}
.pr-tag-prefix{color:#e5132b;font-weight:800;opacity:.95;text-shadow:0 0 14px rgba(229,19,43,.55)}
.pr-head .section-title{font-family:'Plus Jakarta Sans',var(--font-sans),sans-serif;font-size:clamp(2rem,3.8vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#ffffff;margin:2px 0 0;display:block}
.pr-head .section-lead{font-size:1.05rem;color:#a7a6ad;margin:0;line-height:1.5}
.pr-track{position:relative;max-width:1180px;width:100%;margin:0 auto}
.pr-line{position:absolute;top:32px;left:12.5%;right:12.5%;height:3px;border-radius:3px;background:rgba(255,255,255,.08)}
.pr-fill{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;scale:var(--p,0) 1;background:linear-gradient(90deg,#e5132b,#ff3d5a,#d9b46a,#e5132b);box-shadow:0 0 16px rgba(229,19,43,.65);will-change:scale}
.pr-steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pr-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 6px;opacity:.16;translate:0 22px;filter:grayscale(.7);pointer-events:none;transition:opacity .5s cubic-bezier(.2,.8,.2,1),translate .5s cubic-bezier(.2,.8,.2,1),filter .5s}
.pr-step.on{opacity:1;translate:0 0;filter:none;pointer-events:auto}
.pr-node{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-size:1.4rem;color:var(--c);background:#0b0d12;border:2px solid color-mix(in srgb,var(--c) 40%,rgba(255,255,255,.1));scale:.92;transition:all .5s cubic-bezier(.2,.8,.2,1)}
.pr-step.on .pr-node{background:var(--c);color:#0b0d12;border-color:var(--c);scale:1.12;box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 20%,transparent),0 0 34px color-mix(in srgb,var(--c) 75%,transparent)}
.pr-card{position:relative;overflow:hidden;width:100%;margin-top:26px;padding:26px 22px 24px;border-radius:22px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(155deg,color-mix(in srgb,var(--c) 12%,#0d1016),#0a0c11 75%);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:border-color .5s,box-shadow .5s,translate .3s}
.pr-step.on .pr-card{border-color:color-mix(in srgb,var(--c) 55%,transparent);box-shadow:0 14px 40px -14px color-mix(in srgb,var(--c) 45%,transparent)}
.pr-card:hover{translate:0 -6px;box-shadow:0 22px 50px -16px color-mix(in srgb,var(--c) 70%,transparent)}
.pr-no{position:absolute;right:16px;top:8px;font:800 2.6rem 'JetBrains Mono',monospace;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--c) 35%,transparent);transition:-webkit-text-stroke-color .4s}
.pr-step.on .pr-no{-webkit-text-stroke-color:color-mix(in srgb,var(--c) 75%,transparent)}
.pr-card h3{font:800 1.6rem 'Plus Jakarta Sans',sans-serif;letter-spacing:.03em;text-transform:uppercase;margin:6px 0 10px;text-align:left}
.pr-card p{color:var(--text-secondary,#9ca3af);font-size:.92rem;line-height:1.65;text-align:left;margin:0}
.pr-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.pr-chips span{font:600 .68rem 'JetBrains Mono',monospace;padding:5px 10px;border-radius:99px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}

@media (max-width:860px){
  .pr-h{height:auto;position:relative}
  .pr-sticky{position:relative;top:auto;height:auto;padding:80px 18px 50px}
  .pr-head{margin-bottom:30px}
  .pr-line{display:none}
  .pr-steps{grid-template-columns:1fr;gap:20px}
  .pr-step{opacity:1;translate:0 0;filter:none;pointer-events:auto;align-items:flex-start}
  .pr-node{width:52px;height:52px;font-size:1.15rem;background:var(--c);color:#0b0d12;scale:1}
  .pr-card{margin-top:12px}
}