/* Local draft: visual explanation of an example integration and delivery process. */
.ecosystem{margin:88px 0 0;padding:48px;background:#0b1020;color:#f2f4f8;border:1px solid #26334d;border-radius:20px;overflow:hidden;position:relative}
.ecosystem:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#8398bb25 .8px,transparent .8px);background-size:23px 23px;pointer-events:none;mask-image:linear-gradient(black,transparent)}
.ecosystem-heading,.system-map,.ecosystem figcaption{position:relative;z-index:1}
.ecosystem-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:36px;margin-bottom:44px}
.ecosystem .eyebrow{font-size:12px;color:#c6ff3d}
.ecosystem-heading h3{font-size:clamp(28px,2.6vw,38px);line-height:1.2;letter-spacing:-1.4px;font-weight:400;margin:16px 0 0}
.ecosystem-heading>p{font-size:15px;line-height:1.65;color:#a9b9d2;margin:0 0 3px}
.system-map{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:68px;align-items:start}
.map-column{position:relative;min-width:0}
.map-label{font-size:13px;line-height:1.5;color:#93a7c8;min-height:44px}
.channel-node{display:flex;align-items:center;gap:17px;border:1px solid #35435e;border-radius:12px;background:#141e31;padding:14px 19px;position:relative;margin-bottom:16px;min-height:72px}
.channel-node:last-child{margin-bottom:0}
.channel-node>svg{width:37px;height:37px;flex:none;stroke:#b9c6db;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.channel-node>span{font-size:16px;white-space:nowrap}
.channel-node:after{content:'';position:absolute;left:100%;top:50%;width:34px;border-top:1px solid #526444}
.channel-node>i{position:absolute;right:-38px;top:calc(50% - 3px);height:6px;width:6px;background:#c6ff3d;border-radius:50%;box-shadow:0 0 12px #c6ff3d55}
.channels:after{content:'';position:absolute;left:calc(100% + 34px);top:80px;bottom:36px;border-left:1px solid #526444}
.agent-node{border:1px solid #a2c24e;border-radius:18px;background:linear-gradient(145deg,#c6ff3d1c,#18252a);height:248px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;text-align:center;padding:23px 16px;box-shadow:0 0 50px #c6ff3d04}
.agent-node:before{content:'';position:absolute;width:34px;right:100%;top:50%;border-top:1px solid #738b4f}
.agent-node>svg{width:60px;height:55px;stroke:#c6ff3d;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;margin-bottom:14px}
.agent-node>strong{font-size:25px;font-weight:500;letter-spacing:-.6px}
.agent-node>span{font-size:14px;line-height:1.65;color:#acbfd0;margin-top:10px}
.agent-activity{display:flex;gap:4px;align-items:center;height:24px;margin-top:15px}
.agent-activity i{width:3px;height:8px;border-radius:2px;background:#c6ff3d;opacity:.5}
.agent-activity i:nth-child(3n){height:18px;opacity:.8}.agent-activity i:nth-child(4n){height:13px}.agent-activity i:nth-child(5n){height:23px;opacity:1}
.crm-node{background:#151f33;border:1px solid #35435e;border-radius:16px;min-height:248px;padding:24px 22px;position:relative}
.crm-node:before{content:'';position:absolute;right:100%;top:50%;width:68px;border-top:1px solid #738b4f}
.crm-heading{display:flex;align-items:center;gap:13px;margin-bottom:23px}
.crm-heading>svg{width:33px;height:33px;stroke:#c6ff3d;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.crm-heading>strong{font-size:22px;font-weight:400;letter-spacing:-.5px}
.crm-node ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.crm-node li{display:flex;gap:10px;font-size:14px;line-height:1.5;color:#bdcbe1}
.map-check{font-size:14px;color:#c6ff3d}
.crm-status{margin-top:21px;padding-top:16px;border-top:1px solid #34415a;font-size:13px;color:#aabbd4}
.crm-status .live{width:5px;height:5px;margin-right:7px}
.ecosystem figcaption{border-top:1px solid #2e3b54;margin-top:34px;padding-top:20px;font-size:13px;line-height:1.65;color:#8fa4c5}
.steps{position:relative}
.steps .step-index{border-top:0;position:relative;padding:0 0 18px;font-family:ui-monospace,monospace;color:#5f7150}
.steps .step-index:before{content:'';position:absolute;top:10px;left:40px;right:-32px;border-top:1px solid #a7b4c8}
.steps article:last-child .step-index:before{right:0}
.step-visual{margin:0 0 24px;background:#e5eaf2;border:1px solid #d6deea;border-radius:13px;overflow:hidden}
.step-visual>svg{display:block;width:100%;height:150px;stroke:#4f6488;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.step-visual .step-halo{fill:#d5dfeb;stroke:none}
.step-visual .step-fill{fill:#c6ff3d;stroke:#aecf5d}
.step-visual .step-ink{stroke:#263752;stroke-width:2}
.step-visual .step-lime{stroke:#7b9e36;stroke-width:3}
@media(max-width:1100px){
.ecosystem{padding:35px}.system-map{gap:42px;grid-template-columns:.9fr 1fr 1.1fr}.channel-node{padding:14px 12px;gap:10px}.channel-node>span{font-size:14px}.channel-node>svg{width:30px;height:30px}.channel-node:after{width:21px}.channel-node>i{right:-25px}.channels:after{left:calc(100% + 21px)}.agent-node:before{width:21px}.crm-node:before{width:42px}.crm-node{padding:23px 16px}.crm-node li{font-size:13px}.crm-heading>strong{font-size:20px}.map-label{font-size:12px}.steps .step-index:before{right:-25px}
}
@media(max-width:760px){
.ecosystem{padding:29px 22px;margin-top:52px;border-radius:15px}.ecosystem-heading{display:block;margin-bottom:29px}.ecosystem-heading h3{font-size:30px;letter-spacing:-1px}.ecosystem-heading>p{font-size:15px;margin-top:20px}.ecosystem-heading>p br{display:none}.system-map{grid-template-columns:1fr;gap:38px}.map-label{min-height:0;margin-bottom:16px;font-size:13px}.channels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.channels>.map-label{grid-column:1/-1;margin-bottom:0}.channel-node{display:flex;flex-direction:column;padding:16px 7px;gap:12px;margin:0;min-height:103px;border-radius:10px}.channel-node>svg{width:36px;height:36px}.channel-node>span{font-size:13px;white-space:normal;text-align:center}.channel-node:after{left:50%;top:100%;width:0;height:20px;border-left:1px solid #526444;border-top:0}.channel-node>i{display:none}.channels:after{left:16.7%;right:16.7%;top:auto;bottom:-20px;border-left:0;border-top:1px solid #526444}.agent-column:before{content:'';position:absolute;left:50%;bottom:100%;height:18px;border-left:1px solid #738b4f}.agent-node{height:232px}.agent-node:before{display:none}.crm-node{min-height:0;padding:25px}.crm-column:before{content:'';position:absolute;left:50%;bottom:100%;height:38px;border-left:1px solid #738b4f}.crm-node:before{display:none}.crm-heading>strong{font-size:23px}.crm-node li{font-size:15px}.crm-status{font-size:14px}.ecosystem figcaption{font-size:13px;line-height:1.7;margin-top:27px}.steps .step-index:before{right:0}
}
@media(max-width:480px){
.ecosystem{padding:26px 18px}.ecosystem-heading h3{font-size:27px}.ecosystem .eyebrow{font-size:12px}.channels{gap:7px}.channel-node{padding-inline:3px}.channel-node>span{font-size:13px;letter-spacing:-.25px}.step-visual>svg{height:175px}.steps .step-index{padding-bottom:18px}.steps article{position:relative}.steps article:not(:last-child):after{content:'';position:absolute;left:50%;height:14px;bottom:-23px;border-left:1px solid #acb9cc}.steps .step-index:before{right:0}
}
@media(max-width:350px){.channels{grid-template-columns:1fr}.channel-node{flex-direction:row;justify-content:flex-start;padding:13px 17px;min-height:65px}.channel-node>span{font-size:15px}.channel-node:after,.channels:after{display:none}.agent-column:before{height:38px}.ecosystem-heading h3{font-size:25px}}
.agent-usecases{position:relative;z-index:1;margin-top:42px;padding-top:32px;border-top:1px solid #2e3b54}
.usecases-heading{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:25px}
.usecases-heading h4{font-size:26px;font-weight:400;line-height:1.25;letter-spacing:-.7px;margin:0}
.usecases-heading>span{font-size:13px;line-height:1.6;color:#93a7c8}
.usecase-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 34px}
.usecase-grid article{padding:24px 0 22px;border-top:1px solid #2e3b54}
.usecase-index{font:12px/1.6 ui-monospace,monospace;letter-spacing:.5px;color:#b5d783}
.usecase-grid h5{font-size:21px;font-weight:400;letter-spacing:-.5px;line-height:1.3;margin:13px 0 11px}
.usecase-grid p{font-size:16px;line-height:1.7;color:#a9b9d2;margin:0;max-width:470px}
@media(max-width:760px){.agent-usecases{margin-top:31px;padding-top:26px}.usecases-heading{display:block;margin-bottom:22px}.usecases-heading h4{font-size:25px;letter-spacing:-.6px}.usecases-heading>span{display:block;margin-top:12px;font-size:13px}.usecase-grid{grid-template-columns:1fr}.usecase-grid article{padding:24px 0}.usecase-grid h5{font-size:22px}.usecase-grid p{font-size:16px}.usecase-index{font-size:12px}}