.product-showcase{padding:5rem 0;background:#fff;position:relative;overflow:hidden}.showcase-container{max-width:1400px;margin:0 auto;padding:0 2rem}.showcase-header{text-align:center;margin-bottom:3rem;animation:fadeInUp .8s ease-out}.showcase-title{font-size:3rem;font-weight:700;color:#1a1a1a;margin-bottom:1rem;line-height:1.2}.showcase-title .highlight{color:#1e90ff}.showcase-subtitle{font-size:1.25rem;color:#666;font-weight:400;line-height:1.5;max-width:600px;margin:0 auto}.showcase-tabs{display:flex;justify-content:center;gap:1rem;margin-bottom:4rem;flex-wrap:wrap;animation:fadeInUp .8s ease-out .2s both}.showcase-tab{position:relative;background:#f8f9fa;border:2px solid #e9ecef;color:#666;padding:.75rem 1.5rem;border-radius:50px;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .3s ease;overflow:hidden}.showcase-tab:hover{color:#1e90ff;box-shadow:0 4px 15px rgba(30,144,255,.2)}.showcase-tab.active,.showcase-tab:hover{border-color:#1e90ff;transform:translateY(-2px)}.showcase-tab.active{background:#1e90ff;color:#fff;box-shadow:0 6px 20px rgba(30,144,255,.3)}.tab-progress{position:absolute;bottom:0;left:0;right:0;height:3px;background:hsla(0,0%,100%,.3);overflow:hidden}.tab-progress-bar{height:100%;background:#fff;transition:width .1s linear}.showcase-main{display:grid;grid-template-columns:60% 1fr;gap:3rem;align-items:start;animation:fadeInUp .8s ease-out .4s both}.vertical-progress{position:sticky;top:2rem;height:fit-content;width:60px}.progress-track{position:relative;height:600px;width:100%}.progress-track:before{content:"";top:0;width:2px;height:100%;z-index:0;border-radius:1px}.progress-dot,.progress-track:before{position:absolute;left:50%;transform:translateX(-50%);background:#e9ecef}.progress-dot{width:16px;height:16px;border-radius:50%;transition:all .3s cubic-bezier(.4,0,.2,1);border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.1);cursor:pointer;z-index:2}.progress-dot:hover{background:#1e90ff;transform:translateX(-50%) scale(1.2);box-shadow:0 4px 12px rgba(30,144,255,.3)}.progress-dot.active{background:#1e90ff;transform:translateX(-50%) scale(1.3);box-shadow:0 0 0 4px rgba(30,144,255,.2),0 4px 16px rgba(30,144,255,.4)}.progress-dot.completed{background:#28a745;box-shadow:0 0 0 2px rgba(40,167,69,.2),0 2px 8px rgba(40,167,69,.3)}.progress-line{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;background:linear-gradient(180deg,#1e90ff,#06c);transition:height .6s cubic-bezier(.4,0,.2,1);z-index:1;border-radius:1px;box-shadow:0 0 4px rgba(30,144,255,.3)}.showcase-content{position:relative}.content-scroll{height:600px;overflow-y:auto;padding-right:1rem;scroll-behavior:smooth;scroll-padding-top:50px}.content-scroll::-webkit-scrollbar{width:6px}.content-scroll::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.content-scroll::-webkit-scrollbar-thumb{background:#1e90ff;border-radius:3px}.content-scroll::-webkit-scrollbar-thumb:hover{background:#06c}.content-section{transition:all .4s ease;padding:1.5rem 0;margin-bottom:1.5rem;min-height:180px;scroll-margin-top:30px}.content-section:first-child{margin-top:1rem;padding-top:2rem}.content-section:last-child{margin-bottom:1rem;padding-bottom:2rem}.section-content{transition:all .3s ease}.section-title{font-size:2rem;font-weight:700;color:#1a1a1a;margin-bottom:1rem;line-height:1.2}.section-subtitle{font-size:1.25rem;font-weight:600;color:#1e90ff;margin-bottom:1rem;line-height:1.3}.section-description{font-size:1rem;color:#666;line-height:1.6;margin:0}.showcase-image{position:sticky;top:2rem;height:fit-content}.image-container{position:relative;overflow:hidden;background:#fff;transition:all .5s ease}.section-image{width:100%;height:auto;display:block;border-radius:0;transition:all .5s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:1024px){.showcase-main{grid-template-columns:50px 1fr 1fr;gap:2rem}.showcase-title{font-size:2.5rem}.content-scroll,.progress-track{height:500px}}@media (max-width:768px){.product-showcase{padding:3rem 0}.showcase-container{padding:0 1rem}.showcase-title{font-size:2rem}.showcase-subtitle{font-size:1.125rem}.showcase-tabs{gap:.5rem}.showcase-tab{padding:.75rem 1.5rem;font-size:.9rem}.showcase-main{grid-template-columns:1fr;gap:2rem}.vertical-progress{display:none}.content-scroll{height:400px}.section-title{font-size:1.75rem}.section-subtitle{font-size:1.125rem}.showcase-image{position:relative;top:0}.content-section{padding:1rem 0;min-height:120px}.content-section:first-child{padding-top:1.5rem}.content-section:last-child{padding-bottom:1.5rem}}@media (max-width:480px){.showcase-tabs{flex-direction:column;align-items:center}.showcase-tab{width:100%;max-width:300px;text-align:center}.section-title{font-size:1.5rem}.section-subtitle{font-size:1rem}.section-description{font-size:.9rem}}@media (prefers-color-scheme:dark){.product-showcase{background:#1a1a1a}.showcase-title{color:#fff}.showcase-subtitle{color:#ccc}.showcase-tab{background:#2a2a2a;border-color:#404040;color:#ccc}.showcase-tab:hover{border-color:#1e90ff;color:#1e90ff}.section-title{color:#fff}.section-description{color:#ccc}.image-container{background:#2a2a2a;box-shadow:0 20px 40px rgba(0,0,0,.5)}.content-scroll::-webkit-scrollbar-track{background:#2a2a2a}.progress-track:before{background:#404040}}@media (prefers-reduced-motion:reduce){.product-showcase *,.product-showcase :after,.product-showcase :before{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.content-scroll{scroll-behavior:auto}}@media (prefers-reduced-motion:no-preference){.content-scroll{scroll-behavior:smooth}}