.mockup-showcase{width:100%;overflow:hidden}.mockup-item{position:relative;width:100%;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--border)}.mockup-item:last-child{border-bottom:none}.mockup-item .mockup-bg{position:absolute;inset:0;z-index:0;transition:opacity .6s ease}.mockup-item:first-child .mockup-bg{background:linear-gradient(160deg,#0a0a0a 0,#0d1f15 50%,#0a0a0a 100%)}.mockup-item:nth-child(2) .mockup-bg{background:linear-gradient(160deg,#0a0a0a 0,#0f0d1f 50%,#0a0a0a 100%)}.mockup-item:nth-child(3) .mockup-bg{background:linear-gradient(160deg,#0a0a0a 0,#1f170d 50%,#0a0a0a 100%)}.mockup-item:nth-child(4) .mockup-bg{background:linear-gradient(160deg,#0a0a0a 0,#0d151f 50%,#0a0a0a 100%)}.mockup-content{position:relative;z-index:1;width:100%;max-width:1400px;margin:0 auto;padding:80px 40px;display:grid;grid-template-columns:1fr 1.6fr;gap:60px;align-items:center}@media (max-width:991px){.mockup-content{grid-template-columns:1fr;padding:60px 20px;text-align:center}}.mockup-item:nth-child(2n) .mockup-content{grid-template-columns:1.6fr 1fr}.mockup-item:nth-child(2n) .mockup-info{order:2}.mockup-item:nth-child(2n) .mockup-devices{order:1}@media (max-width:991px){.mockup-item:nth-child(2n) .mockup-content{grid-template-columns:1fr}.mockup-item:nth-child(2n) .mockup-info{order:1}.mockup-item:nth-child(2n) .mockup-devices{order:2}}.mockup-info{opacity:0;transform:translateY(40px);transition:opacity .8s ease,transform .8s ease}.mockup-item.in-view .mockup-info{opacity:1;transform:translateY(0)}.mockup-info .project-number{font-size:14px;font-family:monospace;color:var(--action);letter-spacing:3px;text-transform:uppercase;margin-bottom:16px}.mockup-info .project-title{font-size:48px;font-weight:700;color:var(--primary);line-height:1.1;margin-bottom:20px}@media (max-width:1199px){.mockup-info .project-title{font-size:36px}}@media (max-width:767px){.mockup-info .project-title{font-size:28px}}.mockup-info .project-desc{font-size:16px;color:var(--secondary);line-height:1.7;max-width:420px;margin-bottom:28px}@media (max-width:991px){.mockup-info .project-desc{max-width:100%}}.mockup-info .project-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}@media (max-width:991px){.mockup-info .project-tags{justify-content:center}}.mockup-info .project-tags span{padding:6px 16px;border:1px solid rgba(3,255,144,.25);border-radius:20px;font-size:13px;color:var(--action);font-family:monospace}.mockup-info .project-link{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--primary);text-decoration:none;transition:color .3s,gap .3s}.mockup-info .project-link:hover{color:var(--action);gap:16px}.mockup-info .project-link i{font-size:14px;transition:transform .3s}.mockup-info .project-link:hover i{transform:translateX(4px)}.mockup-devices{position:relative;min-height:500px;opacity:0;transform:translateY(60px);transition:opacity 1s ease .2s,transform 1s ease .2s}.mockup-item.in-view .mockup-devices{opacity:1;transform:translateY(0)}@media (max-width:767px){.mockup-devices{min-height:350px}}.device-laptop{position:relative;width:100%;max-width:700px;margin:0 auto}.device-laptop .device-frame{position:relative;background:#1c1c1c;border-radius:12px 12px 0 0;padding:12px 12px 0;border:2px solid #2a2a2a;border-bottom:none}.device-laptop .device-frame::before{content:'';display:block;width:8px;height:8px;background:#333;border-radius:50%;margin:0 auto 10px}.device-laptop .device-screen{width:100%;aspect-ratio:16/10;background:#0a0a0a;border-radius:2px;overflow:hidden;position:relative}.device-laptop .device-screen img{width:100%;height:100%;object-fit:cover;object-position:top;transition:none}.device-laptop .device-base{width:110%;margin-left:-5%;height:14px;background:linear-gradient(180deg,#2a2a2a,#1c1c1c);border-radius:0 0 8px 8px;position:relative}.device-laptop .device-base::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:4px;background:#333;border-radius:0 0 4px 4px}.device-phone{position:absolute;bottom:-20px;right:-30px;width:160px;z-index:2;animation:phoneFloat 4s ease-in-out infinite}@media (max-width:767px){.device-phone{width:110px;right:-10px;bottom:-10px}}@keyframes phoneFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}.device-phone .device-frame{background:#1c1c1c;border-radius:20px;padding:10px 6px;border:2px solid #2a2a2a;box-shadow:0 20px 60px rgba(0,0,0,.5)}.device-phone .device-frame::before{content:'';display:block;width:40px;height:4px;background:#333;border-radius:2px;margin:0 auto 6px}.device-phone .device-screen{width:100%;aspect-ratio:9/19;background:#0a0a0a;border-radius:12px;overflow:hidden}.device-phone .device-screen img{width:100%;height:100%;object-fit:cover;object-position:top}.mockup-item .deco-circle{position:absolute;border-radius:50%;border:1px solid rgba(3,255,144,.08);pointer-events:none;z-index:0}.mockup-item .deco-circle-1{width:400px;height:400px;top:-100px;right:-100px;opacity:0;transition:opacity 1.2s ease .5s}.mockup-item .deco-circle-2{width:250px;height:250px;bottom:-50px;left:-50px;opacity:0;transition:opacity 1.2s ease .7s}.mockup-item.in-view .deco-circle{opacity:1}.mockup-item .deco-dot{position:absolute;width:6px;height:6px;background:var(--action);border-radius:50%;box-shadow:0 0 20px rgba(3,255,144,.4);z-index:0;opacity:0;transition:opacity .8s ease 1s}.mockup-item.in-view .deco-dot{opacity:1}.deco-dot-1{top:15%;left:8%}.deco-dot-2{bottom:20%;right:12%}.deco-dot-3{top:40%;right:5%}