/* Shared Tech Stack Chains — used by both services-blockchain and technology pages */

.sjp-tech-chain-section-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: "Noto Sans JP";
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
  line-height: 23.8px;
  color: #1E40AF;
  background: #EFF6FF;
  height: 40px;
  padding: 0 22px;
  border-radius: 999px;
  width: fit-content;
  margin-bottom: 18px;
}

.sjp-tech-chain-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0;
  margin-bottom: 18px;
  overflow: hidden;
}
.sjp-tech-chain-grid__track {
  overflow-x: hidden;
  overflow-y: visible;
}
.sjp-tech-chain-grid__inner {
  display: flex;
  gap: 16px;
  padding: 4px 0;
  width: max-content;
}
.sjp-tech-chain-grid__track--ltr .sjp-tech-chain-grid__inner {
  animation: sjp-tech-marquee-ltr 38s linear infinite;
}
.sjp-tech-chain-grid__track--rtl .sjp-tech-chain-grid__inner {
  animation: sjp-tech-marquee-rtl 38s linear infinite;
}
.sjp-tech-chain-grid:hover .sjp-tech-chain-grid__inner {
  animation-play-state: paused;
}
@keyframes sjp-tech-marquee-ltr {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes sjp-tech-marquee-rtl {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
.sjp-tech-chain-card {
  background: #fff; border-radius: 12px;
  padding: 28px 22px; height: 132px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  border: 1px solid #E2E8F0;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.sjp-tech-chain-grid .sjp-tech-chain-card {
  flex: 0 0 auto;
  width: 180px;
}
.sjp-tech-chain-grid .sjp-tech-chain-card:hover {
  transform: none;
  background: #F8FAFC;
  border-color: #BFDBFE;
}
.sjp-tech-chain-grid .sjp-tech-chain-card:hover .sjp-tech-chain-logo {
  transform: translateY(-4px);
}
.sjp-tech-chain-logo-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.sjp-tech-chain-logo {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto; object-fit: contain;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.sjp-tech-chain-card:hover .sjp-tech-chain-logo { transform: scale(1.05); }

.sjp-tech-chain-grid--private {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
.sjp-tech-chain-grid--private .sjp-tech-chain-card {
  width: auto;
}
.sjp-tech-chain-grid--private .sjp-tech-chain-card:hover {
  transform: translateY(-3px);
  background: #F8FAFC;
  border-color: #BFDBFE;
}

/* Responsive */
@media (max-width: 1024px) {
  .sjp-tech-chain-grid--private { gap: 48px; }
}

@media (max-width: 768px) {
  .sjp-tech-chain-grid--private { gap: 32px; }

  .sjp-tech-chain-grid {
    padding: 4px 0;
  }
  .sjp-tech-chain-grid__track {
    margin: 0 -16px;
    padding: 0 16px;
  }
  .sjp-tech-chain-grid__inner {
    gap: 12px;
  }
  .sjp-tech-chain-grid .sjp-tech-chain-card {
    height: 100px;
    padding: 20px 16px;
  }
  .sjp-tech-chain-grid--private {
    flex-direction: column;
    align-items: center;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .sjp-tech-chain-grid .sjp-tech-chain-card {
    height: 90px;
    padding: 16px 12px;
  }
}