/* Software ecosystem: connected cards with native accessible links. */
#serviceApp .ecosystem{margin:32px 0 44px;padding:clamp(18px,3vw,36px);background:#eef3ed;border:1px solid #d2ded5;border-radius:12px}
#serviceApp .ecosystem-heading>span,#serviceApp .eco-kicker,#serviceApp .eco-example>span{font-size:10px;letter-spacing:.12em;font-weight:600;color:#416653}
#serviceApp .ecosystem-heading h2{font-size:clamp(25px,3vw,36px);line-height:1.2;letter-spacing:-.03em;margin:10px 0 15px}
#serviceApp .ecosystem-heading p{max-width:760px;font-size:15px;line-height:1.75;color:#4e6358;margin:0 0 28px}
.ecosystem-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr) minmax(0,1fr);gap:16px 28px;align-items:stretch;position:relative}
#serviceApp .eco-node{display:block;position:relative;min-width:0;padding:18px;background:#fff;border:1px solid #cbdace;border-radius:8px;color:#183735;text-decoration:none;transition:border-color .2s,box-shadow .2s}
.eco-left{grid-column:1}.eco-right{grid-column:3}.eco-row-1{grid-row:1}.eco-row-2{grid-row:2}.eco-row-3{grid-row:3}
.eco-node::after{content:"";position:absolute;top:50%;width:28px;height:2px;background:#8bad97}.eco-left::after{left:100%}.eco-right::after{right:100%}
#serviceApp .eco-node h3{font-size:19px;line-height:1.3;margin:7px 0 8px}#serviceApp .eco-node p{font-size:13px;line-height:1.65;margin:0 0 12px;color:#4e6358}
.eco-connection{display:block;font-size:11px;line-height:1.55;color:#285d49;border-top:1px solid #e3ebe3;padding-top:10px}
#serviceApp .eco-hub{grid-column:2;grid-row:1 / 4;align-self:center;position:relative;z-index:1;padding:28px 20px;border-radius:12px;background:#183f38;color:#fff;box-shadow:0 14px 30px #183f3818}
#serviceApp .eco-hub .eco-kicker{color:#c6e3d2}#serviceApp .eco-hub h3{font-size:clamp(20px,2.3vw,30px);line-height:1.3;margin:12px 0;color:#fff;overflow-wrap:anywhere}#serviceApp .eco-hub p{font-size:14px;line-height:1.75;color:#e1ebe5;margin:0 0 22px}
#serviceApp .eco-hub a{display:block;font-size:13px;line-height:1.6;color:#d4f19a;margin:14px 0;text-underline-offset:4px}.eco-hub-note{display:block;font-size:12px;line-height:1.6;color:#c6d9ce;margin-top:24px;padding-top:18px;border-top:1px solid #ffffff30}
.ecosystem-map::before{content:"";position:absolute;top:15%;bottom:15%;left:calc(33.33% + 3px);right:calc(33.33% + 3px);border-left:2px solid #8bad97;border-right:2px solid #8bad97;pointer-events:none}
.eco-foundation{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}#serviceApp .eco-foundation a{padding:18px;border:1px solid #cbdace;border-radius:8px;background:#e1ebdf;text-decoration:none;color:#183735}.eco-foundation strong{display:block;font-size:15px;margin-bottom:8px}.eco-foundation span{display:block;font-size:13px;line-height:1.7}
#serviceApp .eco-example{margin-top:24px;padding-top:20px;border-top:1px solid #cbdace}#serviceApp .eco-example p{font-size:15px;line-height:1.9;margin:8px 0}#serviceApp .eco-example a{color:#285d49;text-underline-offset:4px}.eco-example small{font-size:12px;line-height:1.65;color:#4e6358;display:block}
#serviceApp .eco-node:hover{border-color:#285d49;box-shadow:0 4px 14px #183f3810}.ecosystem a:focus-visible{outline:3px solid #85ac36;outline-offset:4px}
@media(max-width:900px){.ecosystem-map{grid-template-columns:1fr 1fr;gap:16px}#serviceApp .eco-hub{grid-column:1 / -1;grid-row:1}.eco-node.eco-left,.eco-node.eco-right{grid-column:auto;grid-row:auto}.eco-node::after,.ecosystem-map::before{display:none}}
@media(max-width:560px){.ecosystem-map,.eco-foundation{grid-template-columns:1fr}#serviceApp .eco-hub{grid-column:1}.eco-example b{padding:0 3px}}

/* Compact software pieces over the digital data network. */
#serviceApp .ecosystem{background:linear-gradient(110deg,#0625228c,#092a2526),url('../images/ekosysteemi-tiedonsiirto.png') center/cover;color:#f0f6f2;border-color:#30594d;padding:clamp(20px,4vw,44px)}
#serviceApp .ecosystem-heading>span,#serviceApp .eco-example>span{color:#b8dcc5}
#serviceApp .ecosystem-heading h2{color:#fff;font-size:clamp(24px,2.8vw,32px)}
#serviceApp .ecosystem-heading p{color:#d4e4da;font-size:14px;max-width:700px}
.ecosystem-map{max-width:920px;margin:32px auto;gap:22px 28px}
#serviceApp .eco-node{padding:13px 15px;background:#102e2aeb;border-color:#5b8071;border-radius:7px;color:#fff;box-shadow:0 6px 20px #0002}
#serviceApp .eco-node .eco-kicker{font-size:9px;color:#b8dcc5}
#serviceApp .eco-node h3{font-size:17px;margin:5px 0 8px;color:#fff}
#serviceApp .eco-node .eco-connection{font-size:11px;color:#dfebe3;border-color:#527364;padding-top:7px;line-height:1.5}
#serviceApp .eco-node:hover{background:#21493d;border-color:#d4f19a;box-shadow:0 0 18px #b7e3ba26}
#serviceApp .eco-hub{padding:23px 18px;background:#173f35f5;border:1px solid #a3c68a;box-shadow:0 0 36px #9fcd7d22}
#serviceApp .eco-hub h3{font-size:clamp(20px,2.2vw,27px);margin:10px 0}
#serviceApp .eco-hub p{font-size:13px;line-height:1.7;margin-bottom:16px}
#serviceApp .eco-hub a{font-size:12px;margin:10px 0}
.eco-node::after{background:#a4c895}.ecosystem-map::before{border-color:#a4c895}
.eco-foundation{max-width:920px;margin:24px auto 0}
#serviceApp .eco-foundation a{padding:14px 16px;background:#102e2aeb;border-color:#5b8071;color:#edf5ee}
.eco-foundation strong{font-size:14px;margin-bottom:5px}.eco-foundation span{font-size:12px;line-height:1.6}
#serviceApp .eco-example{border-color:#527364}#serviceApp .eco-example a{color:#e0f3cb}#serviceApp .eco-example small{color:#d4e4da}
@media(max-width:900px){.ecosystem-map{gap:16px}#serviceApp .eco-hub{max-width:none}}
@media(max-width:560px){.ecosystem-map{margin:22px 0}.eco-foundation{margin-top:16px}}

/* Subtle background data pulses; content remains still and clickable. */
#serviceApp .ecosystem{position:relative;isolation:isolate;overflow:hidden}
.eco-network-light{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;border-radius:inherit}
.ecosystem>.ecosystem-heading,.ecosystem>.ecosystem-map,.ecosystem>.eco-foundation,.ecosystem>.eco-example{position:relative;z-index:1}
#serviceApp .eco-highlights{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin:18px 0}
#serviceApp .eco-highlights strong{font-size:clamp(17px,2vw,23px);line-height:1.4;color:#d4f19a;font-weight:500}
#serviceApp .eco-highlights>span{font-size:15px;line-height:1.5;color:#f0f6f2}
.eco-light-nodes circle{opacity:.25;transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 0 7px #d4f19a);animation:eco-node-glow 7s ease-in-out infinite}
.eco-light-nodes circle:nth-child(3n){animation-delay:-2.4s;animation-duration:9s}.eco-light-nodes circle:nth-child(3n + 1){animation-delay:-4.8s;animation-duration:8s}
.eco-light-paths path{stroke-dasharray:35 1500;opacity:.35;animation:eco-data-flow 16s linear infinite}.eco-light-paths path:nth-child(2){animation-delay:-6s;animation-duration:20s}.eco-light-paths path:nth-child(3){animation-delay:-11s}
@keyframes eco-node-glow{0%,100%{opacity:.15;transform:scale(.8)}50%{opacity:.8;transform:scale(1.3)}}
@keyframes eco-data-flow{from{stroke-dashoffset:1535}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.eco-light-nodes circle,.eco-light-paths path{animation:none!important}.eco-light-nodes circle{opacity:.3;transform:none}.eco-light-paths path{opacity:.15}}

/* Circular ecosystem hub and livelier network traffic. */
#serviceApp .eco-hub{width:100%;max-width:300px;aspect-ratio:1;box-sizing:border-box;border-radius:50%;justify-self:center;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:24px 18px;box-shadow:0 0 40px #b8df8e38}
#serviceApp .eco-hub .eco-kicker{max-width:170px;font-size:8px;line-height:1.5;letter-spacing:.08em}
#serviceApp .eco-hub h3{font-size:clamp(17px,2vw,25px);margin:8px 0;letter-spacing:-.04em}
#serviceApp .eco-hub p{font-size:11px;line-height:1.6;margin:0 0 6px;max-width:200px}
#serviceApp .eco-hub a{font-size:12px;margin:5px 0}
.eco-light-nodes circle{animation-duration:3.8s}
.eco-light-nodes circle:nth-child(3n){animation-duration:4.8s;animation-delay:-1.6s}
.eco-light-nodes circle:nth-child(3n + 1){animation-duration:4.2s;animation-delay:-2.7s}
.eco-light-paths path{stroke-dasharray:28 210;opacity:.5;animation-duration:7s}
.eco-light-paths path:nth-child(2){animation-duration:9s;animation-delay:-3s}
.eco-light-paths path:nth-child(3){animation-duration:8s;animation-delay:-5s}
.eco-light-paths path:nth-child(2n + 4){animation-duration:10s;animation-delay:-4s;animation-direction:reverse}
@keyframes eco-data-flow{from{stroke-dashoffset:952}to{stroke-dashoffset:0}}
@media(max-width:900px){#serviceApp .eco-hub{width:min(100%,270px);max-width:270px}#serviceApp .eco-hub h3{font-size:25px}}

/* Direct radial connections to the circular hub. */
.ecosystem-map::before,.eco-node::after{display:none!important}
.eco-spokes{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.eco-spokes line{stroke:#b8d59b;stroke-width:1.6;vector-effect:non-scaling-stroke;opacity:.85}
#serviceApp .eco-node{z-index:1}
@media(max-width:900px){.eco-spokes{display:none}}