.scene{width:280px;height:360px;perspective:1200px;margin:3% 4%}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.4,.1,.2,1)}
.scene:hover .flip,.scene:focus-within .flip{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:20px;padding:30px;display:flex;flex-direction:column}
.front1{background:#1abc9c;color:#fff}
.front2{background:linear-gradient(160deg,#059669,#0d9488);color:#fff}
.face.back{background:#2c3e50;color:#dbe2ec;transform:rotateY(180deg);border:1px solid #2b333e}
.icon{font-size:2.4rem;margin-bottom:auto}
.front h2{font-size:1.35rem;letter-spacing:-.02em;margin-bottom:8px}
.front p{font-size:.88rem;opacity:.85;line-height:1.55}
.hint{margin-top:18px;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.back h3{font-size:1.05rem;margin-bottom:14px;color:#fff}
.back ul{list-style:none;font-size:.85rem;line-height:2;color:#a7b1c2;margin-bottom:auto}
.back li::before{content:"→ ";color:#22d3ee}
.back a{display:block;text-align:center;padding:11px;border-radius:10px;background:#22d3ee;color:#082f36;font-size:.88rem;font-weight:800;text-decoration:none;transition:filter .15s}
.back a:hover{filter:brightness(1.1)}
.backBtn{margin:2%}
.front1 h2{font-size:26px}