.c4y-anim-up   { opacity:0; transform:translateY(30px); transition:opacity .6s ease, transform .6s ease; }
.c4y-anim-left { opacity:0; transform:translateX(-20px); transition:opacity .5s ease, transform .5s ease; }
.c4y-anim-up.c4y-visible,
.c4y-anim-left.c4y-visible { opacity:1; transform:none; }

.c4y-tf { display:grid; grid-template-columns:1fr; gap:1rem; width:100%; box-sizing:border-box; }
@media(min-width:768px)  { .c4y-tf { grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px) { .c4y-tf { grid-template-columns:repeat(3,1fr); } }

.c4y-tf .c4y-tf-item {
    display:flex; align-items:center; gap:1rem; padding:1rem; border-radius:.75rem;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.05);
    transition:background .3s ease, border-color .3s ease, opacity .4s ease, transform .4s ease;
    opacity:0; transform:translateX(-20px);
}
.c4y-tf.c4y-visible .c4y-tf-item { opacity:1; transform:none; }
.c4y-tf.c4y-visible .c4y-tf-item:hover { background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.10); transition-delay:0s !important; }
.c4y-tf .c4y-tf-icon { width:2.5rem; height:2.5rem; border-radius:.5rem; flex-shrink:0; background:rgba(104, 200, 81, 0.1); display:flex; align-items:center; justify-content:center; color:rgb(104, 200, 81); }
.c4y-tf .c4y-tf-text { font-size:.875rem; font-weight:500; color:rgba(255,255,255,0.8); margin:0; padding:0; }