.ecosystem{border:0;background:transparent;max-width:1180px;margin:auto;padding:50px 36px 0}
.ecosystem-eyebrow{font-size:10px;letter-spacing:2px}
.ecosystem-heading h2{font-size:clamp(32px,4vw,50px);letter-spacing:-2px;line-height:1.12;margin:19px 0 16px}
.ecosystem-heading h2 span{background:none;color:#7ed7eb}
.ecosystem-heading p{max-width:none;color:#9bafbd}
.ecosystem-map{max-width:1000px;aspect-ratio:1000/440;margin:28px auto 12px}
.ecosystem .dots{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ecosystem-map::before{z-index:1}
.ecosystem-tile{width:70px;height:62px;aspect-ratio:auto;border:0;border-radius:8px;background:none;box-shadow:none}
.ecosystem-tile::before,.ecosystem-tile::after{content:none}
.ecosystem-tool:hover .ecosystem-tile{box-shadow:none;border:0;transform:translateY(-2px)}
.ecosystem-tool .ecosystem-tile img{width:33px;height:33px;filter:grayscale(1) brightness(1.4);opacity:1;transition:filter .22s,opacity .22s}
.ecosystem-tool .ecosystem-tile img[alt="Java"]{height:39px;width:39px}
.ecosystem-tool .ecosystem-tile img[alt="Splunk"]{width:49px}
.ecosystem-tool .ecosystem-tile img[alt="Snyk"]{width:38px;height:38px}
.ecosystem-tool:is(:hover,:focus-visible) .ecosystem-tile img{filter:none}
.ecosystem-tool .ecosystem-tile img[alt="OpenAI"],.ecosystem-tool .ecosystem-tile img[alt="GitHub"]{filter:brightness(0) invert(.85)}
.ecosystem-tool:is(:hover,:focus-visible) .ecosystem-tile img[alt="OpenAI"],.ecosystem-tool:is(:hover,:focus-visible) .ecosystem-tile img[alt="GitHub"]{filter:brightness(0) invert(1)}
.ecosystem-hub{width:82px;height:76px;border-radius:10px;background:#103362;border:1px solid #65d6ee8c;box-shadow:none}
.ecosystem-dm-frame{width:66px}
.ecosystem-note{margin:24px 0 0;gap:18px}

@media(max-width:700px){.ecosystem{padding:36px 16px 0}.ecosystem-heading h2{letter-spacing:-1px}.ecosystem-map{aspect-ratio:5/7;margin:28px auto 12px}.ecosystem-tile{width:55px;height:55px}.ecosystem-tool .ecosystem-tile img{width:27px;height:27px}.ecosystem-hub{width:62px;height:62px}.ecosystem-dm-frame{width:52px}.ecosystem-note{font-size:7px;gap:9px}}
/* Optical sizes account for each mark's internal whitespace and proportions. */
.ecosystem-tool .ecosystem-tile img[alt]{width:var(--logo-size,33px);height:var(--logo-size,33px);object-fit:contain}
@media(max-width:700px){.ecosystem-tool .ecosystem-tile img[alt]{width:calc(var(--logo-size,33px)*.82);height:calc(var(--logo-size,33px)*.82)}}
/* Full-color comparison; retain the original lighting and motion. */
.ecosystem-tool .ecosystem-tile img{filter:none}
.ecosystem-tool .ecosystem-tile img[alt="OpenAI"],.ecosystem-tool .ecosystem-tile img[alt="GitHub"]{filter:brightness(0) invert(.85)}

/* DM centerpiece: restrained surface, fine technical corner accents. */
.ecosystem-hub{width:86px;height:80px;background:#1c4f88;border:1px solid #80dcee35;border-radius:14px;box-shadow:none;transition:transform .25s,border-color .25s}
.ecosystem-hub::before{content:'';position:absolute;inset:-5px;border-radius:0;background:linear-gradient(#7ddcef,#7ddcef) left top/13px 1px no-repeat,linear-gradient(#7ddcef,#7ddcef) left top/1px 13px no-repeat,linear-gradient(#7ddcef,#7ddcef) right top/13px 1px no-repeat,linear-gradient(#7ddcef,#7ddcef) right top/1px 13px no-repeat,linear-gradient(#7ddcef,#7ddcef) left bottom/13px 1px no-repeat,linear-gradient(#7ddcef,#7ddcef) left bottom/1px 13px no-repeat,linear-gradient(#7ddcef,#7ddcef) right bottom/13px 1px no-repeat,linear-gradient(#7ddcef,#7ddcef) right bottom/1px 13px no-repeat;opacity:.6;transition:opacity .25s,transform .25s;pointer-events:none}
.ecosystem-hub .ecosystem-dm-frame{width:72px}
.ecosystem-center:is(:hover,:focus-visible) .ecosystem-hub{transform:translateY(-3px);border-color:#86dbea80;box-shadow:none}
.ecosystem-center:is(:hover,:focus-visible) .ecosystem-hub::before{opacity:1;transform:scale(1.04)}
@media(max-width:700px){.ecosystem-hub{width:66px;height:64px;border-radius:11px}.ecosystem-hub .ecosystem-dm-frame{width:56px}}
@media(prefers-reduced-motion:reduce){.ecosystem-hub,.ecosystem-hub::before{transition:none}.ecosystem-center:is(:hover,:focus-visible) .ecosystem-hub{transform:none}}
/* NDA-style fine frame and square corner handles. */
.ecosystem-hub{border-radius:3px;border-color:transparent}
.ecosystem-hub::before{content:none}
.ecosystem .dm-nda-frame{position:absolute;left:-6px;top:-6px;width:calc(100% + 12px);height:calc(100% + 12px);overflow:visible;pointer-events:none;transition:opacity .25s;opacity:.9}
.ecosystem .ecosystem-center:is(:hover,:focus-visible) .dm-nda-frame{opacity:1}
/* Match the visible DM artwork, with more space inside its frame. */
.ecosystem-hub{width:64px;height:60px}
.ecosystem-hub .ecosystem-dm-frame{width:44px}
.ecosystem .dm-nda-frame{left:2px;top:2px;width:calc(100% - 4px);height:calc(100% - 4px);z-index:3;opacity:1}
@media(max-width:700px){.ecosystem-hub{width:54px;height:50px}.ecosystem-hub .ecosystem-dm-frame{width:36px}}
/* Alternative: rounded perimeter with opposing cyan accents. */
.ecosystem-hub{border-radius:13px;border-color:transparent}
.ecosystem-center:is(:hover,:focus-visible) .ecosystem-hub{border-color:transparent}
/* Softer central light, without changing proximity lighting on the tools. */
.ecosystem-map::before{opacity:.5}
/* Keep hover labels inside the conveyor row's clipping area. */
.eco-sliding .ecosystem-tool-name{top:calc(50% + 22px);line-height:14px;padding:1px 6px}
@media(max-width:700px){.eco-sliding .ecosystem-tool-name{top:calc(50% + 18px);font-size:8px;line-height:11px;padding:1px 4px}}

.ecosystem{max-width:none;background:#090e12;padding-bottom:52px}