/**
 * Zaki Proof Widget — Styles  (zp- prefix)
 */

/* ─── Section ─────────────────────────────────────────── */
.zp-sec-proof {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: 90px 0 100px;
    background: #f0f4ff;
    isolation: isolate
}

.zp-sec-proof::before {
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 80px;
    background: #fff;
    clip-path: ellipse(55% 100% at 50% 0%);
    z-index: 1
}

.zp-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .28;
    z-index: 0;
    pointer-events: none
}

.zp-blob-1 {
    width: 500px;
    height: 500px;
    top: 0;
    right: -130px;
    background: radial-gradient(circle, #bfdbfe, transparent 65%)
}

.zp-blob-2 {
    width: 420px;
    height: 420px;
    bottom: 0;
    left: -110px;
    background: radial-gradient(circle, #ddd6fe, transparent 65%)
}

.zp-blob-3 {
    width: 260px;
    height: 260px;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(37, 99, 235, .10), transparent 65%)
}

.zp-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px
}

/* ─── Header ──────────────────────────────────────────── */
.zp-proof-head {
    text-align: center;
    margin-bottom: 56px;
    position: relative;
    z-index: 2
}

.zp-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .08);
    color: #2563eb;
    font-weight: 800;
    font-size: .88rem;
    border: 1px solid rgba(37, 99, 235, .18);
    margin-bottom: 16px;
    letter-spacing: .04em
}

.zp-kicker::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2563eb;
    display: inline-block
}

.zp-proof-title {
    font-size: clamp(1.9rem, 2.8vw + .7rem, 2.9rem);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -.03em;
    color: #0f172a;
    margin-bottom: 14px
}

.zp-hl {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent
}

.zp-proof-desc {
    color: #475569;
    font-size: 1.06rem;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.8
}

/* ─── Stats ───────────────────────────────────────────── */
.zp-big-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 52px;
    position: relative;
    z-index: 2
}

.zp-bstat {
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 22px;
    padding: 28px 22px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), box-shadow .22s ease;
    position: relative;
    overflow: hidden
}

.zp-bstat::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    opacity: 0;
    transition: opacity .22s ease
}

.zp-bstat:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(15, 23, 42, .10)
}

.zp-bstat:hover::after {
    opacity: 1
}

.zp-bstat-icon {
    font-size: 1.8rem;
    margin-bottom: 10px;
    display: block
}

.zp-bstat-num {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: -.05em;
    line-height: 1;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: block
}

.zp-bstat-lbl {
    font-size: .86rem;
    color: #64748b;
    margin-top: 6px;
    display: block;
    font-weight: 600
}

/* ─── Testimonials (masonry) ──────────────────────────── */
.zp-testimonials {
    columns: 3;
    column-gap: 20px;
    position: relative;
    z-index: 2;
    margin-bottom: 56px
}

.zp-tcard {
    break-inside: avoid;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .26);
    border-radius: 22px;
    padding: 26px 24px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, .06);
    transition: transform .24s cubic-bezier(.4, 0, .2, 1), box-shadow .24s ease, border-color .24s ease;
    position: relative;
    overflow: hidden
}

.zp-tcard:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 52px rgba(15, 23, 42, .11);
    border-color: rgba(99, 102, 241, .28)
}

.zp-tcard::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    opacity: 0;
    transition: opacity .24s ease;
    border-radius: 22px 22px 0 0
}

.zp-tcard:hover::before {
    opacity: 1
}

.zp-tcard::after {
    content: "❝";
    position: absolute;
    top: 10px;
    left: 16px;
    font-size: 4rem;
    line-height: 1;
    color: rgba(37, 99, 235, .06);
    font-family: Georgia, serif;
    pointer-events: none;
    direction: ltr
}

/* Featured */
.zp-tcard-featured {
    background: linear-gradient(148deg, #1e3a8a 0%, #2563eb 48%, #4f46e5 100%);
    border-color: transparent;
    box-shadow: 0 22px 56px rgba(37, 99, 235, .32)
}

.zp-tcard-featured:hover {
    box-shadow: 0 30px 68px rgba(37, 99, 235, .40);
    border-color: transparent
}

.zp-tcard-featured::before {
    background: rgba(255, 255, 255, .25);
    opacity: 1
}

.zp-tcard-featured::after {
    color: rgba(255, 255, 255, .08)
}

.zp-tcard-featured .zp-t-text {
    color: rgba(255, 255, 255, .90)
}

.zp-tcard-featured .zp-t-name {
    color: #fff
}

.zp-tcard-featured .zp-t-role {
    color: rgba(255, 255, 255, .62)
}

.zp-tcard-featured .zp-t-stars {
    color: #fbbf24
}

.zp-tcard-featured .zp-t-author {
    border-top-color: rgba(255, 255, 255, .14)
}

.zp-tcard-featured .zp-t-verified {
    color: rgba(255, 255, 255, .82);
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .20)
}

.zp-tcard-featured .zp-t-tag {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .85)
}

