/* Purposeful visual motion for the Waybill resource hub and freight-software guide. */
.syntropy-resource-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.syntropy-resource-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 85% 8%, rgba(33, 169, 135, .12), transparent 38%);
  opacity: 0;
  transition: opacity .25s ease;
}
.syntropy-resource-card:hover::after,
.syntropy-resource-card:focus-visible::after { opacity: 1; }

.syntropy-resource-visual {
  position: relative;
  display: block;
  height: 142px;
  margin: -8px -8px 22px;
  overflow: hidden;
  border: 1px solid rgba(22, 105, 84, .12);
  border-radius: 14px;
  background:
    radial-gradient(circle at 75% 18%, rgba(235, 180, 64, .18), transparent 26%),
    linear-gradient(145deg, #f8fcfa, #e8f5f0);
}
.syntropy-resource-visual > i,
.syntropy-resource-visual > b { position: absolute; display: block; box-sizing: border-box; }

/* Comparison scene: product sheets on a review desk with an active scan. */
.syntropy-visual-compare .rv-sheet {
  bottom: 20px;
  width: 31%;
  height: 82px;
  border: 1px solid #c5ddd5;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 20px rgba(21, 77, 62, .09);
  transform-origin: bottom center;
}
.syntropy-visual-compare .rv-sheet::before {
  content: "";
  position: absolute;
  inset: 14px 12px auto;
  height: 7px;
  border-radius: 5px;
  background: #0c7b64;
  box-shadow: 0 18px 0 #cfe4dc, 0 35px 0 #e6efeb;
}
.syntropy-visual-compare .rv-sheet::after {
  content: "";
  position: absolute;
  right: 9px;
  bottom: 9px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #f3b23c;
  box-shadow: inset 0 0 0 4px #fff;
}
.syntropy-visual-compare .rv-a { left: 8%; transform: rotate(-5deg); }
.syntropy-visual-compare .rv-b { left: 34.5%; z-index: 2; height: 94px; }
.syntropy-visual-compare .rv-c { right: 8%; transform: rotate(5deg); }
.syntropy-visual-compare .rv-scan {
  z-index: 4;
  left: 7%;
  top: 24px;
  width: 25%;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #20a989, transparent);
  box-shadow: 0 0 15px rgba(32, 169, 137, .55);
  animation: syntropy-scan 5s ease-in-out infinite;
}

/* CRM scene: customer inquiry becomes a priced freight job. */
.syntropy-visual-crm .rv-inquiry {
  left: 7%;
  top: 23px;
  width: 35%;
  height: 86px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #c5ddd5;
  box-shadow: 0 10px 20px rgba(21, 77, 62, .09);
}
.syntropy-visual-crm .rv-inquiry::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #bce2d4;
  box-shadow: 32px 2px 0 -8px #0c7b64, 32px 15px 0 -8px #d9e9e3, 32px 28px 0 -8px #d9e9e3;
}
.syntropy-visual-crm .rv-cargo {
  left: 47%;
  bottom: 29px;
  width: 60px;
  height: 35px;
  border: 2px solid #08755f;
  background: repeating-linear-gradient(90deg, #18a181 0 8px, #0e8068 8px 10px);
  box-shadow: 10px -10px 0 -2px #55b89e;
  animation: syntropy-cargo 4.8s ease-in-out infinite;
}
.syntropy-visual-crm .rv-profit {
  right: 7%;
  top: 25px;
  width: 27%;
  height: 84px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #c5ddd5;
  box-shadow: 0 10px 20px rgba(21, 77, 62, .09);
}
.syntropy-visual-crm .rv-profit::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 14px;
  height: 48px;
  background: linear-gradient(to top, #12876f 0 42%, transparent 42%) 0 100%/19% 100% no-repeat,
              linear-gradient(to top, #42ae92 0 65%, transparent 65%) 40% 100%/19% 100% no-repeat,
              linear-gradient(to top, #f0ad36 0 86%, transparent 86%) 80% 100%/19% 100% no-repeat;
  animation: syntropy-bars 4.8s ease-in-out infinite;
}

/* Software-stack scene: a freight packet passes through specialist workstations. */
.syntropy-visual-stack .rv-core {
  left: 39%;
  top: 35px;
  width: 22%;
  height: 72px;
  border-radius: 14px;
  background: linear-gradient(145deg, #0a876e, #075b49);
  box-shadow: 0 12px 25px rgba(7, 93, 74, .23);
}
.syntropy-visual-stack .rv-core::before {
  content: "";
  position: absolute;
  left: 21%;
  right: 21%;
  top: 19px;
  height: 7px;
  border-radius: 8px;
  background: #dff5ed;
  box-shadow: 0 17px 0 rgba(223, 245, 237, .72), 0 34px 0 rgba(223, 245, 237, .42);
}
.syntropy-visual-stack .rv-node {
  width: 72px;
  height: 52px;
  border-radius: 11px;
  background: #fff;
  border: 1px solid #c5ddd5;
  box-shadow: 0 8px 18px rgba(21, 77, 62, .08);
}
.syntropy-visual-stack .rv-node::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 5px;
  background: linear-gradient(#0d8169 0 7px, transparent 7px 13px, #cfe4dc 13px 18px, transparent 18px 24px, #e3efeb 24px);
}
.syntropy-visual-stack .rv-a { left: 7%; top: 20px; }
.syntropy-visual-stack .rv-b { right: 7%; top: 20px; }
.syntropy-visual-stack .rv-c { left: 7%; bottom: 14px; }
.syntropy-visual-stack .rv-d { right: 7%; bottom: 14px; }
.syntropy-visual-stack .rv-packet {
  z-index: 4;
  left: 11%;
  top: 66px;
  width: 24px;
  height: 18px;
  border-radius: 5px;
  background: #f1ad34;
  box-shadow: 0 4px 12px rgba(193, 123, 0, .28);
  animation: syntropy-packet 6.2s cubic-bezier(.45, 0, .55, 1) infinite;
}

/* Case-study scene: cargo and documents move through one operating dock. */
.syntropy-visual-proof .rv-water {
  inset: auto 0 0;
  height: 46px;
  background: repeating-radial-gradient(ellipse at 50% 110%, rgba(24, 151, 122, .22) 0 9px, transparent 10px 22px);
  animation: syntropy-water 5s linear infinite;
}
.syntropy-visual-proof .rv-ship {
  left: 9%;
  bottom: 30px;
  width: 42%;
  height: 34px;
  border-radius: 5px 8px 20px 30px;
  background: #075c4c;
  transform: skewX(-12deg);
  animation: syntropy-ship 5s ease-in-out infinite;
}
.syntropy-visual-proof .rv-ship::before {
  content: "";
  position: absolute;
  left: 10%;
  bottom: 30px;
  width: 78%;
  height: 24px;
  background: repeating-linear-gradient(90deg, #ecaa35 0 18px, #178c73 18px 36px, #72c2aa 36px 54px);
}
.syntropy-visual-proof .rv-dock {
  right: 8%;
  bottom: 30px;
  width: 35%;
  height: 78px;
  border-radius: 6px 6px 0 0;
  background: #fff;
  border: 1px solid #c5ddd5;
  box-shadow: 0 10px 20px rgba(21, 77, 62, .09);
}
.syntropy-visual-proof .rv-dock::before {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  top: 14px;
  height: 9px;
  border-radius: 5px;
  background: #0d8169;
  box-shadow: 0 19px 0 #cfe4dc, 0 38px 0 #e3efeb;
}
.syntropy-visual-proof .rv-doc {
  right: 24%;
  top: 10px;
  width: 31px;
  height: 40px;
  border-radius: 5px;
  background: #fff;
  border: 1px solid #b9d7cc;
  animation: syntropy-doc 4.5s ease-in-out infinite;
}
.syntropy-visual-proof .rv-doc::before {
  content: "";
  position: absolute;
  inset: 9px 7px;
  background: repeating-linear-gradient(#0d8169 0 3px, transparent 3px 8px);
}

.syntropy-resource-card > .syntropy-resource-copy { display: block; color: #5d756e; font-size: .92rem; line-height: 1.5; }

/* Waybill resources use the same dark control-surface language as the product page. */
.syntropy-waybill-resources {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 4vw, 56px) !important;
  border-color: rgba(124, 232, 199, .22) !important;
  color: #f5faf7;
  background: #003f35 !important;
  box-shadow: 0 28px 70px rgba(0, 48, 40, .16);
}
.syntropy-waybill-resources::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(124, 232, 199, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 232, 199, .035) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: linear-gradient(135deg, #000, transparent 72%);
}
.syntropy-waybill-resources > * { position: relative; z-index: 1; }
.syntropy-waybill-resources .syntropy-resource-eyebrow { color: #7ce8c7; }
.syntropy-waybill-resources h2 { max-width: 1080px; color: #fff; }
.syntropy-waybill-resources > p { color: #bed5cd; }
.syntropy-waybill-resources .syntropy-resource-grid { gap: 18px; margin-top: 34px; }
.syntropy-waybill-resources .syntropy-resource-card {
  display: flex;
  min-height: 270px;
  flex-direction: column;
  padding: 28px;
  border-color: rgba(124, 232, 199, .19);
  border-radius: 20px;
  color: #f5faf7;
  background: #064c40;
  box-shadow: none;
}
.syntropy-waybill-resources .syntropy-resource-card::before {
  content: attr(data-resource-index);
  position: absolute;
  top: 20px;
  right: 24px;
  color: rgba(124, 232, 199, .08);
  font-size: clamp(5.2rem, 9vw, 8rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.08em;
  pointer-events: none;
}
.syntropy-waybill-resources .syntropy-resource-card::after {
  background: linear-gradient(135deg, rgba(124, 232, 199, .07), transparent 48%);
  opacity: 0;
}
.syntropy-waybill-resources .syntropy-resource-card:hover,
.syntropy-waybill-resources .syntropy-resource-card:focus-visible {
  border-color: rgba(124, 232, 199, .62);
  background: #07584a;
  box-shadow: 0 18px 38px rgba(0, 35, 29, .22);
}
.syntropy-waybill-resources .syntropy-resource-card:hover::after,
.syntropy-waybill-resources .syntropy-resource-card:focus-visible::after { opacity: 1; }
.syntropy-resource-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 30px;
}
.syntropy-resource-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #003f35;
  background: #7ce8c7;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.syntropy-resource-topline > span:last-child {
  color: rgba(245, 250, 247, .56);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.syntropy-waybill-resources .syntropy-resource-card > strong {
  position: relative;
  z-index: 1;
  max-width: 490px;
  margin: 30px 0 10px;
  color: #fff;
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  line-height: 1.24;
}
.syntropy-waybill-resources .syntropy-resource-card > .syntropy-resource-copy {
  position: relative;
  z-index: 1;
  max-width: 500px;
  margin-bottom: 30px;
  color: #bed5cd;
  font-size: .95rem;
}
.syntropy-resource-track {
  position: relative;
  display: block;
  height: 1px;
  margin-top: auto;
  overflow: visible;
  background: rgba(124, 232, 199, .2);
}
.syntropy-resource-track::before,
.syntropy-resource-track::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ce8c7;
}
.syntropy-resource-track::before { left: 0; }
.syntropy-resource-track::after { right: 0; }
.syntropy-resource-track > i {
  position: absolute;
  top: -5px;
  left: 0;
  width: 11px;
  height: 11px;
  border: 2px solid #064c40;
  border-radius: 50%;
  background: #f5b640;
  box-shadow: 0 0 0 4px rgba(245, 182, 64, .12);
  animation: syntropy-resource-progress 5.8s ease-in-out infinite;
}
.syntropy-resource-card:nth-child(2) .syntropy-resource-track > i { animation-delay: -.9s; }
.syntropy-resource-card:nth-child(3) .syntropy-resource-track > i { animation-delay: -1.8s; }
.syntropy-resource-card:nth-child(4) .syntropy-resource-track > i { animation-delay: -2.7s; }
.syntropy-resource-link-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  color: #f5faf7;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.syntropy-resource-link-label b { color: #7ce8c7; font-size: 1rem; }

/* Animated architecture comparison in the software guide. */
.syntropy-architecture-motion {
  margin: 38px 0;
  overflow: hidden;
  border: 1px solid rgba(124, 232, 199, .24);
  border-radius: 24px;
  background: #003f35;
  box-shadow: 0 22px 50px rgba(0, 48, 40, .14);
}
.syntropy-architecture-stage { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
.syntropy-architecture-stage > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.syntropy-architecture-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(124, 232, 199, .08);
}
.syntropy-architecture-label {
  position: absolute;
  z-index: 3;
  top: 24px;
  width: 39%;
  padding: 14px 18px;
  border: 1px solid rgba(124, 232, 199, .34);
  border-radius: 14px;
  color: #f5faf7;
  background: rgba(0, 63, 53, .94);
  box-shadow: none;
}
.syntropy-architecture-label strong { display: block; color: #7ce8c7; font-size: 1.08rem; }
.syntropy-architecture-label span { display: block; margin-top: 3px; color: #d7e8e2; font-size: .82rem; }
.syntropy-architecture-label-left { left: 4%; }
.syntropy-architecture-label-right { right: 4%; }
.syntropy-job-token {
  position: absolute;
  z-index: 5;
  width: 14px;
  height: 14px;
  border: 2px solid #003f35;
  border-radius: 50%;
  background: #f5b640;
  box-shadow: 0 0 0 5px rgba(245, 182, 64, .14);
}
.syntropy-job-token::before { display: none; }
.syntropy-job-token-left { left: 29%; top: 54%; animation: syntropy-diagram-pulse 3.2s ease-in-out infinite; }
.syntropy-job-token-right { left: 74%; top: 54%; animation: syntropy-diagram-pulse 3.2s ease-in-out -1.1s infinite; }
.syntropy-architecture-status {
  position: absolute;
  z-index: 4;
  bottom: 19px;
  padding: 9px 13px;
  border-radius: 999px;
  color: #003f35;
  background: #7ce8c7;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.syntropy-architecture-status-left { left: 4%; }
.syntropy-architecture-status-right { right: 4%; background: #f5faf7; }
.syntropy-architecture-motion figcaption { padding: 14px 18px 18px; color: #c7dcd5; background: #003f35; font-size: .85rem; line-height: 1.5; }

/* Image-led Waybill resource cards approved in the September visual refresh. */
.syntropy-waybill-resources {
  padding: clamp(30px, 4vw, 48px) !important;
  border-color: #c9e0d8 !important;
  color: #163d34;
  background: #f3faf7 !important;
  box-shadow: 0 24px 58px rgba(20, 68, 56, .08);
}
.syntropy-waybill-resources::before {
  background: radial-gradient(circle at 92% 8%, rgba(245, 182, 64, .11), transparent 29%);
  mask-image: none;
}
.syntropy-waybill-resources .syntropy-resource-eyebrow { color: #08745f; }
.syntropy-waybill-resources h2 { color: #123f35; }
.syntropy-waybill-resources > p { color: #526d65; }
.syntropy-waybill-resources .syntropy-resource-grid { gap: 18px; margin-top: 30px; }
.syntropy-waybill-resources .syntropy-resource-card {
  min-height: 0;
  padding: 16px 16px 22px;
  border-color: #d6e6e0;
  border-radius: 18px;
  color: #163d34;
  background: #fff;
  box-shadow: 0 12px 28px rgba(20, 68, 56, .07);
}
.syntropy-waybill-resources .syntropy-resource-card::before { display: none; }
.syntropy-waybill-resources .syntropy-resource-card::after {
  z-index: 0;
  background: radial-gradient(circle at 85% 8%, rgba(33, 169, 135, .1), transparent 38%);
}
.syntropy-waybill-resources .syntropy-resource-card:hover,
.syntropy-waybill-resources .syntropy-resource-card:focus-visible {
  border-color: #29a889;
  color: #163d34;
  background: #fff;
  box-shadow: 0 18px 38px rgba(20, 68, 56, .12);
}
.syntropy-waybill-resources .syntropy-resource-visual {
  z-index: 1;
  height: clamp(138px, 14vw, 180px);
  margin: 0 0 20px;
  border-color: #cce3da;
  background: #eef8f4;
}
.syntropy-waybill-resources .syntropy-resource-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .45s cubic-bezier(.2,.75,.25,1), filter .3s ease;
}
.syntropy-waybill-resources .syntropy-resource-card:hover .syntropy-resource-visual img,
.syntropy-waybill-resources .syntropy-resource-card:focus-visible .syntropy-resource-visual img {
  transform: scale(1.025);
  filter: saturate(1.04);
}
.syntropy-waybill-resources .syntropy-resource-topline,
.syntropy-waybill-resources .syntropy-resource-track,
.syntropy-waybill-resources .syntropy-resource-link-label { display: none; }
.syntropy-waybill-resources .syntropy-resource-card > strong {
  margin: 0 8px 8px;
  color: #08745f;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.32;
}
.syntropy-waybill-resources .syntropy-resource-card > .syntropy-resource-copy {
  margin: 0 8px;
  color: #5d756e;
  font-size: .92rem;
}

.syntropy-motion-surface:not(.is-in-view) .syntropy-job-token,
.syntropy-resource-hub:not(.is-in-view) .syntropy-resource-visual > i,
.syntropy-resource-hub:not(.is-in-view) .syntropy-resource-visual > b { animation-play-state: paused; }

@keyframes syntropy-scan { 0%,12%{transform:translateX(0);opacity:0} 22%{opacity:1} 55%{transform:translateX(245%);opacity:1} 70%,100%{transform:translateX(245%);opacity:0} }
@keyframes syntropy-cargo { 0%,18%,100%{transform:translateX(-8px) translateY(2px)} 48%,70%{transform:translateX(8px) translateY(-4px)} }
@keyframes syntropy-bars { 0%,20%{transform:scaleY(.35);transform-origin:bottom} 55%,85%{transform:scaleY(1);transform-origin:bottom} 100%{transform:scaleY(.35);transform-origin:bottom} }
@keyframes syntropy-packet { 0%{transform:translate(0,-27px)} 22%{transform:translate(130px,-27px)} 45%{transform:translate(130px,28px)} 70%{transform:translate(260px,28px)} 88%,100%{transform:translate(260px,-27px)} }
@keyframes syntropy-water { to{background-position:44px 0} }
@keyframes syntropy-ship { 0%,100%{transform:skewX(-12deg) translateY(0)} 50%{transform:skewX(-12deg) translateY(-5px)} }
@keyframes syntropy-doc { 0%,18%{transform:translate(-95px,52px) rotate(-5deg);opacity:0} 28%{opacity:1} 65%,82%{transform:translate(0,0) rotate(0);opacity:1} 100%{transform:translate(0,-10px);opacity:0} }
@keyframes syntropy-resource-progress { 0%,8%{left:0;opacity:.25} 45%,60%{left:calc(100% - 11px);opacity:1} 92%,100%{left:0;opacity:.25} }
@keyframes syntropy-diagram-pulse { 0%,100%{transform:scale(.75);opacity:.55} 50%{transform:scale(1.2);opacity:1} }
@keyframes syntropy-unified-job { 0%,8%{transform:translate(0,0)} 30%{transform:translate(155px,-80px)} 55%{transform:translate(285px,-4px)} 78%{transform:translate(155px,70px)} 100%{transform:translate(0,0)} }
@keyframes syntropy-connected-job { 0%{transform:translate(0,0)} 22%{transform:translate(165px,-135px)} 47%{transform:translate(315px,-25px)} 72%{transform:translate(130px,120px)} 100%{transform:translate(0,0)} }

@media (max-width: 760px) {
  .syntropy-waybill-resources .syntropy-resource-card { min-height: 0; padding: 12px 12px 20px; }
  .syntropy-waybill-resources .syntropy-resource-visual { height: 148px; margin-bottom: 18px; }
  .syntropy-waybill-resources .syntropy-resource-card::before { top: 20px; right: 20px; font-size: 5.2rem; }
  .syntropy-waybill-resources .syntropy-resource-card > strong { margin-top: 24px; }
  .syntropy-architecture-stage { aspect-ratio: 16 / 9; }
  .syntropy-architecture-stage > img { object-position: center; }
  .syntropy-architecture-label { top: 7px; width: 43%; padding: 7px 8px; }
  .syntropy-architecture-label strong { font-size: .82rem; }
  .syntropy-architecture-label span { display: none; }
  .syntropy-job-token { width: 9px; height: 9px; border-width: 1px; }
  .syntropy-job-token-left { left: 29%; top: 54%; }
  .syntropy-job-token-right { left: 74%; top: 54%; }
  .syntropy-architecture-status { bottom: 5px; max-width: 43%; padding: 5px 7px; font-size: .5rem; text-align: center; }
  @keyframes syntropy-unified-job { 0%,8%{transform:translate(0,0)} 30%{transform:translate(50px,-42px)} 55%{transform:translate(100px,-5px)} 78%{transform:translate(50px,24px)} 100%{transform:translate(0,0)} }
  @keyframes syntropy-connected-job { 0%{transform:translate(0,0)} 22%{transform:translate(52px,-45px)} 47%{transform:translate(112px,-8px)} 72%{transform:translate(42px,28px)} 100%{transform:translate(0,0)} }
}

@media (prefers-reduced-motion: reduce) {
  .syntropy-resource-visual > i,
  .syntropy-resource-visual > b,
  .syntropy-job-token { animation: none !important; }
  .syntropy-resource-track > i { animation: none !important; left: 50%; }
  .syntropy-resource-card { scroll-behavior: auto; }
}