/* ================================================================
   SerdiPay — Premium Design Enhancements v2.0
   Load order: after bootstrap.min.css → style.css → responsive.css
   Pure CSS — no build step required.
   ================================================================ */

/* ─── Design Token System ───────────────────────────────────────── */
:root {
    /* ── Primary brand (SerdiPay Red) ───────────────────────────── */
    --sp-primary:          #B61F35;
    --sp-primary-dark:     #8b1020;
    --sp-primary-light:    #d4415e;

    /* ── Secondary (Fintech Blue) ───────────────────────────────── */
    --sp-secondary:        #1e3a8a;
    --sp-secondary-mid:    #2563eb;
    --sp-secondary-light:  #3b82f6;
    --sp-secondary-dark:   #1d4ed8;

    /* ── Accent ─────────────────────────────────────────────────── */
    --sp-cyan:             #06b6d4;
    --sp-emerald:          #10b981;
    --sp-indigo:           #7c3aed;
    --sp-amber:            #f59e0b;

    /* ── Semantic states ────────────────────────────────────────── */
    --sp-success:          #10b981;
    --sp-success-bg:       rgba(16,185,129,0.10);
    --sp-warning:          #f59e0b;
    --sp-warning-bg:       rgba(245,158,11,0.10);
    --sp-error:            #ef4444;
    --sp-error-bg:         rgba(239,68,68,0.10);
    --sp-info:             #3b82f6;
    --sp-info-bg:          rgba(59,130,246,0.10);

    /* ── Backgrounds ────────────────────────────────────────────── */
    --sp-bg:               #f0f4ff;
    --sp-bg-card:          rgba(255,255,255,0.82);
    --sp-off-white:        #f8fafc;
    --sp-white:            #ffffff;

    /* ── Dark surfaces ──────────────────────────────────────────── */
    --sp-dark:             #0c1220;
    --sp-dark-2:           #0f172a;

    /* ── Text ───────────────────────────────────────────────────── */
    --sp-text-h:           #0f172a;
    --sp-text-body:        #334155;
    --sp-text-muted:       #64748b;
    --sp-text:             #1e293b;    /* legacy alias */
    --sp-muted:            #64748b;    /* legacy alias */

    /* ── Borders ────────────────────────────────────────────────── */
    --sp-border:           rgba(148,163,184,0.18);
    --sp-border-strong:    rgba(148,163,184,0.32);

    /* ── Shadows ────────────────────────────────────────────────── */
    --sp-shadow-sm:        0 2px 12px rgba(30,58,138,0.07);
    --sp-shadow-md:        0 8px 32px rgba(30,58,138,0.12);
    --sp-shadow-lg:        0 20px 60px rgba(30,58,138,0.16);
    --sp-shadow-red:       0 8px 28px rgba(182,31,53,0.35);

    /* ── Border radius ──────────────────────────────────────────── */
    --sp-radius-xs:        6px;
    --sp-radius-sm:        8px;
    --sp-radius:           14px;
    --sp-radius-md:        20px;
    --sp-radius-lg:        28px;

    /* ── Typography scale ───────────────────────────────────────── */
    --sp-fs-xs:            11px;
    --sp-fs-sm:            13px;
    --sp-fs-base:          16px;
    --sp-fs-md:            18px;
    --sp-fs-lg:            clamp(1.15rem,1.8vw,1.375rem);
    --sp-fs-xl:            clamp(1.3rem,2.2vw,1.625rem);
    --sp-fs-2xl:           clamp(1.5rem,2.8vw,2rem);
    --sp-fs-3xl:           clamp(1.6rem,3vw,2.25rem);
    --sp-fs-4xl:           clamp(2rem,4vw,3rem);

    /* ── Spacing scale ──────────────────────────────────────────── */
    --sp-space-xs:         8px;
    --sp-space-sm:         16px;
    --sp-space-md:         24px;
    --sp-space-lg:         40px;
    --sp-space-xl:         64px;

    /* ── Motion ─────────────────────────────────────────────────── */
    --sp-ease:             cubic-bezier(0.4,0,0.2,1);
    --sp-duration:         0.3s;
    --sp-transition:       0.32s cubic-bezier(0.4,0,0.2,1);

    /* ── Legacy aliases (backwards compatibility) ───────────────── */
    --sp-red:              var(--sp-primary);
    --sp-red-dark:         var(--sp-primary-dark);
    --sp-red-light:        var(--sp-primary-light);
    --sp-blue:             var(--sp-primary);
    --sp-blue-mid:         var(--sp-primary);
    --sp-blue-light:       var(--sp-primary-light);
}

@media (prefers-color-scheme: dark) {
    :root {
        --sp-bg:             #0a0f1e;
        --sp-bg-card:        rgba(15,23,42,0.90);
        --sp-off-white:      #111827;
        --sp-white:          #ffffff;
        --sp-text-h:         #f1f5f9;
        --sp-text-body:      #cbd5e1;
        --sp-text-muted:     #94a3b8;
        --sp-text:           #e2e8f0;
        --sp-muted:          #94a3b8;
        --sp-border:         rgba(255,255,255,0.08);
        --sp-border-strong:  rgba(255,255,255,0.14);
    }
}

/* ─── Global Base ────────────────────────────────────────────────── */
*,
*::before,
*::after {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--sp-text);
    line-height: 1.65;
    overflow-x: hidden;
}

/* ─── Preloader ──────────────────────────────────────────────────── */
.preloader, .preloader.orange-gradient {
    background: #e27027 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NAVBAR — original style.css governs everything; no overrides here.
   ═══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════════════ */
.header-serdipay {
    background:
        radial-gradient(ellipse at 80% 20%, rgba(212,65,94,0.28) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 80%, rgba(139,16,32,0.35) 0%, transparent 45%),
        linear-gradient(135deg, #0b0d18 0%, #160810 28%, #8b1020 62%, #B61F35 100%) !important;
    min-height: 88vh !important;
    padding-top: 100px !important;
    padding-bottom: 64px !important;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Decorative orbs */
.header-serdipay::before {
    content: '';
    position: absolute;
    top: -15%;
    right: -8%;
    width: 580px;
    height: 580px;
    background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 58%);
    border-radius: 50%;
    pointer-events: none;
    animation: sp-orb-float 9s ease-in-out infinite;
}

.header-serdipay::after {
    content: '';
    position: absolute;
    bottom: -20%;
    left: -6%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(255,255,255,0.045) 0%, transparent 58%);
    border-radius: 50%;
    pointer-events: none;
    animation: sp-orb-float 11s ease-in-out 3s infinite reverse;
}

@keyframes sp-orb-float {
    0%, 100% { transform: translateY(0)   scale(1);    }
    50%       { transform: translateY(-22px) scale(1.05); }
}

/* Hero headline */
.home-service-start h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.9rem, 4vw, 3.1rem) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    color: var(--sp-white) !important;
    letter-spacing: -0.03em;
    margin-bottom: 1.25rem !important;
}

