/* Spatial UI prototypes, using the same four illustrated product flows. */
.systems-pin{height:auto;min-height:100svh;padding-bottom:42px;background:radial-gradient(ellipse at 25% 66%,#9d7edd16,transparent 47%),radial-gradient(ellipse at 80% 58%,#ed5a321b,transparent 45%),#101017;isolation:isolate}
.systems-static{height:auto}
.systems-static .systems-pin{position:relative;min-height:0}
.systems-heading,.system-controls,.system-caption{position:relative;z-index:5}
.system-stage{height:var(--system-card-height,700px);margin-top:12px;perspective:1600px;perspective-origin:50% 43%;overflow:visible}
.system-stage::before{content:'';position:absolute;pointer-events:none;inset:17% -15% -3%;background-image:linear-gradient(#b6a3d31a 1px,transparent 1px),linear-gradient(90deg,#b6a3d31a 1px,transparent 1px);background-size:70px 70px;transform:rotateX(66deg) translateY(19%);transform-origin:center 72%;mask-image:radial-gradient(ellipse,#0009,transparent 64%);opacity:.5}
.system-stage::after{content:'';position:absolute;pointer-events:none;left:23%;right:23%;bottom:18px;height:60px;background:#0008;border-radius:50%;filter:blur(30px);z-index:-1}
.showcase-card{top:53px;width:min(920px,73vw);height:auto;min-height:0;overflow:visible;background:transparent;border:0;box-shadow:none;opacity:.14;transition:transform 1.2s var(--ease),opacity .9s;transform-style:preserve-3d}
.showcase-card[data-offset="1"]{--offset:1.03}.showcase-card[data-offset="-1"]{--offset:-1.03}
.showcase-card.is-active,.showcase-card.is-active:hover,.showcase-card:focus-visible{transform:translateX(-50%) rotateX(6deg) rotateY(-8deg);box-shadow:none}
.showcase-card.is-active{opacity:1}
.prototype-shell{position:relative;border-radius:14px;border:1px solid #b6adb65e;background:#eeeef0;transform-style:preserve-3d;transform:rotateX(var(--surface-x,0deg)) rotateY(var(--surface-y,0deg));transition:transform 1s var(--ease);box-shadow:1px 1px 0 #b3a4b0,3px 3px 0 #746a78,5px 5px 0 #3c3743,7px 7px 0 #25232c,12px 18px 28px #0005,26px 54px 75px #0008}
.prototype-shell::before{content:'';position:absolute;pointer-events:none;inset:-11px 12px 11px -12px;transform:translateZ(-22px);border:1px solid #ad98ce44;border-radius:14px;background:linear-gradient(140deg,#80739d19,#191923);box-shadow:0 0 50px #ad7eef0d;z-index:-1}
.prototype-shell::after{content:'';position:absolute;pointer-events:none;inset:0;border:1px solid #f2e0fb38;border-radius:inherit;background:linear-gradient(125deg,#e3caff12 0%,transparent 32%,transparent 62%,#ff95780d);transform:translateZ(2px)}
.showcase-card.is-active .prototype-shell{animation:prototypeLevitate 8s ease-in-out infinite}
.prototype-shell .window-bar{height:43px;border-radius:13px 13px 0 0;background:linear-gradient(125deg,#f9f8fa,#e6e3ed);border-bottom:1px solid #d1cbd8;color:#6c6277;transform:translateZ(1px);padding:0 22px}
.prototype-shell .dark-window{background:linear-gradient(125deg,#34303d,#24212c);color:#c9c1d5;border-color:#51455d}
.prototype-shell .window-dots{color:#ab91b6}
.prototype-shell .app-shell,.prototype-shell .operations-demo,.prototype-shell .automation-demo,.prototype-shell .integration-demo{height:auto;min-height:452px;border-radius:0 0 13px 13px;transform-style:preserve-3d}
.prototype-shell .app-shell{background:#f2f1f4}
.prototype-shell .app-sidebar{border-radius:0 0 0 13px;background:linear-gradient(130deg,#e5e1ed,#efedf2);border-right-color:#d4cfdd}
.prototype-shell .app-content{padding:26px 32px 28px;transform-style:preserve-3d}
.prototype-shell .intranet-grid{transform-style:preserve-3d}
.prototype-shell .app-topline{color:#796982}
.prototype-shell .news-feature{background:linear-gradient(135deg,#ff976b,#ee633b 64%,#da4b2c);transform:translateZ(35px);box-shadow:0 5px 0 #b94930,0 20px 25px #7e30272b;border:1px solid #ffbb913b;min-height:190px;animation:newsSurface 8s ease-in-out infinite}
.prototype-shell .news-feature h4{font-size:1.85rem;max-width:210px}
.prototype-shell .quick-docs{padding:14px 17px 7px;background:#fff;border:1px solid #e3dce8;border-radius:7px;box-shadow:0 4px 0 #d6cddd,0 15px 20px #3c214018;transform:translateZ(20px)}
.prototype-shell .quick-docs h4{margin-top:0}
.prototype-shell .quick-docs>div{padding:14px 0}
.prototype-shell .activity-strip{margin-top:32px}
.prototype-shell .demo-notification{display:none}
.prototype-shell .operations-demo{padding:29px 30px 27px;background:linear-gradient(140deg,#f3f1f7,#e7e3eb)}
.prototype-shell .operations-head{transform:translateZ(12px)}
.prototype-shell .kanban{gap:18px;transform-style:preserve-3d}
.prototype-shell .kanban-column{background:#e3dde98c;border:1px solid #d3c9dd;box-shadow:inset 0 1px 0 #fff8;transform-style:preserve-3d;min-height:270px}
.prototype-shell .task-card{background:#fffcff;border:1px solid #e8dfe9;box-shadow:0 3px 0 #c4b7d0,0 12px 20px #37204312;transform:translateZ(20px)}
.prototype-shell .moving-task{background:linear-gradient(145deg,#fffbf5,#fbe7da);border-color:#ecc1ab;box-shadow:0 4px 0 #d4a287,0 17px 23px #92503624;animation:workSurface 7s ease-in-out infinite}
.prototype-shell .task-type{color:#884c43}
.prototype-shell .kanban-column:nth-child(3){transform:translateZ(12px)}
.prototype-shell .automation-demo{padding:31px 35px 25px;background:radial-gradient(ellipse at 35% 55%,#52396355,transparent 70%),#19151f}
.prototype-shell .flow-diagram{gap:0;margin:36px 0;min-height:170px;transform-style:preserve-3d;transform:translateZ(28px)}
.prototype-shell .flow-node{padding:22px 10px;border-radius:9px;background:linear-gradient(150deg,#403247,#211c2b);border-color:#6b4b64;border-bottom:4px solid #110e18;box-shadow:0 16px 22px #0005,inset 0 1px 0 #efbbff22;transform:translateZ(18px)}
.prototype-shell .node-icon{background:linear-gradient(145deg,#ed855b,#b1432b);color:#ffeadc;border:1px solid #f8a07c;box-shadow:0 6px 12px #0004}
.prototype-shell .flow-connector{background:linear-gradient(90deg,#72506a,#f9956e,#72506a)}
.prototype-shell .flow-connector i{box-shadow:0 0 13px 3px #ff8e7666}
.prototype-shell .automation-log{background:#0e0c1380;border:1px solid #5e405d;padding:8px 15px;border-radius:5px;height:50px;box-shadow:0 3px 0 #0b0a10;transform:translateZ(12px)}
.prototype-shell .integration-demo{background:radial-gradient(ellipse at 75% 55%,#7d497d42,transparent 65%),#17131f;padding:28px 35px;gap:28px}
.prototype-shell .integration-copy{transform:translateZ(20px)}
.prototype-shell .network-diagram{transform-style:preserve-3d;transform:rotateX(7deg) rotateY(-8deg) translateZ(65px)}
.prototype-shell .network-node{background:linear-gradient(140deg,#483950,#272031);border:1px solid #8b668c80;border-bottom:4px solid #110e1a;box-shadow:0 13px 22px #0005,inset 0 1px 0 #ffffff16;border-radius:9px;transform:translate(-50%,-50%) translateZ(18px)}
.prototype-shell .network-node>span{color:#d6befa}
.prototype-shell .network-core{background:linear-gradient(135deg,#ffb880,#fa7950 40%,#b9372c);border:1px solid #ffbf9a;border-bottom:5px solid #742b29;box-shadow:0 20px 32px #0007,0 0 65px #ee754040;animation:hubSurface 6s ease-in-out infinite}
.prototype-shell .network-lines{stroke:#ad77a28a;transform:translateZ(1px)}
.prototype-shell .network-lines .data-stream{stroke:#ffb690;filter:drop-shadow(0 0 4px #ff875f)}
.spatial-detail{position:absolute;right:-45px;bottom:-34px;z-index:10;background:linear-gradient(130deg,#faf8ff,#e6e0ef);color:#2a2135;border:1px solid #fff9;border-radius:10px;padding:19px 23px;min-width:255px;box-shadow:0 5px 0 #8a788e,0 22px 35px #0007;transform:translateZ(80px) rotateZ(3deg);animation:detailFloat 7s ease-in-out infinite;pointer-events:none;transition:opacity .6s}
.showcase-card:not(.is-active) .spatial-detail{opacity:0}
.detail-label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.75rem;line-height:1.5;color:#75617d}
.spatial-detail strong{display:block;font-size:1.15rem;font-weight:600;line-height:1.2;letter-spacing:-.035em;margin-top:7px}
.detail-subline{display:block;font-size:.75rem;line-height:1.5;color:#856c8b;margin-top:9px}
.detail-knowledge{display:flex;gap:18px;right:-39px;bottom:-31px}
.detail-icon{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;font-size:1.6rem;line-height:1;border-radius:8px;background:#ed754f;color:#251b20;box-shadow:0 3px 0 #ba4c37}
.detail-avatars{display:flex;align-items:center;margin-top:15px}
.detail-avatars i{display:grid;place-items:center;width:27px;height:27px;font-style:normal;font-size:.75rem;background:#d7c6e4;border:2px solid #ece6f2;border-radius:50%;margin-left:-5px}
.detail-avatars i:first-child{margin-left:0;background:#e9c9b4}.detail-avatars i:nth-child(2){background:#b8b3d7}
.detail-avatars>span{font-size:.75rem;margin-left:9px;color:#806789}
.detail-progress{display:flex;gap:6px;align-items:center;margin-top:16px}
.detail-progress i{height:5px;flex:1;background:#cdbdd5;border-radius:4px;position:relative;overflow:hidden}
.detail-progress i::after{content:'';position:absolute;inset:0;background:#d46c4c;transform:scaleX(.2);transform-origin:left;animation:detailProgress 6s ease-in-out infinite}
.detail-progress i:nth-child(2)::after{animation-delay:.7s}.detail-progress i:nth-child(3)::after{animation-delay:1.4s}
.detail-progress>span{display:grid;place-items:center;width:25px;height:25px;background:#edd3c4;color:#9e4b34;border-radius:50%;font-size:.875rem;margin-left:4px}
.detail-flow{display:flex;gap:15px;background:linear-gradient(140deg,#443349,#221927);border-color:#96718e80;color:#f9ecf7;box-shadow:0 5px 0 #130e1a,0 22px 35px #0008}
.detail-flow .detail-label,.detail-flow .detail-subline{color:#c1a9c8}
.detail-signal{height:24px;display:flex;gap:5px;align-items:center;margin-top:12px}
.detail-signal i{width:5px;height:12px;background:#ed9978;border-radius:2px;animation:signalBars 2s ease-in-out infinite;transform-origin:center}
.detail-signal i:nth-child(3n){animation-delay:-.6s;height:22px}.detail-signal i:nth-child(3n + 1){animation-delay:-1.2s;height:16px}
.detail-connect{right:auto;left:-32px;bottom:-31px}
.detail-connections{display:flex;gap:9px;align-items:center;margin-top:15px;font-size:.75rem}
.detail-connections span{padding:5px 8px;background:#dcd0e7;border:1px solid #c9b8d5;border-radius:4px}
.detail-connections i{font-style:normal;color:#a15443;font-size:1rem}
.system-caption{margin-top:0}
.motion-paused .prototype-shell{transition:none}
.systems-journey:not(.in-view) .prototype-shell,.showcase-card:not(.is-active) .prototype-shell{animation-play-state:paused}
@keyframes prototypeLevitate{0%,100%{translate:0 3px}50%{translate:0 -11px}}
@keyframes detailFloat{0%,100%{translate:0 4px;rotate:0deg}50%{translate:0 -10px;rotate:-1.5deg}}
@keyframes newsSurface{0%,100%{transform:translateZ(35px)}50%{transform:translateZ(48px) translateY(-3px)}}
@keyframes workSurface{0%,100%{transform:translateZ(24px)}50%{transform:translateZ(52px) translateY(-7px);box-shadow:0 5px 0 #d4a287,0 25px 30px #92503635}}
@keyframes hubSurface{0%,100%{transform:translate(-50%,-50%) translateZ(38px) rotate(-7deg)}50%{transform:translate(-50%,-50%) translateZ(60px) rotate(4deg);box-shadow:0 23px 40px #0008,0 0 70px #ed754055}}
@keyframes detailProgress{0%,10%{transform:scaleX(.1)}65%,95%{transform:scaleX(1)}100%{transform:scaleX(.1)}}
@keyframes signalBars{50%{transform:scaleY(.35);opacity:.65}}
@media(max-width:1100px) and (min-width:761px){
  .showcase-card{width:80vw}
  .prototype-shell .app-sidebar{width:120px}
  .prototype-shell .app-content{padding:24px}
  .prototype-shell .intranet-grid{gap:15px}
  .prototype-shell .news-feature{padding:17px}
  .prototype-shell .news-feature h4{font-size:1.5rem}
  .prototype-shell .quick-docs{padding:12px}
  .prototype-shell .quick-docs>div{font-size:.75rem;gap:7px}
  .prototype-shell .operations-demo{padding:25px 22px}
  .prototype-shell .kanban{gap:10px}
  .prototype-shell .kanban-column{padding:9px}
  .prototype-shell .task-card{padding:10px}
  .prototype-shell .flow-node{width:130px;padding:18px 8px}
  .spatial-detail{right:-15px}
  .detail-connect{left:-15px;right:auto}
}
@media(max-width:760px){
  .systems-pin{min-height:0;padding-bottom:38px}
  .system-stage{margin-top:8px;perspective:1200px}
  .system-stage::before{inset:5% -35% 0;background-size:45px 45px;opacity:.4}
  .system-stage::after{left:12%;right:12%;bottom:18px}
  .showcase-card{top:25px;width:calc(100% - 44px);min-height:0}
  .showcase-card.is-active,.showcase-card.is-active:hover,.showcase-card:focus-visible{transform:translateX(-50%) rotateY(-1.5deg) rotateX(1deg)}
  .prototype-shell{border-radius:11px;box-shadow:1px 1px 0 #b3a4b0,3px 3px 0 #746a78,5px 5px 0 #3c3743,8px 10px 22px #0005,10px 30px 40px #0006}
  .prototype-shell::before{inset:-7px 5px 7px -6px;border-radius:11px}
  .prototype-shell .window-bar{height:46px;padding:0 11px;border-radius:10px 10px 0 0}
  .prototype-shell .app-shell,.prototype-shell .operations-demo,.prototype-shell .automation-demo,.prototype-shell .integration-demo{min-height:530px;border-radius:0 0 10px 10px}
  .prototype-shell .app-sidebar{width:36px;padding:18px 4px;border-radius:0 0 0 10px}
  .prototype-shell .app-sidebar>div{padding:9px 4px}
  .prototype-shell .app-content{padding:20px 13px 23px}
  .prototype-shell .intranet-grid{margin-top:23px}
  .prototype-shell .news-feature{min-height:145px;padding:16px;transform:translateZ(10px);animation:none}
  .prototype-shell .news-feature h4{font-size:1.5rem}
  .prototype-shell .quick-docs{margin-top:21px;padding:14px 12px 5px;transform:translateZ(8px)}
  .prototype-shell .quick-docs h4{margin:0 0 12px}
  .prototype-shell .quick-docs>div{font-size:.8125rem;gap:7px;padding:13px 0}
  .prototype-shell .operations-demo{padding:24px 16px}
  .prototype-shell .operations-head{transform:none}
  .prototype-shell .kanban{gap:14px;margin-top:26px}
  .prototype-shell .kanban-column{min-height:0;padding:11px 9px;grid-template-columns:57px minmax(0,1fr);gap:8px}
  .prototype-shell .kanban-column:nth-child(3){transform:none}
  .prototype-shell .task-card{padding:11px;transform:translateZ(8px)}
  .prototype-shell .moving-task{animation:workSurfaceMobile 7s ease-in-out infinite}
  .prototype-shell .automation-demo{padding:25px 17px}
  .prototype-shell .flow-diagram{min-height:0;gap:0;margin:26px 0;transform:translateZ(8px)}
  .prototype-shell .flow-node{width:100%;padding:12px 11px;transform:translateZ(8px)}
  .prototype-shell .flow-connector{min-height:20px;margin-left:26px}
  .prototype-shell .automation-log{padding:7px 9px;min-height:49px;height:49px;transform:none;font-size:.75rem}
  .prototype-shell .integration-demo{padding:25px 18px;gap:14px}
  .prototype-shell .integration-copy{transform:none}
  .prototype-shell .network-diagram{transform:rotateX(6deg) rotateY(-4deg) translateZ(36px);margin-top:21px}
  .prototype-shell .network-node{transform:translate(-50%,-50%) translateZ(8px)}
  .spatial-detail,.detail-connect{position:relative;left:auto;right:auto;bottom:auto;min-width:0;width:calc(100% - 12px);margin:15px 0 0 12px;padding:17px;transform:translateZ(20px) rotateZ(-1deg);box-shadow:0 4px 0 #8a788e,0 16px 28px #0006;animation-name:detailFloatMobile}
  .spatial-detail strong{font-size:1.05rem}
  .detail-knowledge{gap:12px}.detail-knowledge strong br{display:none}
  .detail-icon{width:32px;height:32px;font-size:1.3rem}
  .detail-avatars{margin-top:12px;flex-wrap:wrap;row-gap:7px}
  .detail-avatars>span{font-size:.75rem;flex-basis:100%;margin:0}
  .detail-flow{box-shadow:0 4px 0 #110d19,0 16px 28px #0006}
  .detail-flow .detail-icon{display:none}
  .detail-subline,.detail-label{font-size:.75rem}
  .detail-connections{flex-wrap:wrap;gap:7px}
  .detail-connections span{padding:5px 7px}
  .showcase-card.is-active .prototype-shell{animation-name:prototypeLevitateMobile}
}
@media(max-width:380px){
  .showcase-card{width:calc(100% - 38px)}
  .prototype-shell .app-sidebar{width:30px}
  .prototype-shell .app-content{padding:18px 11px 24px}
  .prototype-shell .quick-docs{padding:13px 8px 4px}
  .prototype-shell .quick-docs>div{font-size:.75rem;gap:5px}
  .prototype-shell .quick-docs>div>span{font-size:1rem}
  .prototype-shell .operations-demo{padding:24px 12px}
  .prototype-shell .kanban-column{grid-template-columns:49px minmax(0,1fr);gap:6px;padding:10px 7px}
  .prototype-shell .task-card{padding:10px 8px}
  .prototype-shell .integration-demo{padding:25px 16px}
  .prototype-shell .network-node{width:75px}
  .prototype-shell .network-node strong{font-size:.75rem}
  .prototype-shell .automation-demo{padding:25px 15px}
  .prototype-shell .flow-node{padding:11px 9px;column-gap:9px}
  .spatial-detail{padding:15px;gap:10px}
  .detail-knowledge .detail-icon{display:none}
}
@keyframes prototypeLevitateMobile{0%,100%{translate:0 2px}50%{translate:0 -5px}}
@keyframes detailFloatMobile{0%,100%{translate:0 2px}50%{translate:0 -4px}}
@keyframes workSurfaceMobile{0%,100%{transform:translateZ(8px)}50%{transform:translateZ(16px) translateY(-3px)}}
@media(prefers-reduced-motion:reduce){
  .showcase-card.is-active,.showcase-card.is-active:hover{transform:translateX(-50%)}
  .prototype-shell{transform:none;transition:none}
  .prototype-shell .news-feature,.prototype-shell .moving-task{transform:none}
}