.pfr{ position:relative; height:210vh; background:#0c141c; }
.pfr-stick{ position:sticky; top:0; height:100vh; overflow:hidden;
  background:
    linear-gradient(rgba(120,170,210,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(120,170,210,.06) 1px,transparent 1px),
    radial-gradient(120% 85% at 62% 45%,rgba(80,150,210,.22),transparent 60%),
    radial-gradient(120% 80% at 50% 120%,rgba(57,182,255,.12),transparent 58%),
    linear-gradient(180deg,#16222e,#0c141c);
  background-size:46px 46px,46px 46px,100% 100%,100% 100%,100% 100%; }
.pfr-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.pfr-overlay{ position:absolute; inset:0; z-index:4; pointer-events:none; padding:5vh 5vw;
  display:flex; flex-direction:column; }
.pfr-eyebrow{ font-family:'DM Mono',monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:#ffb35c; }
.pfr-title{ font-family:'Bebas Neue',sans-serif; font-size:clamp(40px,6.5vw,90px); line-height:.96; letter-spacing:.5px;
  color:#f3f6fa; margin:10px 0 0; max-width:min(46%,520px); }
.pfr-title span{ background:linear-gradient(180deg,#ffd9a8,#ff6a00); -webkit-background-clip:text; background-clip:text; color:transparent; }






.pfr-hint{ margin-top:12px; font-family:'DM Mono',monospace; font-size:10.5px; letter-spacing:3px; text-transform:uppercase; color:#7fb6dd; }
.pfr-load{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; transition:opacity .5s ease; }
.pfr-load.gone{ opacity:0; pointer-events:none; }
.pfr-load .ring{ width:34px; height:34px; border:2px solid rgba(255,140,60,.2); border-top-color:#ff7a2a; border-radius:50%; animation:pfr-spin .9s linear infinite; }
@keyframes pfr-spin{ to{ transform:rotate(360deg); } }
@media(max-width:900px){ .pfr{ height:180vh; } .pfr-title{ max-width:100%; font-size:clamp(32px,7vw,54px); } }
/* reduced motion: collapse the tall scrub to a single static stage */
.pfr-reduced{ height:100vh; }
.pfr-reduced .pfr-stick{ position:relative; }

/* ---- large vertical stepper ---- */
.pfr-steps{ position:relative; list-style:none; margin:38px 0 0; padding:0; max-width:min(46%,460px); }
.pfr-track{ position:absolute; left:13px; top:14px; bottom:22px; width:2px; background:rgba(120,150,175,.20); border-radius:2px; }
.pfr-track-fill{ display:block; width:100%; height:0; border-radius:2px;
  background:linear-gradient(180deg,#ffb35c,#ff6a00); box-shadow:0 0 12px rgba(255,106,0,.5); transition:height .18s linear; }
.pfr-step{ position:relative; display:flex; align-items:flex-start; gap:18px; padding:0 0 26px; }
.pfr-step:last-of-type{ padding-bottom:0; }
.pfr-step .d{ position:relative; z-index:2; flex:none; width:28px; height:28px; border-radius:50%;
  background:#101a24; border:2px solid rgba(120,150,175,.30); transition:all .3s ease; }
.pfr-step .d:after{ content:''; position:absolute; inset:0; margin:auto; width:8px; height:8px; border-radius:50%;
  background:rgba(150,175,195,.45); transition:all .3s ease; }
.pfr-step .t{ display:block; padding-top:2px; }
.pfr-step .t b{ display:block; font-family:'Bebas Neue',sans-serif; font-size:26px; letter-spacing:.6px;
  color:#5f7183; line-height:1.05; transition:color .3s ease; }
.pfr-step .t i{ display:block; font-style:normal; font-size:13px; color:#4b5c6b; margin-top:3px;
  opacity:0; transform:translateY(-3px); transition:opacity .35s ease, transform .35s ease; }
/* completed */
.pfr-step.done .d{ border-color:rgba(255,140,60,.55); background:#1a1410; }
.pfr-step.done .d:after{ background:#ff8a2b; }
.pfr-step.done .t b{ color:#8c9aa8; }
/* current */
.pfr-step.on .d{ border-color:#ff6a00; background:#20150c; transform:scale(1.12);
  box-shadow:0 0 0 6px rgba(255,106,0,.12), 0 0 18px rgba(255,106,0,.45); }
.pfr-step.on .d:after{ background:#ffb35c; width:11px; height:11px; }
.pfr-step.on .t b{ color:#f6f9fc; }
.pfr-step.on .t i{ opacity:1; transform:translateY(0); color:#93a5b4; }
@media(max-width:900px){
  .pfr-steps{ max-width:100%; margin-top:24px; }
  .pfr-step .t b{ font-size:20px; }
  .pfr-step{ padding-bottom:18px; gap:14px; }
  .pfr-step .d{ width:22px; height:22px; }
  .pfr-track{ left:10px; }
}