*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
:root{--bg:#ebebed;--card-w:300px;--card-h:420px;--accent:#e8ff47;}
body{min-height:100vh;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"DM Sans",sans-serif;overflow-x:hidden;padding:3rem 1rem;cursor:none;}
#cursor{position:fixed;width:12px;height:12px;background:#111115;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .2s ease,height .2s ease,background .2s ease;mix-blend-mode:exclusion;}
#cursor.hovering{width:40px;height:40px;background:#111115;}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);}}
.grid{display:flex;gap:24px;flex-wrap:wrap;align-items:center;justify-content:center;z-index:10;}
.card-wrap{position:relative;width:var(--card-w);height:var(--card-h);opacity:0;transform:translateY(40px);}
.card-wrap:nth-child(1){animation:fadeUp .9s ease .7s forwards;}
.card-wrap:nth-child(2){animation:fadeUp .9s ease .9s forwards;}
.card-wrap:nth-child(3){animation:fadeUp .9s ease 1.1s forwards;}
.card-wrap:nth-child(4){animation:fadeUp .9s ease 1.3s forwards;}
.card-wrap canvas{display:block;width:var(--card-w);height:var(--card-h);border-radius:18px;}
.card-info{position:absolute;bottom:0;left:0;right:0;padding:1.6rem 1.4rem;background:linear-gradient(to top,rgba(0,0,0,.88) 0%,transparent 100%);border-radius:0 0 18px 18px;transform:translateY(6px);transition:transform .4s ease;pointer-events:none;}
.card-wrap:hover .card-info{transform:translateY(0);}
.card-tag{font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem;}
.card-title{font-family:"Bebas Neue",sans-serif;font-size:1.5rem;color:#fff;letter-spacing:.04em;line-height:1.1;}
.card-sub{font-size:.72rem;color:rgba(255,255,255,.5);margin-top:.3rem;}
.corner-tag{position:absolute;top:14px;right:14px;background:var(--accent);color:#000;font-size:.55rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:4px 8px;border-radius:4px;opacity:0;transform:translateY(-4px);transition:opacity .3s ease,transform .3s ease;pointer-events:none;}
.card-wrap:hover .corner-tag{opacity:1;transform:translateY(0);}
body::before{content:"";position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:1000;opacity:.15;mix-blend-mode:multiply;}
@media (max-width:700px){:root{--card-w:260px;--card-h:360px;}.grid{gap:16px;}}