.screenshots-parallax-section{position:relative;overflow:hidden;padding:100px 0}.screenshot-stage{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:50px 0}.screenshot-parallax-container{position:sticky;top:50%;transform:translateY(-50%);width:90%;max-width:1400px;display:flex;align-items:center;gap:60px;z-index:1;transition:all .4s cubic-bezier(.4,0,.2,1)}.screenshot-parallax{flex:1.2;transition:all .6s cubic-bezier(.4,0,.2,1);will-change:transform,opacity;filter:drop-shadow(0 40px 100px rgba(0,0,0,.5));transform-origin:center center}.screenshot-parallax img{width:100%;height:auto;border-radius:8px;border:1px solid rgba(255,255,255,.15);object-fit:cover;background:#000;padding:20px}.screenshot-description{flex:0 0 40%;padding:40px;opacity:0;transform:translateY(30px);transition:all .8s cubic-bezier(.4,0,.2,1)}.screenshot-description.visible{opacity:1;transform:translateY(0)}.screenshot-description h3{font-size:2.5rem;margin-bottom:1.5rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.screenshot-description p{font-size:1.2rem;color:#fffc;line-height:1.8}.screenshot-parallax-container.left{flex-direction:row-reverse}.screenshot-parallax-container.right{flex-direction:row}.screenshot-parallax-container.left .screenshot-description{text-align:right}.screenshot-parallax-container.left .screenshot-parallax{transform:translate(-100%) scale(.8) rotateY(25deg);opacity:0}.screenshot-parallax-container.right .screenshot-parallax{transform:translate(100%) scale(.8) rotateY(-25deg);opacity:0}.screenshot-parallax-container.in-focus .screenshot-parallax{transform:translate(0) scale(1) rotateY(0)!important;opacity:1}.screenshot-parallax-container.passed .screenshot-parallax{transform:translateY(-50%) scale(.9)!important;opacity:.3}.screenshot-parallax-container.coming .screenshot-parallax{transform:translateY(50%) scale(.9)!important;opacity:.3}.screenshot-parallax.in-view{animation:floatIn .8s ease-out forwards}@keyframes floatIn{0%{opacity:0;transform:perspective(1000px) rotateY(var(--rotate-y, 15deg)) scale(.8) translateZ(-100px)}to{opacity:1;transform:perspective(1000px) rotateY(var(--rotate-y, 15deg)) scale(.95) translateZ(0)}}.screenshot-parallax.screenshot-1{--rotate-y: 15deg}.screenshot-parallax.screenshot-2{--rotate-y: -15deg}.screenshot-parallax.screenshot-3{--rotate-y: 12deg}.screenshot-parallax.screenshot-4{--rotate-y: -12deg}.parallax-content{position:relative;z-index:10;max-width:600px;margin:0 auto;padding:0 20px;text-align:center}.parallax-content h2{font-size:3rem;margin-bottom:1rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.parallax-content p{font-size:1.2rem;color:#fffc;line-height:1.8;margin-bottom:2rem}@media (max-width: 1200px){.screenshot-parallax{width:50%;max-width:600px}.screenshot-parallax.left{left:-10%}.screenshot-parallax.right{right:-10%}}@media (max-width: 768px){.screenshots-parallax-section{padding:60px 0;overflow:visible}.screenshot-stage{min-height:auto;margin-bottom:60px;padding:0}.screenshot-parallax-container{position:relative;top:auto;transform:none;width:100%;max-width:100%;flex-direction:column!important;gap:20px;padding:0}.screenshot-parallax{transform:none!important;opacity:1!important;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3));width:100%;padding:0 10px}.screenshot-parallax img{border-radius:8px;background:#000;padding:10px;width:100%}.screenshot-description{text-align:left!important;padding:20px 15px;opacity:1!important;transform:none!important;display:block!important}.screenshot-description h3{font-size:1.5rem}.screenshot-description p{font-size:1rem;line-height:1.6}.parallax-content{padding:0 20px;margin-bottom:40px}.parallax-content h2{font-size:1.8rem}.parallax-content p{font-size:1rem}.screenshot-parallax-container.in-focus,.screenshot-parallax-container.passed,.screenshot-parallax-container.coming{transform:none!important}.screenshot-parallax-container.in-focus .screenshot-parallax,.screenshot-parallax-container.passed .screenshot-parallax,.screenshot-parallax-container.coming .screenshot-parallax{transform:none!important;opacity:1!important}}@media (max-width: 768px){.hero-section.project-hero{padding:80px 20px 60px}.hero-content{flex-direction:column!important;text-align:center}.hero-text{max-width:100%!important}.hero-title{font-size:2.5rem!important}.hero-subtitle{font-size:1.2rem!important}.hero-description{font-size:1rem!important;padding:0 10px}.hero-visual{margin-top:30px;max-width:250px}.back-button{font-size:.9rem;padding:8px 16px}.features-compact-grid{padding:20px 15px!important}.use-cases-grid,.download-grid{grid-template-columns:1fr!important;gap:20px!important;padding:0 20px}.download-card{padding:30px 20px!important}.specs-card{padding:20px!important;margin:0 20px}.spec-row{flex-direction:column;align-items:flex-start!important;gap:8px;text-align:left!important}.spec-label{width:100%!important;justify-content:flex-start!important;text-align:left!important}.spec-value{text-align:left!important;width:100%!important}.main-header{padding:15px 20px!important}.nav-container{flex-direction:column;gap:15px}.nav-brand{text-align:center}.brand-text{font-size:1.2rem!important}.nav-menu{width:100%;justify-content:center;gap:10px!important;font-size:.85rem;flex-wrap:wrap}.nav-menu li{margin:0}.nav-menu a,.nav-download-btn{padding:5px 10px}.section-header{padding:0 20px}.section-title{font-size:2rem!important}.section-subtitle{font-size:1rem!important}.content-container{padding:0!important}.project-badges-row{justify-content:center;gap:10px}.status-badge{font-size:.8rem!important;padding:4px 10px!important}.btn{font-size:.95rem!important;padding:10px 20px!important}.hero-actions{flex-direction:column;gap:15px;width:100%;padding:0 20px}.hero-actions .btn{width:100%}}@media (max-width: 480px){.hero-title{font-size:2rem!important}.hero-subtitle{font-size:1.1rem!important}.section-title{font-size:1.75rem!important}.nav-container{flex-direction:row;justify-content:space-between;align-items:center}.nav-brand{text-align:left}.brand-text{font-size:1.1rem!important}.nav-menu{display:none!important}.nav-container:after{content:"☰";font-size:1.5rem;color:#fffc;cursor:pointer}}@media (max-width: 640px){.nav-menu li:nth-child(2),.nav-menu li:nth-child(3){display:none}.nav-menu{gap:20px!important}}
