.elementor-5781 .elementor-element.elementor-element-75fb194d{--display:flex;}.elementor-5781 .elementor-element.elementor-element-75fb194d.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-5781 .elementor-element.elementor-element-233eb819{--display:flex;}.elementor-5781 .elementor-element.elementor-element-74041cbf{--display:flex;}.elementor-5781 .elementor-element.elementor-element-1e779631{--display:flex;}.elementor-5781 .elementor-element.elementor-element-c775d79{--display:flex;}.elementor-5781 .elementor-element.elementor-element-263fca76{--display:flex;--z-index:99;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Inter;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-5781 .elementor-element.elementor-element-57059bdd .elementor-heading-title{font-family:"Inter", Inter;font-weight:700;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Inter;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5781 .elementor-element.elementor-element-26563adb{--display:flex;}.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:var( --e-global-color-text );}.elementor-widget-icon-list .elementor-icon-list-icon i{color:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-family:var( --e-global-typography-text-font-family ), Inter;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );text-transform:var( --e-global-typography-text-text-transform );font-style:var( --e-global-typography-text-font-style );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-icon-list .elementor-icon-list-text{color:var( --e-global-color-secondary );}.elementor-5781 .elementor-element.elementor-element-4205b2f3 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-5781 .elementor-element.elementor-element-4205b2f3 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-5781 .elementor-element.elementor-element-4205b2f3{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-5781 .elementor-element.elementor-element-4205b2f3 .elementor-icon-list-text{transition:color 0.3s;}.elementor-5781 .elementor-element.elementor-element-db9e1ad{--display:flex;--z-index:99;}.elementor-5781 .elementor-element.elementor-element-6a1046ce{--display:flex;}.elementor-5781 .elementor-element.elementor-element-4f9e6e92{--display:flex;}.elementor-5781 .elementor-element.elementor-element-13d06acd{--display:flex;}.elementor-5781 .elementor-element.elementor-element-577de887{--display:flex;}.elementor-5781 .elementor-element.elementor-element-43857d85 .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-5781 .elementor-element.elementor-element-43857d85 .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-5781 .elementor-element.elementor-element-43857d85{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-5781 .elementor-element.elementor-element-43857d85 .elementor-icon-list-text{transition:color 0.3s;}.elementor-5781 .elementor-element.elementor-element-2cc97706{--display:flex;}.elementor-5781 .elementor-element.elementor-element-3af5b0ec{--display:flex;}.elementor-5781 .elementor-element.elementor-element-4d54e22{--display:flex;}.elementor-5781 .elementor-element.elementor-element-6f4d11fd{--display:flex;}.elementor-5781 .elementor-element.elementor-element-30007dce .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-5781 .elementor-element.elementor-element-30007dce .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-5781 .elementor-element.elementor-element-30007dce{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-5781 .elementor-element.elementor-element-30007dce .elementor-icon-list-text{transition:color 0.3s;}.elementor-5781 .elementor-element.elementor-element-5dd04a35{--display:flex;}.elementor-5781 .elementor-element.elementor-element-13ce2478{--display:flex;}.elementor-5781 .elementor-element.elementor-element-1c5eb9ad .elementor-icon-list-icon i{transition:color 0.3s;}.elementor-5781 .elementor-element.elementor-element-1c5eb9ad .elementor-icon-list-icon svg{transition:fill 0.3s;}.elementor-5781 .elementor-element.elementor-element-1c5eb9ad{--e-icon-list-icon-size:14px;--icon-vertical-offset:0px;}.elementor-5781 .elementor-element.elementor-element-1c5eb9ad .elementor-icon-list-text{transition:color 0.3s;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-5781 .elementor-element.elementor-element-75fb194d{--width:100.737%;}}@media(max-width:1024px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:767px){.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-widget-icon-list .elementor-icon-list-item > .elementor-icon-list-text, .elementor-widget-icon-list .elementor-icon-list-item > a{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}/* Start custom CSS *//* ==========================================================================
   1. MAIN WRAPPER & CSS VARIABLES
   ========================================================================== */
#pipeline {
  /* Brand Colors */
  --sj-cobalt: #0047AB;
  --sj-teal: #00BFA5;
  --sj-teal-bright: #2FD4BD;
  --sj-navy-deep: #071426;
  
  /* Gradients & Animations */
  --sj-grad: linear-gradient(98deg, #00BFA5 -30%, #0047AB 48%);
  --sj-ease: cubic-bezier(.22, .61, .21, 1);
  
  /* Layout Sizing (Responsive using clamp) */
  --sj-gutter: clamp(1.25rem, 4vw, 2.5rem);
  --sj-gap: clamp(1.25rem, 2vw, 2rem);
  --sj-card-w: min(330px, 78vw);
  --sj-rail-top: 45px;
  --sj-runway: 250svh; /* Height used for scroll animations */
  --sj-win: 16%;
  
  /* UI Element Colors */
  --sj-line: rgba(255, 255, 255, .12);
  --sj-card-bd: rgba(255, 255, 255, .11);
  --sj-card-bg: rgba(255, 255, 255, .045);
  --sj-live-bd: rgba(0, 191, 165, .55);
  --sj-live-bg: rgba(0, 191, 165, .06);
  
  /* Base Setup */
  color-scheme: dark;
  position: relative;
  height: auto;
  background: var(--sj-navy-deep);
  color: #fff;
  isolation: isolate;
  
  /* Setup for native scroll-timeline animations */
  view-timeline-name: --sjPipe;
  view-timeline-axis: block;
}

/* ==========================================================================
   2. ELEMENTOR RESETS
   Cleans up default padding/margins from the page builder
   ========================================================================== */
#pipeline,
#pipeline .e-con {
  padding: 0;
  gap: 0;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --padding-block-start: 0px;
  --padding-block-end: 0px;
  --padding-inline-start: 0px;
  --padding-inline-end: 0px;
  --margin-block-start: 0px;
  --margin-block-end: 0px;
  --margin-inline-start: 0px;
  --margin-inline-end: 0px;
  --border-radius: 0;
  min-height: 0;
}

#pipeline .elementor-widget,
#pipeline .elementor-widget-container {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}

#pipeline .elementor-widget:not(:last-child) {
  margin-block-end: 0;
}

#pipeline .e-con > .elementor-background-overlay {
  display: none;
}

/* ==========================================================================
   3. BACKGROUND & HEADER TYPOGRAPHY
   ========================================================================== */
#pipeline .sj-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center !important ;
  /*padding-block: clamp(8.5rem, 8vh, 5.5rem);*/
  gap: clamp(1.5rem, 3vh, 2.5rem);
  overflow: clip;
  height: 100vh !important;
}
@media screen and (max-width: 1023px) {
  #pipeline .sj-stage {
    
        height: 75vh !important;
        gap: 0px !important;
        padding: 10px !important;

  }
}


