/* Visible workflows, using the portfolio's original black and orange palette. */
.agent-flow{padding-block:65px 75px}
.af-heading{display:grid;grid-template-columns:1.5fr 1fr;align-items:end;gap:60px;margin-bottom:42px}
.af-heading h2{font-size:clamp(45px,4.8vw,80px);line-height:1.03;letter-spacing:-.055em}
.af-heading h2 span span{color:#ff754c}
.af-heading>p{max-width:365px;justify-self:end;color:#b9b5af;font-size:16px;line-height:1.6;margin-bottom:4px}
.af-figure{border-top:1px solid #38322d;border-bottom:1px solid #38322d}
.af-map{position:relative;display:grid;grid-template-columns:.85fr 2.35fr 1.1fr;gap:clamp(38px,5vw,78px);align-items:center;padding:42px 0 34px;isolation:isolate}
.af-connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:-1;pointer-events:none}
.af-connection{fill:none;stroke:#59402e;stroke-width:1.5;vector-effect:non-scaling-stroke}
.af-packet{fill:none;stroke:#ff743b;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:4 96;stroke-dashoffset:100;opacity:0;vector-effect:non-scaling-stroke}
.af-node{position:relative;min-width:0}
.af-start{text-align:left}
.af-max-mark{display:flex;align-items:center;justify-content:center;width:min(100%,160px);aspect-ratio:1;border:1px solid #f47d514f;border-radius:50%;font-size:clamp(38px,4vw,62px);line-height:1;letter-spacing:-.065em;background:linear-gradient(135deg,#ff7839,#e92815);color:#fff;box-shadow:0 0 0 12px #f05c2410;margin-bottom:26px}
.af-max-mark span{color:#fff8}
.af-start h3{font-size:24px;line-height:1.1;letter-spacing:-.04em;margin-bottom:12px}
.af-start p{font-size:14px;line-height:1.55;color:#b9b5af}
.af-lanes{display:grid;gap:60px}
.af-lane{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,4vw,64px)}
.af-lane-label{position:absolute;left:0;top:-25px;font-size:11px;line-height:1.2;color:#b69c87;letter-spacing:.025em}
.af-tool{background:#141311;border:1px solid #443a30;border-radius:12px;padding:22px 20px;min-height:154px;display:flex;flex-direction:column;justify-content:center;transition:border-color .3s}
.af-tool-index{font-size:10px;color:#f79464;line-height:1;margin-bottom:15px}
.af-tool h3{font-size:clamp(20px,1.8vw,29px);line-height:1.1;letter-spacing:-.035em;white-space:nowrap}
.af-tool p{font-size:13px;line-height:1.55;color:#b9b5af;margin-top:12px}
.af-node-light{position:absolute;right:17px;top:20px;width:5px;height:5px;border-radius:50%;background:#7d5a41}
.af-result{padding:28px 24px;border:1px solid #f1804e;border-radius:14px;background:#f3eee7;color:#1c1713}
.af-result-label{display:block;font-size:11px;margin-bottom:25px;color:#8b3a21}
.af-result h3{font-size:clamp(25px,2.15vw,35px);line-height:1.09;letter-spacing:-.045em}
.af-result ul{list-style:none;margin:25px 0 0;padding:18px 0 0;border-top:1px solid #3021162b;display:grid;gap:11px}
.af-result li{font-size:12px;line-height:1.4;display:flex;gap:9px;align-items:center}
.af-result li:before{content:"";height:5px;width:5px;flex:none;border-radius:50%;background:#f25324}
.af-footer{display:flex;justify-content:space-between;align-items:center;gap:35px;padding:24px 0 27px;border-top:1px solid #332b23}
.af-footer p{font-size:15px;color:#f1ebe5;line-height:1.55;max-width:580px}
.af-footer>span{color:#b5a18e;font-size:11px;text-align:right;line-height:1.5}
@media(prefers-reduced-motion:no-preference){
 .af-map.af-playing .af-packet{animation:af-transfer 6.5s linear infinite}
 .af-map.af-playing .af-packet[data-step="2"]{animation-name:af-transfer-middle}
 .af-map.af-playing .af-packet[data-step="3"]{animation-name:af-transfer-last}
 .af-map.af-playing .af-tool{animation:af-node-work 6.5s ease infinite}
 .af-map.af-playing [data-flow-node="openclaw"],.af-map.af-playing [data-flow-node="codex"]{animation-name:af-node-build}
 .af-map.af-playing .af-node-light{animation:af-status 6.5s ease infinite}
 .af-map.af-playing .af-result{animation:af-result-arrive 6.5s ease infinite}
}
@keyframes af-transfer{0%{stroke-dashoffset:100;opacity:0}3%{opacity:1}28%{stroke-dashoffset:0;opacity:1}29%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes af-transfer-middle{0%,26%{stroke-dashoffset:100;opacity:0}27%{opacity:1}62%{stroke-dashoffset:0;opacity:1}63%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes af-transfer-last{0%,60%{stroke-dashoffset:100;opacity:0}61%{opacity:1}95%{stroke-dashoffset:0;opacity:1}96%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes af-node-work{0%,10%,75%,100%{border-color:#443a30;transform:translateY(0)}25%,55%{border-color:#fc743d;transform:translateY(-3px)}}
@keyframes af-node-build{0%,30%,100%{border-color:#443a30;transform:translateY(0)}50%,80%{border-color:#fc743d;transform:translateY(-3px)}}
@keyframes af-status{0%,100%{background:#7d5a41}30%,75%{background:#ffb783;box-shadow:0 0 0 5px #f3793522}}
@keyframes af-result-arrive{0%,65%,100%{transform:translateY(0)}85%{transform:translateY(-5px)}}
@media(max-width:1100px) and (min-width:901px){.af-map{gap:27px;grid-template-columns:.8fr 2.4fr 1.1fr}.af-lane{gap:26px}.af-tool{padding:20px 13px}.af-tool h3{font-size:20px}.af-tool p{font-size:12px}.af-result{padding:24px 16px}.af-start h3{font-size:21px}.af-result h3{font-size:25px}}
@media(max-width:900px){
 .agent-flow{padding-block:65px}.af-heading{grid-template-columns:1fr;gap:24px;margin-bottom:36px}.af-heading h2{font-size:clamp(39px,6vw,64px)}.af-heading>p{justify-self:start;max-width:540px;font-size:15px;margin:0}
 .af-map{grid-template-columns:1fr;gap:56px;padding:30px 0;max-width:590px;margin:auto}
 .af-start{justify-self:center;display:grid;grid-template-columns:72px 1fr;column-gap:22px;align-items:center}
 .af-max-mark{width:72px;font-size:31px;margin:0;grid-row:1/3;box-shadow:0 0 0 7px #f05c2410}
 .af-start h3{font-size:23px;margin:0 0 7px}.af-start p{font-size:13px}.af-start p br{display:none}
 .af-lanes{grid-template-columns:1fr 1fr;gap:30px}.af-lane{grid-template-columns:1fr;gap:30px}.af-lane-label{top:-21px;font-size:10px}
 .af-tool{min-height:127px;padding:18px}.af-tool h3{font-size:23px}.af-tool p{font-size:13px;margin-top:9px}.af-tool-index{margin-bottom:12px}
 .af-result{justify-self:center;width:100%;max-width:470px;padding:22px 25px;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:center}
 .af-result-label{grid-column:1;margin:0 0 9px;font-size:10px}.af-result h3{grid-column:1;grid-row:2;font-size:26px}.af-result ul{grid-column:2;grid-row:1/3;padding:0 0 0 20px;border-top:0;border-left:1px solid #3021162b;margin:0;gap:10px}.af-result li{font-size:12px}
 .af-footer{display:block;padding-block:22px}.af-footer p{font-size:14px}.af-footer>span{display:block;text-align:left;font-size:10px;margin-top:12px}
}
@media(max-width:540px){
 .af-heading{gap:19px;margin-bottom:30px}.af-heading h2{font-size:10vw}.af-heading>p{font-size:14px;line-height:1.55}
 .af-map{gap:47px}.af-lanes{gap:22px}.af-lane{gap:28px}.af-tool{padding:15px 12px;min-height:127px}.af-tool h3{font-size:20px}.af-tool p{font-size:12px;line-height:1.5}.af-tool-index{font-size:9px}.af-node-light{right:12px;top:16px;width:4px;height:4px}
 .af-result{padding:20px 17px;column-gap:17px}.af-result h3{font-size:23px}.af-result li{font-size:12px}.af-result ul{padding-left:13px}.af-footer p{font-size:13px}
}
@media(prefers-reduced-motion:reduce){.af-map *{animation:none!important;transition:none!important}.af-packet{display:none}.af-connection{stroke:#b76639}}