.connection-hero { position: relative; background: #153a2d; overflow: hidden; color: white; }
.connection-stage { position: relative; height: 400px; }
.scene-photos { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 3px; }
.portrait { position: relative; overflow: hidden; }
.portrait::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, #153a2d90); }
.person { width: 100%; height: 100%; object-fit: cover; object-position: 76% 30%; }
.connection-paths { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 3px #153a2d); }
.connection-paths.mobile { display: none; }
.route-dots { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 13; vector-effect: non-scaling-stroke; }
.route-reveal { fill: none; stroke: white; stroke-width: 18; stroke-dasharray: 100; stroke-dashoffset: 100; animation: route-arrival 3.2s ease-in-out forwards; }
@keyframes route-arrival { to { stroke-dashoffset: 0; } }
.network-nodes { position: absolute; inset: 0; pointer-events: none; }
.network-tag { display: grid; place-items: center; position: absolute; top: 85%; left: 12.5%; transform: translate(-50%,-50%); overflow: hidden; width: 72px; height: 72px; border: 3px solid white; border-radius: 50%; background: #fff; box-shadow: 0 3px 16px #10291f50; transition: box-shadow .4s; }
.network-tag:nth-child(2) { left: 37.5%; }
.network-tag:nth-child(3) { left: 62.5%; }
.network-tag:nth-child(4) { left: 87.5%; }
.network-tag.network-a { --ring-color: #25d366; border: 4px solid var(--ring-color); }
.network-tag.network-b { --ring-color: #7163ff; border: 4px solid transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(35deg, #0099ff, #a033ff, #ff5280) border-box; }
.network-tag.is-connected { box-shadow: 0 0 0 5px var(--ring-color, #72e4b9), 0 3px 16px #10291f50; }
.network-tag img { width: 48px; height: 48px; object-fit: contain; }
.network-message { width: 48px; height: 48px; background: var(--ring-color); mask: url('message-circle-more.svg') center / contain no-repeat; -webkit-mask: url('message-circle-more.svg') center / contain no-repeat; }
.network-b .network-message { background: linear-gradient(35deg, #0099ff, #a033ff, #ff5280); }
.network-tag.tag-hb img { width: 76px; height: 76px; max-width: none; position: absolute; left: -5px; top: -5px; }
.group-label { position: absolute; left: 50%; top: 77.5%; transform: translate(-50%,-50%); background: white; color: #153a2d; padding: 12px 20px; border-radius: 6px; font-size: 17px; font-weight: 700; text-align: center; box-shadow: 0 3px 16px #10291f40; }
.scene-caption.wrap { position: relative; width: calc(100% - 64px); max-width: none; padding-top: 25px; padding-bottom: 25px; }
.scene-caption h2 { font-size: 30px; max-width: none; line-height: 1.2; text-align: center; text-wrap: pretty; }
.scene-controls { position: absolute; right: 0; bottom: calc(100% + 344px); display: flex; align-items: center; gap: 6px; }
.scene-controls button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #acb6ae; border-radius: 50%; background: #14251bcc; color: white; cursor: pointer; }
.scene-controls button:hover { background: #34634c; }
.scene-number { min-width: 38px; text-align: center; font-size: 13px; }
.icon-prev { --icon: url('assets/chevron-left.svg'); }
.icon-next { --icon: url('assets/chevron-right.svg'); }
.icon-pause { --icon: url('assets/pause.svg'); }
.icon-play { --icon: url('assets/play.svg'); }
.is-paused .route-reveal { animation-play-state: paused; }
@media (max-width: 1000px) { .scene-caption h2 { font-size: 27px; } }
@media (max-width: 700px) {
  .connection-stage { height: 400px; }
  .scene-photos { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); }
  .person { object-position: 76% 30%; }
  .connection-paths.desktop { display: none; }
  .connection-paths.mobile { display: block; }
  .network-tag { width: 46px; height: 46px; top: 43.5%; left: 25%; border-width: 2px; }
  .network-tag:nth-child(2) { left: 75%; }
  .network-tag:nth-child(3) { left: 25%; top: 93.5%; }
  .network-tag:nth-child(4) { left: 75%; top: 93.5%; }
  .network-tag img { width: 32px; height: 32px; }
  .network-message { width: 32px; height: 32px; }
  .network-tag.tag-hb img { width: 49px; height: 49px; left: -3.5px; top: -3.5px; }
  .group-label { top: 50%; font-size: 14px; padding: 8px 12px; width: max-content; max-width: 90%; }
  .scene-caption.wrap { width: calc(100% - 40px); padding-top: 18px; padding-bottom: 18px; }
  .scene-caption h2 { font-size: 23px; }
  .scene-controls { position: static; margin-top: 14px; justify-content: flex-end; }
  .route-dots { stroke-width: 3; stroke-dasharray: 1 9; }
}
@media (prefers-reduced-motion: reduce) { .route-reveal { animation: none; stroke-dashoffset: 0; } .network-tag { transition: none; } }