:root {
  --brand-orange: #FC6539;
  --brand-gold: #FDB016;
  --bg-dark: #f9f9f9; /* Futuristic depth */
}

.nexus-wrapper {
  background: var(--bg-dark);
  padding: 80px 20px;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}

.nexus-container {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}

/* The Originator Styling */
.nexus-anchor {
  position: relative;
  min-width: 200px;
  text-align: center;
}

.nexus-label {
  display: block;
  font-size: 10px;
  letter-spacing: 5px;
  text-uppercase: uppercase;
  color: var(--brand-gold);
  margin-bottom: 20px;
  opacity: 0.8;
}

.anchor-glow img {
  width: 140px;
  transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Horizontal Stream */
.nexus-stream {
  display: flex;
  flex-grow: 1;
  gap: 40px;
  border-left: 1px solid rgba(255,255,255,0.1);
  padding-left: 60px;
}

.nexus-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.group-header {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: #666;
  transform: rotate(-90deg) translateX(-40px);
  position: absolute;
  left: -50px;
  top: 50%;
}

.group-nodes {
  display: flex;
  gap: 20px;
}

/* The "Node" - Floating Futuristic Card */
.node {
  position: relative;
  width: 160px;
  height: 100px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: all 0.4s ease;
  overflow: hidden;
}

.node img {
  width: 90%;
  filter: grayscale(1) brightness(1.5);
  transition: 0.4s;
  z-index: 2;
}

/* Kinetic Orbit Effect */
.node-orbit {
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: -100%;
  background: linear-gradient(90deg, transparent, var(--brand-orange), var(--brand-gold), transparent);
  transition: 0.6s;
}

.node:hover {
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-5px);
  border-color: var(--brand-orange);
}

.node:hover img {
  filter: grayscale(0) brightness(1);
  transform: scale(1.1);
}

.node:hover .node-orbit {
  left: 100%;
}

/* Responsiveness: Stack to Vertical on Mobile */
@media (max-width: 992px) {
  .nexus-container { flex-direction: column; }
  .nexus-stream { 
    flex-direction: column; 
    border-left: none; 
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 40px;
    padding-left: 0;
  }
  .group-header {
    transform: none;
    position: relative;
    left: 0;
    margin-bottom: 10px;
    text-align: center;
  }
  .group-nodes { justify-content: center; flex-wrap: wrap; }
}