/* Section-by-section refinement, preserving the opening composition. */
.demo-button{display:inline-flex;align-items:center;justify-content:center;gap:22px;min-height:50px;margin-top:32px;padding:13px 23px;border:1px solid #428aff;border-radius:10px;background:var(--blue);color:#0b2346;font-size:16px;font-weight:500;box-shadow:0 3px 0 #3177e8,0 8px 20px #428aff17;transition:transform .2s,box-shadow .2s}
.demo-button svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none}
.demo-button:hover{transform:translateY(-2px);box-shadow:0 4px 0 #3177e8,0 12px 24px #428aff22}
.work-silo,.work-silo:nth-child(2),.work-silo:nth-child(3){top:64px;height:557px}
.silo-heading>svg{width:28px;height:28px;fill:none;stroke:var(--subtle-blue);stroke-width:1.5}
.handoff-lines{display:block;overflow:visible}
.handoff-lines path{stroke:var(--subtle-blue);stroke-width:1.8;stroke-dasharray:5 6;fill:none}
.handoff-lines circle{fill:var(--paper);stroke:var(--blue);stroke-width:1.4}
.order-stream img.ebay-mark{width:34px;height:22px}
img[src$="shopify.svg"]{transform:scale(1.45)}
[data-theme="dark"] img[src$="amazon.png"]{filter:brightness(0) invert(1)}

/* The collected state is one complete object. Only the next scene opens it. */
.os-base{background:linear-gradient(145deg,var(--surface) 35%,var(--module))}
.os-title{font-size:24px;top:23px}
.app-grid{inset:0;display:block;transform-style:preserve-3d}
.app-cell{position:absolute;left:0;top:0;display:block;padding:0;border-radius:16px;border:1px solid var(--module-line);background:linear-gradient(145deg,var(--surface),var(--module));box-shadow:inset 0 1px 0 var(--highlight),0 4px 0 var(--depth),0 13px 22px var(--shadow);overflow:hidden;will-change:transform}
.app-cell>svg{position:absolute;display:block;stroke-width:1.5;fill:none;stroke:var(--blue)}
.app-cell>span{position:absolute;display:block;font-size:16px;font-weight:500;line-height:20px;letter-spacing:-.025em;white-space:nowrap}
.app-cell[data-app="0"]{border-color:var(--subtle-blue);background:linear-gradient(150deg,var(--surface),var(--wash))}
.app-cell.changed-app{border-color:var(--blue);background:var(--wash);box-shadow:inset 0 0 0 1px #428aff30,0 4px 0 var(--data-depth),0 12px 25px var(--shadow)}
.execution-path{top:58px;font-size:18px}
.execution-path>span>span{opacity:1}
.execution-path>span{gap:10px}
.execution-deck.flow-mode .execution-path{top:25px;left:28px;right:28px;gap:13px}
.execution-deck.flow-mode .execution-path>span{height:49px;justify-content:center;flex:1;border-radius:12px;background:var(--surface);box-shadow:0 3px 0 var(--data-depth);font-size:20px;gap:10px}
.execution-deck.flow-mode .execution-path>i{flex:0 0 23px}
.execution-deck.flow-mode .execution-path>span.is-active{background:var(--blue);color:#0b2346;box-shadow:0 3px 0 #2f73d9}
.execution-deck.flow-mode .execution-path>span.is-active svg{stroke:#0b2346}
.execution-progress{bottom:1px;left:25px;right:25px}
.system-routing{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:var(--blue);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transform:translateZ(8px);opacity:0}
.route-before{stroke:var(--subtle-blue)}
.route-after{stroke-dasharray:900;stroke-dashoffset:900}

/* Many distinct company systems, one continuous platform beneath them. */
.ecosystem{position:absolute;inset:0;opacity:0;z-index:2;transform-style:preserve-3d}
.platform-surface{position:absolute;left:32px;top:28px;width:756px;height:657px;border:1px solid var(--subtle-blue);border-radius:30px;background:linear-gradient(155deg,var(--wash) 10%,var(--data) 60%,var(--execution));box-shadow:inset 0 1px 0 var(--highlight),0 3px 0 var(--edge),0 18px 0 var(--data-depth),0 19px 0 var(--edge),0 35px 55px var(--shadow);transform:rotateX(10deg) rotateY(-6deg) rotateZ(-3deg)}
.platform-surface>span{position:absolute;bottom:27px;left:34px;font-size:26px;font-weight:500;letter-spacing:-.035em;color:var(--rule-ink)}
.platform-surface>img{position:absolute;bottom:26px;right:32px;width:32px;height:32px}
.company-field{position:absolute;inset:0;transform-style:preserve-3d}
.company-instance{position:absolute;left:0;top:0;border:1px solid var(--edge);border-radius:10px;background:var(--surface);box-shadow:inset 0 1px 0 var(--highlight),0 4px 0 var(--depth),0 10px 17px var(--shadow);padding:9px;transform-style:preserve-3d}
.instance-header{height:10px;display:flex;align-items:center;gap:3px}
.instance-header>i{width:3px;height:3px;border-radius:50%;background:var(--subtle-blue)}
.instance-header>img{height:10px;width:10px;margin-left:auto}
.instance-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:10px;height:34px}
.instance-apps>span{display:grid;place-items:center;background:var(--wash);border:1px solid var(--module-line);border-radius:5px;box-shadow:0 2px 0 var(--depth)}
.instance-apps svg{width:15px;height:15px;fill:none;stroke:var(--blue);stroke-width:1.5}
.company-variant-1 .instance-apps{grid-template-columns:1.6fr 1fr 1fr}
.company-variant-1 .instance-apps>span:last-child{display:none}
.company-variant-2 .instance-apps>span:first-child{background:var(--execution);border-color:var(--subtle-blue)}
.company-variant-3 .instance-apps{grid-template-columns:1fr 1fr;gap:4px;margin-top:5px;height:39px}
.company-variant-3 .instance-apps svg{width:13px;height:13px}

/* A concrete request changes the existing process. */
.change-request{position:absolute;left:103px;top:112px;width:350px;min-height:88px;padding:20px 24px;display:flex;align-items:center;gap:17px;background:var(--surface);border:1px solid var(--edge);border-radius:22px 22px 22px 6px;box-shadow:inset 0 1px 0 var(--highlight),0 5px 0 var(--depth),0 20px 34px var(--shadow);z-index:6;opacity:0}
.change-request>span{font-size:21px;font-weight:500;line-height:1.35;letter-spacing:-.025em}
.request-person{height:42px;width:42px;background:var(--wash);border-radius:14px;display:grid;place-items:center;flex:none}
.request-person svg{width:26px;height:26px;stroke:var(--blue);fill:none;stroke-width:1.5}

/* The final composition brings the two teams around the same system. */
.collaboration-scene{position:absolute;inset:0;opacity:0;z-index:2;transform-style:preserve-3d}
.workbench{position:absolute;left:83px;top:419px;width:654px;height:170px;border:1px solid var(--edge);border-radius:43px;background:linear-gradient(145deg,var(--wash),var(--surface));box-shadow:inset 0 1px 0 var(--highlight),0 3px 0 var(--edge),0 20px 0 var(--depth),0 21px 0 var(--edge),0 40px 55px var(--shadow);transform:rotateX(48deg) rotateY(-9deg) rotateZ(-5deg)}
.team-group{position:absolute;left:36px;top:267px;width:160px;height:271px;z-index:5;transform-style:preserve-3d}
.jarvio-team{left:630px;top:242px}
.team-plinth{position:absolute;left:3px;right:3px;bottom:41px;height:56px;border-radius:50%;background:var(--data);box-shadow:0 5px 0 var(--data-depth),0 17px 26px var(--shadow);transform:rotate(-6deg)}
.person{position:absolute;left:12px;top:24px;width:78px;height:173px;z-index:2;transform:rotate(-6deg);--figure-light:#d2e1f6;--figure-mid:#98b0d1;--figure-dark:#6b89b2}
.person>i{position:absolute;left:18px;top:0;width:43px;height:43px;border-radius:50%;background:radial-gradient(circle at 30% 25%,var(--figure-light),var(--figure-mid) 60%,var(--figure-dark));box-shadow:inset -3px -3px 5px #0b234619,0 7px 12px var(--shadow)}
.person>b{position:absolute;top:53px;left:5px;width:68px;height:108px;border-radius:35px 35px 25px 25px;background:linear-gradient(110deg,var(--figure-light),var(--figure-mid) 60%,var(--figure-dark));box-shadow:inset 2px 1px 2px var(--highlight),0 5px 0 var(--figure-dark),6px 12px 15px var(--shadow)}
.person-back{left:65px;top:0;transform:rotate(7deg) scale(.85);z-index:1}
.jarvio-team .person{--figure-light:#9bc2ff;--figure-mid:#428aff;--figure-dark:#2564c7}
.jarvio-team .person-front{left:60px;transform:rotate(6deg)}
.jarvio-team .person-back{left:9px;transform:rotate(-8deg) scale(.85)}
.team-group>span{position:absolute;top:249px;left:0;right:0;text-align:center;font-size:22px;font-weight:500;letter-spacing:-.025em;color:var(--body)}
[data-theme="dark"] .client-team .person{--figure-light:#acbed6;--figure-mid:#6884a8;--figure-dark:#3c567c}

/* Real customer marks: three, three, then four. */
.proof-panel{top:118px;left:22px;right:22px}
.proof-brands{grid-template-columns:repeat(12,minmax(0,1fr));gap:32px 12px;padding:24px 5px}
.proof-brands>div{grid-column:span 4;height:118px;padding:16px}
.proof-brands>div:nth-child(n+7){grid-column:span 3;height:100px;padding:12px 8px}
.proof-brands img,.proof-brands svg{width:166px;height:67px;opacity:.84}
.proof-brands>div:nth-child(n+7) img,.proof-brands>div:nth-child(n+7) svg{width:146px;height:55px}
.proof-brands .nfl-mark{padding:13px}
.proof-brands .nfl-mark svg{width:131px;height:86px}
.proof-brands .huel-mark{width:155px;height:63px}

@media(max-width:1000px){
  .demo-button{font-size:15px;margin-top:20px;min-height:47px;padding:12px 20px;border-radius:9px;gap:17px}
  .demo-button svg{height:18px;width:18px}
  .work-silo,.work-silo:nth-child(2),.work-silo:nth-child(3){left:8px;top:14px;width:404px;height:151px}
  .work-silo:nth-child(2){top:174px}.work-silo:nth-child(3){top:334px}
  .silo-heading>svg{height:22px;width:22px}
  .handoff-lines{display:block}.handoff-lines path{stroke-width:1.3;stroke-dasharray:3 5}.handoff-lines circle{r:2.5;stroke-width:1.2}
  .order-stream img.ebay-mark{width:26px;height:19px}
  .os-title{top:16px;font-size:21px}
  .app-cell{border-radius:12px;box-shadow:inset 0 1px 0 var(--highlight),0 3px 0 var(--depth),0 9px 15px var(--shadow)}
  .app-cell>span{font-size:14px;line-height:20px}
  .execution-path{top:47px;font-size:14px;gap:7px;left:18px;right:18px}
  .execution-path>span{gap:6px}.execution-path svg{height:20px;width:20px}
  .execution-deck.flow-mode .execution-path{top:22px;left:18px;right:18px;gap:8px}
  .execution-deck.flow-mode .execution-path>span{height:45px;font-size:17px;gap:7px;border-radius:10px}
  .execution-deck.flow-mode .execution-path>span>svg{display:none}
  .execution-deck.flow-mode .execution-path>i{flex-basis:14px}
  .platform-surface{left:8px;top:18px;width:404px;height:470px;border-radius:22px;box-shadow:inset 0 1px 0 var(--highlight),0 2px 0 var(--edge),0 12px 0 var(--data-depth),0 13px 0 var(--edge),0 25px 35px var(--shadow)}
  .platform-surface>span{left:22px;bottom:19px;font-size:20px}
  .platform-surface>img{right:21px;bottom:19px;width:25px;height:25px}
  .company-instance{padding:5px;border-radius:7px;box-shadow:inset 0 1px 0 var(--highlight),0 3px 0 var(--depth),0 7px 12px var(--shadow)}
  .instance-header{height:7px;gap:2px}.instance-header>i{width:2px;height:2px}.instance-header>img{width:7px;height:7px}
  .instance-apps{gap:3px;margin-top:6px;height:21px}.instance-apps>span{border-radius:3px}.instance-apps svg{width:10px;height:10px}
  .company-variant-3 .instance-apps{height:24px;gap:2px;margin-top:4px}.company-variant-3 .instance-apps svg{width:8px;height:8px}
  .change-request{left:28px;top:67px;width:301px;min-height:71px;padding:15px 18px;gap:13px;border-radius:18px 18px 18px 5px}
  .change-request>span{font-size:20px}.request-person{height:36px;width:36px;border-radius:12px}.request-person svg{width:23px;height:23px}
  .workbench{left:19px;top:336px;width:382px;height:110px;border-radius:30px;box-shadow:inset 0 1px 0 var(--highlight),0 2px 0 var(--edge),0 12px 0 var(--depth),0 13px 0 var(--edge),0 25px 35px var(--shadow)}
  .team-group{left:4px;top:227px;width:122px;height:217px;transform:scale(.76);transform-origin:top left}
  .jarvio-team{left:306px;top:215px}
  .team-group>span{top:252px;font-size:23px}
  .team-plinth{left:0;right:-25px;bottom:0}
  .proof-panel{top:74px;left:5px;right:5px}
  .proof-brands{gap:24px 6px;padding:18px 0}
  .proof-brands>div{height:87px;padding:10px 6px}
  .proof-brands>div:nth-child(n+7){height:71px;padding:7px 4px}
  .proof-brands img,.proof-brands svg{width:111px;height:46px}
  .proof-brands>div:nth-child(n+7) img,.proof-brands>div:nth-child(n+7) svg{width:94px;height:37px}
  .proof-brands .nfl-mark{padding:6px}.proof-brands .nfl-mark svg{width:92px;height:62px}
  .proof-brands .huel-mark{width:103px;height:42px}
}
@media print{.demo-button{display:none!important}}