/* Hero sub-text */
.home-service-start p {
    font-size: clamp(0.95rem, 1.4vw, 1.1rem) !important;
    color: rgba(255,255,255,0.8) !important;
    line-height: 1.8 !important;
    margin-bottom: 2.25rem !important;
    max-width: 460px;
}

/* Hero app screenshot — subtle float */
.header-serdipay .col-lg-6 > img,
.header-serdipay .col-lg-6 img[alt="Agrégateur de paiement mobile"] {
    filter: drop-shadow(0 28px 52px rgba(0,0,0,0.28));
    animation: sp-hero-float 6s ease-in-out infinite;
}

@keyframes sp-hero-float {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-14px); }
}

/* Worker vector shape */
.worker-section-shape {
    opacity: 0.85;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.btn1 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    transition: transform var(--sp-duration) var(--sp-ease),
                box-shadow var(--sp-duration) var(--sp-ease),
                background var(--sp-duration) var(--sp-ease) !important;
    cursor: pointer;
    white-space: nowrap;
}

.btn1.orange-gradient {
    background: linear-gradient(135deg, var(--sp-red) 0%, var(--sp-red-light) 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 13px 30px !important;
    font-size: 0.93rem !important;
    color: var(--sp-white) !important;
    box-shadow: 0 4px 16px rgba(182,31,53,0.36) !important;
}

.btn1.orange-gradient:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(182,31,53,0.52) !important;
    color: var(--sp-white) !important;
}

.btn1.blue-gradient {
    background: linear-gradient(135deg, var(--sp-red) 0%, var(--sp-red-dark) 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 13px 30px !important;
    font-size: 0.93rem !important;
    color: var(--sp-white) !important;
    box-shadow: 0 4px 16px rgba(182,31,53,0.36) !important;
}

.btn1.blue-gradient:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 30px rgba(182,31,53,0.52) !important;
    color: var(--sp-white) !important;
}

.btn1.btn-white {
    background: rgba(255,255,255,0.13) !important;
    border: 2px solid rgba(255,255,255,0.52) !important;
    border-radius: 10px !important;
    padding: 12px 28px !important;
    font-size: 0.93rem !important;
    color: var(--sp-white) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.btn1.btn-white:hover {
    background: rgba(255,255,255,0.24) !important;
    transform: translateY(-2px) !important;
    color: var(--sp-white) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION TITLES
   ═══════════════════════════════════════════════════════════════════ */
.section-title h2 {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.65rem, 2.8vw, 2.2rem) !important;
    font-weight: 800 !important;
    color: var(--sp-dark-2) !important;
    letter-spacing: -0.025em;
    margin-bottom: 8px !important;
    line-height: 1.25;
}

/* Accent underline */
.section-title h2::after {
    content: '';
    display: block;
    width: 48px;
    height: 4px;
    background: linear-gradient(90deg, var(--sp-red) 0%, var(--sp-red-light) 100%);
    border-radius: 9999px;
    margin: 12px auto 0;
}

/* Sub-section title (used in contact page) */
.sub-section-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    color: var(--sp-dark-2) !important;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FEATURE / SOLUTIONS CARDS
   ═══════════════════════════════════════════════════════════════════ */
.home-service-item {
    border-radius: var(--sp-radius-lg) !important;
    border: 1px solid var(--sp-border) !important;
    background: var(--sp-white) !important;
    transition: transform var(--sp-duration) var(--sp-ease),
                box-shadow var(--sp-duration) var(--sp-ease),
                border-color var(--sp-duration) var(--sp-ease) !important;
    box-shadow: var(--sp-shadow-sm) !important;
    overflow: hidden !important;
}

.home-service-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 52px rgba(182,31,53,0.1) !important;
    border-color: rgba(182,31,53,0.18) !important;
}

.home-service-details-2 {
    padding: 26px 22px !important;
}

.home-service-image-2 {
    margin-bottom: 18px !important;
    display: flex;
    align-items: center;
}

/* Tinted icon background pill */
.home-service-image-2 img {
    border-radius: 12px;
    padding: 10px;
    background: rgba(182,31,53,0.07);
    width: 56px !important;
    height: 56px !important;
    object-fit: contain;
    transition: background var(--sp-duration) var(--sp-ease),
                transform var(--sp-duration) var(--sp-ease);
}

.home-service-item:hover .home-service-image-2 img {
    background: rgba(182,31,53,0.12);
    transform: scale(1.06);
}

.home-service-text-2 h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    color: var(--sp-dark-2) !important;
    margin-bottom: 9px !important;
    letter-spacing: -0.01em;
}

