:root { --bg: #f7f7ff; --primary: #1450de; --navy: #102c6d; --muted: #475569; --faint: #94a3b8; }

.shop-product-grid { position: relative; min-height: 200px; }

.project_type_btn[disabled],
.page_btn[disabled],
.page_number[disabled] { opacity: 0.6; pointer-events: none; }

/* Skeleton loader */
.skeleton_item { display: none; }
.skeleton_item.active { display: block; }

.skeleton_card { display: flex; align-items: center; gap: 40px; padding: 24px 0; }
.skeleton_card.reverse { flex-direction: row-reverse; }

.skeleton_img { flex: 1 1 45%; aspect-ratio: 16 / 11; border-radius: 16px; }
.skeleton_desc { flex: 1 1 55%; display: flex; flex-direction: column; gap: 14px; }

.skeleton_line { border-radius: 6px; }
.skeleton_line.category { width: 100px; height: 14px; }
.skeleton_line.title { width: 70%; height: 22px; }
.skeleton_line.desc1 { width: 100%; height: 14px; }
.skeleton_line.desc2 { width: 85%; height: 14px; }

.skeleton_kpis { display: flex; gap: 24px; margin-top: 6px; }
.skeleton_kpi { width: 90px; height: 40px; border-radius: 8px; }

.skeleton_cta { width: 150px; height: 16px; margin-top: 6px; border-radius: 6px; }

.skeleton_img,
.skeleton_line,
.skeleton_kpi,
.skeleton_cta {
    background: linear-gradient(90deg, rgba(20, 80, 222, 0.08) 25%, rgba(20, 80, 222, 0.16) 37%, rgba(20, 80, 222, 0.08) 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

@media (max-width: 767px) {
    .skeleton_card, .skeleton_card.reverse { flex-direction: column; gap: 20px; }
}

.svc-hero { background-color: #f7f7ff; background-image: linear-gradient(rgba(20, 80, 222, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(20, 80, 222, 0.05) 1px, transparent 1px); background-size: 56px 56px; position: relative; overflow: hidden; padding: 80px 0 77px; }

.svc-hero-wrap { display: flex; align-items: center; flex-wrap: wrap; max-width: 1290px; margin: 0 auto; width: 100%; }

.svc-hero-content { padding-right: 32px; }

.hero-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(20, 80, 222, 0.07); border: 1px solid rgba(20, 80, 222, 0.22); border-radius: 50px; padding: 6px 16px; font-size: 12.5px; color: var(--primary); font-weight: 500; letter-spacing: 0.03em; margin-bottom: 1.4rem; text-transform: uppercase; }

.badge-dot { width: 6px; height: 6px; background: var(--primary); border-radius: 50%; box-shadow: 0 0 7px rgba(20, 80, 222, 0.6); animation: pulse-dot 1.8s ease-in-out infinite; }

.svc-hero-sub { color: var(--muted); font-size: 1.05rem; line-height: 1.72; max-width: 460px; margin-top: 1.2rem; margin-bottom: 0; }

.svc-hero-visual { display: flex; align-items: center; justify-content: end; min-height: 340px; }

.svc-canvas-wrap { width: 100%; }

h1 { margin: auto; }

.t-gradient { background: linear-gradient(135deg, var(--primary) 0%, var(--navy) 100%); background-size: 200% 200%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

.t-accent { background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(0.72); }
}

/* ── Stats Grid ── */

.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 480px; }

.stat-card { background: #fff; border: 1px solid rgba(20, 80, 222, 0.1); border-radius: 16px; padding: 24px 20px 20px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 16px rgba(20, 80, 222, 0.06); transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease; overflow: hidden; }

.stat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(20, 80, 222, 0.13); }

.stat-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }

.stat-icon--blue { background: rgba(20, 80, 222, 0.1); color: #1450de; }

.stat-icon--teal { background: rgba(13, 148, 136, 0.1); color: #0d9488; }

.stat-icon--indigo { background: rgba(99, 102, 241, 0.1); color: #6366f1; }

.stat-icon--navy { background: rgba(16, 44, 109, 0.1); color: #102c6d; }

.stat-number { font-size: 2rem; font-weight: 700; color: #0f172a; line-height: 1; letter-spacing: -0.02em; }

.stat-label { font-size: 0.8rem; color: var(--muted); font-weight: 500; line-height: 1.3; }

.stat-bar { height: 3px; border-radius: 99px; margin-top: 4px; width: 40px; }

.stat-bar--blue { background: #1450de; }

.stat-bar--teal { background: #0d9488; }

.stat-bar--indigo { background: #6366f1; }

.stat-bar--navy { background: #102c6d; }

/* ── Counter animation ── */

@keyframes stat-count-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-number.counted { animation: stat-count-in 0.4s ease both; }

@media (min-width: 1310px) {
    .w-col { padding: 0 !important; }
}

@media (max-width: 992px) {
    .svc-hero-sub { max-width: 100% !important; }
    .stats-grid { margin-top: 32px; max-width: 100%; }
}

@media (max-width: 767px) {
    .svc-hero { padding: 52px 0 44px; }
    .svc-hero-content { padding-right: 0; margin-bottom: 24px; }
}

.project_type_filter { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; width: max-content; max-width: 100%; padding: 6px; margin: 0 auto 36px; background: rgba(20, 80, 222, 0.06); border: 1px solid rgba(20, 80, 222, 0.14); border-radius: 999px; }

.project_type_btn { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: 999px; border: none; background: transparent; color: var(--muted); font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: color 0.25s ease; }

.project_type_btn svg { flex-shrink: 0; transition: color 0.25s ease; }

.project_type_btn:hover:not(.active) { color: var(--primary); }

.project_type_btn.active { color: #fff; animation: filter-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); }

.project_type_btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: #102C6D; box-shadow: 0 6px 16px rgba(20, 80, 222, 0.28); opacity: 0; transform: scale(0.85); transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

.project_type_btn.active::before { opacity: 1; transform: scale(1); }

@keyframes filter-pop {
    0% { transform: scale(0.92); }
    50% { transform: scale(1.04); }
    100% { transform: scale(1); }
}

.project_type_filter_wrap { position: relative; }

@media (max-width: 576px) {
    .project_type_filter { width: 100%; max-width: 100%; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; transition: box-shadow 0.25s ease; }
    .project_type_filter::-webkit-scrollbar { display: none; }
    .project_type_btn { flex: 0 0 auto; white-space: nowrap; }
    .project_type_filter_wrap.is-scrolled .project_type_filter { box-shadow: inset 24px 0 16px -16px rgba(16, 44, 109, 0.5); }
    .project_type_filter_wrap.can-scroll-right .project_type_filter { box-shadow: inset -24px 0 16px -16px rgba(16, 44, 109, 0.5); }
    .project_type_filter_wrap.is-scrolled.can-scroll-right .project_type_filter { box-shadow: inset 24px 0 16px -16px rgba(16, 44, 109, 0.5), inset -24px 0 16px -16px rgba(16, 44, 109, 0.5); }
}

@media (max-width: 479px) {
    .project_type_btn { padding: 10px 14px; }
}