.ourtech-strand-wrapper {
  position: absolute;            
  top: 110px;                    
  left: 0;
  width: 100%;
  height: 700px;
  z-index: 2;                    
  pointer-events: none;
  overflow: visible;
}

.ourtech-strand {
  position: absolute;
  left: 0;
  width: 100vw;                     
  height: 700px;
  transform: none;                  
  display: block;
  pointer-events: none;
   transform: translateX(0%);    
}

.ourtech-strand path {
  stroke: url(#neuralCyberGradient);        
  stroke-linecap: round;                    
  stroke-width: 2;                          
  opacity: 0.8;                             
  fill: none;                               
  stroke-dasharray: 2000;                   
  stroke-dashoffset: 2000;                  
  
}

.ourtech-strand path.pulse-strand {
  stroke-width: 4;                          
  
}

.animate-strands .ourtech-strand path {
  animation: strandFlow 7s linear forwards;   
}

.animate-strands .ourtech-strand path.pulse-strand {
  animation: strandFlow 9s ease-in-out forwards;  
}

@keyframes strandFlow {
  0%   { stroke-dashoffset: 2000; }         
  100% { stroke-dashoffset: 0; }            
}

.pulse-dot {
  fill: #2fc646;
  stroke: #2fc646;
  r: 6;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 1s ease;
  vector-effect: non-scaling-stroke; 
}

.pulse-dot.revealed {
  opacity: 1;
  transform: scale(1);
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0%, 100% { r: 6; opacity: 1; }
  50%      { r: 9; opacity: 0.5; }
}

.neural-node {
  position: absolute;
  transform: translate(-50%, -50%);     
  z-index: 2;
}

.pulse {
  width: 16px;
  height: 16px;
  background: #003366;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(0, 51, 102, 0.5);
  animation: nodePulse 3s infinite;
}

@keyframes nodePulse {
  0%, 100% {
    box-shadow: 0 0 6px rgba(0, 51, 102, 0.3);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 16px rgba(0, 51, 102, 0.7);
    transform: scale(1.2);
  }
}

.connector-lines-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600%;                         
  height: 100%;
  z-index: 4;                            
  pointer-events: none;
}

.connector-line {
  stroke: rgba(47, 198, 70, 0.3);        
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 1;
  filter:
    drop-shadow(0 0 2px rgba(47, 198, 70, 0.12))
    drop-shadow(0 0 6px rgba(47, 198, 70, 0.08))
    drop-shadow(0 0 12px rgba(47, 198, 70, 0.05));
}

.connector-line.animate-glow {
  animation: connectorGlowPulse 3s ease-in-out infinite;
}

@keyframes connectorGlowPulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 2px rgba(47, 198, 70, 0.12))
      drop-shadow(0 0 6px rgba(47, 198, 70, 0.08))
      drop-shadow(0 0 12px rgba(47, 198, 70, 0.05));
  }
  50% {
    filter:
      drop-shadow(0 0 1px rgba(47, 198, 70, 0.06))
      drop-shadow(0 0 4px rgba(47, 198, 70, 0.04));
  }
}

.ourtech-slim-card,
.pulse-dot,
.connector-line {
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.connector-line {
  transform: none; 
  transition: opacity 0.6s ease-in-out;
}

.ourtech-slim-card.revealed,
.pulse-dot.revealed {
  opacity: 1;
  transform: scale(1);
}

.connector-line.revealed {
  opacity: 1;
}

#our-tech .ourtech-particles {
  position: absolute;
  inset: 0; 
  pointer-events: none;
  mix-blend-mode: screen;
  overflow: hidden;
  z-index: 3;
}

#our-tech .ourtech-particles div {
  transition: opacity 0.6s ease;
  mix-blend-mode: screen;              
}

@media (max-width: 768px) {
  .ourtech-strand-wrapper {
    height: 560px;
    top: 120px;
  }

  .ourtech-strand {
    width: 110%;
    height: 560px;
    transform: translateX(-5%);
  }

  .connector-lines-svg {
    width: 100%;
  }

  .pulse-dot {
    r: 6 !important;
    transform: scale(1) !important;
    animation: pulse 1.5s ease-in-out infinite;
  }
}