@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Orbitron:wght@400;600;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap');

.svpa-proc{
  --svpa-proc-bg:#0a0a0a;
  --svpa-proc-red:#e31010;
  --svpa-proc-white:#ffffff;
  --svpa-proc-label-color:#e31010;
  --svpa-proc-h2-color:#ffffff;
  --svpa-proc-em-color:#e31010;
  --svpa-proc-sub-color:rgba(255,255,255,.73);
  --svpa-proc-wrap-max:1340px;

  --svpa-proc-icon-size:72px;
  --svpa-proc-icon-bg:rgba(255,255,255,.04);
  --svpa-proc-icon-border:rgba(255,255,255,.08);
  --svpa-proc-icon-stroke:rgba(255,255,255,.6);
  --svpa-proc-icon-hover-bg:rgba(227,16,16,.12);
  --svpa-proc-icon-hover-border:#e31010;
  --svpa-proc-icon-hover-stroke:#ffffff;
  --svpa-proc-icon-glow:rgba(227,16,16,.28);

  --svpa-proc-badge-bg:#e31010;
  --svpa-proc-badge-color:#ffffff;

  --svpa-proc-name-color:rgba(255,255,255,.75);
  --svpa-proc-desc-color:rgba(255,255,255,.53);
  --svpa-proc-name-hover-color:#ffffff;

  --svpa-proc-ease:cubic-bezier(.16,1,.3,1);

  padding:120px 0;
  background:var(--svpa-proc-bg);
  font-family:'Rajdhani',sans-serif;
  color:var(--svpa-proc-white);
}
.svpa-proc *,
.svpa-proc *::before,
.svpa-proc *::after{box-sizing:border-box;}

.svpa-proc-wrap{ max-width:var(--svpa-proc-wrap-max); margin:0 auto; padding:0 28px; }
.svpa-proc-label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:'Orbitron',monospace;
  font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--svpa-proc-label-color);
  margin:0 0 12px;
}
.svpa-proc-label::before{
  content:''; width:22px; height:1px;
  background:var(--svpa-proc-label-color);
}
/* Centered header layout — wrap the label in the same centered block as the H2 */
.svpa-proc-wrap{ text-align:center; }
.svpa-proc-h2{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.2rem,4vw,4rem);
  letter-spacing:3px;
  color:var(--svpa-proc-h2-color);
  text-align:center;margin:0 0 16px;
}
.svpa-proc-h2 em{ color:var(--svpa-proc-em-color); font-style:normal; }
.svpa-proc-sub{
  text-align:center;
  font-size:.9rem;font-weight:400;
  color:var(--svpa-proc-sub-color);
  margin:0 auto 72px;max-width:500px;
}

.svpa-proc-timeline{
  display:grid;
  grid-template-columns:repeat(var(--svpa-proc-cols,5),1fr);
  position:relative;
  gap:0;
}

.svpa-proc-step{
  display:flex;flex-direction:column;align-items:center;
  gap:16px;
  padding:0 12px;
  position:relative;z-index:1;
}
.svpa-proc-icon-wrap{
  width:var(--svpa-proc-icon-size);
  height:var(--svpa-proc-icon-size);
  background:var(--svpa-proc-icon-bg);
  border:1px solid var(--svpa-proc-icon-border);
  color:var(--svpa-proc-icon-stroke) !important;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  transition:background .3s ease,border-color .3s ease,transform .3s ease,box-shadow .3s ease,color .3s ease;
}
.svpa-proc-step:hover .svpa-proc-icon-wrap{
  background:var(--svpa-proc-icon-hover-bg);
  border-color:var(--svpa-proc-icon-hover-border);
  box-shadow:0 0 20px var(--svpa-proc-icon-glow);
}
.svpa-proc.svpa-proc-scale-on .svpa-proc-step:hover .svpa-proc-icon-wrap{
  transform:scale(1.1);
}
.svpa-proc-icon-wrap::before{
  content:attr(data-n);
  position:absolute;top:-10px;right:-10px;
  width:20px;height:20px;
  background:var(--svpa-proc-badge-bg);
  font-family:'Orbitron',monospace;
  font-size:.55rem;font-weight:700;letter-spacing:.05em;
  color:var(--svpa-proc-badge-color);
  display:flex;align-items:center;justify-content:center;
}
/* Icons: color cascades via .svpa-proc-icon-wrap's color property.
   Inline SVGs (FA solid) use currentColor for fill; outline SVGs use currentColor for stroke.
   Hardcoded fill/stroke in custom-uploaded SVGs are forced to currentColor too,
   except explicit "none"/"transparent" (outline icons stay hollow). */
.svpa-proc-icon-wrap svg{
  width:var(--svpa-proc-icon-glyph-size,28px);
  height:var(--svpa-proc-icon-glyph-size,28px);
  stroke-width:var(--svpa-proc-icon-stroke-width,1.5);
}
.svpa-proc-icon-wrap i,
.svpa-proc-icon-wrap i::before{
  font-size:28px;
  color:var(--svpa-proc-icon-stroke) !important;
  transition:color .3s ease;
}
.svpa-proc-icon-wrap svg:not([fill="none"]):not([fill="transparent"]){fill:currentColor !important;}
.svpa-proc-icon-wrap svg[stroke]:not([stroke="none"]):not([stroke="transparent"]){stroke:currentColor !important;}
.svpa-proc-icon-wrap svg [fill]:not([fill="none"]):not([fill="transparent"]){fill:currentColor !important;}
.svpa-proc-icon-wrap svg [stroke]:not([stroke="none"]):not([stroke="transparent"]){stroke:currentColor !important;}

.svpa-proc-step:hover .svpa-proc-icon-wrap{ color:var(--svpa-proc-icon-hover-stroke) !important; }
.svpa-proc-step:hover .svpa-proc-icon-wrap i,
.svpa-proc-step:hover .svpa-proc-icon-wrap i::before{ color:var(--svpa-proc-icon-hover-stroke) !important; }
.svpa-proc-icon-wrap svg [stroke]:not([stroke="none"]):not([stroke="transparent"]){stroke:currentColor;}

.svpa-proc-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:1rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--svpa-proc-name-color);
  text-align:center;
  transition:color .3s;
}
.svpa-proc-desc{
  font-size:.9rem;font-weight:400;
  color:var(--svpa-proc-desc-color);
  text-align:center;line-height:1.6;
  transition:color .3s;
}
.svpa-proc-step:hover .svpa-proc-name{ color:var(--svpa-proc-name-hover-color); }

/* Reveal */
.svpa-proc-sr{opacity:0;transform:translateY(36px);transition:opacity .7s var(--svpa-proc-ease),transform .7s var(--svpa-proc-ease);}
.svpa-proc.svpa-proc-vis .svpa-proc-sr{opacity:1;transform:none;}
.svpa-proc-d1{transition-delay:.08s;} .svpa-proc-d2{transition-delay:.16s;}
.svpa-proc-d3{transition-delay:.24s;} .svpa-proc-d4{transition-delay:.32s;}
.svpa-proc-d5{transition-delay:.4s;}  .svpa-proc-d6{transition-delay:.48s;}

@media (max-width:880px){
  .svpa-proc-timeline{ grid-template-columns:repeat(2,1fr); gap:48px 0; }
  .svpa-proc{ padding:80px 0; }
}
@media (max-width:520px){
  .svpa-proc-timeline{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){
  .svpa-proc *{ transition:none !important; animation:none !important; }
  .svpa-proc-sr{ opacity:1; transform:none; }
}