/* Showcase 6: Pro Ecosystem — connected product stack */
.sp-showcase-ecosystem{position:relative;width:100%;min-height:100vh;overflow:hidden;background:var(--sp-background);color:var(--sp-foreground);font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
.sp-showcase-ecosystem canvas{position:absolute;inset:0;z-index:0}
.sp-eco-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:1;filter:blur(100px);opacity:.18}
.sp-eco-orb-1{width:55vw;height:55vw;max-width:800px;max-height:800px;background:radial-gradient(circle,hsl(190,100%,50%),transparent 70%);top:-20%;left:50%;transform:translateX(-50%);animation:ecoOrb1 20s ease-in-out infinite alternate}
.sp-eco-orb-2{width:40vw;height:40vw;max-width:600px;max-height:600px;background:radial-gradient(circle,hsl(260,80%,65%),transparent 70%);bottom:-15%;right:-10%;animation:ecoOrb2 25s ease-in-out infinite alternate}
@keyframes ecoOrb1{0%{transform:translateX(-50%) translateY(0) scale(1)}100%{transform:translateX(-50%) translateY(5%) scale(1.1)}}
@keyframes ecoOrb2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-8%,-5%) scale(1.15)}}
.sp-eco-content{position:relative;z-index:10;padding:5rem 1.5rem;max-width:1100px;margin:0 auto}
.sp-eco-header{text-align:center;margin-bottom:3.5rem}
.sp-eco-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border-radius:100px;background:hsla(260,80%,65%,.12);border:1px solid hsla(260,80%,65%,.25);color:hsl(260,80%,70%);font-size:.8rem;font-weight:600;margin-bottom:1.5rem}
/* CONTRAST FIX: heading is bright white */
.sp-eco-header h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.1;margin-bottom:1rem;color:#fff}
.sp-eco-header h2 .gradient{background:linear-gradient(135deg,hsl(260,80%,65%),hsl(190,100%,50%),hsl(142,70%,50%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* CONTRAST FIX: paragraph uses lighter color */
.sp-eco-header p{font-size:1.1rem;color:hsl(215,20%,75%);line-height:1.7;max-width:650px;margin:0 auto}
.sp-eco-diagram{display:flex;align-items:center;justify-content:center;gap:2rem;margin-bottom:3rem;flex-wrap:wrap}
.sp-eco-node{flex:0 0 280px;padding:2rem 1.5rem;border-radius:16px;text-align:center;transition:all .5s cubic-bezier(.22,1,.36,1);cursor:pointer;position:relative}
.sp-eco-node:hover{transform:translateY(-6px)}
.sp-eco-node.free{background:linear-gradient(180deg,hsla(190,100%,50%,.06),hsla(240,10%,6%,.8));border:1px solid hsla(190,100%,50%,.15)}
.sp-eco-node.free:hover{border-color:hsl(190,100%,50%);box-shadow:0 20px 50px -10px rgba(0,0,0,.4),0 0 30px hsla(190,100%,50%,.1)}
.sp-eco-node.pro{background:linear-gradient(180deg,hsla(260,80%,65%,.06),hsla(240,10%,6%,.8));border:1px solid hsla(260,80%,65%,.15)}
.sp-eco-node.pro:hover{border-color:hsl(260,80%,65%);box-shadow:0 20px 50px -10px rgba(0,0,0,.4),0 0 30px hsla(260,80%,65%,.15)}
.sp-eco-node.portal{background:linear-gradient(180deg,hsla(142,70%,50%,.06),hsla(240,10%,6%,.8));border:1px solid hsla(142,70%,50%,.15)}
.sp-eco-node.portal:hover{border-color:hsl(142,70%,50%);box-shadow:0 20px 50px -10px rgba(0,0,0,.4),0 0 30px hsla(142,70%,50%,.1)}
.sp-eco-node-icon{width:3.5rem;height:3.5rem;border-radius:14px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-size:1.8rem}
.sp-eco-node.free .sp-eco-node-icon{background:hsla(190,100%,50%,.12);color:hsl(190,100%,55%)}
.sp-eco-node.pro .sp-eco-node-icon{background:hsla(260,80%,65%,.12);color:hsl(260,80%,70%)}
.sp-eco-node.portal .sp-eco-node-icon{background:hsla(142,70%,50%,.12);color:hsl(142,70%,55%)}
/* CONTRAST FIX: node headings are white */
.sp-eco-node h3{font-size:1.1rem;font-weight:700;margin-bottom:.5rem;color:#fff}
.sp-eco-node .price{font-size:1.8rem;font-weight:800;margin-bottom:.5rem}
.sp-eco-node.free .price{color:hsl(190,100%,55%)}.sp-eco-node.pro .price{color:hsl(260,80%,70%)}.sp-eco-node.portal .price{color:hsl(142,70%,55%)}
.sp-eco-node .price small{font-size:.8rem;font-weight:500;opacity:.65}
/* CONTRAST FIX: description uses lighter color */
.sp-eco-node .desc{font-size:.8rem;color:hsl(215,20%,72%);line-height:1.5;margin-bottom:1rem}
/* CONTRAST FIX: features list uses lighter color */
.sp-eco-features{list-style:none;text-align:left;font-size:.75rem;color:hsl(215,20%,72%)}
.sp-eco-features li{padding:.35rem 0;display:flex;align-items:center;gap:.4rem}
.sp-eco-features li .chk{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;flex-shrink:0}
.sp-eco-node.free .chk{background:hsla(190,100%,50%,.12);color:hsl(190,100%,55%)}
.sp-eco-node.pro .chk{background:hsla(260,80%,65%,.12);color:hsl(260,80%,70%)}
.sp-eco-node.portal .chk{background:hsla(142,70%,50%,.12);color:hsl(142,70%,55%)}
.sp-eco-connector{display:flex;align-items:center;gap:.5rem;font-size:1.5rem;color:hsla(190,100%,50%,.35)}
.sp-eco-connector .arrow{animation:arrowPulse 2s ease-in-out infinite}
@keyframes arrowPulse{0%,100%{opacity:.3;transform:translateX(0)}50%{opacity:1;transform:translateX(5px)}}
.sp-eco-pro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;max-width:1000px;margin:2rem auto 3rem}
.sp-eco-pro-card{padding:1.25rem;border-radius:12px;background:hsl(240,10%,6%);border:1px solid hsl(240,10%,12%);display:flex;align-items:flex-start;gap:.75rem;transition:all .3s ease}
.sp-eco-pro-card:hover{border-color:hsl(260,80%,65%);transform:translateY(-2px)}
.sp-eco-pro-card-icon{width:2.2rem;height:2.2rem;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem}
.sp-eco-pro-card-icon.sql{background:hsla(30,100%,55%,.12);color:hsl(38,92%,60%)}
.sp-eco-pro-card-icon.history{background:hsla(190,100%,50%,.12);color:hsl(190,100%,55%)}
.sp-eco-pro-card-icon.alert{background:hsla(260,80%,65%,.12);color:hsl(260,80%,70%)}
.sp-eco-pro-card-icon.pagespeed{background:hsla(142,70%,50%,.12);color:hsl(142,70%,55%)}
.sp-eco-pro-card-icon.cloud{background:hsla(200,100%,70%,.12);color:hsl(200,100%,72%)}
.sp-eco-pro-card-icon.whitelabel{background:hsla(260,80%,65%,.12);color:hsl(260,80%,70%)}
/* CONTRAST FIX: pro card text is white */
.sp-eco-pro-text{font-size:.82rem;font-weight:600;line-height:1.4;color:#fff}
/* CONTRAST FIX: small text in pro cards is lighter */
.sp-eco-pro-text small{display:block;font-weight:400;font-size:.68rem;color:hsl(215,20%,68%);margin-top:.15rem}
.sp-eco-cta{text-align:center;margin-top:2rem}
.sp-eco-cta .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2.2rem;background:hsl(260,80%,65%);color:#fff;font-size:1rem;font-weight:700;border-radius:12px;text-decoration:none;box-shadow:0 4px 30px hsla(260,80%,65%,.12);transition:all .3s ease}
.sp-eco-cta .btn:hover{transform:translateY(-2px);box-shadow:0 8px 40px hsla(260,80%,65%,.2)}
/* CONTRAST FIX: hint text is lighter */
.sp-eco-cta .hint{font-size:.75rem;color:hsl(215,20%,65%);margin-top:.7rem}
@media(max-width:768px){.sp-eco-diagram{flex-direction:column;gap:1rem}.sp-eco-connector{transform:rotate(90deg)}.sp-eco-content{padding:3rem 1rem}.sp-eco-pro-grid{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.sp-showcase-ecosystem *,.sp-showcase-ecosystem *::before,.sp-showcase-ecosystem *::after{animation:none!important;transition:none!important}}
@media(max-width:480px){.sp-eco-content{padding:2rem .75rem}.sp-eco-node{flex:0 0 100%;padding:1.5rem 1.25rem}.sp-eco-header h2{font-size:clamp(1.6rem,8vw,2.2rem)}.sp-eco-pro-card{padding:1rem}.sp-eco-pro-grid{gap:.75rem}}