:root {
   --primary: 262 83% 58%;
   --accent: 280 65% 60%;
   --primary-color: hsl(262, 83%, 58%);
   --accent-color: hsl(280, 65%, 60%);
 }

 .connector-container {
   display: flex;
   justify-content: center;
   padding: 1.5rem 0;
   position: relative;
   padding-bottom: 7px;
 }

 .connector-line {
   width: 4px;
   height: 6rem;
   background: linear-gradient(to bottom, hsl(var(--primary)), hsl(var(--accent)), transparent);
   border-radius: 9999px;
   position: relative;
   overflow: hidden;
 }

 .connector-fill {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, hsl(var(--primary)), hsl(var(--accent)));
   transform: scaleY(0);
   transform-origin: top;
   transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
 }

 .connector-dot {
   position: absolute;
   width: 0.75rem;
   height: 0.75rem;
   background: hsl(var(--primary));
   border-radius: 50%;
   left: -0.25rem;
   bottom: -0.375rem;
   box-shadow: 0 4px 12px hsl(var(--primary) / 0.5);
   opacity: 0;
   transform: scale(0);
   transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 }

 .connector-container.visible .connector-fill {
   transform: scaleY(1);
 }

 .connector-container.visible .connector-dot {
   opacity: 1;
   transform: scale(1);
   transition-delay: 0.8s;
 }