/* Showcase 1: Command Center — 3D cards + particles */
.sp-showcase-command{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-command canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.sp-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:1;filter:blur(90px);opacity:.25}
.sp-orb-1{width:50vw;height:50vw;max-width:800px;max-height:800px;background:radial-gradient(circle,hsl(190,100%,50%),transparent 70%);top:-15%;left:-10%;animation:orbDrift1 18s ease-in-out infinite alternate}
.sp-orb-2{width:45vw;height:45vw;max-width:700px;max-height:700px;background:radial-gradient(circle,hsl(260,80%,65%),transparent 70%);bottom:-20%;right:-10%;animation:orbDrift2 22s ease-in-out infinite alternate}
.sp-orb-3{width:30vw;height:30vw;max-width:500px;max-height:500px;background:radial-gradient(circle,hsl(190,100%,60%),transparent 70%);top:40%;left:50%;opacity:.12;animation:orbDrift3 15s ease-in-out infinite}
@keyframes orbDrift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8%,12%) scale(1.15)}}
@keyframes orbDrift2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-6%,-10%) scale(1.1)}}
@keyframes orbDrift3{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-40%,-60%) scale(1.2)}100%{transform:translate(-50%,-50%) scale(1)}}
.sp-sc-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;padding:5rem 1.5rem}
.sp-sc-header{text-align:center;margin-bottom:3rem;max-width:700px}
.sp-sc-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}
.sp-sc-badge .dot{width:6px;height:6px;border-radius:50%;background:hsl(190,100%,50%);box-shadow:0 0 6px hsla(190,100%,50%,.4);animation:livePulse 2s ease-in-out infinite}
@keyframes livePulse{0%,100%{opacity:1}50%{opacity:.3}}
/* CONTRAST FIX: heading is bright white */
.sp-sc-header h2{font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.1;margin-bottom:1rem;color:#fff}
.sp-sc-header h2 .gradient{background:linear-gradient(135deg,hsl(190,100%,50%),hsl(260,80%,65%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* CONTRAST FIX: subtitle uses lighter color */
.sp-sc-header p{font-size:1.1rem;line-height:1.65;color:hsl(215,20%,75%)}
.sp-card-stage{position:relative;width:100%;max-width:1100px;height:clamp(400px,55vh,650px);perspective:1200px;margin:0 auto 2.5rem}
.sp-dash-card{position:absolute;border-radius:12px;overflow:hidden;background:hsl(240,10%,6%);border:1px solid hsl(240,10%,12%);box-shadow:0 25px 60px -15px rgba(0,0,0,.5);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s ease,border-color .6s ease;cursor:pointer;will-change:transform}
.sp-dash-card:hover{z-index:100!important;border-color:hsl(190,100%,50%);box-shadow:0 30px 80px -10px rgba(0,0,0,.6),0 0 40px hsla(190,100%,50%,.15)}
.sp-dash-card.swapping{transition:all .8s cubic-bezier(.22,1,.36,1)}
.sp-dash-card.card-main{width:55%;z-index:5}.sp-dash-card.card-top-right{width:38%;z-index:4}.sp-dash-card.card-left{width:33%;z-index:3}.sp-dash-card.card-bottom{width:40%;z-index:2}.sp-dash-card.card-far-right{width:28%;z-index:1}
.sp-card-chrome{height:28px;background:hsl(240,10%,10%);display:flex;align-items:center;padding:0 10px;gap:6px}
.sp-chrome-dot{width:8px;height:8px;border-radius:50%}
.sp-chrome-dot.red{background:#ff5f56}.sp-chrome-dot.yellow{background:#ffbd2e}.sp-chrome-dot.green{background:#27c93f}
.sp-card-titlebar{flex:1;text-align:center;font-size:.6rem;color:hsl(215,20%,45%);font-family:monospace}
.sp-card-body{position:relative;overflow:hidden}
.sp-card-body img{width:100%;height:100%;object-fit:cover;display:block}
.sp-card-body .tag{position:absolute;top:10px;right:10px;padding:3px 8px;border-radius:100px;font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;z-index:2;backdrop-filter:blur(8px)}
.sp-card-body .tag.free{background:hsla(190,100%,50%,.15);color:hsl(190,100%,55%);border:1px solid hsla(190,100%,50%,.3)}
.sp-card-body .tag.pro{background:hsla(260,80%,65%,.15);color:hsl(260,80%,70%);border:1px solid hsla(260,80%,65%,.3)}
/* CONTRAST FIX: trust bar has stronger background */
.sp-sc-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:2.5rem;padding:1.5rem 2.5rem;background:hsla(240,10%,4%,.85);border:1px solid hsl(240,10%,14%);border-radius:16px;backdrop-filter:blur(20px);margin-bottom:2rem;max-width:900px;width:100%}
.sp-sc-trust-item{display:flex;align-items:center;gap:.6rem}
.sp-sc-trust-icon{width:2rem;height:2rem;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1rem}
.sp-sc-trust-icon.cyan{background:hsla(190,100%,50%,.12);color:hsl(190,100%,55%)}
.sp-sc-trust-icon.green{background:hsla(142,70%,50%,.12);color:hsl(142,70%,55%)}
.sp-sc-trust-icon.purple{background:hsla(260,80%,65%,.12);color:hsl(260,80%,70%)}
.sp-sc-trust-icon.amber{background:hsla(38,92%,50%,.12);color:hsl(38,92%,60%)}
.sp-sc-trust-val{font-size:1.2rem;font-weight:800;color:#fff}
/* CONTRAST FIX: trust labels are lighter */
.sp-sc-trust-label{font-size:.7rem;color:hsl(215,20%,68%);text-transform:uppercase;letter-spacing:.05em;font-weight:500}
.sp-sc-cta{text-align:center}
.sp-sc-cta .btn{display:inline-flex;align-items:center;gap:.6rem;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;transition:all .3s ease;box-shadow:0 4px 30px hsla(190,100%,50%,.15)}
.sp-sc-cta .btn:hover{transform:translateY(-2px);box-shadow:0 8px 40px hsla(190,100%,50%,.3)}
/* CONTRAST FIX: hint text is lighter */
.sp-sc-cta .hint{font-size:.75rem;color:hsl(215,20%,65%);margin-top:.7rem}
@media(max-width:768px){.sp-sc-content{padding:3rem 1rem}.sp-card-stage{height:55vh;min-height:350px}.sp-dash-card.card-main{width:70%}.sp-dash-card.card-top-right{width:50%}.sp-dash-card.card-left{width:45%}.sp-dash-card.card-bottom{width:52%}.sp-dash-card.card-far-right{width:38%}.sp-sc-trust{gap:1.25rem;padding:1rem}}

@media(prefers-reduced-motion:reduce){.sp-showcase-command *,.sp-showcase-command *::before,.sp-showcase-command *::after{animation:none!important;transition:none!important}}
@media(max-width:480px){.sp-sc-content{padding:2rem .75rem}.sp-card-stage{height:50vh;min-height:300px}.sp-sc-header h2{font-size:clamp(1.6rem,8vw,2.2rem)}.sp-sc-trust{gap:.75rem;padding:.75rem 1rem}.sp-sc-cta .btn{padding:.7rem 1.5rem;font-size:.9rem}}