/* Showcase 5: Activation Pipeline */
.sp-showcase-pipeline{position:relative;width:100%;min-height:100vh;background:var(--sp-background);overflow:hidden;color:var(--sp-foreground);font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}
.sp-showcase-pipeline canvas{position:absolute;inset:0;z-index:0;pointer-events:none}
.sp-pl-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:1;filter:blur(100px);opacity:.15}
.sp-pl-orb-1{width:50vw;height:50vw;max-width:700px;max-height:700px;background:radial-gradient(circle,hsl(190,100%,50%),transparent 70%);top:-15%;left:50%;transform:translateX(-50%);animation:plOrbDrift 15s ease-in-out infinite alternate}
.sp-pl-orb-2{width:35vw;height:35vw;max-width:500px;max-height:500px;background:radial-gradient(circle,hsl(260,80%,65%),transparent 70%);bottom:-10%;right:-5%;animation:plOrbDrift 20s ease-in-out infinite alternate-reverse}
@keyframes plOrbDrift{0%{transform:translateX(-50%) translateY(0) scale(1)}100%{transform:translateX(-50%) translateY(8%) scale(1.1)}}
.sp-pl-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;padding:5rem 1.5rem;min-height:100vh;max-width:1100px;margin:0 auto}
.sp-pl-header{text-align:center;margin-bottom:4rem;max-width:700px}
.sp-pl-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.35rem .9rem;border-radius:100px;background:hsla(190,100%,50%,.12);border:1px solid hsla(190,100%,50%,.25);color:hsl(190,100%,55%);font-size:.8rem;font-weight:600;margin-bottom:1.5rem}
/* CONTRAST FIX: heading is bright white */
.sp-pl-header h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;line-height:1.1;margin-bottom:1rem;color:#fff}
.sp-pl-header h2 .gradient{background:linear-gradient(135deg,hsl(190,100%,50%),hsl(200,100%,70%),hsl(260,80%,65%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* CONTRAST FIX: paragraph uses lighter color */
.sp-pl-header p{font-size:1.1rem;color:hsl(215,20%,75%);line-height:1.6}
.sp-pl-pipeline{position:relative;width:100%;max-width:900px;display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:3rem;padding:0 1rem}
.sp-pl-pipeline::before{content:'';position:absolute;top:3.5rem;left:3.5rem;right:3.5rem;height:2px;background:hsl(240,10%,14%);z-index:0}
.sp-pl-pipeline::after{content:'';position:absolute;top:3.5rem;left:3.5rem;height:2px;z-index:1;background:linear-gradient(90deg,transparent,hsl(190,100%,50%),hsl(260,80%,65%));animation:growLine 4s ease-in-out infinite}
@keyframes growLine{0%{width:0%;opacity:0}20%{width:25%;opacity:1}40%{width:50%;opacity:1}60%{width:75%;opacity:.8}80%{width:100%;opacity:.5}100%{width:100%;opacity:0}}
.sp-pl-step{position:relative;z-index:2;flex:1;text-align:center;max-width:180px;opacity:.4;transform:translateY(0);transition:all .6s cubic-bezier(.22,1,.36,1)}
.sp-pl-step.active{opacity:1;transform:translateY(-6px)}
.sp-pl-step-icon{width:3.5rem;height:3.5rem;border-radius:16px;margin:0 auto 1rem;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:hsl(240,10%,6%);border:1px solid hsl(240,10%,14%);transition:all .6s cubic-bezier(.22,1,.36,1);position:relative}
.sp-pl-step.active .sp-pl-step-icon{border-color:hsl(190,100%,50%);background:hsla(190,100%,50%,.1);box-shadow:0 0 30px hsla(190,100%,50%,.1)}
.sp-pl-step-icon .pulse-ring{position:absolute;inset:-4px;border-radius:20px;border:2px solid hsl(190,100%,50%);opacity:0;animation:pulseRing 2s ease-out infinite}
.sp-pl-step.active .pulse-ring{opacity:1}
@keyframes pulseRing{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.4);opacity:0}}
/* CONTRAST FIX: step title is white */
.sp-pl-step-title{font-size:.9rem;font-weight:700;margin-bottom:.35rem;color:#fff}
.sp-pl-step.active .sp-pl-step-title{color:hsl(190,100%,55%)}
/* CONTRAST FIX: step description uses lighter color */
.sp-pl-step-desc{font-size:.75rem;color:hsl(215,20%,68%);line-height:1.5}
.sp-pl-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem;width:100%;max-width:900px}
.sp-pl-feature{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 .4s ease}
.sp-pl-feature:hover{border-color:hsl(190,100%,50%)}
.sp-pl-feature-icon{width:2rem;height:2rem;border-radius:8px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem}
.sp-pl-feature-icon.cyan{background:hsla(190,100%,50%,.12);color:hsl(190,100%,55%)}
.sp-pl-feature-icon.green{background:hsla(142,70%,50%,.12);color:hsl(142,70%,55%)}
.sp-pl-feature-icon.purple{background:hsla(260,80%,65%,.12);color:hsl(260,80%,70%)}
.sp-pl-feature-icon.amber{background:hsla(38,92%,50%,.12);color:hsl(38,92%,60%)}
/* CONTRAST FIX: feature text is white */
.sp-pl-feature-text{font-size:.85rem;font-weight:600;line-height:1.4;color:#fff}
/* CONTRAST FIX: small text uses lighter color */
.sp-pl-feature-text small{display:block;font-weight:400;font-size:.7rem;color:hsl(215,20%,68%);margin-top:.15rem}
.sp-pl-cta{text-align:center;margin-top:2.5rem}
.sp-pl-cta .btn{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 2.2rem;background:hsl(190,100%,50%);color:hsl(240,12%,3%);font-size:1rem;font-weight:700;border-radius:12px;text-decoration:none;box-shadow:0 4px 30px hsla(190,100%,50%,.1);transition:all .3s ease}
.sp-pl-cta .btn:hover{transform:translateY(-2px);box-shadow:0 8px 40px hsla(190,100%,50%,.15)}
@media(max-width:768px){.sp-pl-pipeline{flex-wrap:wrap;gap:2rem}.sp-pl-pipeline::before,.sp-pl-pipeline::after{display:none}.sp-pl-step{max-width:100%;flex:0 0 40%}.sp-pl-features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.sp-pl-step{flex:0 0 100%}.sp-pl-features{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){.sp-showcase-pipeline *,.sp-showcase-pipeline *::before,.sp-showcase-pipeline *::after{animation:none!important;transition:none!important}}