/* ==========================================================================
   4. PIPELINE TRACK & RAILS (The horizontal scrolling area)
   ========================================================================== */
#pipeline .sj-track-wrap {
  position: relative;
  container-type: inline-size;
}

/* The horizontal line connecting the steps */
#pipeline .sj-rail {
  position: absolute;
  inset: calc(var(--sj-rail-top) - 1px) var(--sj-gutter) auto var(--sj-gutter);
  height: 2px;
  background: var(--sj-line);
  container-type: inline-size;
  pointer-events: none;
  z-index: 0;
  display: none; /* Hidden by default, shown on desktop */
}

/* The animated progress fill on the rail */
#pipeline .sj-rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sj-teal);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

/* The glowing dot that moves along the rail */
#pipeline .sj-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: var(--sj-teal-bright);
  box-shadow: 0 0 0 5px rgba(0, 191, 165, .22), 0 0 24px rgba(0, 191, 165, .85);
  transform: translateX(0);
}

/* The container holding the individual step cards */
#pipeline .sj-track {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--sj-gap);
  width: max-content;
  max-width: none;
  padding-inline: var(--sj-gutter);
  margin: 0;
  list-style: none;
  counter-reset: sj; /* Prepares CSS counter for numbering */
}

/* ==========================================================================
   5. INDIVIDUAL PIPELINE CARDS (Steps)
   ========================================================================== */
