body{margin:0;padding:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f7f9fc}.grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:80px 40px;padding:60px 20px;max-width:1200px;margin:0 auto}.card-stack{position:relative;width:250px;height:160px;cursor:pointer;margin:0 auto}.card{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:16px;transition:all .5s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 15px #0000000d}.card-1{z-index:3;background:#ffffff;display:flex;align-items:center;justify-content:center;text-align:center;border:1px solid #eef2f6;box-shadow:0 8px 25px #0000001a}.card-1 .content h3{margin:0 0 5px;font-size:1.2rem;color:#1a202c;font-family:system-ui,-apple-system,sans-serif}.card-1 .content p{margin:0;font-size:.85rem;color:#718096;font-family:system-ui,-apple-system,sans-serif;text-transform:uppercase;letter-spacing:1px}.card-2{z-index:2;background:#e2e8f0}.card-3{z-index:1;background:#cbd5e0}.card-stack .card-2{transform:translateY(8px) scale(.95)}.card-stack .card-3{transform:translateY(16px) scale(.9)}.card-stack.effect-1:hover .card-2{transform:translateY(-15px) scale(.95)}.card-stack.effect-1:hover .card-3{transform:translateY(-30px) scale(.9)}.card-stack.effect-1.active .card-2{transform:translateY(-110%) scale(1)}.card-stack.effect-1.active .card-3{transform:translateY(-220%) scale(1)}.card-stack.effect-2:hover .card-2{transform:translate(20px) translateY(8px) scale(.95)}.card-stack.effect-2:hover .card-3{transform:translate(40px) translateY(16px) scale(.9)}.card-stack.effect-2.active .card-2{transform:translate(110%) translateY(0) scale(1)}.card-stack.effect-2.active .card-3{transform:translate(220%) translateY(0) scale(1)}.card-stack.effect-3:hover .card-2{transform:translateY(25px) scale(.95)}.card-stack.effect-3:hover .card-3{transform:translateY(45px) scale(.9)}.card-stack.effect-3.active .card-2{transform:translateY(110%) scale(1)}.card-stack.effect-3.active .card-3{transform:translateY(220%) scale(1)}.card-stack.effect-4:hover .card-2{transform:translate(-20px) translateY(8px) scale(.95)}.card-stack.effect-4:hover .card-3{transform:translate(-40px) translateY(16px) scale(.9)}.card-stack.effect-4.active .card-2{transform:translate(-110%) translateY(0) scale(1)}.card-stack.effect-4.active .card-3{transform:translate(-220%) translateY(0) scale(1)}.card-stack.effect-5:hover .card-2{transform:translate(15px,-15px) scale(.95)}.card-stack.effect-5:hover .card-3{transform:translate(30px,-30px) scale(.9)}.card-stack.effect-5.active .card-2{transform:translate(105%,-105%) scale(1)}.card-stack.effect-5.active .card-3{transform:translate(210%,-210%) scale(1)}.card-stack.effect-6:hover .card-2{transform:translate(15px,20px) scale(.95)}.card-stack.effect-6:hover .card-3{transform:translate(30px,40px) scale(.9)}.card-stack.effect-6.active .card-2{transform:translate(105%,105%) scale(1)}.card-stack.effect-6.active .card-3{transform:translate(210%,210%) scale(1)}.card-stack.effect-7 .card{transform-origin:bottom right}.card-stack.effect-7:hover .card-2{transform:translateY(8px) rotate(-8deg) scale(.95)}.card-stack.effect-7:hover .card-3{transform:translateY(16px) rotate(-16deg) scale(.9)}.card-stack.effect-7.active .card-2{transform:rotate(-30deg) translateY(-20px) scale(1)}.card-stack.effect-7.active .card-3{transform:rotate(-60deg) translateY(-40px) scale(1)}.card-stack.effect-8 .card{transform-origin:bottom center}.card-stack.effect-8:hover .card-2{transform:translateY(8px) rotate(-8deg) scale(.95)}.card-stack.effect-8:hover .card-3{transform:translateY(8px) rotate(8deg) scale(.95)}.card-stack.effect-8.active .card-2{transform:translate(-110%) rotate(-5deg) scale(1)}.card-stack.effect-8.active .card-3{transform:translate(110%) rotate(5deg) scale(1)}.card-stack.effect-9 .card-2{transform:scale(.9);opacity:0}.card-stack.effect-9 .card-3{transform:scale(.8);opacity:0}.card-stack.effect-9:hover .card-2{transform:scale(1.05);opacity:.5}.card-stack.effect-9:hover .card-3{transform:scale(1.1);opacity:.2}.card-stack.effect-9.active .card-1{transform:scale(.95)}.card-stack.effect-9.active .card-2{transform:translate(-110%) scale(1);opacity:1}.card-stack.effect-9.active .card-3{transform:translate(110%) scale(1);opacity:1}.card-stack.effect-10:hover .card-2{transform:translateY(-30px) scale(.95)}.card-stack.effect-10:hover .card-3{transform:translateY(30px) scale(.95)}.card-stack.effect-10.active .card-2{transform:translateY(-110%) scale(1)}.card-stack.effect-10.active .card-3{transform:translateY(110%) scale(1)}.card-stack.effect-11:hover .card-2{transform:translate(-40px) translateY(8px) scale(.95)}.card-stack.effect-11:hover .card-3{transform:translate(40px) translateY(8px) scale(.95);z-index:2}.card-stack.effect-11.active .card-2{transform:translate(-110%) scale(1)}.card-stack.effect-11.active .card-3{transform:translate(110%) scale(1)}.card-stack.effect-12{perspective:1000px}.card-stack.effect-12 .card{transform-style:preserve-3d}.card-stack.effect-12 .card-2{transform:translateZ(-20px) translateY(8px)}.card-stack.effect-12 .card-3{transform:translateZ(-40px) translateY(16px)}.card-stack.effect-12:hover .card-1{transform:translateZ(40px)}.card-stack.effect-12:hover .card-2{transform:translateZ(20px) translateY(-10px)}.card-stack.effect-12:hover .card-3{transform:translateZ(0) translateY(-20px)}.card-stack.effect-12.active .card-1{transform:translateZ(50px) translateY(-100px)}.card-stack.effect-12.active .card-2{transform:translateZ(25px) translateY(0)}.card-stack.effect-12.active .card-3{transform:translateZ(0) translateY(100px)}.card-stack.effect-13 .card-2{transform:rotate(2deg) translateY(8px) scale(.95)}.card-stack.effect-13 .card-3{transform:rotate(-2deg) translateY(16px) scale(.9)}.card-stack.effect-13:hover .card-2{transform:rotate(-8deg) translate(-15px) translateY(4px) scale(.95)}.card-stack.effect-13:hover .card-3{transform:rotate(12deg) translate(20px) translateY(8px) scale(.9)}.card-stack.effect-13.active .card-2{transform:translate(-110%) rotate(-10deg) scale(1)}.card-stack.effect-13.active .card-3{transform:translate(110%) rotate(10deg) scale(1)}.card-stack.effect-14:hover .card-2{transform:translate(-15px) translateY(8px) scale(.95)}.card-stack.effect-14:hover .card-3{transform:translate(-30px) translateY(16px) scale(.9)}.card-stack.effect-14.active .card-1{transform:translate(110%)}.card-stack.effect-14.active .card-2{transform:translate(0) scale(1)}.card-stack.effect-14.active .card-3{transform:translate(-110%) scale(1)}.card-stack.effect-15:hover .card-2{transform:translate(-15px) translateY(-15px) scale(.95)}.card-stack.effect-15:hover .card-3{transform:translate(15px) translateY(15px) scale(.9);z-index:4}.card-stack.effect-15.active .card-2{transform:translate(-110%) translateY(-110%) scale(1)}.card-stack.effect-15.active .card-3{transform:translate(110%) translateY(110%) scale(1)}