/* Integration section: one clear message plus an architectural map. */
.ecosystem { padding: 128px 0; }
.ecosystem-grid { grid-template-columns: .8fr 1.2fr; align-items: center; }
.integration-copy h2 { max-width: 610px; margin-bottom: 22px; font-size: clamp(3rem,4.2vw,5.15rem); }
.integration-copy .integration-lead { max-width: 490px; margin: 0; color: #d4dbd1; font-size: 1.08rem; }

.system-map { min-height: 454px; padding: 25px 28px 29px; background: #181e18; border: 1px solid #445043; }
.map-header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid #354034; color: #eef2ec; font: 500 .7rem 'DM Mono',monospace; letter-spacing: .08em; text-transform: uppercase; }
.map-live { color: var(--lime); display: flex; align-items: center; gap: 8px; }
.map-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 5px rgba(182,244,0,.1); animation: map-pulse 2.2s infinite; }
.map-stage { position: relative; height: 350px; max-width: 670px; margin: auto; }
.map-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-lines path { fill: none; stroke: #61705d; stroke-width: 1.2; stroke-dasharray: 4 6; }
.map-lines circle { fill: var(--lime); }
.map-node { position: absolute; min-width: 118px; padding: 13px 15px 12px; background: #222a21; border: 1px solid #53624f; color: #fff; }
.map-node small,.map-core small { display: block; color: #aeb8aa; font: 500 .61rem 'DM Mono',monospace; letter-spacing: .08em; }
.map-node strong,.map-core strong { display: block; margin-top: 4px; font-size: .94rem; }
.map-node.crm { left: 4%; top: 31px; }
.map-node.erp { right: 4%; top: 31px; }
.map-node.shop { left: 2%; bottom: 29px; }
.map-node.api { right: 2%; bottom: 29px; }
.map-core { position: absolute; left: 50%; top: 50%; z-index: 2; width: 176px; padding: 23px 20px; color: var(--ink); background: var(--lime); transform: translate(-50%,-50%); box-shadow: 7px 7px 0 #0e110e; }
.map-core strong { font-size: 1.28rem; letter-spacing: -.05em; }
.map-core small { color: #344000; }
.map-core em { display:block; margin-top: 15px; font-style: normal; font-size: .72rem; font-weight: 700; }
@keyframes map-pulse { 0%,100% { box-shadow: 0 0 0 5px rgba(182,244,0,.1); } 50% { box-shadow: 0 0 0 9px rgba(182,244,0,0); } }

@media (max-width:900px) { .ecosystem { padding: 82px 0; } .ecosystem-grid { grid-template-columns: 1fr; } .system-map { min-height: 420px; } }
@media (max-width:600px) { .system-map { padding: 18px 14px; min-height: 430px; } .map-stage { height: 350px; } .map-node { min-width: 86px; padding: 10px 9px; } .map-node strong { font-size: .79rem; } .map-node small { font-size: .5rem; } .map-core { width: 142px; padding: 18px 15px; } .map-lines { opacity: .75; } }

/* Editorial imagery replaces decorative systems indicators. */
.integration-photo { margin: 0; min-height: 454px; background: #151b15; border: 1px solid #445043; overflow: hidden; }
.integration-photo img { display: block; width: 100%; height: 454px; object-fit: cover; object-position: 50% 52%; filter: saturate(.86) contrast(1.03); transition: transform .7s cubic-bezier(.2,.72,.2,1), filter .5s ease; }
@media (hover:hover) { .integration-photo:hover img { transform: scale(1.035); filter: saturate(1) contrast(1.05); } }
@media (max-width:900px) { .integration-photo,.integration-photo img { min-height: 0; height: 420px; } }
@media (max-width:600px) { .integration-photo,.integration-photo img { height: 320px; } }