/* --- block 1 --- */
/* Hero resource cards */
        .hero-right .h-card { cursor: pointer; }
        .h-card-text { flex: 1; }
        .h-card-text h3 { font-family: var(--font-display); font-size: 1rem; font-weight: 600; margin-bottom: 3px; letter-spacing: -0.01em; color: var(--white); }
        .h-card-text p { font-size: 0.82rem; font-weight: 400; color: rgba(255,255,255,0.5); line-height: 1.55; }
        .h-card-arrow { flex-shrink: 0; color: rgba(255,255,255,0.3); transition: color 0.2s, transform 0.2s; }
        .h-card-arrow svg { width: 18px; height: 18px; }
        .h-card:hover .h-card-arrow { color: var(--red); transform: translateX(3px); }

        /* ===== TOOLS GRID ===== */
        .tools-grid-section { background: var(--white); }
        .tools-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }
        .tool-category-card {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            background: var(--white);
            border: 1px solid var(--gray-100);
            border-radius: 10px;
            padding: 32px 28px;
            transition: all 0.3s;
            position: relative;
        }
        .tool-category-card::after {
            content: '';
            position: absolute;
            bottom: 0; left: 24px; right: 24px;
            height: 2px;
            border-radius: 2px;
            transform: scaleX(0);
            transition: transform 0.3s;
        }
        .tool-category-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 32px rgba(0,0,0,0.08);
        }
        .tool-category-card:hover::after { transform: scaleX(1); }
        .tool-category-card.c-green::after { background: #0E9AA7; }
        .tool-category-card.c-green:hover { border-color: rgba(14,154,167,0.3); }
        .tool-category-card.c-orange::after { background: #E67E22; }
        .tool-category-card.c-orange:hover { border-color: rgba(230,126,34,0.3); }
        .tool-category-card.c-gold::after { background: #C9A961; }
        .tool-category-card.c-gold:hover { border-color: rgba(201,169,97,0.3); }
        .tool-category-card.c-red::after { background: var(--red); }
        .tool-category-card.c-red:hover { border-color: rgba(205,0,26,0.3); }
        .tool-card-icon {
            width: 52px; height: 52px; border-radius: 10px;
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .tool-card-icon svg { width: 26px; height: 26px; }
        .tool-card-icon.c-green { background: rgba(14,154,167,0.1); color: #0E9AA7; }
        .tool-card-icon.c-orange { background: rgba(230,126,34,0.1); color: #E67E22; }
        .tool-card-icon.c-gold { background: rgba(201,169,97,0.1); color: #C9A961; }
        .tool-card-icon.c-red { background: var(--red-glow); color: var(--red); }
        .tool-category-card h3 {
            font-family: var(--font-display);
            font-size: 1.2rem; font-weight: 700;
            color: var(--black); margin-bottom: 8px;
        }
        .tool-category-card p {
            font-size: 0.88rem; color: var(--section-text); line-height: 1.6; margin-bottom: 14px;
        }
        .tool-list {
            list-style: none; padding: 0; margin: 0 0 16px;
        }
        .tool-list li {
            font-size: 0.82rem; color: var(--section-text);
            padding: 3px 0 3px 18px; position: relative;
        }
        .tool-list li::before {
            content: ''; position: absolute; left: 0; top: 10px;
            width: 7px; height: 7px; border-radius: 2px;
            border: 1.5px solid var(--gray-300);
        }
        .tool-card-link {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 0.88rem; font-weight: 600; color: var(--red);
        }
        .tool-card-link svg { width: 16px; height: 16px; transition: transform 0.2s; }
        .tool-category-card:hover .tool-card-link svg { transform: translateX(4px); }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            .tools-grid { grid-template-columns: 1fr; }
        }