/* NOX Tool Showcases — same visual language and motion as Ped Creator */
.showcase .nav{width:min(1320px,100% - 1.4rem);gap:.55rem;padding-left:.8rem}
.showcase .nav ul{gap:0;flex:1;justify-content:center}
.showcase .nav ul a{font-size:.72rem;padding:.55rem .52rem;white-space:nowrap}
.showcase .logo{white-space:nowrap;font-size:.88rem}
.showcase .nav .btn{font-size:.75rem;padding:.72rem .85rem;white-space:nowrap}
.showcase .hero{min-height:96vh}
.showcase .hero .copy{position:relative;z-index:2}
.showcase .stats .stat b{font-size:2rem;line-height:1.2;letter-spacing:-.05em}
.showcase .stage{min-width:0}
.showcase .stage .viewport{aspect-ratio:1.04/1}
.showcase .vbody{min-height:300px}
.showcase .vbar b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.showcase .stage .chip{font-size:.75rem;line-height:1.2}
.showcase .show-icon{height:54px;width:54px;display:grid;place-items:center;color:#ede0ff;font:700 1.7rem/1 var(--display);background:linear-gradient(145deg,#a855f7,#5b21b6);box-shadow:0 6px 30px #a855f74d;border-radius:15px;margin-bottom:1rem}
.showcase .tool-link{color:inherit;text-decoration:none;min-height:330px}
.showcase .tool-symbol{font-size:3rem;color:#d8b4fe;line-height:1;padding-bottom:1rem;filter:drop-shadow(0 0 24px #a855f788);transition:transform .4s}
.showcase .tool-link:hover .tool-symbol{transform:rotate(-9deg) scale(1.14)}
.showcase .tool-link strong{margin-top:auto;padding-top:1.2rem;color:#d8b4fe}
.showcase .tool-link h3{margin-top:.7rem}
.showcase .bento{margin-top:3rem}
.showcase .strip .track>span{white-space:nowrap;font:700 .9rem var(--display);color:#d9c3f8;letter-spacing:.13em;text-transform:uppercase}
.showcase-demo{background:linear-gradient(180deg,transparent,rgba(82,37,143,.12),transparent)}
.showcase .demo-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:clamp(3rem,8vw,7rem)}
.showcase .demo-card{padding:1.7rem;min-width:0}
.showcase .demo-card .stage{width:100%}
.showcase .demo-card .chip{display:none}
.showcase .demo-card .viewport{aspect-ratio:1.5 / 1;max-height:350px}
.showcase .demo-card .vbody{min-height:220px}
.showcase .demo-copy .tags{display:flex;flex-wrap:wrap;margin:2rem 0 0}
.showcase .demo-copy .cta-row{margin-top:2rem}
.showcase .cta .sub{margin-top:1.5rem}
.showcase .cta-row{flex-wrap:wrap}
.showcase .stage .vbody::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 40% 30%,rgba(202,154,255,.09),transparent 55%);pointer-events:none}
/* Animated illustrative previews. These show a design concept, not a running editor. */
.mock-plate{position:relative;z-index:2;width:74%;max-width:430px;aspect-ratio:2.25/1;border-radius:17px;border:8px solid #eee;box-shadow:0 23px 45px #0009,0 0 70px #c084fc60;background:linear-gradient(#f7f6ee,#d5d2d1);display:flex;align-items:center;justify-content:center;flex-direction:column;transform:rotate(-5deg);animation:float 7s ease-in-out infinite;color:#15151c}
.mock-plate::before,.mock-plate::after{content:"";position:absolute;background:#aaa;width:9px;height:9px;border-radius:50%;top:50%}.mock-plate::before{left:11px}.mock-plate::after{right:11px}
.mock-plate strong{font:800 clamp(1.4rem,3.1vw,3rem)/1 var(--display);letter-spacing:.06em;color:#181526;white-space:nowrap}
.mock-plate span{font:700 .65rem var(--display);color:#6b6475;letter-spacing:.35em;margin-top:1rem}
.plate-symbol{position:absolute;left:0;top:0;bottom:0;width:11%;display:grid;place-items:center;background:linear-gradient(155deg,#2928a2,#5643df);color:white}
.mock-map{height:90%;width:auto;max-width:95%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 22px 35px #000a);border:1px solid #f3e6ff55;border-radius:3px;animation:float 9s ease-in-out infinite}
.mock-tattoo{position:relative;height:95%;z-index:3;display:grid;place-items:center}
.mock-tattoo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 25px #c084fc77);animation:float 8s ease-in-out infinite}
.tattoo-ring{position:absolute;top:32%;right:28%;width:50px;height:50px;border:2px dashed #ebcaff;border-radius:50%;display:grid;place-items:center;background:#7c3aed88;color:white;font-size:1.7rem;box-shadow:0 0 25px #a855f7;animation:pulse 3s ease-in-out infinite}
.mock-tattoo .axis{position:absolute;z-index:3;width:4px;height:100px;background:linear-gradient(#f43f5e,transparent);top:30%;left:53%}.mock-tattoo .ax1{transform:rotate(45deg)}.mock-tattoo .ax2{transform:rotate(-45deg);background:linear-gradient(#3b82f6,transparent)}
.mock-soon{z-index:2;text-align:center;font:700 clamp(3rem,8vw,6rem)/1.1 var(--display);color:#d8b4fe;text-shadow:0 0 32px #a855f7;animation:float 8s ease-in-out infinite}.mock-soon span{display:block;font:700 .9rem var(--display);letter-spacing:.3em;color:#f3e8ff;margin-top:2rem}
.mock-cube{position:relative;z-index:2;width:155px;height:155px;transform-style:preserve-3d;transform:rotateX(-24deg) rotateY(-30deg);animation:spincube 14s linear infinite}
@keyframes spincube{0%{transform:rotateX(-20deg) rotateY(-35deg)}50%{transform:rotateX(-24deg) rotateY(145deg)}100%{transform:rotateX(-20deg) rotateY(325deg)}}
.cube-face{position:absolute;inset:0;border:2px solid #d8b4fedd;background:linear-gradient(145deg,#7c3aedaa,#33115eaa);box-shadow:inset 0 0 55px #c084fc44;backdrop-filter:blur(3px)}
.cube-face.front{transform:translateZ(77px)}.cube-face.back{transform:rotateY(180deg) translateZ(77px)}.cube-face.right{transform:rotateY(90deg) translateZ(77px)}.cube-face.left{transform:rotateY(-90deg) translateZ(77px)}.cube-face.top{transform:rotateX(90deg) translateZ(77px)}.cube-face.bottom{transform:rotateX(-90deg) translateZ(77px)}
.axis-gizmo{position:absolute;top:50%;left:52%;z-index:3;transform:translate(85px,-50px)}.axis-gizmo i{position:absolute;height:4px;width:65px;transform-origin:left;background:#ef4444;border-radius:8px;box-shadow:0 0 14px #ef4444}.axis-gizmo i:nth-child(2){transform:rotate(-90deg);background:#22c55e;box-shadow:0 0 14px #22c55e}.axis-gizmo i:nth-child(3){transform:rotate(138deg);background:#60a5fa;box-shadow:0 0 14px #60a5fa}
@media(max-width:1270px){.showcase .nav ul a{font-size:.68rem;padding:.5rem .32rem}.showcase .nav .btn{font-size:.7rem}}
@media(max-width:1050px){.showcase .nav ul{overflow:auto;justify-content:flex-start;scrollbar-width:none}.showcase .nav ul::-webkit-scrollbar{display:none}.showcase .nav .btn{display:none}.showcase .demo-grid{grid-template-columns:1fr}.showcase .demo-card{max-width:620px;width:100%;margin:auto}.showcase .hero .wrap{grid-template-columns:1fr}.showcase .hero .stage{max-width:560px}}
@media(max-width:640px){.showcase .nav{top:8px}.showcase .nav .logo{font-size:.75rem}.showcase .nav ul{gap:.3rem}.showcase .nav ul a{font-size:.65rem}.showcase .hero{padding-top:8.5rem}.showcase .chip{display:none}.showcase .stats{gap:.5rem}.showcase .stats .stat b{font-size:1.4rem}.showcase .demo-card{padding:.6rem}.showcase .demo-card .viewport{aspect-ratio:1.1/1}.mock-plate{border-width:5px}.mock-plate strong{font-size:clamp(1rem,6vw,2rem)}.mock-cube{transform:scale(.8)}}
@media(prefers-reduced-motion:reduce){.mock-plate,.mock-map,.mock-tattoo img,.mock-soon,.mock-cube{animation:none}}