#pipeline .pstep {
  flex: 0 0 auto;
  width: var(--sj-card-w);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  counter-increment: sj; /* Increments step number */
  background: var(--sj-card-bg);
  border: 1px solid var(--sj-card-bd);
  border-radius: 20px;
  padding: 1.5rem;
  scroll-snap-align: center;
}

/* Assigning index variables for staggered animations */
#pipeline .pstep:nth-child(1) { --i: 0; }
#pipeline .pstep:nth-child(2) { --i: 1; }
#pipeline .pstep:nth-child(3) { --i: 2; }
#pipeline .pstep:nth-child(4) { --i: 3; }
#pipeline .pstep:nth-child(5) { --i: 4; }
#pipeline .pstep:nth-child(6) { --i: 5; }

/* The circular number badge on each card */
#pipeline .pstep::before {
  content: counter(sj);
  position: static;
  inset: auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  margin: 0 0 1rem;
  padding: 0;
  border-radius: 50%;
  font-size: .95rem;
  font-weight: 800;
  line-height: 1;
  color: var(--sj-navy-deep);
  background-color: var(--sj-teal);
  border: 1.5px solid var(--sj-teal);
  opacity: 1;
  transform: none;
  filter: none;
  mix-blend-mode: normal;
  z-index: auto;
}

#pipeline .pstep .sj-card-title .elementor-heading-title,
#pipeline .pstep h3 {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.12;
  margin-bottom: .45rem;
  color: #fff;
  text-wrap: balance;
}

#pipeline .pstep .sj-card-body p,
#pipeline .pstep .sj-card-body {
  font-size: .92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  text-wrap: pretty;
}

#pipeline .pstep .sj-card-body {
  margin-bottom: 1.1rem;
}

/* ==========================================================================
   6. CARD VISUALIZATIONS (Graphs, Chat, Code Blocks inside cards)
   ========================================================================== */
#pipeline .pstep-viz {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 66px;
  margin-top: auto;
}

#pipeline .pstep-viz > .elementor-widget {
  flex: 1 1 auto;
  min-width: 0;
}

/* Score/Progress Bar Visualization */
#pipeline .pv-score {
  gap: .8rem;
  width: 100%;
}

#pipeline .pv-score > .pv-num {
  flex: 0 0 auto;
}

#pipeline .pv-track {
  position: relative;
  flex: 1;
  height: 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

#pipeline .pv-track::before {
  content: "";
  position: absolute;
  inset: 0 4% 0 0;
  border-radius: inherit;
  background: var(--sj-grad);
  transform-origin: 0 50%;
  transform: scaleX(1); /* Defaults to 1 for mobile/no-js */
}

#pipeline .pv-num .elementor-heading-title,
#pipeline .pv-num {
  font-size: .86rem;
  font-weight: 700;
  white-space: nowrap;
  color: var(--sj-teal-bright);
  font-variant-numeric: tabular-nums;
}

/* Pill/Board tags */
#pipeline .pv-boards .elementor-icon-list-items {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  padding: 0;
}

#pipeline .pv-boards .elementor-icon-list-item {
  margin: 0;
  padding: .4em .85em;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  border-radius: 999px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .14);
}

#pipeline .pv-boards .elementor-icon-list-icon { display: none; }

/* Audio/Waveform Visualization */
#pipeline .pv-wave .elementor-icon-list-items {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  margin: 0;
  padding: 0;
}

#pipeline .pv-wave .elementor-icon-list-item {
  width: 4.5px;
  margin: 0;
  padding: 0;
  font-size: 0;
  border-radius: 3px;
  background: rgba(47, 212, 189, .75);
  height: 22%;
  opacity: 1;
  transform-origin: 50% 50%;
  animation: sj-wave 1.35s ease-in-out infinite;
}

#pipeline .pv-wave .elementor-icon-list-icon { display: none; }

