/* ============ باکس‌های خدمات صفحه اصلی — بدون قیمت ============ */
.svc-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.svc-box { position: relative; background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 26px 22px 24px; overflow: hidden; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s, border-color .3s; }
.svc-box::before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: right; transition: transform .35s; }
.svc-box:hover::before { transform: scaleX(1); }
.svc-box::after { content: ''; position: absolute; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(99, 102, 241, .13), transparent 70%); top: -55px; left: -45px; transition: transform .45s; pointer-events: none; }
.svc-box:hover { transform: translateY(-7px); box-shadow: 0 22px 50px rgba(15, 23, 42, .12); border-color: transparent; }
.svc-box:hover::after { transform: scale(1.7); }
.svc-box-ic { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(135deg, #eef2ff, #fae8ff); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 14px; transition: .35s; position: relative; z-index: 1; }
.svc-box:hover .svc-box-ic { background: var(--grad); transform: rotate(-8deg) scale(1.1); box-shadow: 0 10px 24px rgba(99, 102, 241, .4); }
.svc-box h3 { font-size: 15.5px; font-weight: 800; color: var(--dark); margin-bottom: 6px; position: relative; z-index: 1; }
.svc-box p { font-size: 12.5px; color: var(--muted); line-height: 2; position: relative; z-index: 1; }
.svc-box-arrow { position: absolute; bottom: 16px; left: 18px; color: #c7d2fe; font-size: 18px; opacity: 0; transform: translateX(-8px); transition: .3s; }
.svc-box:hover .svc-box-arrow { opacity: 1; transform: none; color: var(--pri); }
.svc-cta { text-align: center; margin-top: 28px; color: var(--muted); font-size: 13.5px; }
.svc-cta a { font-weight: 700; }
@media (max-width: 980px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }