/* ==========================================================================
   Rollout guide — 4-phase horizontal timeline. Gradient line draws across
   four nodes, monospace phase labels, description below. White band, blue
   primary only on line / nodes / labels. Site scroll-reveal motion.
   ========================================================================== */
.pg-idroll { background-color:#fff; padding:104px 0; }
.pg-idroll__inner { max-width:1280px; margin:0 auto; padding:0 80px; }

.pg-idroll__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-idroll__title {
  font-family:"Cabin",sans-serif; font-weight:700; font-size:44px; line-height:1.22;
  color:#12140f; margin-top:18px;
}

.pg-idroll__rail { position:relative; margin-top:52px; }
.pg-idroll__line, .pg-idroll__fill { position:absolute; top:5px; left:0; height:2px; border-radius:2px; }
.pg-idroll__line { right:0; background-color:#e2e7f1; }
.pg-idroll__fill { width:0; background:linear-gradient(90deg,#0036fa,#4e87fc); transition:width 1s ease; }
.pg-idroll__rail.is-in .pg-idroll__fill { width:100%; }

.pg-idroll__steps { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); gap:40px; }
.pg-idroll__step { position:relative; padding-top:34px; }

.pg-idroll__node {
  position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%;
  background:linear-gradient(135deg,#0036fa,#4e87fc);
  box-shadow:0 0 0 4px #fff, 0 4px 10px rgba(0,54,250,0.25);
  transform:scale(0); transition:transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.pg-idroll__step.is-in .pg-idroll__node { transform:scale(1); }
.pg-idroll__step.is-in:nth-child(1) .pg-idroll__node { transition-delay:0.18s; }
.pg-idroll__step.is-in:nth-child(2) .pg-idroll__node { transition-delay:0.34s; }
.pg-idroll__step.is-in:nth-child(3) .pg-idroll__node { transition-delay:0.50s; }
.pg-idroll__step.is-in:nth-child(4) .pg-idroll__node { transition-delay:0.66s; }
.pg-idroll__step:hover .pg-idroll__node { transform:scale(1.25); }

.pg-idroll__label {
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:12px;
  letter-spacing:0.04em; color:#9aa2b4;
}
.pg-idroll__phase {
  font-weight:700; background:linear-gradient(90deg,#0036fa,#4e87fc);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pg-idroll__name { color:#6b7180; transition:color 0.3s ease; }
.pg-idroll__step:hover .pg-idroll__name { color:#0036fa; }

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

/* --- scroll-reveal (site motion language) --- */
.pg-idroll__head, .pg-idroll__step {
  opacity:0; transform:translateY(16px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.pg-idroll__head.is-in, .pg-idroll__step.is-in { opacity:1; transform:none; }
.pg-idroll__step.is-in:nth-child(1) { transition-delay:0.06s; }
.pg-idroll__step.is-in:nth-child(2) { transition-delay:0.14s; }
.pg-idroll__step.is-in:nth-child(3) { transition-delay:0.22s; }
.pg-idroll__step.is-in:nth-child(4) { transition-delay:0.30s; }

@media (prefers-reduced-motion: reduce) {
  .pg-idroll__head, .pg-idroll__step, .pg-idroll__node { opacity:1; transform:none; transition:none; }
  .pg-idroll__fill { width:100%; transition:none; }
}

@media (max-width:1040px) {
  .pg-idroll { padding:80px 0; }
  .pg-idroll__inner { padding:0 24px; }
  .pg-idroll__title { font-size:34px; }
  .pg-idroll__line, .pg-idroll__fill { display:none; }
  .pg-idroll__steps { grid-template-columns:1fr 1fr; gap:32px 40px; }
}
@media (max-width:600px) {
  .pg-idroll__title { font-size:28px; }
  .pg-idroll__steps { grid-template-columns:1fr; }
}