/* HERO SECTION */
    .tools-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white; padding: 60px 0; text-align: center;
        border-radius: 0 0 30px 30px; margin-bottom: 40px; position: relative; overflow: hidden;
    }
    .hero-circles {
        position: absolute; width: 200px; height: 200px; border-radius: 50%;
        background: rgba(255,255,255,0.1); top: -50px; left: -50px;
    }

    /* TOOL CARDS */
    .tool-card {
        background: white; border-radius: 15px; padding: 25px 20px;
        text-align: center; border: none; box-shadow: var(--card-shadow);
        transition: all 0.3s ease; height: 100%; position: relative;
        overflow: hidden; text-decoration: none; display: block; color: #333;
    }
    .tool-card:hover { transform: translateY(-8px); box-shadow: 0 15px 30px rgba(0,0,0,0.1); }

    .tool-icon-wrapper {
        width: 70px; height: 70px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 20px; font-size: 28px; color: white;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    /* Dynamic Tool Colors (Class based) */
    .tool-bg-default { background: linear-gradient(45deg, #667eea, #764ba2); }
    .tool-bg-img { background: linear-gradient(45deg, #ff9a9e, #fad0c4); color: #d63031; }
    .tool-bg-pdf { background: linear-gradient(45deg, #a18cd1, #fbc2eb); color: #6c5ce7; }

    .tool-title { font-weight: 700; font-size: 18px; margin-bottom: 8px; }
    .tool-desc { font-size: 13px; color: #666; margin-bottom: 20px; line-height: 1.5; min-height: 40px; }

    .btn-use {
        background: #f8f9fa; color: var(--primary-color); border: 1px solid #e9ecef;
        padding: 8px 20px; border-radius: 20px; font-size: 13px; font-weight: 600; transition: 0.3s;
    }
    .tool-card:hover .btn-use { background: var(--primary-color); color: white; border-color: var(--primary-color); }

    /* Badge for New Tools */
    .new-badge {
        position: absolute; top: 10px; right: 10px; background: #ff4757; color: white;
        font-size: 10px; font-weight: bold; padding: 2px 8px; border-radius: 4px;
    }

    /* Loader */
    .loader { text-align: center; padding: 50px; color: #666; font-weight: bold; }