.service-section { padding: 80px 0; background: #f8fafc; }
        .service-filter { display: flex; justify-content: center; gap: 12px; margin-bottom: 40px; flex-wrap: wrap; }
        .service-filter a { display: inline-block; padding: 8px 24px; border: 2px solid #e2e8f0; border-radius: 50px; font-size: 14px; font-weight: 500; color: #666; transition: all .3s; }
        .service-filter a:hover, .service-filter a.active { background: linear-gradient(135deg, #2563eb, #7c3aed); border-color: #2563eb; color: #fff; }

        .service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
        .service-card { background: #fff; border-radius: 16px; overflow: hidden; transition: all .4s; cursor: pointer; border: 1px solid #f1f5f9; }
        .service-card:hover { transform: translateY(-6px); box-shadow: 0 15px 45px rgba(37,99,235,.08); border-color: rgba(37,99,235,0.15); }
        .service-card .svc-icon { height: 180px; display: flex; align-items: center; justify-content: center; font-size: 56px; background: linear-gradient(135deg, #f8fafc, #eef2ff); transition: transform .5s; }
        .service-card:hover .svc-icon { transform: scale(1.02); }
        .service-card .svc-body { padding: 24px; }
        .service-card .svc-body .svc-tag { display: inline-block; padding: 3px 10px; background: rgba(37,99,235,0.08); color: #2563eb; font-size: 12px; border-radius: 4px; margin-bottom: 10px; }
        .service-card .svc-body h3 { font-size: 18px; color: #0f172a; margin-bottom: 8px; }
        .service-card .svc-body p { font-size: 14px; color: #888; line-height: 1.7; margin-bottom: 12px; }
        .service-card .svc-body .svc-meta { font-size: 12px; color: #94a3b8; display: flex; gap: 12px; }

        .pagination { display: flex; justify-content: center; gap: 8px; margin-top: 50px; }
        .pagination a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid #e2e8f0; border-radius: 8px; font-size: 14px; color: #666; transition: all .3s; }
        .pagination a:hover, .pagination a.active { background: linear-gradient(135deg, #2563eb, #7c3aed); border-color: #2563eb; color: #fff; }
        .pagination a.next-page { width: auto; padding: 0 16px; }

        @media (max-width: 992px) { .service-grid { grid-template-columns: repeat(2,1fr); } }
        @media (max-width: 768px) { .service-grid { grid-template-columns: 1fr; } }