/* Staggering the waveform heights and animations */
#pipeline .pv-wave li:nth-child(2n) { height: 58%; animation-delay: .12s; }
#pipeline .pv-wave li:nth-child(3n) { height: 36%; animation-delay: .24s; }
#pipeline .pv-wave li:nth-child(4n) { height: 78%; animation-delay: .36s; }
#pipeline .pv-wave li:nth-child(5n) { height: 48%; animation-delay: .48s; }

/* Code Block Visualization */
#pipeline .pv-code code {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  background: rgba(2, 10, 22, .55);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: .7em .9em;
}

#pipeline .pv-code code span {
  color: var(--sj-teal-bright);
  font-weight: 700;
}

/* Chat Bubble Visualization */
#pipeline .pv-chat .elementor-icon-list-items {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  width: 100%;
  margin: 0;
  padding: 0;
}

#pipeline .pv-chat .elementor-icon-list-item {
  margin: 0;
  padding: .5em .8em;
  width: fit-content;
  max-width: 100%;
  font-size: .75rem;
  line-height: 1.45;
  color: #fff;
  border-radius: 10px 10px 10px 3px;
  background: rgba(255, 255, 255, .09);
}

#pipeline .pv-chat .elementor-icon-list-icon { display: none; }

/* The second chat bubble (reply) is aligned right and colored differently */
#pipeline .pv-chat li:nth-child(2) {
  align-self: flex-end;
  border-radius: 10px 10px 3px 10px;
  background: rgba(0, 191, 165, .16);
  color: var(--sj-teal-bright);
  font-weight: 600;
}

/* Ranking Bar Chart Visualization */
#pipeline .pv-rank .elementor-icon-list-items {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  height: 56px;
  margin: 0;
  padding: 0;
}

#pipeline .pv-rank .elementor-icon-list-item {
  width: 44px;
  height: var(--v);
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: .25em 0 0;
  border-radius: 7px 7px 3px 3px;
  background: rgba(255, 255, 255, .14);
  font-size: .75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  transform-origin: 50% 100%;
}

#pipeline .pv-rank .elementor-icon-list-icon { display: none; }

/* Individual bar heights */
#pipeline .pv-rank li:nth-child(1) { --v: 96%; background: rgba(0, 191, 165, .30); color: var(--sj-teal-bright); }
#pipeline .pv-rank li:nth-child(2) { --v: 93%; }
#pipeline .pv-rank li:nth-child(3) { --v: 91%; }

/* ==========================================================================
   7. UTILITIES & ANIMATION KEYFRAMES
   ========================================================================== */
#pipeline .sj-note {
  padding-inline: var(--sj-gutter);
  text-align: center;
}

/* Pulsing notification dot */
#pipeline .sj-note p {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65em;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
}

#pipeline .sj-note p::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--sj-teal);
}

#pipeline .sj-note p::after {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--sj-teal);
  opacity: 0;
  animation: sj-pulse 2.2s var(--sj-ease) infinite;
}

/* Mobile Scroll Wrap Styles */
#pipeline .sj-track-wrap:focus-visible {
  outline: 2.5px solid var(--sj-teal-bright);
  outline-offset: 4px;
  border-radius: 12px;
}

#pipeline .sj-track-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--sj-gutter);
  padding-bottom: .75rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}

/* Keyframes */
@keyframes sj-pulse {
  0% { transform: scale(.5); opacity: .9; }
  70% { transform: scale(1.4); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes sj-wave {
  50% { transform: scaleY(1.9); }
}

@keyframes sj-slide {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(100cqw - 100%), 0, 0); }
}

@keyframes sj-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes sj-run {
  from { transform: translateX(0); }
  to { transform: translateX(100cqw); }
}

@keyframes sj-grow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

@keyframes sj-card {
  0%, 100% { border-color: var(--sj-card-bd); background-color: var(--sj-card-bg); }
  22%, 78% { border-color: var(--sj-live-bd); background-color: var(--sj-live-bg); }
}

