/* Technology contract flow: local layout plus decorative SVG motion. */
#contracts .flow-steps.contract-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}
#contracts .contract-step {
  min-width: 0;
  padding: 27px 25px 28px;
  border: 1px solid #e4d6ed;
  border-radius: 19px;
  background: linear-gradient(145deg, #fff 0%, #fdfbff 65%, #f7f1fb 100%);
}
#contracts .contract-step-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
#contracts .contract-step-top b {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: .09em;
  color: #9b7baf;
}
#contracts .contract-step-arrow {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  border-radius: 50%;
  color: #a37abc;
  background: #f2eaf8;
  font-size: 16px;
  line-height: 1;
}
#contracts .contract-icon {
  width: 160px;
  max-width: 100%;
  aspect-ratio: 4 / 3;
  margin: 16px 0 22px;
}
#contracts .contract-icon-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
#contracts .contract-step h3 {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.22;
  letter-spacing: -.03em;
}
#contracts .contract-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}
.contract-icon .contract-motion {
  transform-box: fill-box;
  transform-origin: center;
  animation-play-state: running;
}
.contract-icon .contract-packet,
.contract-icon .contract-ack {
  animation: contract-delivery 5.6s linear infinite;
  animation-delay: var(--contract-delay, 0s);
}
.contract-icon .contract-ack { animation-name: contract-acknowledgment; }
.contract-icon .contract-code-trace { animation: contract-code-reveal 5.6s ease-in-out infinite; }
.contract-icon .contract-launch-halo { animation: contract-launch 5.6s ease-in-out infinite; }
.contract-icon .contract-scan { animation: contract-inspect 5.6s ease-in-out infinite; }
.contract-icon .contract-check-trace { animation: contract-check 5.6s ease-in-out infinite; stroke-dasharray: 48; }
.contract-icon .contract-verify-dot { animation: contract-indicator 5.6s ease-in-out infinite; }
.contract-icon .contract-compute { animation: contract-compute 5.6s ease-in-out infinite; }
.contract-icon .contract-replica-check { animation: contract-replica 5.6s ease-in-out infinite; animation-delay: var(--contract-delay, 0s); }

@keyframes contract-delivery {
  0%, 8% { opacity: 0; transform: translate(0, 0); }
  18% { opacity: 1; }
  55% { opacity: 1; }
  66%, 100% { opacity: 0; transform: translate(var(--contract-dx, 0px), var(--contract-dy, 0px)); }
}
@keyframes contract-acknowledgment {
  0%, 12% { opacity: 0; transform: translate(0, 0); }
  24%, 49% { opacity: .9; }
  64%, 100% { opacity: 0; transform: translate(var(--contract-dx, 0px), var(--contract-dy, 0px)); }
}
@keyframes contract-code-reveal {
  0%, 18%, 100% { opacity: .12; }
  38%, 58% { opacity: .9; }
  80% { opacity: .3; }
}
@keyframes contract-launch {
  0%, 48%, 100% { opacity: .22; transform: scale(.94); }
  65% { opacity: .8; transform: scale(1.13); }
  83% { opacity: .15; transform: scale(1.22); }
}
@keyframes contract-inspect {
  0%, 12%, 100% { opacity: 0; transform: translateY(-9px); }
  23% { opacity: .8; }
  54% { opacity: .8; transform: translateY(28px); }
  64%, 90% { opacity: 0; transform: translateY(28px); }
}
@keyframes contract-check {
  0%, 40%, 100% { opacity: 0; stroke-dashoffset: 48; }
  60%, 76% { opacity: 1; stroke-dashoffset: 0; }
  92% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes contract-indicator { 0%, 15%, 100% { opacity: .45; } 45%, 65% { opacity: 1; } }
@keyframes contract-compute { 0%, 15%, 100% { opacity: .75; transform: scale(.85); } 35%, 53% { opacity: 1; transform: scale(1.1); } 72% { opacity: .8; transform: scale(.94); } }
@keyframes contract-replica { 0%, 26%, 100% { opacity: .65; } 47%, 68% { opacity: 1; stroke: #ff6c00; } }

.contract-icon:not([data-icon-active="true"]) .contract-motion,
.motion-paused .contract-icon .contract-motion {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .contract-icon .contract-motion { animation-play-state: paused !important; }
}
@media (max-width: 1000px) {
  #contracts .flow-steps.contract-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  #contracts .contract-step { padding: 25px; }
}
@media (max-width: 560px) {
  #contracts .flow-steps.contract-steps { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  #contracts .contract-step { padding: 23px 24px 26px; }
  #contracts .contract-icon { margin-top: 11px; margin-bottom: 19px; }
}