.process-map {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
  background: linear-gradient(180deg, #f5f8fc 0%, #fff 100%);
}
.process-map::before {
  position: absolute;
  top: -10rem;
  right: -11rem;
  width: 31rem;
  height: 31rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(40 111 237 / 9%), transparent 68%);
  content: "";
  pointer-events: none;
}
.process-map__heading,
.process-map__lower {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(15rem, .6fr);
  gap: 2rem;
  align-items: end;
}
.process-map__heading { margin-bottom: 2.6rem; }
.process-map__heading h2 {
  max-width: 46rem;
  margin: .35rem 0 0;
  color: #14243b;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -.045em;
  line-height: 1.08;
}
.process-map__heading > p {
  max-width: 25rem;
  margin: 0 0 .3rem;
  color: #5d6d82;
  line-height: 1.65;
}
.process-map__canvas {
  position: relative;
  padding: clamp(1rem, 2.8vw, 2.2rem);
  border: 1px solid #dfe7f1;
  border-radius: 1.55rem;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 24px 70px rgb(23 51 89 / 9%), 0 2px 8px rgb(23 51 89 / 4%);
}
.process-map__track {
  display: grid;
  grid-template-columns: minmax(8.8rem, 1fr) 1.2rem minmax(8.8rem, 1fr) 1.2rem minmax(8.8rem, 1fr) 1.2rem minmax(8.8rem, 1fr) 1.2rem minmax(8.8rem, 1fr) 1.2rem minmax(8.8rem, 1fr);
  align-items: center;
  gap: clamp(.3rem, 1vw, .8rem);
}
.process-node {
  position: relative;
  display: flex;
  min-height: 12.5rem;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.05rem 1rem 1.15rem;
  border: 1px solid #e1e8f1;
  border-radius: 1.05rem;
  background: #fff;
  color: #15263e;
  text-align: left;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.process-node:hover { transform: translateY(-4px); border-color: #9dbaf1; box-shadow: 0 13px 28px rgb(35 81 151 / 10%); }
.process-node:focus-visible { outline: 3px solid #3b82f6; outline-offset: 3px; }
.process-node.is-active {
  border-color: #4382ed;
  background: linear-gradient(155deg, #f1f6ff, #fff 75%);
  box-shadow: 0 12px 30px rgb(35 81 151 / 12%);
}
.process-node.is-active::after {
  position: absolute;
  right: 1rem;
  bottom: -.34rem;
  left: 1rem;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #2875e8, #72a8ff);
  content: "";
}
.process-node__number { color: #8190a4; font-size: .72rem; font-weight: 750; letter-spacing: .08em; }
.process-node__icon {
  display: grid;
  width: 2.65rem;
  height: 2.65rem;
  place-items: center;
  margin: .75rem 0 .9rem;
  border-radius: .82rem;
  background: #edf4ff;
  color: #2875e8;
}
.process-node__icon svg,
.process-supplier__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.process-node__title { font-size: clamp(.94rem, 1.1vw, 1.08rem); font-weight: 750; line-height: 1.25; }
.process-node__caption { margin-top: .45rem; color: #697990; font-size: .76rem; line-height: 1.45; }
.process-link { position: relative; height: 2px; overflow: hidden; background: #dce5f1; }
.process-link::before {
  position: absolute;
  inset: -1px auto -1px -55%;
  width: 55%;
  background: linear-gradient(90deg, transparent, #347dec, transparent);
  content: "";
  animation: process-flow 2.4s linear infinite;
}
.process-link::after { position: absolute; top: -3px; right: 0; width: 7px; height: 7px; border-top: 2px solid #8da2bd; border-right: 2px solid #8da2bd; content: ""; transform: rotate(45deg); }
@keyframes process-flow { to { left: 100%; } }
.process-map__lower { grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr); align-items: stretch; margin-top: 1.45rem; }
.process-supplier {
  position: relative;
  display: flex;
  min-height: 7.4rem;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.35rem;
  overflow: hidden;
  border: 1px dashed #a9bdd8;
  border-radius: 1rem;
  background: #f6f9fd;
}
.process-supplier::after { position: absolute; top: 0; bottom: 0; right: 2rem; width: 1px; background: repeating-linear-gradient(to bottom, #8eacd2 0 5px, transparent 5px 10px); content: ""; opacity: .55; }
.process-supplier__icon { display: grid; width: 2.8rem; height: 2.8rem; flex: 0 0 auto; place-items: center; border-radius: .85rem; background: #e7effb; color: #3c70bc; }
.process-supplier strong, .process-supplier small { display: block; }
.process-supplier strong { color: #203650; font-size: .9rem; }
.process-supplier small { margin-top: .32rem; color: #6a7a8f; font-size: .77rem; line-height: 1.45; }
.process-supplier__arrow { position: absolute; z-index: 1; right: 1.37rem; top: 50%; color: #4276bd; font-size: 1.2rem; transform: translateY(-50%); animation: supplier-nudge 1.8s ease-in-out infinite; }
@keyframes supplier-nudge { 50% { transform: translate(3px, calc(-50% - 3px)); } }
.process-detail {
  position: relative;
  min-height: 7.4rem;
  padding: 1.15rem 1.35rem 1.1rem;
  border: 1px solid #e5ebf3;
  border-radius: 1rem;
  background: #fff;
  animation: detail-in .35s ease both;
}
.process-detail__label { display: flex; align-items: center; gap: .5rem; color: #55708f; font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.process-detail__pulse { width: .48rem; height: .48rem; border-radius: 50%; background: #3581ed; box-shadow: 0 0 0 4px #eaf2ff; }
.process-detail h3 { margin: .55rem 0 .25rem; color: #14243b; font-size: 1.12rem; }
.process-detail p { max-width: 54rem; margin: 0; color: #596b82; font-size: .85rem; line-height: 1.55; }
.process-detail .process-detail__boundary { margin-top: .45rem; color: #748399; font-size: .78rem; }
.process-detail__boundary strong { color: #536982; }
@keyframes detail-in { from { opacity: .4; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.process-map__footnote { position: relative; z-index: 1; margin: 1rem 0 0; color: #77859a; font-size: .75rem; line-height: 1.55; }
@media (max-width: 1050px) {
  .process-map__track { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .process-link { display: none; }
  .process-node { min-height: 11rem; }
}
@media (max-width: 680px) {
  .process-map { padding-block: 3.5rem; }
  .process-map__heading, .process-map__lower { grid-template-columns: 1fr; gap: 1rem; }
  .process-map__heading { margin-bottom: 1.6rem; }
  .process-map__heading > p { font-size: .93rem; }
  .process-map__canvas { padding: .8rem; border-radius: 1.1rem; }
  .process-map__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .process-node { min-height: 10rem; padding: .8rem; border-radius: .85rem; }
  .process-node__icon { width: 2.35rem; height: 2.35rem; margin: .55rem 0 .65rem; }
  .process-node__caption { font-size: .7rem; }
  .process-supplier { min-height: 6.4rem; padding: 1rem; }
  .process-supplier small { max-width: 14rem; }
  .process-detail { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .process-link::before, .process-supplier__arrow { animation: none; }
  .process-node, .process-detail { transition: none; animation: none; }
}