@keyframes sj-badge {
  0%, 100% { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
  22%, 78% { background-color: var(--sj-teal); border-color: var(--sj-teal); color: var(--sj-navy-deep); }
}

@keyframes sj-lit {
  0%, 100% { opacity: .4; }
  22%, 78% { opacity: 1; }
}

/* Edge cases for first and last cards to hold state */
@keyframes sj-card-first {
  0%, 78% { border-color: var(--sj-live-bd); background-color: var(--sj-live-bg); }
  100% { border-color: var(--sj-card-bd); background-color: var(--sj-card-bg); }
}

@keyframes sj-card-last {
  0% { border-color: var(--sj-card-bd); background-color: var(--sj-card-bg); }
  22%, 100% { border-color: var(--sj-live-bd); background-color: var(--sj-live-bg); }
}

@keyframes sj-badge-first {
  0%, 78% { background-color: var(--sj-teal); border-color: var(--sj-teal); color: var(--sj-navy-deep); }
  100% { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
}

@keyframes sj-badge-last {
  0% { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); color: #fff; }
  22%, 100% { background-color: var(--sj-teal); border-color: var(--sj-teal); color: var(--sj-navy-deep); }
}

/* ==========================================================================
   8. MODERN SCROLL-DRIVEN ANIMATIONS (Chrome 115+)
   Activates horizontal scrolling based on vertical page scroll
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    #pipeline { height: var(--sj-runway); }
    #pipeline .sj-stage { position: sticky; top: 0; height: 100svh; }
    #pipeline .sj-track-wrap { overflow-x: clip; overflow-y: visible; scroll-snap-type: none; padding-bottom: 0; }
    #pipeline .pstep { scroll-snap-align: none; }
    #pipeline .sj-rail { display: block; }
    
    /* Connects the horizontal slide to the page scroll */
    #pipeline .sj-track {
      will-change: transform;
      animation: sj-slide linear both;
      animation-timeline: --sjPipe;
      animation-range: contain 0% contain 100%;
    }
    
    #pipeline .sj-rail::before {
      animation: sj-fill linear both;
      animation-timeline: --sjPipe;
      animation-range: contain 0% contain 100%;
    }
    
    #pipeline .sj-rail::after {
      animation: sj-run linear both;
      animation-timeline: --sjPipe;
      animation-range: contain 0% contain 100%;
    }
    
    /* Applies calculated timelines to cards based on their --i variable */
    #pipeline .pstep,
    #pipeline .pstep::before {
      animation-timeline: --sjPipe;
      animation-range: contain calc(var(--i) * var(--sj-win)) contain calc(var(--i) * var(--sj-win) + 20%);
    }
    
    #pipeline .pstep { animation-name: sj-card; animation-timing-function: linear; animation-fill-mode: both; }
    #pipeline .pstep::before { animation-name: sj-badge; animation-timing-function: linear; animation-fill-mode: both; }
    #pipeline .pstep:first-child { animation-name: sj-card-first; }
    #pipeline .pstep:first-child::before { animation-name: sj-badge-first; }
    #pipeline .pstep:last-child { animation-name: sj-card-last; }
    #pipeline .pstep:last-child::before { animation-name: sj-badge-last; }
    
    #pipeline .pstep .pv-wave .elementor-icon-list-item {
      animation-name: sj-wave, sj-lit;
      animation-duration: 1.35s, auto;
      animation-timing-function: ease-in-out, linear;
      animation-iteration-count: infinite, 1;
      animation-fill-mode: none, both;
      animation-timeline: auto, --sjPipe;
      animation-range: normal, contain calc(var(--i) * var(--sj-win)) contain calc(var(--i) * var(--sj-win) + 20%);
    }
    
    #pipeline .pv-track::before {
      transform: scaleX(0);
      animation: sj-fill linear both;
      animation-timeline: --sjPipe;
      animation-range: contain calc(var(--i) * var(--sj-win) + 3%) contain calc(var(--i) * var(--sj-win) + 14%);
    }
    
    #pipeline .pv-rank .elementor-icon-list-item {
      transform: scaleY(0);
      animation: sj-grow linear both;
      animation-timeline: --sjPipe;
      animation-range: contain calc(var(--i) * var(--sj-win) + 3%) contain calc(var(--i) * var(--sj-win) + 15%);
    }
  }
}