.zp-t-stars {
    display: flex;
    gap: 3px;
    color: #f59e0b;
    font-size: 1rem;
    direction: ltr
}

.zp-t-text {
    font-size: .95rem;
    color: #334155;
    line-height: 1.78;
    flex: 1;
    position: relative;
    z-index: 1
}

.zp-t-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.zp-t-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    background: rgba(37, 99, 235, .07);
    border: 1px solid rgba(37, 99, 235, .14);
    color: #2563eb
}

.zp-t-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(148, 163, 184, .20)
}

.zp-t-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.05rem;
    font-weight: 900;
    color: #fff;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .25)
}

.zp-av-blue {
    background: linear-gradient(135deg, #2563eb, #1d4ed8)
}

.zp-av-violet {
    background: linear-gradient(135deg, #7c3aed, #6d28d9)
}

.zp-av-indigo {
    background: linear-gradient(135deg, #4f46e5, #4338ca)
}

.zp-av-sky {
    background: linear-gradient(135deg, #0ea5e9, #0284c7)
}

.zp-av-rose {
    background: linear-gradient(135deg, #f43f5e, #e11d48)
}

.zp-av-teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488)
}

.zp-t-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1
}

.zp-t-name {
    font-weight: 900;
    font-size: .93rem;
    color: #0f172a
}

.zp-t-role {
    font-size: .80rem;
    color: #64748b
}

.zp-t-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 700;
    color: #2563eb;
    background: rgba(37, 99, 235, .07);
    border: 1px solid rgba(37, 99, 235, .14);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0
}

/* ─── Clients Belt ────────────────────────────────────── */
.zp-clients-belt {
    position: relative;
    z-index: 2
}

.zp-belt-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px
}

.zp-belt-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to left, transparent, rgba(148, 163, 184, .35))
}

.zp-belt-line.zp-r {
    background: linear-gradient(to right, transparent, rgba(148, 163, 184, .35))
}

.zp-belt-label {
    font-size: .82rem;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: .10em;
    text-transform: uppercase;
    white-space: nowrap
}

.zp-belt-tracks {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.zp-belt-track {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center
}

.zp-logo-card {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 20px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(148, 163, 184, .24);
    box-shadow: 0 3px 12px rgba(15, 23, 42, .06);
    white-space: nowrap;
    cursor: default;
    user-select: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    flex-shrink: 0
}

.zp-logo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .11);
    border-color: rgba(37, 99, 235, .22)
}

.zp-logo-ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    flex-shrink: 0
}

.zp-lic-blue {
    background: rgba(37, 99, 235, .09)
}

.zp-lic-green {
    background: rgba(16, 185, 129, .09)
}

.zp-lic-orange {
    background: rgba(249, 115, 22, .09)
}

.zp-lic-purple {
    background: rgba(124, 58, 237, .09)
}

.zp-lic-sky {
    background: rgba(14, 165, 233, .09)
}

.zp-lic-rose {
    background: rgba(244, 63, 94, .09)
}

.zp-lic-amber {
    background: rgba(245, 158, 11, .09)
}

.zp-lic-teal {
    background: rgba(20, 184, 166, .09)
}

.zp-lic-indigo {
    background: rgba(79, 70, 229, .09)
}

.zp-lic-slate {
    background: rgba(100, 116, 139, .09)
}

.zp-logo-body {
    display: flex;
    flex-direction: column;
    gap: 1px
}

.zp-logo-name {
    font-size: .88rem;
    font-weight: 900;
    color: #0f172a;
    line-height: 1.2
}

.zp-logo-sector {
    font-size: .72rem;
    color: #94a3b8;
    font-weight: 600
}

/* Trust strip */
.zp-belt-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin-top: 32px;
    flex-wrap: wrap
}

.zp-btrust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .88rem;
    color: #64748b;
    font-weight: 600
}

.zp-btrust-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    flex-shrink: 0
}

.zp-btrust-item strong {
    color: #0f172a;
    font-weight: 900
}

/* ─── Reveal ──────────────────────────────────────────── */
.zp-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s cubic-bezier(.4, 0, .2, 1), transform .6s cubic-bezier(.4, 0, .2, 1)
}

.zp-reveal.is-on {
    opacity: 1;
    transform: translateY(0)
}

.elementor-editor-active .zp-reveal,
.elementor-editor-preview .zp-reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: none !important
}

@media(prefers-reduced-motion:reduce) {
    .zp-reveal {
        transition: none;
        transform: none;
        opacity: 1
    }

    .zp-tcard,
    .zp-bstat {
        transition: none
    }
}

/* ─── Responsive ──────────────────────────────────────── */
@media(max-width:1024px) {
    .zp-big-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .zp-testimonials {
        columns: 2
    }
}

@media(max-width:640px) {
    .zp-sec-proof {
        padding: 64px 0 72px
    }

    .zp-big-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px
    }

    .zp-testimonials {
        columns: 1
    }

    .zp-bstat-num {
        font-size: 2rem
    }

    .zp-belt-trust {
        gap: 18px
    }
}