/* TOOLS GRID */
.tools-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); 
    gap: 10px; 
    margin-bottom: 80px; 
}

/* CARD COMPONENT */
.tool-card { 
    background: var(--surface); 
    border: 1px solid var(--border); 
    padding: 12px 8px; 
    border-radius: 10px; 
    text-decoration: none; 
    color: inherit; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    height: 120px; 
    justify-content: center;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                border-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.5s ease;
}

.tool-card:hover { 
    transform: translateY(-5px); 
    border-color: var(--primary); 
    box-shadow: 0 10px 20px -10px rgba(37, 99, 235, 0.2); 
    background: rgba(37, 99, 235, 0.02); 
}

.tool-card.featured { 
    border: 1.5px solid var(--primary); 
    background: linear-gradient(145deg, var(--surface), rgba(37, 99, 235, 0.04)); 
    position: relative; 
}

/* CARD ICON */
.tool-card svg { 
    width: 20px; 
    height: 20px; 
    color: var(--primary); 
    margin-bottom: 6px; 
    flex-shrink: 0; 
    transition: transform 0.5s ease; 
}

.tool-card:hover svg { 
    transform: scale(1.1); 
}

/* CARD CONTENT (Original Selectors) */
.tool-card h3 { 
    font-size: 0.85rem; 
    font-weight: 700; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    display: block; 
    width: 100%; 
    padding: 0 4px; 
}

.tool-card p { 
    font-size: 0.65rem; 
    color: var(--text-muted); 
    line-height: 1.2; 
    display: -webkit-box; 
    -webkit-line-clamp: 2; 
    -webkit-box-orient: vertical; 
    overflow: hidden; 
}