.home-service-text-2 p {
    color: var(--sp-muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.72 !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION BACKGROUNDS
   ═══════════════════════════════════════════════════════════════════ */
.bg-off-white,
section.feature-section.bg-off-white {
    background: var(--sp-off-white) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PARTNER SECTION
   ═══════════════════════════════════════════════════════════════════ */
.partner-section {
    background: var(--sp-white) !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.partner-logo {
    border-radius: var(--sp-radius-md) !important;
    border: 1px solid rgba(0,0,0,0.07) !important;
    box-shadow: var(--sp-shadow-sm) !important;
    height: 100px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--sp-white) !important;
    overflow: hidden !important;
    transition: transform var(--sp-duration) var(--sp-ease),
                box-shadow var(--sp-duration) var(--sp-ease),
                border-color var(--sp-duration) var(--sp-ease) !important;
}

.partner-logo img {
    max-height: 68px;
    width: auto !important;
    object-fit: contain !important;
    filter: grayscale(25%) !important;
    transition: filter var(--sp-duration) var(--sp-ease) !important;
}

.partner-logo:hover {
    transform: translateY(-5px) scale(1.025) !important;
    box-shadow: 0 14px 36px rgba(0,0,0,0.1) !important;
    border-color: rgba(182,31,53,0.2) !important;
}

.partner-logo:hover img {
    filter: grayscale(0%) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME ABOUT / MOBILE MONEY CAROUSEL SECTION
   ═══════════════════════════════════════════════════════════════════ */
.home-about-title {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.5rem, 2.5vw, 1.9rem) !important;
    font-weight: 800 !important;
    color: var(--sp-dark-2) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.025em;
}

.home-about-para {
    color: var(--sp-muted) !important;
    font-size: 1rem !important;
    line-height: 1.8 !important;
}

/* Mobile money carousel cards */
.feature-carousel-content {
    border-radius: var(--sp-radius-lg) !important;
    background: var(--sp-white) !important;
    box-shadow: var(--sp-shadow-md) !important;
    padding: 28px 18px !important;
    border: 1px solid rgba(0,0,0,0.06);
    text-align: center;
    transition: transform var(--sp-duration) var(--sp-ease),
                box-shadow var(--sp-duration) var(--sp-ease) !important;
}

.feature-carousel-content:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--sp-shadow-lg) !important;
}

.feature-carousel-thumb {
    margin-bottom: 14px;
}

.feature-carousel-thumb img {
    height: 52px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.feature-carousel-details h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: var(--sp-dark-2) !important;
    font-size: 1rem !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   "EASY" RED CTA SECTION (inline in home-about-section)
   ═══════════════════════════════════════════════════════════════════ */
.home-about-section > .header.header-bg {
    background:
        radial-gradient(ellipse at top right, rgba(255,255,255,0.09) 0%, transparent 55%),
        linear-gradient(135deg, var(--sp-red-dark) 0%, var(--sp-red) 55%, var(--sp-red-light) 100%) !important;
    padding: 72px 20px !important;
    height: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    position: relative;
    overflow: hidden;
}

.header-content h1 {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.8rem, 4vw, 2.8rem) !important;
    font-weight: 900 !important;
    color: var(--sp-white) !important;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT INFO BAR (header-suuport)
   ═══════════════════════════════════════════════════════════════════ */
.header-suuport {
    background: var(--sp-dark) !important;
    padding: 34px 0 !important;
}

.support-group-item {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 10px 14px !important;
    border-radius: var(--sp-radius-md);
    transition: background var(--sp-duration) var(--sp-ease);
}

.support-group-item:hover {
    background: rgba(255,255,255,0.04);
}

/* Icon wrapper */
.support-thumb {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    background: rgba(182,31,53,0.18);
    border-radius: var(--sp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--sp-duration) var(--sp-ease);
}

.support-group-item:hover .support-thumb {
    background: rgba(182,31,53,0.28);
}

.support-thumb img {
    filter: brightness(0) invert(1) !important;
    width: 22px !important;
    height: 22px !important;
    object-fit: contain;
}

.support-details h3,
.support-details h3 a {
    font-family: 'Inter', sans-serif !important;
    color: var(--sp-white) !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    margin: 0 0 2px !important;
    text-decoration: none !important;
}

.support-details p,
.support-details p a {
    color: rgba(255,255,255,0.58) !important;
    font-size: 0.8rem !important;
    margin: 0 !important;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME CTA / CONTACT SECTION
   ═══════════════════════════════════════════════════════════════════ */
.home-contact-section {
    background:
        radial-gradient(ellipse at top left, rgba(255,255,255,0.09) 0%, transparent 48%),
        linear-gradient(135deg, var(--sp-red) 0%, var(--sp-red-dark) 100%) !important;
    position: relative;
    overflow: hidden;
}

.home-contact-inner h2 {
    font-family: 'Inter', sans-serif !important;
    color: var(--sp-white) !important;
    font-size: clamp(1.7rem, 3.5vw, 2.4rem) !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em;
    margin-bottom: 1rem !important;
}

.home-contact-inner p {
    color: rgba(255,255,255,0.82) !important;
    font-size: 1.05rem !important;
    line-height: 1.75 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════════ */
.footer-bg {
    background: var(--sp-dark) !important;
}

.footer-lower {
    padding: 28px 0 !important;
}

.footer-lower p {
    color: var(--sp-text-muted) !important;
    font-size: 0.875rem !important;
    margin-bottom: 10px !important;
}

.footer-lower a {
    color: var(--sp-text-muted) !important;
    font-size: 0.875rem !important;
    transition: color var(--sp-duration) var(--sp-ease) !important;
    text-decoration: none !important;
}

.footer-lower a:hover {
    color: var(--sp-white) !important;
}

.footer-lower.border-top {
    border-color: rgba(255,255,255,0.07) !important;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.footer-lower.border-top p {
    color: #64748b !important;
    font-size: 0.8rem !important;
}

/* Payment logos in footer */
.footer-lower-item ul img {
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
    filter: brightness(0.78) grayscale(15%);
    transition: filter var(--sp-duration) var(--sp-ease);
}

.footer-lower-item ul img:hover {
    filter: brightness(1) grayscale(0%);
}

/* Social buttons */
.footer-social-list {
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.social-btn {
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.09) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background var(--sp-duration) var(--sp-ease),
                transform var(--sp-duration) var(--sp-ease);
    list-style: none;
}

.social-btn:hover {
    background: var(--sp-red) !important;
    transform: translateY(-2px);
}

.social-btn a {
    color: var(--sp-white) !important;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGE TITLE (terms, policy, contact page header)
   ═══════════════════════════════════════════════════════════════════ */
.page-title.page-bg {
    background:
        linear-gradient(135deg, var(--sp-red-dark) 0%, var(--sp-red) 100%) !important;
    padding: 80px 0 56px !important;
}

.page-title .section-title h1 {
    font-family: 'Inter', sans-serif !important;
    color: var(--sp-white) !important;
    font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
    font-weight: 800 !important;
    letter-spacing: -0.025em;
}

.page-breadcrumbs {
    list-style: none;
    display: flex;
    gap: 6px;
    align-items: center;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.page-breadcrumbs li::before {
    content: '/';
    margin-right: 6px;
    color: rgba(255,255,255,0.45);
}

.page-breadcrumbs li:first-child::before {
    display: none;
}

.page-breadcrumbs li a {
    color: rgba(255,255,255,0.72) !important;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color var(--sp-duration) var(--sp-ease);
}

.page-breadcrumbs li a:hover {
    color: var(--sp-white) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT PAGE CARDS
   ═══════════════════════════════════════════════════════════════════ */
.box-card {
    border-radius: var(--sp-radius-lg) !important;
    border: 1px solid var(--sp-border) !important;
    box-shadow: var(--sp-shadow-sm) !important;
    background: var(--sp-white);
    overflow: hidden !important;
    transition: transform var(--sp-duration) var(--sp-ease),
                box-shadow var(--sp-duration) var(--sp-ease) !important;
}

.box-card:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--sp-shadow-lg) !important;
}

.box-card-inner {
    padding: 32px 26px !important;
}

.box-card-icon {
    width: 52px;
    height: 52px;
    background: rgba(182,31,53,0.08);
    border-radius: var(--sp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px !important;
}

.box-card-icon img {
    width: 26px !important;
    height: 26px !important;
    object-fit: contain;
}

.box-card-title {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: var(--sp-dark-2) !important;
    font-size: 1.08rem !important;
    letter-spacing: -0.01em;
}

.box-card-para {
    color: var(--sp-muted) !important;
    font-size: 0.88rem !important;
    line-height: 1.68 !important;
}

.link-us {
    color: var(--sp-red) !important;
    text-decoration: none;
    font-weight: 500;
    transition: color var(--sp-duration) var(--sp-ease);
}

.link-us:hover {
    color: var(--sp-red-dark) !important;
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════════════════════════════════ */
.form-control {
    border-radius: var(--sp-radius-sm) !important;
    border: 1.5px solid #e5e7eb !important;
    padding: 12px 16px !important;
    font-size: 0.875rem !important;
    color: var(--sp-text) !important;
    background: #fafafa !important;
    font-family: 'Inter', sans-serif;
    transition: border-color var(--sp-duration) var(--sp-ease),
                box-shadow var(--sp-duration) var(--sp-ease),
                background var(--sp-duration) var(--sp-ease) !important;
}

.form-control:focus {
    border-color: var(--sp-red) !important;
    box-shadow: 0 0 0 3px rgba(182,31,53,0.1) !important;
    background: var(--sp-white) !important;
    outline: none !important;
}

.form-control::placeholder {
    color: #9ca3af !important;
}

textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

/* Phone input wrapper */
.iti {
    width: 100%;
}

.iti .form-control {
    padding-left: 60px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FLASH / ALERT MESSAGES
   ═══════════════════════════════════════════════════════════════════ */
.alert {
    border-radius: var(--sp-radius-sm) !important;
    border: none !important;
    font-size: 0.875rem !important;
    font-weight: 500;
    padding: 14px 18px !important;
    margin-bottom: 16px;
}

.alert-success {
    background: var(--sp-success-bg) !important;
    color: #065f46 !important;
}

.alert-danger {
    background: var(--sp-error-bg) !important;
    color: #991b1b !important;
}

.alert-warning {
    background: var(--sp-warning-bg) !important;
    color: #92400e !important;
}

.alert-info {
    background: var(--sp-info-bg) !important;
    color: #1e40af !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING SECTION (when visible)
   ═══════════════════════════════════════════════════════════════════ */
.pricing-grid-item {
    border-radius: var(--sp-radius-lg) !important;
    border: 1px solid var(--sp-border) !important;
    box-shadow: var(--sp-shadow-sm) !important;
    transition: transform var(--sp-duration) var(--sp-ease),
                box-shadow var(--sp-duration) var(--sp-ease) !important;
    overflow: hidden !important;
    background: var(--sp-white);
}

.pricing-grid-item:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--sp-shadow-lg) !important;
}

.pricing-item-header h3 {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS (CSS-only, uses intersection via WOW classes)
   ═══════════════════════════════════════════════════════════════════ */
/* Smooth entrance for wow-animated elements */
.wow {
    transition-timing-function: var(--sp-ease) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — RESPONSIVE OVERRIDES
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .header-serdipay {
        min-height: auto !important;
        padding-top: 96px !important;
        padding-bottom: 60px !important;
    }
}

@media (max-width: 991px) {
    .home-service-start p {
        max-width: 100%;
    }

    .support-group-item {
        padding: 8px 6px !important;
        gap: 10px !important;
    }

    .home-about-section .header.header-bg {
        padding: 56px 16px !important;
    }
}

@media (max-width: 767px) {
    /* Hero */
    .header-serdipay {
        padding-top: 88px !important;
        padding-bottom: 48px !important;
        text-align: center;
    }

    .home-service-start {
        text-align: center;
    }

    .home-service-start h2 {
        font-size: 1.85rem !important;
    }

    .home-service-start p {
        font-size: 0.97rem !important;
        margin: 0 auto 2rem !important;
    }

    .home-service-start .d-flex {
        justify-content: center !important;
    }

    /* Hero float disabled on mobile for perf */
    .header-serdipay .col-lg-6 > img,
    .header-serdipay .col-lg-6 img[alt="Agrégateur de paiement mobile"] {
        animation: none;
        margin-top: 2rem;
    }

    /* Section titles */
    .section-title h2 {
        font-size: 1.65rem !important;
    }

    /* Cards */
    .home-service-details-2 {
        padding: 20px 16px !important;
    }

    /* Support bar */
    .support-group-item {
        flex-direction: column;
        text-align: center;
        gap: 8px !important;
        padding: 16px 8px !important;
    }

    /* CTA Section */
    .home-contact-inner h2 {
        font-size: 1.7rem !important;
    }

    /* EASY section */
    .header-content h1 {
        font-size: 1.8rem !important;
    }

    /* Footer */
    .footer-lower {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 16px !important;
    }

    /* Box cards */
    .box-card-inner {
        padding: 24px 20px !important;
    }

    /* Buttons */
    .btn1.orange-gradient,
    .btn1.blue-gradient {
        padding: 12px 24px !important;
        font-size: 0.875rem !important;
    }

    /* Home about title */
    .home-about-title {
        font-size: 1.45rem !important;
    }
}

@media (max-width: 575px) {
    .home-service-start h2 {
        font-size: 1.65rem !important;
    }

    .partner-logo {
        height: 80px !important;
    }

    .feature-carousel-content {
        padding: 20px 14px !important;
    }

    .home-about-section .header.header-bg {
        padding: 46px 12px !important;
    }

    .sp-stat-number {
        font-size: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — Reduced Motion
   ═══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   FOCUS / KEYBOARD NAVIGATION
   ═══════════════════════════════════════════════════════════════════ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--sp-red);
    outline-offset: 3px;
    border-radius: var(--sp-radius-sm);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION SPACING — reduce the extra white gaps between sections
   ═══════════════════════════════════════════════════════════════════ */

/* Core utility classes that control section vertical rhythm */
.p-tb-80 {
    padding-top:    60px !important;
    padding-bottom: 60px !important;
}

.pt-100 {
    padding-top: 68px !important;
}

.pb-70 {
    padding-bottom: 46px !important;
}

.pb-80 {
    padding-bottom: 52px !important;
}

/* Home contact/CTA section — was pt-100 pb-80 */
.home-contact-section {
    padding-top:    68px !important;
    padding-bottom: 52px !important;
}

/* Remove double-gap between adjacent off-white sections */
.home-about-section.bg-off-white {
    padding-top: 0 !important;
}

/* Hero bottom → first section top: tighten the join */
.header-serdipay {
    padding-bottom: 48px !important;
}

.feature-section.p-tb-80:first-of-type {
    padding-top: 52px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DRC PAYMENT SHOWCASE SLIDER
   ═══════════════════════════════════════════════════════════════════ */

/* Section wrapper */
.sp-stories-section {
    position: relative;
    overflow: hidden;
    line-height: 1;
}

/* ── Each slide ─────────────────────────────────────────────────── */
.sp-story-slide {
    position: relative;
    min-height: 500px;
    display: flex !important;
    align-items: center;
}

/* ── Backgrounds ────────────────────────────────────────────────── */
.sp-story-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Female merchant slide — deep crimson */
.sp-story-bg-1 {
    background:
        radial-gradient(ellipse at 75% 30%, rgba(224,100,130,0.35) 0%, transparent 55%),
        linear-gradient(135deg, #110208 0%, #5c0a16 35%, #B61F35 72%, #df5070 100%);
}

/* Male entrepreneur slide — midnight navy */
.sp-story-bg-2 {
    background:
        radial-gradient(ellipse at 70% 25%, rgba(66,130,220,0.3) 0%, transparent 55%),
        linear-gradient(135deg, #030810 0%, #081a3a 35%, #0d3068 72%, #1a5ca8 100%);
}

/* Family / community slide — deep teal */
.sp-story-bg-3 {
    background:
        radial-gradient(ellipse at 72% 28%, rgba(26,188,156,0.3) 0%, transparent 55%),
        linear-gradient(135deg, #030e0b 0%, #083323 35%, #0e6648 72%, #17a277 100%);
}

/* Inner container */
.sp-story-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 64px 0 80px;
}

/* ── Text side ──────────────────────────────────────────────────── */
.sp-story-text {
    padding-right: 24px;
}

.sp-story-tag {
    margin-bottom: 18px;
}

.sp-story-network {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.88);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 100px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sp-story-headline {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.65rem, 3vw, 2.55rem) !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    line-height: 1.18 !important;
    letter-spacing: -0.03em;
    margin-bottom: 1rem !important;
}

.sp-story-headline span {
    color: rgba(255,255,255,0.6);
}

.sp-story-desc {
    font-size: 1rem !important;
    color: rgba(255,255,255,0.76) !important;
    line-height: 1.78 !important;
    margin-bottom: 1.8rem !important;
    max-width: 430px;
}

/* ── Visual side: glassmorphism payment card ────────────────────── */
.sp-story-visual {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Ambient glow behind each card */
.sp-story-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.45;
    z-index: 0;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.sp-glow-1 { background: rgba(212,65,94,0.55);  }
.sp-glow-2 { background: rgba(26,92,168,0.6);   }
.sp-glow-3 { background: rgba(17,162,119,0.6);  }

/* The card itself */
.sp-phone-card {
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.11);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 26px;
    padding: 28px 22px 22px;
    width: 300px;
    box-shadow:
        0 28px 72px rgba(0,0,0,0.32),
        inset 0 1px 0 rgba(255,255,255,0.14);
    text-align: left;
    animation: sp-card-in 0.7s var(--sp-ease) both;
}

.sp-card-navy  { background: rgba(5,14,34,0.6);  border-color: rgba(255,255,255,0.14); }
.sp-card-teal  { background: rgba(3,20,15,0.6);  border-color: rgba(255,255,255,0.14); }

@keyframes sp-card-in {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Card header row */
.sp-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    margin-bottom: 18px;
}

.sp-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    border: 2px solid rgba(255,255,255,0.28);
}
.sp-avatar-f { background: linear-gradient(135deg, #c0165e, #f06292); }
.sp-avatar-m { background: linear-gradient(135deg, #1040a0, #4285f4); }
.sp-avatar-x { background: linear-gradient(135deg, #00695c, #4db6ac); }

.sp-card-name {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    color: #ffffff;
    margin: 0 0 2px;
}

.sp-card-role {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.52);
    font-weight: 500;
}

/* Amount block */
.sp-amount-block {
    text-align: center;
    margin-bottom: 16px;
}

.sp-amount-label {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.5);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 5px;
}

.sp-amount-value {
    font-family: 'Inter', sans-serif;
    font-size: 1.7rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.04em;
    line-height: 1;
    margin-bottom: 8px;
}

.sp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 100px;
}
.sp-badge-green { background: rgba(34,197,94,0.18); color: #86efac; }
.sp-badge-blue  { background: rgba(99,179,237,0.18); color: #93c5fd; }

/* Mini stats row (slide 2) */
.sp-mini-stats {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 8px;
}
.sp-mini-stat {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
}
.sp-mini-stat strong { color: #ffffff; font-weight: 800; }
.sp-mini-stat.up strong { color: #86efac; }

/* Bill list (slide 3) */
.sp-bill-list {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 12px;
    margin-top: 4px;
}
.sp-bill-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.78);
    font-weight: 500;
    padding: 4px 0;
}
.sp-bill-row.pending { color: rgba(255,255,255,0.38); font-style: italic; }

/* Provider logo strip */
.sp-providers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 14px;
}
.sp-providers img {
    height: 20px;
    object-fit: contain;
    filter: brightness(0) invert(1) !important;
    opacity: 0.65;
    transition: opacity 0.2s ease;
}
.sp-providers img:hover { opacity: 1; }

/* ── Owl Carousel overrides for stories slider ──────────────────── */

/* Pill-style dots */
.sp-stories-section .owl-dots {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
}

.sp-stories-section .owl-dot span {
    display: block;
    width: 26px !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.32) !important;
    margin: 0 !important;
    transition: width 0.3s var(--sp-ease), background 0.3s ease !important;
}

.sp-stories-section .owl-dot.active span {
    background: #ffffff !important;
    width: 42px !important;
}

/* Arrow buttons */
.sp-stories-section .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0;
    transform: translateY(-50%);
    display: flex !important;
    justify-content: space-between;
    padding: 0 18px;
    pointer-events: none;
    z-index: 10;
    margin: 0 !important;
}

.sp-stories-section .owl-prev,
.sp-stories-section .owl-next {
    pointer-events: all;
    width: 46px !important;
    height: 46px !important;
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    padding: 0 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.25s ease !important;
}

.sp-stories-section .owl-prev:hover,
.sp-stories-section .owl-next:hover {
    background: rgba(255,255,255,0.26) !important;
}

/* ── Responsive: slider ─────────────────────────────────────────── */
@media (max-width: 991px) {
    .sp-story-text {
        padding-right: 0;
        text-align: center;
        padding-bottom: 28px;
    }
    .sp-story-desc { margin-left: auto !important; margin-right: auto !important; }
    .sp-story-visual { justify-content: center; }
    .sp-stories-section .owl-nav { display: none !important; }
}

@media (max-width: 767px) {
    .sp-story-slide  { min-height: auto; }
    .sp-story-inner  { padding: 48px 0 72px; }
    .sp-story-headline { font-size: 1.55rem !important; }
    .sp-phone-card   { width: 100%; max-width: 300px; }
    .p-tb-80 {
        padding-top:    48px !important;
        padding-bottom: 48px !important;
    }
}

@media (max-width: 575px) {
    .sp-story-inner { padding: 40px 0 66px; }
    .sp-phone-card  { max-width: 280px; }
    .sp-amount-value { font-size: 1.45rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   PREMIUM HERO SLIDER — Full-screen, 3 slides
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section wrapper ────────────────────────────────────────────── */
.sp-hero-section {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
}

/* ── Each slide ─────────────────────────────────────────────────── */
.sp-hs-slide {
    position: relative;
    min-height: clamp(500px, 64vh, 640px);
    display: flex !important;
    align-items: center;
    overflow: hidden;
}

/* ── Background image layer ─────────────────────────────────────── */
.sp-hs-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    transform: scale(1.02);
    transition: transform 9s ease-out, filter 0.45s ease;
    will-change: transform;
}

/* Ken Burns on active slide */
.owl-item.active .sp-hs-bg {
    transform: scale(1.07);
}

/* ── Background image layers ─────────────────────────────────────
   Client slides (1–3)  : sp-hs-bg-client  → slide-client.jpg
                          (person holding mobile phone)
   Merchant slides (4–6): sp-hs-bg-merchant → slide-merchant.jpg
                          (female at computer doing payments)
   Gradient fallbacks are shown automatically when images are absent.
   ────────────────────────────────────────────────────────────── */
.sp-hs-bg-client,
.sp-hs-bg-1,
.sp-hs-bg-2,
.sp-hs-bg-3 {
    background-color: #3a0710;
    background-image:
        radial-gradient(ellipse at 75% 30%, rgba(224,100,130,0.3) 0%, transparent 55%),
        linear-gradient(135deg, #110208 0%, #4a0c1a 38%, #8b1020 70%, #B61F35 100%);
}

.sp-hs-bg-merchant,
.sp-hs-bg-4,
.sp-hs-bg-5,
.sp-hs-bg-6 {
    background-color: #10080e;
    background-image:
        radial-gradient(ellipse at 72% 28%, rgba(182,31,53,0.22) 0%, transparent 52%),
        linear-gradient(135deg, #0a0308 0%, #1e0610 38%, #4a0c1a 70%, #8b1020 100%);
}

.sp-hs-bg-1 { background-position: center right; }
.sp-hs-bg-2 { background-position: center right; }
.sp-hs-bg-3 { background-position: center right; }
.sp-hs-bg-4 { background-position: center right; }
.sp-hs-bg-5 { background-position: center right; }
.sp-hs-bg-6 { background-position: center right; }

/* ── Single unified overlay — brand red across every slide ──────── */
.sp-hs-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* All slides share one consistent brand overlay */
.sp-overlay-red,
.sp-overlay-navy,
.sp-overlay-teal,
.sp-overlay-wine,
.sp-overlay-indigo,
.sp-overlay-forest {
    background: linear-gradient(
        115deg,
        rgba(7, 1, 4, 0.91) 0%,
        rgba(56, 6, 15, 0.82) 42%,
        rgba(182, 31, 53, 0.24) 100%
    );
}
.sp-overlay-wine   { background: linear-gradient(120deg, rgba(10,0,4,0.86) 0%, rgba(70,0,18,0.77) 50%, rgba(160,28,55,0.50) 100%); }
.sp-overlay-indigo { background: linear-gradient(120deg, rgba(3,4,14,0.86) 0%, rgba(14,20,70,0.77) 50%, rgba(42,58,170,0.50) 100%); }
.sp-overlay-forest { background: linear-gradient(120deg, rgba(2,7,4,0.86)  0%, rgba(5,28,16,0.77) 50%, rgba(10,90,50,0.50) 100%); }

.sp-hs-brand-mark {
    position: absolute;
    top: 116px;
    right: clamp(24px, 5vw, 86px);
    z-index: 2;
    width: clamp(110px, 10vw, 150px);
    height: auto;
    opacity: 0.98;
    filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
    pointer-events: none;
}

/* ── Container / layout ─────────────────────────────────────────── */
.sp-hs-container {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 76px;
    padding-bottom: 50px;
}

.sp-hs-row {
    min-height: 330px;
}

/* ── Text block ─────────────────────────────────────────────────── */
.sp-hs-text {
    max-width: 500px;
    padding-right: 24px;
    animation: sp-hs-fadein 0.72s var(--sp-ease) both;
}

@keyframes sp-hs-fadein {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Service tag pill */
.sp-hs-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.88);
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 100px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin-bottom: 14px;
}

/* Pulsing dot */
.sp-hs-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
    flex-shrink: 0;
    animation: sp-hs-pulse 2s infinite;
}
.sp-dot-blue { background: #60a5fa; }
.sp-dot-teal { background: #2dd4bf; }

@keyframes sp-hs-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.3); }
}

/* Headline */
.sp-hs-title {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1.35rem, 2.35vw, 1.9rem) !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    letter-spacing: 0;
    margin-bottom: 0.72rem !important;
}

.sp-title-muted {
    color: rgba(255,255,255,0.52) !important;
    font-weight: 700 !important;
}

/* Body copy */
.sp-hs-body {
    font-size: 0.84rem !important;
    color: rgba(255,255,255,0.74) !important;
    line-height: 1.65 !important;
    margin-bottom: 1.15rem !important;
    max-width: 400px;
}

/* CTA row */
.sp-hs-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 1.15rem;
}

.sp-hs-actions .btn1 {
    min-height: 40px;
    padding: 10px 20px !important;
    font-size: 0.82rem !important;
    border-radius: 8px !important;
}

/* Network logos strip */
.sp-hs-networks {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sp-hs-net-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}

.sp-hs-networks img {
    height: 22px;
    width: auto;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    transition: opacity 0.2s ease;
}
.sp-hs-networks img:hover { opacity: 1; }

/* ── Phone mockup frame ─────────────────────────────────────────── */
.sp-hs-phone-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: sp-phone-in 0.9s 0.2s var(--sp-ease) both;
}

@keyframes sp-phone-in {
    from { opacity: 0; transform: translateY(30px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

.sp-hs-phone {
    position: relative;
    width: 178px;
    min-height: 356px;
    background: #0d1117;
    border: 2px solid rgba(255,255,255,0.14);
    border-radius: 26px;
    box-shadow:
        0 24px 64px rgba(0,0,0,0.5),
        0 0 0 5px rgba(255,255,255,0.05),
        inset 0 1px 0 rgba(255,255,255,0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Status bar */
.sp-hs-phone-bar {
    height: 30px;
    background: #0d1117;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-hs-phone-camera {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1e2530;
    border: 1.5px solid rgba(255,255,255,0.1);
}

/* Screen area */
.sp-hs-phone-screen {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Dark phone variant (USSD slide) */
.sp-phone-dark {
    background: #050a12;
    border-color: rgba(255,255,255,0.10);
}

/* ── App Screen (Slide 1) ───────────────────────────────────────── */
.sp-pscreen-app {
    background: linear-gradient(160deg, #1a0a20 0%, #2d0a18 100%);
    padding: 0;
}

.sp-app-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px 8px;
    background: rgba(255,255,255,0.04);
}

.sp-app-logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 0.78rem;
    color: #ffffff;
    letter-spacing: -0.01em;
}

.sp-app-notif {
    font-size: 0.9rem;
}

.sp-app-greeting {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
    padding: 8px 14px 4px;
}

.sp-app-balance {
    background: linear-gradient(135deg, #B61F35 0%, #8b1020 100%);
    margin: 6px 10px 8px;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(182,31,53,0.4);
}

.sp-app-bal-label {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.7);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 3px;
}

.sp-app-bal-val {
    font-family: 'Inter', sans-serif;
    font-size: 1.15rem;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.sp-app-bal-val span {
    font-size: 0.65rem;
    font-weight: 600;
    opacity: 0.7;
    margin-left: 3px;
}

.sp-app-txn-list {
    flex: 1;
    padding: 0 10px;
    overflow: hidden;
}

.sp-app-txn-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.sp-txn-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    flex-shrink: 0;
}
.sp-txn-in-icon  { background: rgba(74,222,128,0.18); color: #4ade80; }
.sp-txn-out-icon { background: rgba(251,113,133,0.18); color: #fb7185; }

.sp-txn-name {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
}

.sp-txn-time {
    font-size: 0.56rem;
    color: rgba(255,255,255,0.4);
    font-weight: 500;
}

.sp-txn-amt {
    margin-left: auto;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    white-space: nowrap;
}
.sp-amt-in  { color: #4ade80; }
.sp-amt-out { color: #fb7185; }

.sp-app-btn-pay {
    margin: 8px 10px 10px;
    background: linear-gradient(90deg, #B61F35, #8b1020);
    color: #ffffff;
    text-align: center;
    border-radius: 10px;
    padding: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(182,31,53,0.4);
}

/* ── USSD Screen (Slide 2) ──────────────────────────────────────── */
.sp-pscreen-ussd {
    background: #060d1a;
    padding: 12px 14px;
    font-family: 'Courier New', Courier, monospace;
}

.sp-ussd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sp-ussd-brand {
    font-size: 0.72rem;
    font-weight: 700;
    color: #60a5fa;
    letter-spacing: 0.1em;
}

.sp-ussd-code-tag {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.07);
    padding: 2px 8px;
    border-radius: 4px;
}

.sp-ussd-divider {
    height: 1px;
    background: rgba(96,165,250,0.25);
    margin-bottom: 10px;
}

.sp-ussd-menu-list {
    margin-bottom: 10px;
}

.sp-ussd-opt {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.65);
    padding: 3px 0;
    line-height: 1.5;
}

.sp-ussd-active {
    color: #60a5fa !important;
    font-weight: 700;
}

.sp-ussd-reply {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.5);
    border-top: 1px solid rgba(255,255,255,0.08);
    padding-top: 8px;
    margin-top: 4px;
}

.sp-ussd-cursor {
    color: #60a5fa;
    animation: sp-blink 1s step-end infinite;
}

@keyframes sp-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Bill Payment Screen (Slide 3) ──────────────────────────────── */
.sp-pscreen-bills {
    background: linear-gradient(160deg, #030e0b 0%, #082e1e 100%);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-bill-app-header {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255,255,255,0.88);
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sp-bill-app-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sp-bill-app-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.05);
    border-radius: 8px;
    padding: 6px 8px;
}

.sp-bill-done { border-left: 2px solid #2dd4bf; }

.sp-bill-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(45,212,191,0.15);
    color: #2dd4bf;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sp-bill-info { flex: 1; min-width: 0; }

.sp-bill-nm {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-bill-rf {
    font-size: 0.52rem;
    color: rgba(255,255,255,0.38);
    font-weight: 500;
}

.sp-bill-price {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: #2dd4bf;
    white-space: nowrap;
}

.sp-bill-app-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: 2px;
}

.sp-bill-app-total span:first-child {
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
}

.sp-bill-app-total span:last-child {
    font-size: 0.68rem;
    font-weight: 800;
    color: #ffffff;
}

.sp-bill-app-confirm {
    background: rgba(45,212,191,0.15);
    border: 1px solid rgba(45,212,191,0.3);
    border-radius: 8px;
    padding: 6px 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    color: #2dd4bf;
    text-align: center;
}

/* ── Floating badge chips ───────────────────────────────────────── */
.sp-hs-phone-badge {
    position: absolute;
    bottom: -14px;
    right: -20px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 100px;
    padding: 7px 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    color: #1a1a2e;
    box-shadow: 0 8px 24px rgba(0,0,0,0.28);
    white-space: nowrap;
    animation: sp-badge-in 0.6s 0.5s var(--sp-ease) both;
}

.sp-badge-green-lg { color: #059669; }
.sp-badge-blue-lg  { color: var(--sp-primary); }

@keyframes sp-badge-in {
    from { opacity: 0; transform: scale(0.8) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Ambient glow orbs ──────────────────────────────────────────── */
.sp-hs-float-orb {
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
    z-index: -1;
    pointer-events: none;
    display: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.sp-orb-red   { background: rgba(182,31,53,0.55); }
.sp-orb-navy  { background: rgba(26,92,168,0.6);  }
.sp-orb-teal  { background: rgba(17,162,119,0.6); }

/* ── Owl Carousel overrides for hero slider ─────────────────────── */

/* Progress-bar style dots */
.sp-hero-section .owl-dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex !important;
    align-items: center;
    gap: 7px;
    margin: 0 !important;
}

.sp-hero-section .owl-dot span {
    display: block;
    width: 28px !important;
    height: 4px !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,0.30) !important;
    margin: 0 !important;
    transition: width 0.35s var(--sp-ease), background 0.3s ease !important;
}

.sp-hero-section .owl-dot.active span {
    background: #ffffff !important;
    width: 48px !important;
}

/* Arrow nav buttons */
.sp-hero-section .owl-nav {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 0;
    transform: translateY(-50%);
    display: flex !important;
    justify-content: space-between;
    padding: 0 24px;
    pointer-events: none;
    z-index: 10;
    margin: 0 !important;
}

.sp-hero-section .owl-prev,
.sp-hero-section .owl-next {
    pointer-events: all;
    width: 48px !important;
    height: 48px !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 0 !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: background 0.25s ease, transform 0.2s ease !important;
}

.sp-hero-section .owl-prev:hover,
.sp-hero-section .owl-next:hover {
    background: rgba(255,255,255,0.24) !important;
    transform: scale(1.08);
}

/* ── Responsive ─────────────────────────────────────────────────── */

/* Tablet and smaller: hide phone mockup column (already d-none d-md-flex),
   center text, reduce title size */
@media (max-width: 991px) {
    .sp-hs-text { padding-right: 0; text-align: center; }
    .sp-hs-body { margin-left: auto !important; margin-right: auto !important; }
    .sp-hs-networks { justify-content: center; }
    .sp-hs-actions  { justify-content: center; }
    .sp-hero-section .owl-nav { display: none !important; }
    .sp-hs-slide { min-height: 560px; }
    .sp-hs-container { padding-top: 82px; padding-bottom: 58px; }
    .sp-hs-bg { background-position: center right; }
    .sp-hs-brand-mark {
        top: 104px;
        right: 24px;
        width: 112px;
    }
}

@media (max-width: 767px) {
    .sp-hs-slide      { min-height: 520px; }
    .sp-hs-container  { padding-top: 86px; padding-bottom: 56px; }
    .sp-hs-title      { font-size: clamp(1.24rem, 5vw, 1.58rem) !important; }
    .sp-hs-body       { font-size: 0.82rem !important; line-height: 1.58 !important; }
    .sp-hs-actions    { flex-direction: column; align-items: center; gap: 8px; }
    .sp-hs-actions .btn1 { width: 100%; max-width: 260px; text-align: center; }
    .sp-hs-networks img { height: 18px; }
    .sp-hs-bg { background-position: 68% center; }
    .sp-hs-overlay {
        background: linear-gradient(
            180deg,
            rgba(7, 1, 4, 0.90) 0%,
            rgba(56, 6, 15, 0.86) 50%,
            rgba(182, 31, 53, 0.45) 100%
        );
    }
    .sp-hs-brand-mark {
        top: 88px;
        left: 50%;
        right: auto;
        width: 104px;
        transform: translateX(-50%);
    }
}

@media (max-width: 575px) {
    .sp-hs-slide  { min-height: 500px; }
    .sp-hs-title  { font-size: 1.22rem !important; }
    .sp-hs-tag    { max-width: 100%; font-size: 0.58rem; padding: 4px 10px; white-space: normal; justify-content: center; }
    .sp-hero-section .owl-dots { bottom: 14px; }
    .sp-hero-section .owl-dot span { width: 20px !important; }
    .sp-hero-section .owl-dot.active span { width: 34px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .owl-item.active .sp-hs-bg { transform: scale(1.03); }
    .sp-hs-text,
    .sp-hs-phone-wrap { animation: none !important; }
    .sp-hs-dot { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   SINGLE-PAGE NAVBAR — section links, active pip, CTA, scrollspy
   ═══════════════════════════════════════════════════════════════════ */

/* Active underline pip for section nav links */
.main-nav .sp-nav-link,
.main-nav-3 .sp-nav-link {
    position: relative;
    padding-bottom: 6px !important;
}

.main-nav .sp-nav-link::after,
.main-nav-3 .sp-nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.75);
    transition: transform 0.25s var(--sp-ease);
    transform-origin: center;
}

.main-nav .sp-nav-link.active::after,
.main-nav-3 .sp-nav-link.active::after,
.main-nav .sp-nav-link:hover::after,
.main-nav-3 .sp-nav-link:hover::after {
    transform: translateX(-50%) scaleX(1);
}

/* Sticky state: red pip instead of white */
.main-nav-3.is-sticky .sp-nav-link::after {
    background: var(--sp-primary);
}

/* CTA button in navbar */
.sp-nav-cta {
    display: inline-flex !important;
    align-items: center;
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--sp-primary) !important;
    -webkit-text-fill-color: var(--sp-primary) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 24px !important;
    padding: 7px 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: background 0.22s var(--sp-ease),
                color 0.22s var(--sp-ease),
                border-color 0.22s var(--sp-ease),
                box-shadow 0.22s var(--sp-ease) !important;
    line-height: 1.4 !important;
    margin-left: 4px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.sp-nav-cta:hover {
    background: var(--sp-primary) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: var(--sp-primary) !important;
    box-shadow: 0 4px 18px rgba(182, 31, 53, 0.38) !important;
}

/* CTA on sticky white navbar */
.main-nav-3.is-sticky .sp-nav-cta {
    background: var(--sp-primary) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    border-color: var(--sp-primary) !important;
}

.main-nav-3.is-sticky .sp-nav-cta:hover {
    background: var(--sp-primary-dark) !important;
    border-color: var(--sp-primary-dark) !important;
    box-shadow: 0 4px 18px rgba(182, 31, 53, 0.35) !important;
}

/* No pip on CTA */
.sp-nav-cta::after { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER — custom pill dropdown
   ═══════════════════════════════════════════════════════════════════ */

.sp-lang-item {
    display: flex !important;
    align-items: center;
    margin-left: 8px;
    padding: 0 !important;
}

.sp-lang-switcher {
    position: relative;
}

/* Toggle pill button */
.sp-lang-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 13px;
    border: 1.5px solid rgba(255, 255, 255, 0.30);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.13);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.22s var(--sp-ease),
                border-color 0.22s var(--sp-ease),
                box-shadow 0.22s var(--sp-ease);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    line-height: 1;
    white-space: nowrap;
    outline: none;
}

.sp-lang-btn:hover {
    background: rgba(255, 255, 255, 0.24);
    border-color: rgba(255, 255, 255, 0.55);
}

.sp-lang-btn[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.28);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.sp-lang-btn[aria-expanded="true"] .sp-lang-chevron {
    transform: rotate(180deg);
}

.sp-lang-flag { font-size: 15px; line-height: 1; flex-shrink: 0; }
.sp-lang-label { font-size: 11px; font-weight: 700; }

.sp-lang-chevron {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    opacity: 0.8;
    transition: transform 0.22s var(--sp-ease);
}

/* Dropdown panel */
.sp-lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.16),
                0 2px 8px rgba(0, 0, 0, 0.06);
    min-width: 168px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transform-origin: top right;
    transition: opacity 0.22s var(--sp-ease),
                transform 0.22s var(--sp-ease),
                visibility 0.22s;
    border: 1px solid var(--sp-border);
    z-index: 1200;
}

.sp-lang-dropdown.sp-lang-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Option rows */
.sp-lang-option {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    text-decoration: none !important;
    color: var(--sp-text-body) !important;
    -webkit-text-fill-color: var(--sp-text-body) !important;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 1px solid var(--sp-border);
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    background: transparent;
}

.sp-lang-option:last-child { border-bottom: none; }

.sp-lang-option:hover {
    background: var(--sp-bg) !important;
    color: var(--sp-text-h) !important;
    -webkit-text-fill-color: var(--sp-text-h) !important;
    text-decoration: none !important;
}

.sp-lang-option--active {
    background: rgba(182, 31, 53, 0.04) !important;
    color: var(--sp-primary) !important;
    -webkit-text-fill-color: var(--sp-primary) !important;
    font-weight: 600;
}

.sp-lang-option--active:hover {
    background: rgba(182, 31, 53, 0.08) !important;
}

.sp-lang-opt-flag { font-size: 20px; line-height: 1; flex-shrink: 0; }
.sp-lang-opt-name { flex: 1; }

.sp-lang-opt-check {
    width: 14px;
    height: 14px;
    color: var(--sp-primary);
    flex-shrink: 0;
    opacity: 0.9;
}

/* Sticky navbar adjustments — invert pill to red */
.main-nav-3.is-sticky .sp-lang-btn {
    border-color: rgba(182, 31, 53, 0.28);
    background: rgba(182, 31, 53, 0.06);
    color: var(--sp-primary);
}

.main-nav-3.is-sticky .sp-lang-btn:hover {
    background: rgba(182, 31, 53, 0.13);
    border-color: rgba(182, 31, 53, 0.5);
}

.main-nav-3.is-sticky .sp-lang-btn[aria-expanded="true"] {
    background: rgba(182, 31, 53, 0.16);
    border-color: var(--sp-primary);
}

/* ── Footer currency badge (replaces the select) ─────────────────── */
.sp-ft-currency-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.65);
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.sp-ft-currency-badge strong {
    color: rgba(255, 255, 255, 0.90);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE LANGUAGE SWITCHER (inside .mobile-nav)
   ═══════════════════════════════════════════════════════════════════ */

.sp-mob-lang {
    display: none;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    margin-right: 12px;
    flex-shrink: 0;
}

.sp-mob-lang-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    border-radius: 20px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: var(--sp-text-h);
    background: rgba(0, 0, 0, 0.06);
    border: 1.5px solid rgba(0, 0, 0, 0.09);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    white-space: nowrap;
    line-height: 1;
}
.sp-mob-lang-link--active {
    background: var(--sp-primary);
    color: #fff !important;
    border-color: var(--sp-primary);
}
.sp-mob-lang-link:hover:not(.sp-mob-lang-link--active) {
    background: rgba(182, 31, 53, 0.09);
    color: var(--sp-primary);
    border-color: rgba(182, 31, 53, 0.22);
    text-decoration: none;
}

/* Make mobile-nav a flex row so logo + lang sit side by side */
.mobile-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

@media (max-width: 991px) {
    .sp-mob-lang { display: flex; }
}

/* Hide the desktop lang item on small screens (MeanMenu handles the nav,
   but our custom switcher doesn't work inside it) */
@media (max-width: 767px) {
    .sp-lang-item { display: none !important; }
}