.hl-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px
    }
    
    .hl-card {
        background: #fff;
        border: 1px solid var(--border);
        border-radius: 20px;
        padding: 32px 28px;
        position: relative;
        transition: transform .25s, box-shadow .25s, border-color .25s;
        overflow: hidden
    }
    
    .hl-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-ai);
        border-color: rgba(139, 92, 246, .3)
    }
    
    .hl-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--ai-indigo), var(--ai-violet), var(--ai-cyan));
        opacity: 0;
        transition: opacity .25s
    }
    
    .hl-card:hover::before {
        opacity: 1
    }
    
    .hl-icon {
        width: 52px;
        height: 52px;
        border-radius: 14px;
        background: linear-gradient(135deg, var(--ai-indigo-lt), var(--ai-violet-lt));
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        position: relative
    }
    
    .hl-icon svg {
        width: 26px;
        height: 26px;
        stroke-width: 1.8;
        fill: none;
        stroke: url(#aigrad);
        stroke-linecap: round;
        stroke-linejoin: round
    }
    .hl-icon img {
        width: 26px;
        height: auto;
    }
    .hl-title {
        font-size: 20px;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: -.02em;
        margin-bottom: 10px
    }
    
    .hl-desc {
        font-size: 15px;
        color: var(--body);
        line-height: 1.6;
        font-weight: 400;
        margin-bottom: 0;
    }
    
    @media(max-width:840px) {
        .hl-grid {
            grid-template-columns: 1fr;
            gap: 24px
        }
    }