/* Page five: a connected technology ecosystem around the Devmundus brand. */
.ecosystem{position:relative;isolation:isolate;overflow:hidden;padding:52px 40px 38px;background:#080c10;color:#f4f8fa;border-top:1px solid #25323b}
.ecosystem-heading{text-align:center;position:relative;z-index:1}
.ecosystem-eyebrow{font:10px 'JetBrains Mono',monospace;letter-spacing:1.6px;color:#85a1b3}
.ecosystem-heading h2{font-size:clamp(34px,4vw,54px);font-weight:400;line-height:1.08;letter-spacing:-2.3px;margin:22px 0 18px}
.ecosystem-heading h2 span{background:linear-gradient(100deg,#00cbea,#e4f6fc);background-clip:text;-webkit-background-clip:text;color:transparent}
.ecosystem-heading p{max-width:495px;margin:0 auto;color:#98aab6;font-size:14px;line-height:1.7}
.ecosystem-map{--eco-tile-size:clamp(42px,6.8vw,82px);position:relative;max-width:1120px;aspect-ratio:5 / 2.6;margin:20px auto 0;isolation:isolate}
.ecosystem-map::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,#269bd35c 0%,#21628650 13.2%,#153f5933 26.4%,#0d253614 38.5%,transparent 50.6%);pointer-events:none}
.ecosystem-tools{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));list-style:none;margin:0;padding:0}
.ecosystem-tool{position:relative;display:grid;place-items:center}
.ecosystem-tool:not(.ecosystem-center){opacity:var(--eco-light,1);transition:opacity .25s}
.ecosystem-tool:not(.ecosystem-center):hover{opacity:1}
.ecosystem-center{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0}
.ecosystem-tile{position:relative;display:grid;place-items:center;width:var(--eco-tile-size);aspect-ratio:1;border:1px solid #ffffff10;border-top-color:#ffffff1b;border-left-color:#ffffff16;border-radius:21%;background:linear-gradient(155deg,#101214 0%,#090b0d 48%,#040506 100%);box-shadow:0 8px 24px #0005,inset 0 1px 0 #ffffff06,inset 0 -1px 0 #0009;transition:transform .2s,border-color .2s,box-shadow .2s}
.ecosystem-tile::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(145deg,#b5c9d52b,#5b7a8b12);opacity:var(--eco-surface,0);pointer-events:none}
.ecosystem-tile::before{content:'';position:absolute;inset:1px;border-radius:inherit;background:radial-gradient(ellipse at 18% 0%,#ffffff09,transparent 65%),linear-gradient(135deg,#ffffff06,transparent 48%);pointer-events:none}
.ecosystem-tool img{display:block;width:47%;height:47%;object-fit:contain;opacity:.9;transition:opacity .2s}
.ecosystem-tile img{position:relative;z-index:1}
.ecosystem-tile img[alt="Java"]{width:56%;height:56%}
.ecosystem-tile img[alt="Splunk"]{width:76%;height:76%}
.ecosystem-tile img[alt="Snyk"]{width:62%;height:62%;opacity:1}
.ecosystem-tool .eco-light-mark{filter:brightness(0) invert(1)}
.ecosystem-tool[data-edge=true] .ecosystem-tile{opacity:.58}
.ecosystem-tool:hover .ecosystem-tile{opacity:1;transform:translateY(-4px);border-color:#68d5f57a;box-shadow:0 8px 28px #00c9ff16}
.ecosystem-tool:hover img{opacity:1}
.ecosystem-tool-name{position:absolute;top:calc(100% + 7px);left:50%;transform:translateX(-50%);color:#c6d8e2;font-size:10px;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
.ecosystem-tool:hover .ecosystem-tool-name{opacity:1}
.ecosystem-hub{position:relative;display:flex;align-items:center;justify-content:center;width:var(--eco-tile-size);height:var(--eco-tile-size);flex-shrink:0;border-radius:18px;background:linear-gradient(145deg,#174a85 0%,#10376a 48%,#08234b 100%);border:0;box-shadow:0 12px 26px #0009,0 3px 6px #0007;z-index:2}
.ecosystem-dm-frame{display:block;position:relative;overflow:hidden;width:82%;aspect-ratio:175 / 143}
.ecosystem-hub .ecosystem-dm-frame img{position:absolute;width:104%;height:auto;max-width:none;left:-.57143%;top:-10.48951%;opacity:1;filter:url(#brand-background-cutout)}
.ecosystem-hub::before{content:none}
.ecosystem-hub::after{content:none}
.eco-mobile-grid{display:none}
.ecosystem-note{display:flex;justify-content:center;align-items:center;gap:13px;margin:0;color:#8197a5;font:9px 'JetBrains Mono',monospace;letter-spacing:1.4px;text-transform:uppercase}
.ecosystem-note i{display:block;width:3px;height:3px;background:#66d3f3;border-radius:50%}
@media(min-width:1000px){.ecosystem-heading h2 br{display:none}}
@media(min-width:701px) and (max-width:999px){.ecosystem-map{aspect-ratio:5 / 3}}
@media(max-width:700px){
 .ecosystem{padding:52px 12px 32px}
 .ecosystem-heading h2{letter-spacing:-1.5px}
 .ecosystem-heading p{max-width:315px;font-size:12px;padding:0 8px}
 .ecosystem-map{--eco-tile-size:clamp(38px,10vw,60px);aspect-ratio:5 / 7;margin:25px -4px 10px}
 .ecosystem-tools{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr))}
 .ecosystem-tool{order:var(--eco-order-mobile,0)}
 .ecosystem-tool:not(.ecosystem-center){opacity:var(--eco-light-mobile,1)}
 .ecosystem-tile::after{opacity:var(--eco-surface-mobile,0)}
 .ecosystem-tool:not(.ecosystem-center):hover{opacity:1}
 .ecosystem-hub{border-radius:11px}
 .ecosystem-hub::after{border-radius:14px}
 .eco-mobile-grid{display:block}
 .eco-desktop-grid{display:none}
 .ecosystem-tool-name{font-size:8px;top:calc(100% + 5px)}
 .ecosystem-note{font-size:7px;letter-spacing:.7px;gap:9px}
}
@media(prefers-reduced-motion:reduce){.ecosystem-tile,.ecosystem-tool:not(.ecosystem-center),.ecosystem-tool img,.ecosystem-tool-name{transition:none}.ecosystem-tool:hover .ecosystem-tile{transform:none}}

.ecosystem-tool:focus{outline:none;z-index:3;opacity:1}
.ecosystem-tool:focus-visible .ecosystem-tile{outline:2px solid #69c7ed;outline-offset:4px}
.ecosystem-tool:focus .ecosystem-tool-name{opacity:1}

/* Alternating conveyor rows, with the DM row held in the center. */
.eco-sliding .ecosystem-tools{display:flex;flex-direction:column}
.ecosystem-slide-row{position:relative;flex:1;min-height:0;list-style:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.ecosystem-slide-track{display:flex;width:200%;height:100%;margin:0;padding:0;list-style:none;animation:eco-slide var(--eco-slide-duration,85s) linear infinite;animation-direction:var(--eco-direction);animation-delay:var(--eco-delay);animation-play-state:paused}
.eco-in-view .ecosystem-slide-track{animation-play-state:running}
.eco-sliding .ecosystem-tool{flex:0 0 calc(100% / (var(--eco-columns) * 2));height:100%;order:0}
@media(hover:hover) and (pointer:fine){
 .ecosystem-slide-row:has(.ecosystem-tool:hover) .ecosystem-slide-track{animation-play-state:paused}
}
.ecosystem-slide-row:focus-within .ecosystem-slide-track{animation:none;transform:none}
.ecosystem-slide-row.eco-anchored{overflow:visible;mask-image:none;z-index:2}
.eco-anchored .ecosystem-slide-track{width:100%;animation:none}
.eco-sliding .eco-anchored .ecosystem-tool{flex-basis:calc(100% / var(--eco-columns))}
.eco-sliding .ecosystem-tool-name{top:calc(100% + 4px);padding:2px 6px;border-radius:4px;background:#08121b;color:#d9edf7;font-size:10px;z-index:3}
@keyframes eco-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:700px){
 .eco-sliding .ecosystem-tool-name{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .ecosystem-slide-track{animation:none}
}