/* The hero illustration tells a concrete integration story in both themes. */
.hero{padding-top:125px;min-height:auto;padding-bottom:55px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);gap:46px;align-items:center}
.hero__copy{max-width:750px}
.system-demo{--flow:var(--cyan);position:relative;min-width:0;padding:24px;border:1px solid var(--line-2);border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--a2) 5%,var(--surface)),var(--bg));box-shadow:0 30px 80px -55px var(--a2);overflow:hidden}
.system-top{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:18px}.system-top .eyebrow{font-size:.59rem;letter-spacing:.12em}.demo-badge{font-size:.62rem;color:var(--dim);white-space:nowrap;border:1px solid var(--line-2);padding:4px 8px;border-radius:99px}
.system-demo h2{font:700 clamp(1.5rem,2.3vw,2rem)/1.15 var(--display);letter-spacing:-.035em}.system-intro{font-size:.85rem;line-height:1.5;color:var(--dim);margin-top:10px;max-width:52ch}
.system-controls{display:flex;gap:5px;margin-top:22px;border-bottom:1px solid var(--line-2);padding-bottom:12px}.system-controls button{flex:1;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--dim);padding:9px 4px;font-size:.65rem;cursor:pointer;min-height:40px}.system-controls button[aria-pressed="true"]{color:var(--flow);background:color-mix(in srgb,var(--flow) 9%,var(--surface));border-color:color-mix(in srgb,var(--flow) 40%,transparent)}
.system-map{position:relative;height:330px;margin:10px -5px 0;isolation:isolate;perspective:900px}
.map-grid{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;transform:rotateX(35deg) rotateZ(-7deg) scale(.94);mask-image:radial-gradient(ellipse,#000,transparent 75%)}
.system-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.system-wires path{fill:none;stroke:var(--flow);stroke-width:1.8;stroke-dasharray:5 7;animation:shipment-flow 2.4s linear infinite;opacity:.8}.system-wires .queue-wire{opacity:.18;animation:none;stroke:var(--faint)}
.system-node{position:absolute;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:24%;height:74px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);box-shadow:5px 7px 0 var(--bg-2),6px 8px 0 var(--line-2);font-size:.73rem;text-align:center;transform:rotateY(-7deg) rotateX(5deg);transition:border-color .25s,opacity .25s}.system-node b{font-weight:650;line-height:1.2}.system-node small{font-size:.58rem;color:var(--dim);line-height:1.25;padding:0 4px}.node-icon{color:var(--flow);font:500 1.15rem/1 var(--body)}
.source{left:1%}.source-one{top:10%}.source-two{top:39%}.source-three{top:68%}.integration{left:35%;top:34%;height:104px;width:30%;border-color:var(--flow);box-shadow:0 0 35px -18px var(--flow),5px 7px 0 var(--bg-2),6px 8px 0 var(--flow)}.integration .node-icon{font-size:1.7rem}.integration small{max-width:20ch}.destination{right:1%}.carrier{top:10%}.tracking{top:39%}.retry{top:68%;opacity:.6}.node-light{width:7px;height:7px;background:var(--flow);border-radius:50%;box-shadow:0 0 12px var(--flow)}.map-caption{position:absolute;bottom:0;left:1%;font-size:.55rem;letter-spacing:.13em;color:var(--faint)}
.system-explanation{margin-top:16px;padding:15px;border-left:2px solid var(--flow);border-radius:0 9px 9px 0;background:color-mix(in srgb,var(--flow) 5%,var(--surface));min-height:124px}.system-explanation b{font:650 .9rem/1.4 var(--display)}.system-explanation p{font-size:.79rem;color:var(--dim);line-height:1.55;margin-top:6px}.system-footnote{font-size:.62rem;color:var(--faint);margin-top:12px;line-height:1.5}
.system-demo[data-state="before"]{--flow:var(--faint)}.system-demo[data-state="before"] .system-wires path{animation:none;opacity:.12}.system-demo[data-state="before"] .integration{opacity:.2;border-style:dashed}.system-demo[data-state="before"] .tracking{border-style:dashed}
.system-demo[data-state="failure"] .carrier{border-color:var(--coral)}.system-demo[data-state="failure"] .carrier .node-light{background:var(--coral);box-shadow:none}.system-demo[data-state="failure"] .carrier-wire{animation:none;stroke:var(--coral);opacity:.35}.system-demo[data-state="failure"] .queue-wire{stroke:var(--amber);animation:shipment-flow 2.4s linear infinite;opacity:1}.system-demo[data-state="failure"] .retry{opacity:1;border-color:var(--amber)}.system-demo[data-state="failure"] .tracking-wire{animation:none;opacity:.2}
@keyframes shipment-flow{to{stroke-dashoffset:-48}}
@media(min-width:1150px){#portfolio .wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px}#portfolio .hero__copy{max-width:570px}#portfolio h1{font-size:clamp(3rem,4.4vw,4.6rem)}#portfolio .lead{font-size:1.08rem}.system-map{height:350px}.system-demo{padding:25px}#portfolio .facts{gap:8px}.fact{font-size:.76rem}}
@media(max-width:760px){.hero{padding-top:115px}.hero .wrap{gap:32px}.system-demo{padding:18px;border-radius:18px}.system-map{height:300px}.system-top{flex-wrap:wrap;gap:6px}.system-controls button{font-size:.6rem}.system-node{font-size:.62rem}.system-node small{font-size:.52rem}.system-explanation{min-height:148px}.hero .scroll-cue{display:none}.system-demo h2{font-size:1.6rem}}
@media(prefers-reduced-motion:reduce){.system-wires path{animation:none}.system-node{transform:none}}
/* Experience player: a raised architecture board with user-controlled perspective. */
.experience-picker{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}.experience-picker button{border:1px solid var(--line-2);background:var(--bg);border-radius:99px;padding:8px 10px;color:var(--dim);font-size:.68rem;cursor:pointer;min-height:36px}.experience-picker button[aria-pressed="true"]{background:var(--flow);color:var(--on-color);border-color:var(--flow)}
.system-demo{--scene-turn:-6deg}.system-demo[data-company="1"]{--flow:var(--coral)}.system-demo[data-company="2"]{--flow:var(--violet)}.system-demo[data-company="3"]{--flow:var(--cyan)}
.scene-platform{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(13deg) rotateY(var(--scene-turn));transition:transform .35s ease}.scene-platform .system-node{transform:translateZ(22px);box-shadow:0 8px 0 var(--bg-2),0 9px 0 var(--line-2),0 22px 25px -15px rgba(0,0,0,.4)}.scene-platform .integration{transform:translateZ(38px);box-shadow:0 12px 0 var(--bg-2),0 13px 0 var(--flow),0 25px 35px -20px var(--flow)}.scene-platform .map-grid{transform:translateZ(-12px);opacity:.8}.scene-platform .map-caption{transform:translateZ(5px)}
.system-demo h2{min-height:2.4em}.system-intro{min-height:3em}.system-explanation{min-height:145px}.scene-angle{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:.65rem;color:var(--dim);margin-top:15px}.scene-angle input{width:40%;accent-color:var(--flow);cursor:ew-resize;min-height:30px}
.story-transport{display:flex;align-items:center;gap:8px;margin-top:15px}.story-transport button{min-height:38px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--text);padding:7px 12px;font-size:.72rem;cursor:pointer}.story-transport [data-position]{margin-left:auto;font-size:.7rem;font-variant-numeric:tabular-nums;color:var(--dim)}.play-progress{height:2px;background:var(--line);margin-top:13px;overflow:hidden}.play-progress i{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:var(--a1)}@keyframes story-progress{to{transform:scaleX(1)}}
.system-demo[data-motion="false"] .system-wires path{animation-play-state:paused}
/* Integrably: an isometric integration assembly line, distinct from the career diagrams. */
.integrably-story{display:grid;grid-template-columns:.85fr 1.15fr;gap:45px;padding:40px;border:1px solid var(--line-2);border-radius:26px;background:var(--surface);overflow:hidden}.factory-copy h3{font:720 clamp(1.8rem,3vw,2.7rem)/1.12 var(--display);letter-spacing:-.035em;margin:18px 0}.factory-copy p{color:var(--dim);font-size:1rem}.factory-steps{display:grid;gap:8px;margin:25px 0}.factory-steps button{background:var(--bg);color:var(--dim);border:1px solid var(--line-2);border-radius:12px;padding:14px;text-align:left;cursor:pointer;font-size:.85rem}.factory-steps button[aria-pressed="true"]{border-color:var(--a1);color:var(--a1);background:color-mix(in srgb,var(--a1) 7%,var(--bg))}.factory-demo{min-width:0}.factory-heading{display:flex;gap:10px;justify-content:space-between;align-items:center;font-size:.61rem;letter-spacing:.1em;color:var(--dim)}
.factory-scene{position:relative;height:300px;perspective:900px;isolation:isolate;margin:20px 0}.factory-floor{position:absolute;inset:5% 0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:28px 28px;transform:rotateX(55deg) rotateZ(-20deg);border:1px solid var(--line-2);border-radius:25px}.factory-belt{position:absolute;left:5%;right:5%;top:50%;height:46px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--a1) 25%,var(--surface)) 0 2px,var(--bg-2) 2px 18px);border:1px solid var(--line-2);transform:rotate(-12deg) skewX(-20deg);background-size:18px 100%;animation:assembly-belt 1.8s linear infinite}
.factory-block{position:absolute;width:29%;padding:16px 9px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);display:flex;flex-direction:column;gap:8px;text-align:center;transform:rotateX(12deg) rotateY(-15deg);box-shadow:5px 8px 0 var(--bg-2),6px 9px 0 var(--line-2);transition:opacity .5s,transform .5s,border-color .5s}.factory-block span{font-size:.5rem;letter-spacing:.1em;color:var(--dim)}.factory-block b{font:700 .95rem/1.2 var(--display)}.factory-block small{font-size:.6rem;line-height:1.4;color:var(--dim)}.factory-input{left:0;top:44%}.factory-engine{left:35%;top:22%;width:32%;border-color:var(--a1);padding-bottom:42px;box-shadow:7px 14px 0 var(--bg-2),8px 15px 0 var(--a1)}.factory-output{right:0;top:26%;border-color:var(--a1)}.factory-layers{display:flex;gap:5px;justify-content:center;position:absolute;bottom:13px;left:0;right:0}.factory-layers i{width:19px;height:9px;transform:skewY(-20deg);background:var(--a1);opacity:.6;animation:assembly-layer 2s ease-in-out infinite}.factory-layers i:nth-child(2){animation-delay:.2s}.factory-layers i:nth-child(3){animation-delay:.4s}.manual-code{display:none;position:absolute;inset:25% 5%;gap:12px;transform:rotate(-6deg)}.manual-code span{background:var(--bg);border:1px solid var(--line-2);border-left:3px solid var(--coral);border-radius:10px;padding:12px 16px;font:500 .85rem monospace;box-shadow:5px 5px 0 var(--bg-2)}
.integrably-story[data-build="manual"] .manual-code{display:grid}.integrably-story[data-build="manual"] .factory-block{opacity:.08}.integrably-story[data-build="manual"] .factory-belt{opacity:.1;animation:none}.integrably-story[data-build="configure"] .factory-output{opacity:.2;transform:translateY(15px) rotateY(-15deg)}.integrably-story[data-build="automated"] .factory-engine{animation:assembly-engine 4s ease-in-out infinite}.integrably-story[data-motion="false"] .factory-scene *{animation-play-state:paused}
.factory-result{border-top:1px solid var(--line-2);padding-top:18px;min-height:130px}.factory-result b{font:650 1rem/1.4 var(--display)}.factory-result p{font-size:.84rem;color:var(--dim);margin-top:8px;line-height:1.55}.reserved-products{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}.reserved-products article{padding:30px;border:1px dashed var(--line-2);border-radius:20px;background:var(--bg-2)}.reserved-products h3{font:700 1.6rem var(--display);margin:12px 0}.reserved-products p{font-size:.95rem;color:var(--dim)}
@keyframes assembly-belt{to{background-position:36px 0}}@keyframes assembly-layer{50%{transform:translateY(-4px) skewY(-20deg);opacity:1}}@keyframes assembly-engine{50%{transform:translateY(-6px) rotateX(12deg) rotateY(-15deg)}}
@media(min-width:1150px){#portfolio .wrap{align-items:start}#portfolio .hero__copy{padding-top:75px}.system-demo{padding:22px}.system-map{height:310px}}
@media(max-width:1000px){.integrably-story{grid-template-columns:1fr;gap:35px;padding:28px}.factory-copy{max-width:600px}.factory-scene{max-width:640px;margin-inline:auto}.factory-result{min-height:105px}}
@media(max-width:600px){.experience-picker{gap:5px}.experience-picker button{font-size:.6rem;padding:7px 8px}.system-demo h2{font-size:1.35rem;min-height:3.4em}.system-intro{min-height:4.5em}.system-explanation{min-height:185px}.system-demo{padding:16px}.system-controls button{font-size:.59rem}.system-map{height:290px}.scene-platform .system-node{transform:translateZ(12px)}.scene-platform .integration{transform:translateZ(18px)}.integrably-story{padding:20px}.factory-heading{flex-wrap:wrap}.factory-scene{height:285px}.factory-block{padding-inline:6px}.factory-block b{font-size:.75rem}.factory-block small{font-size:.52rem}.factory-input{top:53%}.factory-engine{top:22%}.factory-output{top:32%}.reserved-products{grid-template-columns:1fr}.reserved-products article{padding:24px}}
@media(prefers-reduced-motion:reduce){.scene-platform,.scene-platform .system-node,.scene-platform .integration{transform:none;transition:none}.factory-scene *{animation:none!important}.play-progress i{animation:none!important}}
/* Trace follows a ticket through a layered service desk, rather than an API assembly line. */
.trace-story{--trace-accent:var(--violet);display:grid;grid-template-columns:.85fr 1.15fr;gap:45px;margin-top:26px;padding:40px;border:1px solid var(--line-2);border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 5%,var(--surface)),var(--surface));overflow:hidden}.trace-copy .eyebrow{color:var(--trace-accent)}.trace-copy h3{font:720 clamp(1.8rem,3vw,2.7rem)/1.12 var(--display);letter-spacing:-.035em;margin:18px 0}.trace-copy>p{color:var(--dim);font-size:1rem}.trace-capabilities{display:grid;gap:12px;margin:28px 0;font-size:.9rem;color:var(--dim)}.trace-capabilities li{border-bottom:1px solid var(--line);padding-bottom:12px}.trace-capabilities li::before{content:'↗';margin-right:12px;color:var(--trace-accent)}.trace-demo{min-width:0}.trace-stages{display:flex;gap:5px;margin-top:20px}.trace-stages button{flex:1;min-height:40px;padding:7px 3px;border:1px solid var(--line-2);border-radius:8px;background:var(--bg);color:var(--dim);font-size:.65rem;cursor:pointer}.trace-stages button[aria-pressed="true"]{color:var(--trace-accent);border-color:var(--trace-accent);background:color-mix(in srgb,var(--trace-accent) 8%,var(--surface))}
.trace-desk{height:360px;position:relative;perspective:1000px;margin:18px 0;isolation:isolate}.trace-orbit{position:absolute;inset:10px 8%;border:1px solid var(--line-2);border-radius:50%;transform:rotateX(60deg) rotateZ(-24deg);background:repeating-radial-gradient(ellipse,transparent 0 34px,var(--line) 35px 36px)}.trace-rail{position:absolute;left:8%;right:8%;bottom:70px;height:1px;background:var(--line-2);display:flex;justify-content:space-between;transform:rotate(-9deg)}.trace-rail i{width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--surface-2);border:1px solid var(--trace-accent);transition:background .4s}
.trace-ticket{position:absolute;z-index:2;left:9%;top:22px;width:75%;padding:22px;border:1px solid color-mix(in srgb,var(--trace-accent) 50%,var(--line-2));border-radius:17px;background:var(--surface);transform:rotateX(11deg) rotateY(-10deg) rotateZ(-4deg);box-shadow:4px 6px 0 var(--bg-2),5px 7px 0 var(--line-2),9px 13px 0 var(--bg-2),10px 14px 0 var(--line-2),0 28px 45px -30px var(--trace-accent);transition:transform .65s ease,border-color .3s}.trace-ticket-top{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.6rem;color:var(--dim);letter-spacing:.08em}.trace-ticket-top span:last-child{color:var(--trace-accent);padding:5px 8px;border-radius:99px;background:color-mix(in srgb,var(--trace-accent) 10%,var(--surface));letter-spacing:0}.trace-ticket h4{font:700 1.25rem/1.25 var(--display);margin:18px 0 5px}.trace-ticket p{font-size:.7rem;color:var(--dim)}.trace-ticket-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}.trace-ticket-fields>div{display:grid;gap:6px}.trace-ticket-fields span{font-size:.6rem;color:var(--dim)}.trace-ticket-fields b{font-size:.72rem;font-weight:600;line-height:1.3}.trace-ticket-history{display:flex;gap:8px;align-items:center;font-size:.64rem;margin-top:18px;padding-top:12px;border-top:1px solid var(--line);color:var(--dim)}.trace-ticket-history>span:first-child{color:var(--trace-accent);font-size:1.1rem}.trace-signal{position:absolute;z-index:3;right:1%;top:160px;display:grid;gap:9px;place-items:center;padding:14px;border:1px solid var(--trace-accent);border-radius:15px;background:var(--surface);box-shadow:4px 7px 0 var(--bg-2);transform:rotateY(-12deg) rotateZ(5deg)}.trace-signal>span{font-size:1.8rem;line-height:1;color:var(--trace-accent)}.trace-signal b{font-size:.6rem;font-weight:600}.trace-portal{position:absolute;bottom:4px;left:14%;right:5%;display:grid;gap:6px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg);padding:14px 18px;transform:rotateX(10deg) rotateY(-8deg) rotateZ(-3deg)}.trace-portal>span{font-size:.52rem;letter-spacing:.13em;color:var(--dim)}.trace-portal>b{font:650 .85rem var(--display);color:var(--trace-accent)}.trace-portal>small{font-size:.52rem;color:var(--faint)}.trace-result{min-height:135px;border-left:2px solid var(--trace-accent);padding:14px 16px;background:color-mix(in srgb,var(--trace-accent) 4%,var(--surface));border-radius:0 10px 10px 0}.trace-result>b{font:650 1rem/1.4 var(--display)}.trace-result>p{font-size:.84rem;color:var(--dim);margin-top:8px;line-height:1.55}.trace-story .play-progress i{background:var(--trace-accent)}
.trace-story[data-ticket-step="1"] .trace-ticket{transform:translateX(5px) rotateX(8deg) rotateY(4deg) rotateZ(-1deg)}.trace-story[data-ticket-step="2"]{--trace-accent:var(--coral)}.trace-story[data-ticket-step="2"] .trace-ticket{transform:translateY(-5px) rotateX(8deg) rotateY(-5deg) rotateZ(2deg)}.trace-story[data-ticket-step="3"]{--trace-accent:var(--cyan)}.trace-story[data-ticket-step="3"] .trace-ticket{transform:translateY(-10px) rotateX(4deg) rotateY(3deg) rotateZ(-1deg)}.trace-story[data-ticket-step="0"] .trace-rail i:first-child,.trace-story[data-ticket-step="1"] .trace-rail i:nth-child(-n+2),.trace-story[data-ticket-step="2"] .trace-rail i:nth-child(-n+3),.trace-story[data-ticket-step="3"] .trace-rail i{background:var(--trace-accent)}
@media(max-width:1000px){.trace-story{grid-template-columns:1fr;gap:32px;padding:28px}.trace-desk{max-width:650px;margin-inline:auto}.trace-result{min-height:110px}}
@media(max-width:600px){.trace-story{padding:20px}.trace-stages{gap:4px}.trace-stages button{font-size:.58rem}.trace-desk{height:370px;margin-inline:-6px}.trace-ticket{left:2%;width:89%;padding:17px;top:28px}.trace-ticket h4{font-size:1.1rem}.trace-signal{top:210px;right:0;padding:10px}.trace-signal>span{font-size:1.4rem}.trace-portal{left:6%;right:2%;bottom:0}.trace-ticket-fields{gap:8px}.trace-ticket-fields b{font-size:.65rem}.trace-result{min-height:172px}}
@media(prefers-reduced-motion:reduce){.trace-ticket,.trace-signal,.trace-portal{transform:none!important;transition:none!important}}