/* ================================================================
   SVCPAGE — Services Pages Template Styles  (sp-* classes)
   ================================================================ */

/* ── ul/ol padding in all service page description areas ── */
.sp-hero-desc ol, .sp-hero2-desc ol, .sp-ft-body ul, .sp-ft-body ol,
.sp-body ul, .sp-body ol, .sp-why-desc ul, .sp-why-desc ol,
.sp-tab-body ul, .sp-tab-body ol, .sp-desc ul, .sp-desc ol,
.sp-content ul, .sp-content ol {
    padding-left: 18px !important;
    margin-bottom: 16px;
}

/* ── Hero Web ── */
.sp-herow-inner {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 64px;
    align-items: center;
    padding: 80px 0;
}
.sp-herow-text { display: flex; flex-direction: column; gap: 20px; }
.sp-herow-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(222,6,88,.08); color: #DE0658;
    font-size: 13px; font-weight: 600;
    padding: 6px 14px; border-radius: 20px;
    width: fit-content;
}
.sp-herow-title { font-size: 38px; font-weight: 800; line-height: 1.2; margin: 0; color: #0d1020; }
.sp-herow-desc { font-size: 16px; color: #6b7280; line-height: 1.7; margin: 0; }
.sp-herow-btn { display: inline-flex; align-items: center; gap: 8px; width: fit-content; }
.sp-herow--has-bg .sp-herow-title { color: #ffffff; }
.sp-herow--has-bg .sp-herow-desc  { color: rgba(255,255,255,.85); }
.sp-herow--has-bg .sp-herow-badge { background: rgba(255,255,255,.15); color: #ffffff; border-color: rgba(255,255,255,.25); }

/* Widget */
.sp-herow-widget-wrap { display: flex; justify-content: center; }
.sp-herow-widget {
    background: #ffffff;
    border: 1.5px solid #eef0f5;
    border-radius: 20px;
    padding: 0;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 8px 40px rgba(0,0,0,.07);
    overflow: hidden;
}
.sp-herow-widget-head {
    display: flex; align-items: center; gap: 10px;
    background: #ffffff; padding: 16px 20px;
    border-bottom: 1.5px solid #eef0f5;
}
.sp-herow-widget-icon { font-size: 18px; color: #DE0658; }
.sp-herow-widget-title { font-size: 14px; font-weight: 700; color: #0d1020; flex: 1; }
.sp-herow-widget-live { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }

/* Metrics rows */
.sp-herow-metrics { padding: 6px 0; background: #ffffff; }
.sp-herow-metric {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #f5f6fa;
    font-size: 13px;
}
.sp-herow-metric:last-child { border-bottom: none; }
.sp-herow-metric-label { color: #6b7280; }
.sp-herow-metric-right { display: flex; align-items: center; gap: 8px; }
.sp-herow-metric-value { font-weight: 600; color: #0d1020; }

/* Dot */
.sp-herow-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #22c55e; display: inline-block;
    flex-shrink: 0;
}

/* Bottom stats bar */
.sp-herow-widget-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    background: #0d1020; border-top: 1.5px solid #eef0f5;
}
.sp-herow-wstat {
    display: flex; flex-direction: column; align-items: center;
    padding: 14px 10px; gap: 4px;
    border-right: 1px solid rgba(255,255,255,.08);
}
.sp-herow-wstat:last-child { border-right: none; }
.sp-herow-wstat-num { font-size: 16px; font-weight: 800; color: #DE0658; }
.sp-herow-wstat-lbl { font-size: 10px; color: #94a3b8; text-align: center; }

@media (max-width: 1024px) {
    .sp-herow-inner { grid-template-columns: 1fr; gap: 40px; }
    .sp-herow-widget { max-width: 100%; }
    .sp-herow-title { font-size: 28px; }
}
@media (max-width: 768px) {
    .sp-herow-inner { padding: 40px 15px; }
}

/* ── Section helpers ── */
.page-template-template-svcpage h2 { font-size: 36px; }
.sp-section-head { margin-bottom: 30px; }
.sp-section-head.section-center { text-align: center; }

/* Card desc always left-aligned */
.sp-why-card-desc,
.sp-why-card-desc p,
.sp-why-card-desc *,
.sp-svc-card-desc,
.sp-svc-card-desc p,
.sp-svc-card-desc *,
.sp-svc-card p,
.sp-why-card p { text-align: left !important; }

@media (max-width: 768px) {
    .sp-section-head.section-center,
    .sp-section-head { text-align: left; }

    h2 { font-size: 26px !important; }

    /* Justify all body/desc text on mobile */
    .section-subtitle,
    .sp-hero-desc, .sp-hero2-desc,
    .sp-process-desc, .sp-sslider-body,
    .sp-ft-body,
    .sp-cta-desc,
    .sp-risk2-desc, .sp-testi-quote { text-align: justify; }
    .sp-section-head .section-tag { display: inline-block; }

    /* Hero no-image: left align on mobile */
    .sp-hero-inner--noimg { text-align: left !important; justify-items: flex-start !important; }
    .sp-hero-inner--noimg .sp-hero-text { align-items: flex-start !important; text-align: left !important; }
    .sp-hero-inner--noimg .sp-hero-desc { text-align: left !important; }
    .sp-hero-inner--noimg .sp-hero-title { text-align: left !important; }
    .sp-hero-inner--noimg .sp-hero-btns { justify-content: flex-start !important; }
    .sp-hero-inner--noimg .sp-badge { align-self: flex-start !important; }

    /* Risk, case CTA, process head */
    .sp-risk2-head { text-align: left; margin-left: 0; margin-right: 0; }
    .sp-case-cta { text-align: left; }
}

/* ================================================================
   HERO  (sp-hero)  — matches abt-hero layout/spacing
   ================================================================ */
.sp-hero2 {
    background: #f8f9fc;
    padding: 90px 50px 50px !important;
    overflow: hidden;
}
.sp-hero {
    background: linear-gradient(135deg, #080c1a 0%, #0f1535 50%, #0d0a1e 100%);
    position: relative;
    overflow: hidden;
    color: #ffffff;
    padding: 90px 50px 50px;
}
.sp-hero::before {
    content: '';
    position: absolute;
    width: 560px; height: 560px;
    border-radius: 50%;
    background: rgba(222,6,88,.22);
    filter: blur(72px);
    top: -200px; left: -100px;
    pointer-events: none;
}
.sp-hero::after {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: rgba(255,131,2,.18);
    filter: blur(72px);
    bottom: -160px; right: -80px;
    pointer-events: none;
}
.sp-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    padding: 0;
    display: flex  !important;
    justify-content: space-between !important;
}
.sp-hero-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.sp-hero-text .sp-hero-title,
.sp-hero-text .sp-hero-desc { text-align: left; }

/* No side image */
.sp-hero-inner--noimg {
    grid-template-columns: 1fr !important;
    padding: 0 !important;
}
.sp-hero-inner--noimg .sp-hero-text { align-items: flex-start !important; text-align: left !important; width: 100%; max-width: 760px; }
.sp-hero-inner--noimg .sp-hero-btns { justify-content: flex-start !important; }
.sp-hero-inner--noimg .sp-hero-desc { max-width: 680px !important; text-align: left !important; }
.sp-hero-inner--noimg .sp-hero-title { max-width: 100% !important; text-align: left !important; }
.sp-hero-inner--noimg .sp-badge { align-self: flex-start !important; }

/* Background image only — left aligned */
.sp-hero-inner--bgonly {
    grid-template-columns: 1fr !important;
    max-width: 1520px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: left;
    justify-items: left;
}
.sp-hero-inner--bgonly .sp-hero-text { align-items: flex-start !important; text-align: left !important; width: 100%; max-width: 760px; }
.sp-hero-inner--bgonly .sp-hero-btns { justify-content: flex-start !important; }
.sp-hero-inner--bgonly .sp-hero-desc { max-width: 680px !important; text-align: left; }
.sp-hero-inner--bgonly .sp-hero-title { max-width: 100% !important; text-align: left; }
.sp-hero-inner--bgonly .sp-badge { align-self: flex-start !important; }

@media (max-width: 900px) {
    .sp-hero-inner { grid-template-columns: 1fr !important; }
    .sp-hero { padding-left: 30px; padding-right: 30px; }
}
@media (max-width: 767px) { .sp-hero { padding: 100px 15px 40px; } }
@media (max-width: 640px) { .sp-hero { padding: 70px 15px 60px; } }
.sp-badge {
    display: inline-block;
    background: rgba(222,6,88,.15);
    color: #ff6b9d;
    border: 1px solid rgba(222,6,88,.3);
    border-radius: 50px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 20px;
    width: fit-content;
}
.sp-hero-title {
    font-size: 45px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    margin: 0 0 20px !important;
    letter-spacing: -.02em;
}
.sp-hero-title span { color: #DE0658; }
.sp-hero-desc {
    font-size: 1.05rem;
    color: #ffffff !important;
    line-height: 1.85;
    max-width: 480px;
}
.sp-hero-desc,
.sp-hero-desc * { color: #ffffff !important; }
.sp-hero-desc ul,
.sp-hero2-desc ul { list-style: none; padding: 0; margin: 0 0 20px; }
.sp-hero2-desc ul li { color: #4b5563; }

/* Global bullets for all wysiwyg/desc content on service pages */
.section-subtitle ul,
.sp-hero-desc ul,
.sp-hero2-desc ul,
.sp-why-card-desc ul,
.sp-svc-card-desc ul,
.sp-process-desc ul,
.sp-sslider-body ul,
.sp-sslider-card-desc ul,
.sp-cta-desc ul,
.sp-related-desc ul { list-style: disc !important; padding-left: 18px !important; margin-bottom: 16px; }
.sp-ft-body ul { list-style: disc !important; padding-left: 20px !important; margin-bottom: 16px; }

.section-subtitle ul li,
.sp-hero-desc ul li,
.sp-hero2-desc ul li,
.sp-why-card-desc ul li,
.sp-svc-card-desc ul li,
.sp-process-desc ul li,
.sp-sslider-body ul li,
.sp-sslider-card-desc ul li,
.sp-cta-desc ul li,
.sp-related-desc ul li { position: relative; padding-left: 0 !important; margin-bottom: 8px; line-height: 1.7; }
.sp-ft-body ul li { padding-left: 0; margin-bottom: 8px; line-height: 1.7; }

.section-subtitle ul li::before,
.sp-hero-desc ul li::before,
.sp-hero2-desc ul li::before,
.sp-why-card-desc ul li::before,
.sp-svc-card-desc ul li::before,
.sp-process-desc ul li::before,
.sp-sslider-body ul li::before,
.sp-sslider-card-desc ul li::before,
.sp-ft-body ul li::before { display: none !important; }
.sp-cta-desc ul li::before,
.sp-related-desc ul li::before { content: ''; position: absolute; left: 0; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: #DE0658; }
.sp-hero-btns { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.sp-hero-image { position: relative; }
.sp-hero-image img { width: 100%; border-radius: 24px; box-shadow: 0 40px 100px rgba(0,0,0,.5); }
.sp-hero-image--placeholder .sp-img-placeholder {
    aspect-ratio: 4/3;
    border-radius: 24px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; justify-content: center;
    font-size: 4rem; color: rgba(255,255,255,.15);
}
.sp-hero-img-badge {
    position: absolute; bottom: 24px; left: -20px; z-index: 3;
    background: #ffffff; border-radius: 14px; padding: 14px 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
    display: flex; align-items: center; gap: 12px;
    min-width: 200px;
}
.sp-hero-img-badge-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(222,6,88,.1); display: flex; align-items: center; justify-content: center;
    color: #DE0658; font-size: 1.1rem; flex-shrink: 0;
}
.sp-hero-img-badge strong { display: block; font-size: .88rem; font-weight: 700; color: #0d1020; }
.sp-hero-img-badge span { display: block; font-size: .75rem; color: #9ca3af; }
@media (max-width: 900px) {
    .sp-hero-inner { grid-template-columns: 1fr !important; }
    .sp-hero-image { display: none; }
}

/* ================================================================
   HERO APP  (sp-hero2)
   ================================================================ */
.sp-hero2 {
    background: #f8f9fc;
    padding: 90px 50px 50px;
    overflow: hidden;
}
.sp-hero2-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 60px;
    align-items: center;
}
.sp-hero2-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(222,6,88,.08); color: #DE0658;
    border: 1px solid rgba(222,6,88,.15); border-radius: 50px;
    padding: 7px 16px; font-size: 13px; font-weight: 600;
    margin-bottom: 20px; width: fit-content;
}
.sp-hero2-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900; color: #0d1020; line-height: 1.12;
    margin: 0 0 20px; letter-spacing: -.02em;
}
.sp-hero2-desc { font-size: 1.05rem; color: #6b7280; line-height: 1.8; margin: 0 0 32px; }
.sp-hero2-btns { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 36px; margin-top: 20px; }
.sp-hero2-btn2 { font-weight: 600; color: #0d1020; text-decoration: none; font-size: 15px; }
.sp-hero2-btn2:hover { color: #DE0658; }
.sp-hero2-stats { display: flex; flex-wrap: wrap; gap: 24px; }
.sp-hero2-stat { display: flex; flex-direction: column; gap: 2px; }
.sp-hero2-stat-num { font-size: 1.8rem; font-weight: 900; color: #DE0658; line-height: 1; white-space: nowrap; }
.sp-hero2-stat-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #9ca3af; }
.sp-hero2-img-wrap { position: relative; }
.sp-hero2-img { width: 100%; border-radius: 24px; box-shadow: 0 30px 80px rgba(0,0,0,.12); }
.sp-hero2-img-placeholder {
    aspect-ratio: 4/3; border-radius: 24px;
    background: linear-gradient(135deg, rgba(222,6,88,.06), rgba(99,102,241,.06));
    display: flex; align-items: center; justify-content: center;
    font-size: 5rem; color: rgba(222,6,88,.15);
}
.sp-hero2-fb {
    position: absolute; background: #ffffff; border-radius: 12px; padding: 10px 14px;
    box-shadow: 0 8px 28px rgba(0,0,0,.14); display: flex; align-items: center; gap: 8px;
    font-size: .8rem; font-weight: 700;
}
.sp-hero2-fb--tl { top: 24px; left: -16px; }
.sp-hero2-fb--bl { bottom: 48px; left: -16px; }
.sp-hero2-fb--br { bottom: 24px; right: -12px; }
@media (max-width: 900px) {
    .sp-hero2-inner { grid-template-columns: 1fr !important; }
    .sp-hero2-img-wrap { display: none; }
    .sp-hero2 { padding: 80px 0 40px; }
}
@media (max-width: 768px) {
    .sp-hero2 { padding: 120px 0 32px; }
    .sp-hero2-badge { font-size: 11px; padding: 5px 12px; margin-bottom: 14px; max-width: 100%; white-space: normal; text-align: left; }
    .sp-hero2-title { font-size: 1.6rem; margin-bottom: 12px; letter-spacing: -.01em; }
    .sp-hero2-desc { font-size: .9rem; margin-bottom: 20px; line-height: 1.7; }
    .sp-hero2-btns { gap: 10px; margin-bottom: 24px; flex-direction: column; align-items: stretch; }
    .sp-hero2-btns .btn-primary,
    .sp-hero2-btns .sp-hero2-btn2 { width: 100%; justify-content: center; text-align: center; }
    .sp-hero2-stats { gap: 12px 20px; }
    .sp-hero2-stat-num { font-size: 1.4rem; white-space: normal; }
    .sp-hero2-stat-lbl { font-size: .65rem; }
}
@media (max-width: 400px) {
    .sp-hero2-title { font-size: 1.4rem; }
    .sp-hero2-stats { gap: 10px 16px; }
    .sp-hero2-stat-num { font-size: 1.25rem; }
}

/* ================================================================
   TRUST BAR  (sp-trust)
   ================================================================ */
.sp-trust {
    background: linear-gradient(135deg, #0d1020 0%, #1a1f3a 100%);
    padding: 0 40px;
    position: relative;
    overflow: hidden;
}
.sp-trust::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(222,6,88,.15) 0%, transparent 70%);
    pointer-events: none;
}
.sp-trust::after {
    content: '';
    position: absolute;
    bottom: -80px; left: -40px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,131,2,.1) 0%, transparent 70%);
    pointer-events: none;
}
.sp-trust-stats {
    display: flex !important;
    justify-content: center;
    align-items: stretch;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.sp-trust-stat {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 40px;
    border-right: 1px solid rgba(255,255,255,.1);
    flex: 1;
    min-width: 140px;
    text-align: center;
}
.sp-trust-stat:last-child { border-right: none; }
@media (max-width: 768px) {
    .sp-trust-stats { flex-wrap: wrap; }
    .sp-trust-stat { flex: 1 1 45%; border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: 18px 12px; min-width: unset; }
    .sp-trust-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
    .sp-trust-stat:last-child { border-bottom: none; }
    .sp-trust-stat:nth-last-child(2):nth-child(odd) { border-bottom: none; }
    .sp-trust-stat-num { font-size: 1.8rem; }
}
.sp-trust-stat-num {
    font-size: 2.4rem; font-weight: 900; line-height: 1; display: block;
    background: linear-gradient(135deg, #DE0658, #FF8302);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    white-space: nowrap;
}
.sp-trust-stat-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgb(255 255 255 / 78%); display: block; line-height: 1.4; }
@media (max-width: 768px) {
    .sp-trust { padding: 40px 20px; }
}

/* ================================================================
   WHY CHOOSE US  (sp-why)
   ================================================================ */
.sp-why { background: #f9f9fb; }
.sp-why-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
    grid-auto-rows: 1fr;
}
.sp-why-grid--orphans {
    display: grid !important;
    justify-content: start;
    grid-template-columns: unset !important;
    margin-top: 24px;
    gap: 24px;
}
.sp-why-card {
    background: #ffffff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.04) !important;
    transition: transform .25s, box-shadow .25s !important;
    opacity: 1 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.sp-why-card:hover { transform: translateY(-4px) !important; box-shadow: 0 12px 40px rgba(0,0,0,.09) !important; }
.sp-why-card-header { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sp-why-card-header .sp-why-icon { margin-bottom: 0; }
.sp-why-card-header .sp-why-card-title { margin: 0; }
.sp-why-icon {
    width: 48px; height: 48px; border-radius: 12px;
    background: rgba(222,6,88,.08);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px; color: #DE0658; font-size: 1.2rem;
}
.sp-why-card-title { font-size: 1rem; font-weight: 700; color: #0d1020; margin: 0 0 10px; }
.sp-why-card-desc { font-size: .9rem; color: #6b7280; line-height: 1.7; margin: 0; }
.sp-why-card-img { width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 16px; }
.sp-why-card-img img { width: 100%; height: 180px; object-fit: cover; display: block; }
.sp-why-grid .sp-why-card.sp-last-full { grid-column: 1 / -1; }
@media (min-width: 561px) and (max-width: 900px) {
    .sp-why-grid,
    .sp-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
    .sp-why-grid,
    .sp-why-grid--orphans,
    .sp-services-grid,
    .sp-services-grid--orphans { grid-template-columns: 1fr !important; }
}

/* ================================================================
   SERVICES  (sp-services)
   ================================================================ */
.sp-services { background: #ffffff; }
.sp-services-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}
.sp-services-grid--orphans {
    display: grid !important;
    justify-content: start;
    grid-template-columns: unset !important;
    margin-top: 24px;
    gap: 24px;
}
.sp-svc-card {
    background: #ffffff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 20px !important;
    padding: 32px 28px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.04) !important;
    transition: transform .25s, box-shadow .25s, border-color .25s !important;
    opacity: 1 !important;
    transform: none !important;
}
.sp-svc-card::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #DE0658, #FF8302);
    transform: scaleX(0); transform-origin: left; transition: transform .3s;
}
.sp-svc-card:hover { transform: translateY(-5px) !important; box-shadow: 0 20px 56px rgba(0,0,0,.1) !important; border-color: rgba(222,6,88,.2) !important; }
.sp-svc-card:hover::after { transform: scaleX(1); }
.sp-svc-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.sp-svc-card-icon {
    width: 56px; height: 56px; border-radius: 14px; flex-shrink: 0;
    background: linear-gradient(135deg, rgba(222,6,88,.1), rgba(255,131,2,.08));
    display: flex; align-items: center; justify-content: center;
    color: #DE0658; font-size: 1.4rem; transition: background .25s, color .25s;
}
.sp-svc-card:hover .sp-svc-card-icon { background: linear-gradient(135deg, #DE0658, #FF8302); color: #ffffff; }
.sp-svc-card-icon img { width: 30px; height: 30px; object-fit: contain; }
.sp-svc-card-num { font-size: 2.4rem; font-weight: 900; color: #DE0658 !important; -webkit-text-stroke: 1.5px rgba(0,0,0,.07); line-height: 1; }
.sp-svc-card-title { font-size: 1.05rem; font-weight: 800; color: #0d1020; margin: 0; }
.sp-svc-card-desc { font-size: .9rem; color: #6b7280; line-height: 1.75; margin: 0; flex: 1; }
.sp-svc-card-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-svc-card-feats li { font-size: .82rem; color: #374151; display: flex; align-items: center; gap: 8px; }
.sp-svc-card-feats li::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #DE0658; flex-shrink: 0; }
.sp-svc-card-link { font-size: .88rem; font-weight: 700; color: #DE0658; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; margin-top: auto; transition: gap .2s; }
.sp-svc-card-link:hover { gap: 10px; }
.sp-services-grid .sp-svc-card.sp-last-full { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .sp-services-grid,
    .sp-services-grid--orphans { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) { .sp-services-grid { grid-template-columns: 1fr !important; } }

/* ================================================================
   OUR PROCESS  (sp-process)
   ================================================================ */
.sp-process { background: #f9f9fb; }
.sp-process-steps {
    display: grid !important;
    gap: 24px !important;
}
.sp-process-steps .sp-process-step.sp-last-full { grid-column: 1 / -1; }
.sp-process-step {
    background: #ffffff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 20px !important;
    padding: 32px 28px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.05) !important;
    transition: transform .25s, box-shadow .25s !important;
    opacity: 1 !important;
    transform: none !important;
}
.sp-process-step:hover { transform: translateY(-5px) !important; box-shadow: 0 12px 36px rgba(0,0,0,.1) !important; }
.sp-process-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.sp-process-num { font-size: 2.8rem; font-weight: 900; color: #DE0658 !important; -webkit-text-stroke: none !important; opacity: 1; line-height: 1; }
.sp-process-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: rgba(222,6,88,.08); display: flex; align-items: center; justify-content: center;
    color: #DE0658; font-size: 1.2rem;
}
.sp-process-title { font-size: 1rem; font-weight: 700; color: #0d1020; margin: 0 0 10px; }
.sp-process-desc { font-size: .9rem; color: #6b7280; line-height: 1.7; margin: 0; }
@media (max-width: 900px) { .sp-process-steps { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 560px) { .sp-process-steps { grid-template-columns: 1fr !important; gap: 16px !important; } }
@media (max-width: 400px) {
    .sp-process-step { padding: 20px 16px !important; }
    .sp-process-steps { gap: 12px !important; }
    .sp-process-num { font-size: 2.2rem; }
    .sp-process-title { font-size: .95rem; }
}

.sp-tech-panels {}
.sp-tech-panel { display: none; }
.sp-tech-panel.is-active { display: block; }

/* ================================================================
   INDUSTRIES  (sp-industries)
   ================================================================ */
.sp-industries { background: #f9f9fb; }
.sp-industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.sp-industry-card {
    background: #ffffff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 16px !important;
    padding: 28px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.04) !important;
    transition: transform .2s, box-shadow .2s !important;
    text-decoration: none !important;
    color: inherit !important;
    opacity: 1 !important;
    transform: none !important;
}
.sp-industry-card:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 32px rgba(0,0,0,.09) !important; }
.sp-industry-icon { font-size: 2rem; color: #DE0658; width: 52px; height: 52px; background: rgba(222,6,88,.08); border-radius: 14px; display: flex; align-items: center; justify-content: center; align-self: center; }
.sp-industry-img { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; }
.sp-industry-title { font-size: .95rem; font-weight: 700; color: #0d1020; }
.sp-industry-desc { font-size: .82rem; color: #6b7280; line-height: 1.55; margin: 0; align-self: stretch; width: 100%; }
.sp-industry-desc ul, .sp-industry-card ul { margin: 10px 0 0 !important; padding-left: 18px !important; list-style: disc !important; width: 100%; }
.sp-industry-desc ul li, .sp-industry-card ul li { margin-bottom: 4px; text-align: left; color: #374151; padding-left: 0 !important; }
.sp-industry-desc ul li::marker, .sp-industry-card ul li::marker { color: #DE0658 !important; font-size: 1.1em; }
.sp-industry-desc p { margin: 0; }
.sp-industries-grid .sp-industry-card.sp-last-full { grid-column: 1 / -1; }
@media (max-width: 900px) { .sp-industries-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .sp-industries-grid { grid-template-columns: repeat(1, 1fr) !important; } }

/* ================================================================
   FINAL THOUGHT  (sp-ft)
   ================================================================ */
.sp-ft { background: #ffffff; }
.sp-ft-grid {
    display: grid !important;
    grid-template-columns: 1fr 560px;
    gap: 64px !important;
    align-items: center !important;
    padding: 0 !important;
}
.sp-ft--img-left .sp-ft-grid { grid-template-columns: 560px 1fr; }
.sp-ft--img-left .sp-ft-text { order: 2; }
.sp-ft--img-left .sp-ft-image { order: 1; }
.sp-ft--no-img .sp-ft-grid {
    grid-template-columns: 1fr !important;
    max-width: 860px !important;
    margin: 0 auto !important;
    text-align: center !important;
}
.sp-ft--no-img .sp-ft-text { display: flex; flex-direction: column; align-items: center; }
.sp-ft--no-img .sp-ft-btns { justify-content: center !important; }
@media (max-width: 768px) {
    .sp-ft--no-img .sp-ft-grid { text-align: left !important; }
    .sp-ft--no-img .sp-ft-text { align-items: flex-start !important; }
    .sp-ft--no-img .sp-ft-btns { justify-content: flex-start !important; }
}
.sp-ft-text {}
.sp-ft-text.section-center { text-align: center; align-items: center; }
.sp-ft-text.section-center .sp-ft-btns { justify-content: center; }
.sp-ft-body { font-size: .95rem; color: black; line-height: 1.9; margin: 16px 0 20px; }
.sp-ft-bullets { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 12px; }
.sp-ft-bullets li { display: flex; align-items: flex-start; gap: 12px; font-size: .95rem; color: inherit; font-weight: 500; line-height: 1.5; }
.sp-ft-bullets li .sp-ft-bi { font-size: 12px; margin-top: 6px; flex-shrink: 0; }
.sp-ft-bi--check  { color: #DE0658; }
.sp-ft-bi--circle { color: #DE0658; font-size: .6rem; margin-top: 6px; }
.sp-ft-bi--star   { color: #DE0658; }
.sp-ft-bi--arrow  { color: #DE0658; font-size: .9rem; margin-top: 4px; }
.sp-ft-bi--cross  { color: #ef4444; font-size: .95rem; margin-top: 4px; }
.sp-ft-btns { display: flex; gap: 16px; flex-wrap: wrap; }
.sp-ft-image img { width: 100%; max-height: 420px; object-fit: contain; border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.1); }
@media (max-width: 900px) { .sp-ft-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }


/* ================================================================
   TECH STACK  (sp-tech)
   ================================================================ */
.sp-tech { background: #f8f9fc; }
.sp-tech-tabs {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 40px;
}
.sp-tech-tab-btn {
    padding: 9px 24px; border-radius: 999px; border: 2px solid #e5e7eb;
    background: #ffffff; font-size: .85rem; font-weight: 600; color: #6b7280; cursor: pointer;
    transition: all .2s;
}
.sp-tech-tab-btn.is-active,
.sp-tech-tab-btn:hover { border-color: #DE0658; color: #DE0658; background: rgba(222,6,88,.06); }
.sp-tech-items {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.sp-tech-item {
    background: #ffffff;
    border: 1.5px solid #eef0f5;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 28px 14px 22px;
    transition: box-shadow .25s, transform .25s, border-color .25s;
    cursor: default;
    position: relative;
    overflow: hidden;
}
.sp-tech-item::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(222,6,88,.04) 0%, transparent 60%);
    opacity: 0; transition: opacity .25s;
}
.sp-tech-item:hover { box-shadow: 0 8px 32px rgba(0,0,0,.08); transform: translateY(-4px); border-color: rgba(222,6,88,.25); }
.sp-tech-item:hover::before { opacity: 1; }
.sp-tech-item-img img { max-width: 90px; max-height: 60px; width: auto; height: auto; object-fit: contain; }
.sp-tech-item-icon {
    width: 52px; height: 52px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(222,6,88,.1), rgba(255,131,2,.07));
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; color: #DE0658; flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(222,6,88,.12);
}
.sp-tech-item-name {
    font-size: .78rem; font-weight: 700; color: #1f2937;
    text-align: center; line-height: 1.35;
}
@media (max-width: 1024px) { .sp-tech-items { grid-template-columns: repeat(4, 1fr) !important; } }
@media (max-width: 768px)  { .sp-tech-items { grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; } }
@media (max-width: 480px)  { .sp-tech-items { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } }

/* ================================================================
   OUR CUSTOMERS  (sp-customers)
   ================================================================ */
.sp-customers { background: #f9f9fb; }
.sp-customers-logos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
.sp-cust-logo-card {
    background: #ffffff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 16px !important;
    padding: 28px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 90px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.04) !important;
    transition: box-shadow .25s, transform .25s !important;
    opacity: 1 !important;
    transform: none !important;
}
.sp-cust-logo-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.09) !important; transform: translateY(-3px) !important; }
.sp-cust-logo-card img { max-width: 140px; max-height: 52px; width: 100%; object-fit: contain; filter: grayscale(100%) opacity(.6); transition: filter .3s; }
.sp-cust-logo-card:hover img { filter: grayscale(0%) opacity(1); }
.sp-cust-logo-text { font-size: .95rem; font-weight: 700; color: #9ca3af; letter-spacing: .04em; text-align: center; }
@media (max-width: 900px) { .sp-customers-logos { grid-template-columns: repeat(3, 1fr) !important; } }
@media (max-width: 640px) { .sp-customers-logos { grid-template-columns: repeat(2, 1fr) !important; } }

/* ================================================================
   THE RISK  (sp-risk2)
   ================================================================ */
.sp-risk2 { background: #ffffff; }
.sp-risk2-head { text-align: center; margin-bottom: 48px; max-width: 760px; margin-left: auto; margin-right: auto; }
.sp-risk2-head--left { text-align: left; margin-left: 0; margin-right: 0; max-width: 100%; }
.sp-risk2-badge {
    display: inline-block;
    background: rgba(225,29,72,.08); color: #e11d48;
    border: 1px solid rgba(225,29,72,.2); border-radius: 50px;
    padding: 6px 16px; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .07em; margin-bottom: 16px;
}
.sp-risk2-title { font-size: 34px; font-weight: 800; color: #0d1020; margin: 0 0 14px; line-height: 42px; }
.sp-risk2-desc { font-size: 1rem; color: #6b7280; line-height: 1.65; margin: 0; }
.sp-risk2-cols {
    display: grid !important;
    grid-template-columns: 1fr 1.15fr !important;
    gap: 20px !important;
}
.sp-risk2-col {
    border-radius: 20px; padding: 28px 24px; border: 1px solid;
    opacity: 1 !important; transform: none !important;
}
.sp-risk2-col--bad { background: #fff5f5; border-color: #fecdd3; }
.sp-risk2-col--good { background: #fffaf5; border-color: #fde8d0; }
.sp-risk2-col-head { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; margin-bottom: 24px; }
.sp-risk2-col--bad .sp-risk2-col-head { color: #e11d48; }
.sp-risk2-col--good .sp-risk2-col-head { color: #f97316; }
.sp-risk2-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.sp-risk2-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .85rem; color: #374151; line-height: 1.5; }
.sp-risk2-col--bad .sp-risk2-list li i { color: #e11d48; flex-shrink: 0; margin-top: 3px; }
.sp-risk2-col--good .sp-risk2-list li i { color: #f97316; flex-shrink: 0; margin-top: 3px; }
@media (max-width: 768px) { .sp-risk2-cols { grid-template-columns: 1fr !important; } }

/* ================================================================
   BLOG SLIDER  (sp-blogslider)
   ================================================================ */
.sp-blogslider-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 40px;
}
.sp-blogslider-all {
    display: inline-flex; align-items: center; gap: 8px;
    color: #DE0658; font-weight: 700; font-size: 14px;
    text-decoration: none; white-space: nowrap;
    transition: gap .2s;
}
.sp-blogslider-all:hover { gap: 13px; }

.sp-blogslider-track-wrap {
    position: relative;
    overflow: visible;
    margin: 0;
    padding: 0;
}
.sp-blogslider-track-inner {
    overflow: hidden;
}
.sp-blogslider-track {
    display: flex;
    transition: transform .4s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}
.sp-blog-card {
    flex: 0 0 auto;
    text-decoration: none;
    background: #ffffff;
    border: 1.5px solid #e8e8ef;
    border-radius: 14px;
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: box-shadow .2s, transform .2s;
}
.sp-blog-card:hover {
    box-shadow: 0 8px 32px rgba(222,6,88,.1);
    transform: translateY(-4px);
}
.sp-blog-card-thumb {
    position: relative;
    height: 210px;
    background: #f3f4f6;
    overflow: hidden;
}
.sp-blog-card-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .4s ease;
}
.sp-blog-card:hover .sp-blog-card-thumb img { transform: scale(1.05); }
.sp-blog-card-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem; color: #d1d5db;
}
.sp-blog-card-cat {
    position: absolute; top: 14px; left: 14px;
    background: #DE0658; color: #ffffff;
    font-size: 11px; font-weight: 700;
    padding: 4px 10px; border-radius: 20px;
    text-transform: uppercase; letter-spacing: .05em;
}
.sp-blog-card-body {
    padding: 22px 20px;
    display: flex; flex-direction: column; flex: 1;
}
.sp-blog-card-date {
    font-size: 12px; color: #9ca3af; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px;
}
.sp-blog-card-title {
    font-size: 1.05rem; font-weight: 800; color: #111;
    line-height: 1.45; margin: 0 0 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-blog-card-excerpt {
    font-size: 13.5px; color: #666; line-height: 1.7;
    margin: 0 0 18px; flex: 1;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sp-blog-card-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #DE0658; font-weight: 700; font-size: 13px;
    margin-top: auto; transition: gap .2s;
}
.sp-blog-card:hover .sp-blog-card-link { gap: 10px; }

/* Prev/Next buttons */
.sp-blogslider-btn {
    width: 44px; height: 44px; border-radius: 50%;
    background: #ffffff; border: 2px solid #e0e0e8;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px; color: #0d1020;
    transition: all .3s;
    flex-shrink: 0;
}
.sp-blogslider-btn:hover { background: linear-gradient(135deg, #FF8302, #DE0658); border-color: transparent; color: #ffffff; }

/* Dots */
.sp-blogslider-dots {
    display: flex; justify-content: center; align-items: center; gap: 8px;
}
.sp-blogslider-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: #e0e0e8; border: none; cursor: pointer;
    transition: all .3s; padding: 0;
}
.sp-blogslider-dot.is-active {
    background: linear-gradient(135deg, #FF8302, #DE0658);
    width: 28px; border-radius: 10px;
}

/* Controls row: arrows + dots together below slider */
.sp-blogslider-controls {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 12px; margin-top: 28px;
    width: 100%;
}

@media (max-width: 1023px) {
    .sp-blog-card { flex: 0 0 calc(50% - 10px); }
}
@media (max-width: 640px) {
    .sp-blog-card { flex: 0 0 100%; margin-right: 0; }
}

/* ================================================================
   SERVICES SLIDER  (sp-sslider)
   ================================================================ */
/* ── Split layout: left sticky text, right vertical cards ── */
.sp-sslider-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}
.sp-sslider-left {
    position: sticky;
    top: 100px;
}
.sp-sslider-left .section-tag { margin-bottom: 14px; display: inline-block; }
.sp-sslider-left .section-title { margin-bottom: 18px; }
.sp-sslider-left-img { width: 100%; border-radius: 16px; overflow: hidden; margin-bottom: 24px; }
.sp-sslider-left-img img { width: 100%; height: auto; display: block; object-fit: cover; border-radius: 16px; }
.sp-sslider-subtitle { margin-bottom: 16px; }
.sp-sslider-body { font-size: .97rem; color: #4b5563; line-height: 1.8; margin-bottom: 32px; }
.sp-sslider-body p { margin-bottom: 14px; }
.sp-sslider-btn { display: inline-flex; align-items: center; gap: 8px; }

/* Cards */
.sp-sslider-cards { display: flex; flex-direction: column; gap: 20px; }
.sp-sslider-card {
    background: #ffffff;
    border: 1px solid #eef0f5;
    border-radius: 16px;
    padding: 24px 22px;
    box-shadow: 0 4px 20px rgba(0,0,0,.04);
    transition: transform .22s, box-shadow .22s;
}
.sp-sslider-card:hover { transform: translateY(-3px); box-shadow: 0 10px 36px rgba(0,0,0,.08); }
.sp-sslider-card-body { flex: 1; }
.sp-sslider-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 10px;
}
.sp-sslider-card-icon {
    width: 48px; height: 48px; border-radius: 14px;
    background: linear-gradient(135deg, rgba(222,6,88,.1), rgba(255,131,2,.07));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: #DE0658; font-size: 1.2rem;
}
.sp-sslider-card-title { font-size: 1rem; font-weight: 700; color: #0d1020; margin: 0; }
.sp-sslider-card-img { width: 100%; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.sp-sslider-card-img img { width: 100%; height: 160px; object-fit: cover; display: block; }
.sp-sslider-card-desc { font-size: .9rem; color: #6b7280; line-height: 1.7; margin: 0 0 10px; }
.sp-sslider-card--has-img { flex-direction: column; align-items: stretch; }
.sp-sslider-card-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: #DE0658; font-weight: 700; font-size: .85rem;
    text-decoration: none; transition: gap .2s;
}
.sp-sslider-card-link:hover { gap: 10px; }

@media (max-width: 960px) {
    .sp-sslider-layout { grid-template-columns: 1fr; gap: 36px; }
    .sp-sslider-left { position: static; }
}
@media (max-width: 768px) {
    .sp-sslider-layout { padding: 0; }
}
@media (max-width: 560px) {
    .sp-sslider-card { flex-direction: row; align-items: flex-start; gap: 14px; }
}

/* ================================================================
   RELATED SERVICES  (sp-related)
   ================================================================ */
.sp-related { background: #f9f9fb; }
.sp-related-grid {
    display: grid !important;
    gap: 16px !important;
}
@media (max-width: 600px) {
    .sp-related-grid {
        grid-template-columns: 1fr !important;
    }
    .sp-related-card.sp-last-full {
        grid-column: auto !important;
    }
}
@media (min-width: 601px) and (max-width: 900px) {
    .sp-related-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .sp-related-card.sp-last-full {
        grid-column: auto !important;
    }
}
.sp-related-grid .sp-related-card.sp-last-full { /* center column set via inline style */ }
.sp-related-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 18px !important;
    background: #ffffff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 14px !important;
    text-decoration: none !important;
    color: #374151 !important;
    font-size: .9rem !important;
    box-shadow: 0 3px 12px rgba(0,0,0,.04) !important;
    transition: transform .2s, box-shadow .2s, color .2s !important;
    opacity: 1 !important;
    transform: none !important;
}
.sp-related-card:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 30px rgba(0,0,0,.1) !important; }
.sp-related-card-inner { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.sp-related-label { font-weight: 700; color: #0d1020; font-size: .95rem; line-height: 1.3; }
.sp-related-desc { font-size: .82rem; color: #6b7280 !important; line-height: 1.4; margin: 0 !important; font-weight: 400 !important; }
.sp-related-icon {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
    background: rgba(222,6,88,.08); display: flex; align-items: center; justify-content: center;
    color: #DE0658; font-size: 1rem;
}
.sp-related-img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.sp-related-arrow { flex-shrink: 0; font-size: .8rem; color: #DE0658; }

/* ================================================================
   CASE STUDIES  (sp-case)
   ================================================================ */
.sp-case { background: #ffffff; }
.sp-case-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
}
.sp-case-card {
    background: #ffffff !important;
    border: 1px solid #eef0f5 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.06) !important;
    transition: transform .25s, box-shadow .25s !important;
    opacity: 1 !important;
    transform: none !important;
}
.sp-case-card:hover { transform: translateY(-5px) !important; box-shadow: 0 16px 48px rgba(0,0,0,.12) !important; }
.sp-case-card--feat { grid-column: span 2; flex-direction: row !important; }
.sp-case-thumb { position: relative; overflow: hidden; height: 220px; background: #f0f0f0; flex-shrink: 0; }
.sp-case-card--feat .sp-case-thumb { width: 55%; height: auto; }
.sp-case-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.sp-case-card:hover .sp-case-thumb img { transform: scale(1.05); }
.sp-case-thumb-placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, rgba(222,6,88,.08), rgba(255,131,2,.08));
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: rgba(222,6,88,.2);
}
.sp-case-tags { position: absolute; bottom: 12px; left: 12px; display: flex; gap: 6px; flex-wrap: wrap; }
.sp-case-tags span { background: rgba(0,0,0,.55); backdrop-filter: blur(4px); color: #ffffff; font-size: .7rem; font-weight: 600; padding: 3px 10px; border-radius: 50px; }
.sp-case-year { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,.5); color: #ffffff; font-size: .7rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; }
.sp-case-body { padding: 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sp-case-client { font-size: .78rem; color: #9ca3af; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.sp-case-title { font-size: 1.05rem; font-weight: 700; color: #0d1020; margin: 0; line-height: 1.35; }
.sp-case-desc { font-size: .88rem; color: #6b7280; line-height: 1.65; margin: 0; flex: 1; }
.sp-case-link { font-size: .85rem; font-weight: 700; color: #DE0658; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.sp-case-cta { text-align: center; margin-top: 40px; }
@media (max-width: 900px) {
    .sp-case-card--feat { grid-column: span 1; flex-direction: column !important; }
    .sp-case-card--feat .sp-case-thumb { width: 100%; height: 220px; }
}
@media (max-width: 640px) { .sp-case-grid { grid-template-columns: 1fr !important; } }

/* ================================================================
   TESTIMONIALS — reuses existing .testimonial-* classes from style.css
   Nothing extra needed — existing slider CSS covers it.
   ================================================================ */

/* ================================================================
   FAQ  (sp-faq)
   ================================================================ */
.sp-faq { background: #f9f9fb; }
.sp-faq-list { max-width: 960px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.sp-faq-item {
    background: #ffffff;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.04);
    transition: border-color .2s;
}
.sp-faq-item[open] { border-color: rgba(222,6,88,.4); }
.sp-faq-q {
    cursor: pointer;
    padding: 18px 22px;
    font-size: .97rem; font-weight: 600; color: #0d1020;
    display: flex; justify-content: space-between; align-items: center;
    list-style: none; user-select: none;
    gap: 12px;
}
.sp-faq-q::-webkit-details-marker { display: none; }
.sp-faq-icon { font-size: .8rem; color: #DE0658; transition: transform .25s; flex-shrink: 0; }
.sp-faq-item[open] .sp-faq-icon { transform: rotate(45deg); }
.sp-faq-a { padding: 0 22px 18px; font-size: .92rem; color: #6b7280; line-height: 1.8; }


/* ================================================================
   BUTTON OVERRIDES for sp-* hero
   ================================================================ */
.sp-hero .btn-primary,
.sp-hero .btn-outline-light {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 50px;
    font-weight: 700; font-size: 15px; text-decoration: none;
    transition: transform .2s, box-shadow .2s, all .2s;
}
.sp-hero .btn-primary {
    background: linear-gradient(90deg, #DE0658, #FF8302);
    color: #ffffff;
}
.sp-hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(222,6,88,.4); color: #ffffff; }
.sp-hero .btn-outline-light {
    border: 2px solid rgba(255,255,255,.35);
    color: rgba(255,255,255,.9);
    background: transparent;
}
.sp-hero .btn-outline-light:hover { border-color: #ffffff; color: #ffffff; background: rgba(255,255,255,.08); }
@media (max-width: 768px) {
    .sp-hero .btn-primary,
    .sp-hero .btn-outline-light { padding: 14px 15px; font-weight: 400; font-size: 11px; }
}