.nav-wrap{position:fixed;top:14px;left:0;right:0;z-index:50;display:flex;justify-content:center;perspective:900px}
.nav{display:flex;align-items:center;gap:2.5rem;padding:.7rem 1.6rem;background:var(--glass);border:1px solid var(--edge);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:999px;transform-style:preserve-3d;transform:rotateX(var(--nx,0deg)) rotateY(var(--ny,0deg));transition:transform .25s ease-out}
.nav ul{display:flex;gap:1.4rem}
.flip{position:relative;display:block;height:1.5em;perspective:400px;min-width:5.2em;text-align:center}
.flip i,.flip b{position:absolute;inset:0;font-style:normal;font-weight:500;backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.flip b{color:var(--cyan);text-shadow:0 0 12px var(--cyan);transform:rotateX(-180deg)}
.flip:hover i{transform:rotateX(180deg)}
.flip:hover b{transform:rotateX(0)}
.hero{min-height:100vh;display:grid;place-items:center;perspective:1200px;padding:0 6vw}
.hero-card{text-align:center;padding:5vh 5vw;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}
.hero-card h1,.hero-card .tag,.hero-card .row{transform:translateZ(40px)}
.scroll-hint{position:absolute;bottom:4vh;opacity:.5;letter-spacing:.3em;font-size:.8rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem;max-width:1100px;margin:6vh auto 0;perspective:1000px}
.card{padding:2rem;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out,box-shadow .3s}
.card:hover{box-shadow:0 20px 60px rgba(0,240,255,.25),0 0 0 1px var(--cyan)}
.card .ico{font-size:2.4rem;color:var(--cyan);transform:translateZ(50px);text-shadow:0 0 20px var(--cyan)}
.card h3{transform:translateZ(35px)}.card p{transform:translateZ(20px);opacity:.7}
.stage{perspective:1100px;height:420px;margin-top:8vh;display:grid;place-items:center;cursor:grab;touch-action:pan-y}
.ring{position:relative;width:240px;height:320px;transform-style:preserve-3d;transform:rotateY(var(--ang,0deg))}
.panel{position:absolute;inset:0;border-radius:20px;border:1px solid var(--edge);padding:1.6rem;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 0 40px rgba(0,0,0,.5)}
.panel:nth-child(1){transform:rotateY(0) translateZ(340px);background:linear-gradient(160deg,rgba(168,85,247,.5),rgba(5,5,16,.7))}
.panel:nth-child(2){transform:rotateY(60deg) translateZ(340px);background:linear-gradient(160deg,rgba(0,240,255,.45),rgba(5,5,16,.7))}
.panel:nth-child(3){transform:rotateY(120deg) translateZ(340px);background:linear-gradient(160deg,rgba(0,102,255,.5),rgba(5,5,16,.7))}
.panel:nth-child(4){transform:rotateY(180deg) translateZ(340px);background:linear-gradient(160deg,rgba(168,85,247,.4),rgba(0,102,255,.4))}
.panel:nth-child(5){transform:rotateY(240deg) translateZ(340px);background:linear-gradient(160deg,rgba(0,240,255,.4),rgba(168,85,247,.4))}
.panel:nth-child(6){transform:rotateY(300deg) translateZ(340px);background:linear-gradient(160deg,rgba(0,102,255,.4),rgba(0,240,255,.4))}
.timeline{max-width:900px;margin:8vh auto 0;display:grid;gap:3rem;perspective:1000px}
.node{padding:1.8rem 2rem;width:min(420px,100%);transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.node:nth-child(even){justify-self:end}
.node span{font-size:2.6rem;font-weight:700;color:var(--violet);text-shadow:0 0 20px var(--violet)}
.portal-sec{display:grid;place-items:center;perspective:700px;overflow:hidden}
.portal{position:absolute;inset:0;display:grid;place-items:center;transform-style:preserve-3d}
.portal i{position:absolute;width:70vmin;height:70vmin;border-radius:50%;border:3px solid var(--cyan);box-shadow:0 0 40px var(--cyan),inset 0 0 40px var(--violet);animation:tunnel 6s linear infinite}
.portal i:nth-child(2){animation-delay:-1s;border-color:var(--blue)}
.portal i:nth-child(3){animation-delay:-2s;border-color:var(--violet)}
.portal i:nth-child(4){animation-delay:-3s}
.portal i:nth-child(5){animation-delay:-4s;border-color:var(--blue)}
.portal i:nth-child(6){animation-delay:-5s;border-color:var(--violet)}
.portal.go i{animation-duration:.8s}
.portal-copy{position:relative;text-align:center;z-index:2;display:grid;gap:2rem;justify-items:center}
.msg{min-height:1.5em;color:var(--cyan);letter-spacing:.2em}
.foot-layer{transform:translate(var(--px,0),var(--py,0));transition:transform .2s}