.flipdeck{--ink:#e5e7eb;--muted:#9ca3af;--bg:#0b0c10;--card:#0e1116;--radius:18px;--shadow:0 10px 25px -10px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25);--wrap:1600px;background:var(--bg);color:var(--ink)}
.flipdeck *{box-sizing:border-box}
.flipdeck__wrap{max-width:var(--wrap);margin-inline:auto;padding:80px 10px}
.flipdeck__grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}
.flipdeck .flip{perspective:1200px;position:relative;height:360px;cursor:default}
.flipdeck .flip-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .2s ease;transform:rotateY(var(--flip,0deg)) scale(var(--scale,1));background:var(--card)}
.flipdeck .flip:hover .flip-inner{--flip:180deg;--scale:1.02;box-shadow:0 18px 40px -12px rgba(0,0,0,.55)}
.flipdeck .flip-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;border-radius:var(--radius);overflow:hidden;text-align:center;padding:20px}
.flipdeck .flip-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.04) brightness(.92);transform:scale(1.02);transition:transform .6s ease}
.flipdeck .flip:hover .flip-front img{transform:scale(1.08)}
.flipdeck .flip-front::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.35) 40%,transparent 65%);z-index:1;pointer-events:none}
.flipdeck .flip-title{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;color:#fff;font-weight:900;font-size:clamp(16px,2vw,20px);line-height:1.25;text-shadow:0 2px 10px rgba(0,0,0,.6);text-align:left}
.flipdeck .flip-back{transform:rotateY(180deg);background:#0e1116;color:#e5e7eb;padding:24px;display:flex;flex-direction:column;justify-content:center;gap:10px;border:1px solid rgba(255,255,255,.06)}
.flipdeck .flip-back h3{margin:0 0 6px;font-size:20px;font-weight:900;color:#fff}
.flipdeck .flip-back p{margin:0;color:#cbd5e1;font-size:16px}
@media (max-width:980px){.flipdeck__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.flipdeck__grid{grid-template-columns:1fr}.flipdeck .flip{height:300px}}