/* ==========================================================================
   9. JAVASCRIPT FALLBACK (For Safari/Firefox that don't support animation-timeline)
   Expects a .sj-js class and --sj-p CSS variable to be updated by JS
   ========================================================================== */
@supports not (animation-timeline: view()) {
  @media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    #pipeline.sj-js { height: var(--sj-runway); }
    #pipeline.sj-js .sj-stage { position: sticky; top: 0; height: 100svh; }
    #pipeline.sj-js .sj-track-wrap { overflow-x: clip; overflow-y: visible; scroll-snap-type: none; padding-bottom: 0; }
    #pipeline.sj-js .pstep { scroll-snap-align: none; }
    #pipeline.sj-js .sj-rail { display: block; }
    
    /* Uses CSS variable --sj-p (percentage 0 to 1) updated via Javascript */
    #pipeline.sj-js .sj-track {
      will-change: transform;
      transform: translate3d(calc(var(--sj-p, 0) * (100cqw - 100%)), 0, 0);
    }
    
    #pipeline.sj-js .sj-rail::before { transform: scaleX(var(--sj-p, 0)); }
    #pipeline.sj-js .sj-rail::after { transform: translateX(calc(var(--sj-p, 0) * 100cqw)); }
    
    #pipeline.sj-js .pstep { transition: border-color .35s var(--sj-ease), background-color .35s var(--sj-ease); }
    #pipeline.sj-js .pstep.is-live { border-color: var(--sj-live-bd); background-color: var(--sj-live-bg); }
    
    #pipeline.sj-js .pstep::before {
      background-color: rgba(255, 255, 255, .08);
      border-color: rgba(255, 255, 255, .22);
      color: #fff;
      transition: background-color .35s, border-color .35s, color .35s;
    }
    
    #pipeline.sj-js .pstep.is-live::before {
      background-color: var(--sj-teal);
      border-color: var(--sj-teal);
      color: var(--sj-navy-deep);
    }
    
    #pipeline.sj-js .pv-track::before { transform: scaleX(0); transition: transform 1.1s var(--sj-ease); }
    #pipeline.sj-js .is-live .pv-track::before { transform: scaleX(1); }
    
    #pipeline.sj-js .pv-rank .elementor-icon-list-item { transform: scaleY(0); transition: transform .7s var(--sj-ease); }
    #pipeline.sj-js .is-live .pv-rank .elementor-icon-list-item { transform: scaleY(1); }
    
    #pipeline.sj-js .pv-wave .elementor-icon-list-item { opacity: .4; transition: opacity .35s; }
    #pipeline.sj-js .is-live .pv-wave .elementor-icon-list-item { opacity: 1; }
  }
}

/* ==========================================================================
   10. ACCESSIBILITY (Reduced Motion)
   Disables animations for users with motion sensitivity
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #pipeline { height: auto !important; }
  #pipeline .sj-stage { position: static !important; height: auto !important; }
  #pipeline .sj-track-wrap { overflow-x: auto !important; scroll-snap-type: x proximity; }
  #pipeline .sj-rail { display: none !important; }
  
  /* Kill all transitions and animations */
  #pipeline *,
  #pipeline *::before,
  #pipeline *::after {
    animation: none !important;
    transition-duration: .01ms !important;
  }
  
  #pipeline .sj-track { transform: none !important; }
  #pipeline .pv-track::before { transform: scaleX(1) !important; }
  #pipeline .pv-rank .elementor-icon-list-item { transform: none !important; }
  #pipeline .pv-wave .elementor-icon-list-item { opacity: 1 !important; }
  
  #pipeline .pstep::before {
    background-color: var(--sj-teal) !important;
    border-color: var(--sj-teal) !important;
    color: var(--sj-navy-deep) !important;
  }
  
  #pipeline .sj-note p::after { display: none; }
}/* End custom CSS */