/* =====================================
   1. GLOBAL SETTINGS
===================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #000000;
    color: #ffffff;
}

/* =====================================
   2. TOP HEADER
===================================== */

.site-header {
    width: 100%;
    background-color: #000000;

    /* Thin light strip at the top */
    border-top: 4px solid #f2efff;
}

.header-container {
    width: 100%;
    min-height: 225px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 35px 42px;
    gap: 30px;
}

/* =====================================
   3. LOGO AND WEBSITE NAME
===================================== */

.brand {
    display: flex;
    align-items: center;
    gap: 29px;

    color: #ffffff;
    text-decoration: none;

    flex-shrink: 0;
}

.brand-logo {
    width: 105px;
    height: 105px;

    object-fit: cover;
    display: block;
    border-radius: 50%;
}


.brand-name {
    font-size: 46px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    letter-spacing: -1px;
}


/* =====================================
   4. GET OUR APP BUTTON
===================================== */

.app-button {
    width: 375px;
    min-height: 140px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
        110deg,
        #4930f6 0%,
        #6258f5 55%,
        #4930f6 100%
    );

    color: #ffffff;
    text-decoration: none;

    font-size: 36px;
    font-weight: 700;
    text-align: center;

    border: 2px solid #7768ff;
    border-radius: 100px;

    box-shadow:
        0 9px 0 #3824d8,
        inset 0 1px 2px rgba(255, 255, 255, 0.2);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        background 0.25s ease;

    flex-shrink: 0;
}

/* Button hover effect */

.app-button:hover {
    background: linear-gradient(
        110deg,
        #604bff,
        #756aff,
        #604bff
    );

    transform: translateY(-3px);

    box-shadow:
        0 12px 0 #3824d8,
        inset 0 1px 2px rgba(255, 255, 255, 0.25);
}

.app-button:active {
    transform: translateY(4px);

    box-shadow:
        0 4px 0 #3824d8,
        inset 0 1px 2px rgba(255, 255, 255, 0.2);
}

/* =====================================
   5. TABLET RESPONSIVENESS
===================================== */

@media (max-width: 900px) {

    .header-container {
        min-height: 150px;
        padding: 25px;
        gap: 20px;
    }

    .brand {
        gap: 16px;
    }

    .brand-logo {
        width: 75px;
        height: 75px;
    }

    .brand-name {
        font-size: 32px;
    }

    .app-button {
        width: 260px;
        min-height: 95px;
        font-size: 25px;
    }
}


/* =====================================
   MOBILE HEADER — KEEP EVERYTHING IN ONE ROW
===================================== */

@media (max-width: 600px) {

    .header-container {
        width: 100%;
        min-height: auto;
        padding: 20px 12px;

        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .brand {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;

        flex: 1 1 auto;
        min-width: 0;
    }

    .brand-logo {
        width: clamp(38px, 12vw, 60px);
        height: clamp(38px, 12vw, 60px);
        flex: 0 0 auto;
        object-fit: contain;
    }

    .brand-name {
        font-size: clamp(16px, 4.5vw, 27px);
        letter-spacing: -0.5px;
        line-height: 1.1;
        white-space: nowrap;
    }

    .app-button {
        width: auto;
        min-width: 0;
        min-height: 0;

        padding: 17px 16px;
        flex: 0 0 auto;

        font-size: clamp(11px, 3vw, 19px);
        line-height: 1.2;
        white-space: nowrap;

        border-radius: 50px;
        box-shadow: 0 5px 0 #3824d8;
    }

    .app-button:hover {
        transform: translateY(-2px);
    }

    .app-button:active {
        transform: translateY(2px);
    }
}

/* VERY SMALL PHONES */

@media (max-width: 380px) {

    .header-container {
        padding: 16px 8px;
        gap: 6px;
    }

    .brand {
        gap: 6px;
    }

    .brand-logo {
        width: 34px;
        height: 34px;
    }

    .brand-name {
        font-size: 14px;
        letter-spacing: -0.6px;
    }

    .app-button {
        padding: 13px 9px;
        font-size: 10px;
    }
}


/* =========================================
   MYSOCIALPAY BUTTON: SHAKE + OUTWARD WAVES
========================================= */

.app-button {
    position: relative;
    isolation: isolate;
    animation: appButtonShake 2.8s ease-in-out infinite;
    will-change: transform;
}

/* Outward glowing waves */

.app-button::before,
.app-button::after {
    content: "";
    position: absolute;

    inset: -7px;
    border-radius: inherit;

    border: 3px solid rgba(111, 83, 255, 0.9);

    z-index: -1;
    pointer-events: none;

    animation: appButtonWave 2.2s ease-out infinite;
}

/* Second wave starts later */

.app-button::after {
    animation-delay: 1.1s;
    border-color: rgba(155, 133, 255, 0.75);
}

/* Gentle shaking movement */

@keyframes appButtonShake {
    0%, 78%, 100% {
        transform: translateX(0) rotate(0deg);
    }

    81% {
        transform: translateX(-3px) rotate(-0.5deg);
    }

    84% {
        transform: translateX(3px) rotate(0.5deg);
    }

    87% {
        transform: translateX(-3px) rotate(-0.5deg);
    }

    90% {
        transform: translateX(3px) rotate(0.5deg);
    }

    93% {
        transform: translateX(-1px) rotate(0deg);
    }

    96% {
        transform: translateX(1px) rotate(0deg);
    }
}

/* Expanding outward wave animation */

@keyframes appButtonWave {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }

    100% {
        transform: scale(1.13, 1.4);
        opacity: 0;
    }
}

/* Respect reduced-motion preferences */

@media (prefers-reduced-motion: reduce) {
    .app-button,
    .app-button::before,
    .app-button::after {
        animation: none !important;
    }
}


/* =========================================
   ANIMATED RATINGS BADGE
========================================= */

.rating-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    padding: 20px 16px 35px;
    background: #000;
}

.rating-badge {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    width: fit-content;
    max-width: 100%;
    min-height: 60px;

    padding: 6px 34px;

    border: 2px solid transparent;
    border-radius: 100px;

    background:
        linear-gradient(#000, #000) padding-box,
        linear-gradient(110deg, #4930f6, #a99aff, #4930f6) border-box;

    box-shadow: 0 0 12px rgba(93, 65, 255, 0.12);
}

/* Rotating border light */

.rating-badge::before {
    content: "";
    position: absolute;

    inset: -150%;
    z-index: -2;

    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 280deg,
        #7160ff 310deg,
        #ffffff 330deg,
        #b9adff 340deg,
        transparent 360deg
    );

    animation: ratingBorderLight 3s linear infinite;
}

/* Black inner surface */

.rating-badge::after {
    content: "";
    position: absolute;

    inset: 2px;
    z-index: -1;

    border-radius: inherit;
    background: #000;
}

/* Rating text */

.rating-text {
    color: #f7f5ff;

    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(16px, 3.2vw, 38px);
    font-weight: 400;

    line-height: 1.25;
    white-space: nowrap;
}

/* Animated star */

.rating-star {
    display: inline-block;
    flex-shrink: 0;

    color: #a99aff;
    font-size: clamp(25px, 3.5vw, 42px);

    text-shadow:
        0 0 7px rgba(145, 120, 255, 0.8),
        0 0 18px rgba(111, 83, 255, 0.65);

    transform-origin: center;

    animation:
        ratingStarGlow 1.5s ease-in-out infinite,
        ratingStarRotate 6s ease-in-out infinite;
}

/* White light travelling around the border */

@keyframes ratingBorderLight {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Star glowing and pulsing */

@keyframes ratingStarGlow {
    0%, 100% {
        opacity: 0.8;
        text-shadow: 0 0 5px #7965ff;
    }

    50% {
        opacity: 1;
        text-shadow:
            0 0 10px #ffffff,
            0 0 24px #7965ff;
    }
}

/* Gentle star rotation */

@keyframes ratingStarRotate {
    0%, 20%, 100% {
        transform: rotate(0deg) scale(1);
    }

    40% {
        transform: rotate(18deg) scale(1.12);
    }

    60% {
        transform: rotate(-18deg) scale(1.12);
    }

    80% {
        transform: rotate(0deg) scale(1);
    }
}

/* Mobile layout */

@media (max-width: 600px) {
    .rating-section {
        padding: 14px 12px 28px;
    }

    .rating-badge {
        min-height: 45px;
        gap: 10px;
        padding: 5px 15px;
    }

    .rating-text {
        font-size: clamp(12px, 3.5vw, 19px);
        white-space: normal;
    }

    .rating-star {
        font-size: 26px;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    .rating-badge::before,
    .rating-star {
        animation: none;
    }
}



/* =========================================
   HERO HEADLINE AND DESCRIPTION
========================================= */

.hero-text-section {
    position: relative;
    width: 100%;
    padding: 24px 24px 20px;
    background: #000000;
    text-align: center;
    overflow: hidden;
}

.hero-title {
    max-width: 1100px;
    margin: 0 auto;

    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(32px, 6.2vw, 72px);
    font-weight: 400;
    line-height: 1.32;
    letter-spacing: -1.5px;
}


.hero-title span {
    display: block;
}


.hero-description {
    width: 100%;
    max-width: 1100px;
    margin: 30px auto 0;
    padding: 0 12px;

    color: #f4f2ff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(15px, 3.1vw, 38px);
    font-weight: 700;
    line-height: 1.55;

    text-align: center;
    box-sizing: border-box;
}

.hero-description span {
    display: block;
    white-space: normal;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .hero-description {
        width: 100%;
        margin-top: 24px;
        padding: 0 12px;
        font-size: clamp(12px, 3.1vw, 19px);
        line-height: 1.6;
        text-align: center;
    }

    .hero-description span {
        white-space: nowrap;
    }
}

/* Purple sparkle decorations */

.hero-sparkle {
    position: absolute;
    z-index: 0;

    color: #a99aff;
    font-size: 52px;
    font-weight: 300;

    text-shadow:
        0 0 8px #7a62ff,
        0 0 22px #4930f6;

    animation: heroSparkleGlow 2.5s ease-in-out infinite;
    pointer-events: none;
}

.sparkle-left {
    top: 30%;
    left: 5%;
}

.sparkle-right {
    bottom: -8px;
    right: 5%;
    animation-delay: 1.2s;
}

@keyframes heroSparkleGlow {
    0%, 100% {
        opacity: 0.35;
        transform: scale(0.75) rotate(0deg);
    }

    50% {
        opacity: 1;
        transform: scale(1.1) rotate(45deg);
    }
}

/* Mobile adjustments */

@media (max-width: 600px) {

    .hero-text-section {
        padding: 18px 20px 20px;
    }

    .hero-title {
        font-size: clamp(30px, 6.8vw, 42px);
        line-height: 1.32;
        letter-spacing: -0.8px;
    }

    .desktop-break {
        display: none;
    }

    .hero-description {
        margin-top: 24px;
        font-size: clamp(16px, 3.8vw, 21px);
        line-height: 1.55;
    }

    .hero-sparkle {
        font-size: 30px;
    }

    .sparkle-left {
        left: 3%;
        top: 25%;
    }

    .sparkle-right {
        right: 3%;
        bottom: 0;
    }
}


/* FIX HERO DESCRIPTION ALIGNMENT */

.hero-description {
    width: 100%;
    max-width: 100%;
    margin: 24px auto 0;
    padding: 0 4px;

    font-size: 18px;
    line-height: 1.5;
    text-align: center;

    box-sizing: border-box;
}

.hero-description span {
    display: block;
    white-space: normal;
}

/* MOBILE: SMALLER TEXT AND LESS SIDE SPACE */

@media (max-width: 600px) {
    .hero-description {
        width: 100%;
        margin-top: 22px;
        padding-left: 4px;
        padding-right: 4px;

        font-size: 16px;
        line-height: 1.6;
        text-align: center;
    }

    .hero-description span {
        white-space: nowrap;
        font-size: 16px;
        letter-spacing: -0.3px;
    }
}


/* =====================================
   THIN, SUBTLE PURPLE SPARKLES
===================================== */

.hero-sparkle {
    position: absolute;
    width: 38px;
    height: 38px;
    font-size: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(160, 145, 255, 0.18) 30%,
            rgba(205, 198, 255, 0.85) 50%,
            rgba(160, 145, 255, 0.18) 70%,
            transparent
        ) center / 100% 1px no-repeat,

        linear-gradient(
            0deg,
            transparent,
            rgba(160, 145, 255, 0.18) 30%,
            rgba(205, 198, 255, 0.85) 50%,
            rgba(160, 145, 255, 0.18) 70%,
            transparent
        ) center / 1px 100% no-repeat;

    filter: drop-shadow(0 0 4px rgba(120, 95, 255, 0.5));

    animation: thinSparkle 3s ease-in-out infinite;
    pointer-events: none;
}

.sparkle-left {
    top: 30%;
    left: 4%;
}

.sparkle-right {
    bottom: -8px;
    right: 4%;
    animation-delay: 1.5s;
}

@keyframes thinSparkle {
    0%, 100% {
        opacity: 0.25;
        transform: scale(0.8);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@media (max-width: 600px) {
    .hero-sparkle {
        width: 26px;
        height: 26px;
    }

    .sparkle-left {
        left: 3%;
    }

    .sparkle-right {
        right: 3%;
    }
}



/* REGISTER NOW BUTTON */

.hero-register {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 38px 12px 16px;
}

.register-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-width: 250px;
    min-height: 70px;
    padding: 14px 28px;

    background: #100b4b;
    color: #ffffff;

    border: 2px solid #a69bff;
    border-radius: 100px;

    box-shadow:
        0 10px 0 #3020bd,
        0 0 12px rgba(105, 83, 255, 0.2),
        inset 0 1px 2px rgba(255, 255, 255, 0.08);

    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.register-button:hover {
    transform: translateY(-2px);
}

.register-button:active {
    transform: translateY(5px);
    box-shadow: 0 4px 0 #3020bd;
}

/* MOBILE */

@media (max-width: 600px) {
    .hero-register {
        padding: 32px 12px 16px;
    }

    .register-button {
        min-width: 0;
        width: 200px;
        min-height: 58px;
        padding: 12px 18px;

        font-size: 18px;

        box-shadow:
            0 6px 0 #3020bd,
            0 0 12px rgba(105, 83, 255, 0.2);
    }
}


/* =========================================
   REGISTER BUTTON: SHAKE + OUTWARD WAVES
========================================= */

.register-button {
    position: relative;
    isolation: isolate;
    animation: registerShake 3s ease-in-out infinite;
}

/* Expanding waves */

.register-button::before,
.register-button::after {
    content: "";
    position: absolute;
    inset: -5px;

    border: 2px solid rgba(137, 119, 255, 0.8);
    border-radius: inherit;

    pointer-events: none;
    z-index: -1;

    animation: registerWave 2.4s ease-out infinite;
}

/* Second wave */

.register-button::after {
    animation-delay: 1.2s;
    border-color: rgba(210, 203, 255, 0.65);
}

/* Gentle shake with pauses */

@keyframes registerShake {
    0%, 78%, 100% {
        transform: translateX(0);
    }

    81% {
        transform: translateX(-3px);
    }

    84% {
        transform: translateX(3px);
    }

    87% {
        transform: translateX(-3px);
    }

    90% {
        transform: translateX(3px);
    }

    93% {
        transform: translateX(-1px);
    }

    96% {
        transform: translateX(1px);
    }
}

/* Outward wave effect */

@keyframes registerWave {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.12, 1.35);
        opacity: 0;
    }
}

/* Keep the button accessible */

@media (prefers-reduced-motion: reduce) {
    .register-button,
    .register-button::before,
    .register-button::after {
        animation: none !important;
    }
}


/* ==========================================
   MYSOCIALPAY DASHBOARD PREVIEW
========================================== */

.dashboard-preview {
    width: 100%;
    padding: 10px 24px 45px;
    background: #000;
    overflow: hidden;
}

.dashboard-frame {
    position: relative;
    width: 100%;
    max-width: 1450px;
    margin: 0 auto;

    padding: 4px;
    border: 2px solid #5035ff;
    border-radius: 52px;

    background: #080808;
    box-shadow: 0 0 10px rgba(75, 48, 255, .12);
}

/* Top bar */

.dashboard-topbar {
    min-height: 100px;
    padding: 18px 28px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    background: #202020;
    border-radius: 45px 45px 0 0;
    border-bottom: 1px solid #363636;
}

.dashboard-brand {
    display: flex;
    align-items: center;
    gap: 22px;

    color: #f5f5f5;
    font-size: clamp(17px, 2vw, 29px);
    font-weight: 700;
    white-space: nowrap;
}

.dashboard-logo {
    font-size: 37px;
    color: #8661ff;
    text-shadow: 0 0 12px #743cff;
}

.dashboard-search {
    width: 29%;
    max-width: 320px;
    min-height: 43px;
    padding: 10px 13px;

    display: flex;
    gap: 12px;
    align-items: center;

    color: #bcbcbc;
    font-size: 12px;

    border: 1px solid #383838;
    border-radius: 7px;
}

.dashboard-search span:first-child {
    font-size: 22px;
}

.dashboard-user {
    display: flex;
    align-items: center;
    gap: 13px;
}

.dashboard-user > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.user-name {
    color: #e5e5e5;
    font-size: 13px;
}

.user-status {
    color: #ddd;
    font-size: 10px;
}

.user-avatar {
    width: 43px;
    height: 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #aaa;
    border: 1px solid #555;
    font-size: 25px;
}

/* Dashboard body */

.dashboard-body {
    display: flex;
    align-items: stretch;
    background: #101010;
    overflow: hidden;
    border-radius: 0 0 45px 45px;
}

.dashboard-sidebar {
    width: 85px;
    flex: 0 0 85px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    gap: 25px;

    padding: 25px 10px;

    color: #999;
    background: #202020;
    border-right: 1px solid #363636;
}

.dashboard-sidebar span {
    font-size: 27px;
    line-height: 1;
}

/* Main columns */

.dashboard-content {
    flex: 1;
    min-width: 0;

    display: grid;
    grid-template-columns: 1fr 1.05fr;
}

.activities-column,
.paid-tasks-column {
    min-width: 0;
    padding: 24px;
}

.activities-column {
    border-right: 2px solid #292929;
}

.dashboard-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 25px;
}

.dashboard-section-heading h3 {
    color: #eee;
    font-size: clamp(12px, 1.5vw, 22px);
    font-weight: 700;
    letter-spacing: .4px;
}

.see-all {
    flex-shrink: 0;
    color: #bdbdbd;
    background: #242424;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 10px;
}

/* Activity cards */

.activity-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.activity-card {
    position: relative;
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 20px 10px 15px;

    text-align: center;
    background: #242424;
    border: 1px solid #303030;
    border-radius: 15px;
    overflow: hidden;
}

.free-ribbon {
    position: absolute;
    top: 12px;
    left: -21px;

    width: 80px;
    padding: 5px 0;

    color: #fff;
    background: #4a84ee;
    font-size: 10px;
    transform: rotate(-43deg);
}

.free-ribbon.pink {
    background: #db718e;
}

.free-ribbon.yellow {
    background: #e9d24d;
    color: #222;
}

.activity-art {
    width: 88%;
    aspect-ratio: 1 / 1;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 24px 0 15px;
    border-radius: 22px;

    font-size: clamp(45px, 6vw, 95px);
    font-weight: 700;
    color: #fff;
}

.art-tiktok {
    background: linear-gradient(135deg, #3475c6, #5e9cff);
    color: #d7efff;
}

.art-youtube {
    background: linear-gradient(135deg, #dd6bb3, #6127e7);
}

.art-music {
    background: linear-gradient(135deg, #9660f6, #6232c7);
}

.art-games {
    background: linear-gradient(135deg, #e8c64c, #ef9764);
}

.activity-card h4 {
    color: #f2f2f2;
    font-size: clamp(9px, 1.15vw, 16px);
    line-height: 1.4;
}

.activity-card p {
    margin-top: 8px;
    color: #bdbdbd;
    font-size: 11px;
}

.activity-card a {
    margin-top: 14px;
    padding: 7px 10px;

    color: #ccc;
    background: #1c1c1c;
    border: 1px solid #373737;
    border-radius: 4px;

    font-size: 10px;
    text-decoration: none;
}

/* Available paid tasks */

.paid-task-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.paid-task {
    min-width: 0;
    min-height: 83px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 13px;

    background: #242424;
    border: 1px solid #333;
    border-radius: 15px;
}

.task-icon {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: white;
    border-radius: 9px;
    font-size: 25px;
}

.music-icon {
    background: linear-gradient(135deg, #c273fa, #6834b7);
}

.chat-icon {
    background: linear-gradient(135deg, #9b83ff, #603dd0);
}

.trivia-icon {
    background: linear-gradient(135deg, #e8c95c, #e9a64c);
}

.status-icon {
    background: linear-gradient(135deg, #fa70c9, #a32be9);
}

.download-icon {
    background: linear-gradient(135deg, #ffad57, #f34c9d);
}

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

.task-info h4 {
    color: #f1f1f1;
    font-size: clamp(10px, 1.2vw, 17px);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.task-info p {
    margin-top: 5px;
    color: #c0c0c0;
    font-size: 10px;
    line-height: 1.4;
}

.task-rating {
    flex: 0 0 auto;

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.task-rating > span {
    color: #e5ec36;
    font-size: clamp(10px, 1.3vw, 19px);
    letter-spacing: 1px;
}

.task-rating button {
    padding: 4px 8px;
    color: #bdbdbd;
    background: #1c1c1c;
    border: 1px solid #363636;
    border-radius: 4px;
    font-size: 10px;
}

/* Tablet */

@media (max-width: 800px) {
    .dashboard-preview {
        padding: 8px 15px 30px;
    }

    .dashboard-frame {
        border-radius: 30px;
    }

    .dashboard-topbar {
        min-height: 70px;
        padding: 12px 15px;
        gap: 10px;
        border-radius: 25px 25px 0 0;
    }

    .dashboard-brand {
        gap: 8px;
        font-size: 16px;
    }

    .dashboard-logo {
        font-size: 25px;
    }

    .dashboard-search {
        width: 24%;
        min-height: 35px;
    }

    .dashboard-sidebar {
        width: 48px;
        flex-basis: 48px;
        padding: 20px 5px;
        gap: 20px;
    }

    .dashboard-sidebar span {
        font-size: 20px;
    }

    .activities-column,
    .paid-tasks-column {
        padding: 12px;
    }

    .dashboard-section-heading {
        margin-bottom: 15px;
    }

    .activity-grid {
        gap: 8px;
    }

    .activity-card {
        padding: 10px 5px;
        border-radius: 10px;
    }

    .activity-art {
        border-radius: 12px;
        margin-top: 20px;
    }

    .paid-task {
        gap: 7px;
        min-height: 65px;
        padding: 8px;
        border-radius: 10px;
    }

    .task-icon {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
        font-size: 18px;
    }

    .task-rating > span {
        letter-spacing: 0;
    }
}

/* Mobile */

@media (max-width: 520px) {
    .dashboard-preview {
        padding: 8px 18px 30px;
    }

    .dashboard-frame {
        border-radius: 25px;
    }

    .dashboard-topbar {
        min-height: 48px;
        padding: 8px;
        gap: 6px;
        border-radius: 22px 22px 0 0;
    }

    .dashboard-brand {
        font-size: 10px;
        gap: 5px;
    }

    .dashboard-logo {
        font-size: 18px;
    }

    .dashboard-search {
        width: 26%;
        min-height: 25px;
        padding: 4px;
        gap: 4px;
        font-size: 8px;
    }

    .dashboard-search span:first-child {
        font-size: 12px;
    }

    .user-name {
        font-size: 7px;
    }

    .user-status {
        font-size: 6px;
    }

    .dashboard-user {
        gap: 4px;
    }

    .user-avatar {
        width: 22px;
        height: 22px;
        font-size: 14px;
    }

    .dashboard-sidebar {
        width: 27px;
        flex-basis: 27px;
        padding: 12px 2px;
        gap: 13px;
    }

    .dashboard-sidebar span {
        font-size: 12px;
    }

    .dashboard-section-heading {
        gap: 4px;
    }

    .dashboard-section-heading h3 {
        font-size: 8px;
        letter-spacing: 0;
    }

    .see-all {
        padding: 3px 4px;
        font-size: 6px;
    }

    .activities-column,
    .paid-tasks-column {
        padding: 7px 5px;
    }

    .activity-grid {
        gap: 5px;
    }

    .activity-card {
        padding: 7px 3px;
        border-radius: 7px;
    }

    .activity-art {
        width: 90%;
        margin: 15px 0 7px;
        border-radius: 8px;
        font-size: 28px;
    }

    .free-ribbon {
        top: 7px;
        left: -25px;
        font-size: 6px;
    }

    .activity-card h4 {
        font-size: 6px;
    }

    .activity-card p {
        margin-top: 4px;
        font-size: 6px;
    }

    .activity-card a {
        margin-top: 7px;
        padding: 4px;
        font-size: 6px;
    }

    .paid-task-list {
        gap: 5px;
    }

    .paid-task {
        min-height: 43px;
        gap: 4px;
        padding: 4px;
        border-radius: 7px;
    }

    .task-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
        border-radius: 5px;
        font-size: 12px;
    }

    .task-info h4 {
        font-size: 6px;
    }

    .task-info p {
        margin-top: 2px;
        font-size: 5px;
    }

    .task-rating {
        gap: 3px;
    }

    .task-rating > span {
        font-size: 7px;
    }

    .task-rating button {
        padding: 2px 3px;
        font-size: 5px;
    }

    .dashboard-body {
        border-radius: 0 0 20px 20px;
    }
}




/* BLUE-PURPLE GLOW AROUND REGISTER BUTTON ONLY */

.hero-register-glow {
    position: relative;
    isolation: isolate;
    overflow: visible;
}

.register-blue-glow {
    position: absolute;
    z-index: -1;
    pointer-events: none;

    top: -150px;
    bottom: -150px;
    left: 50%;
    transform: translateX(-50%);

    width: min(115vw, 900px);

    background: radial-gradient(
        ellipse 48% 48% at 50% 50%,
        rgba(103, 115, 255, 0.98) 0%,
        rgba(78, 52, 255, 0.88) 32%,
        rgba(68, 40, 225, 0.58) 54%,
        rgba(48, 26, 160, 0.22) 72%,
        transparent 100%
    );

    filter: blur(32px);
}

@media (max-width: 600px) {
    .register-blue-glow {
        top: -100px;
        bottom: -100px;
        width: 125vw;
        filter: blur(26px);
    }
}


/* KEEP HERO DESCRIPTION CRISP WHITE ABOVE THE GLOW */

.hero-description {
    position: relative;
    z-index: 2;

    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;

    text-shadow: none !important;
}

/* Keep both description lines white */

.hero-description span {
    color: #ffffff !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
}


/* =========================================
   OUR SERVICES INTRODUCTION
========================================= */

.services-intro {
    width: 100%;
    padding: 60px 48px 80px;
    background: #05030d;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

/* Outlined section label */

.services-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 12px 36px;
    margin-bottom: 75px;

    border: 2px solid transparent;
    border-radius: 50px;

    background:
        linear-gradient(#05030d, #05030d) padding-box,
        linear-gradient(110deg, #4930ff, #b9a8ff) border-box;

    color: #f8f6ff;
    font-size: 22px;
    font-weight: 400;
}

/* Main heading */

.services-heading {
    max-width: 1200px;
    margin: 0;

    color: #ffffff;
    font-size: clamp(38px, 6.5vw, 82px);
    font-weight: 400;
    line-height: 1.38;
    letter-spacing: 0.2px;
}

/* Supporting description */

.services-description {
    max-width: 1250px;
    margin: 65px 0 0;

    color: #f2efff;
    font-size: clamp(20px, 3.5vw, 46px);
    font-weight: 400;
    line-height: 1.65;
}

/* View All Services button */

.services-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 100px;
    padding: 22px 70px;
    margin-top: 125px;

    color: #ffffff;
    background: linear-gradient(
        110deg,
        #4930ff 0%,
        #6559ff 50%,
        #4930ff 100%
    );

    border: 2px solid #9383ff;
    border-radius: 100px;

    box-shadow:
        0 9px 0 #3020d5,
        inset 0 1px 3px rgba(255, 255, 255, 0.22);

    font-size: clamp(23px, 3.5vw, 44px);
    font-weight: 700;
    text-decoration: none;

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.services-button:hover {
    transform: translateY(-3px);
    box-shadow:
        0 12px 0 #3020d5,
        0 0 25px rgba(91, 69, 255, 0.35);
}

.services-button:active {
    transform: translateY(4px);
}

/* Mobile layout */

@media (max-width: 600px) {

    .services-intro {
        padding: 35px 20px 55px;
    }

    .services-label {
        padding: 9px 25px;
        margin-bottom: 42px;
        font-size: 19px;
    }

    .services-heading {
        font-size: clamp(30px, 7.2vw, 43px);
        line-height: 1.4;
        letter-spacing: 0;
    }

    .services-description {
        margin-top: 35px;
        font-size: clamp(17px, 4.2vw, 23px);
        line-height: 1.6;
    }

    .services-button {
        min-height: 68px;
        padding: 16px 32px;
        margin-top: 65px;
        font-size: 22px;

        box-shadow:
            0 6px 0 #3020d5,
            inset 0 1px 3px rgba(255, 255, 255, 0.22);
    }
}


/* =========================================
   COMPACT OUR SERVICES SECTION
========================================= */

.services-intro {
    padding: 30px 24px 45px;
}

/* Smaller Our Services label */
.services-label {
    padding: 8px 25px;
    margin-bottom: 38px;
    font-size: 18px;
    border-width: 2px;
}

/* Reduce headline size and line spacing */
.services-heading {
    font-size: clamp(30px, 5vw, 58px);
    line-height: 1.28;
    letter-spacing: 0;
}

/* Reduce description size and spacing */
.services-description {
    margin-top: 32px;
    font-size: clamp(17px, 2.5vw, 30px);
    line-height: 1.5;
}

/* Smaller View All Services button */
.services-button {
    min-height: 66px;
    padding: 14px 34px;
    margin-top: 48px;
    font-size: clamp(20px, 2.5vw, 30px);
    box-shadow:
        0 6px 0 #3020d5,
        inset 0 1px 3px rgba(255, 255, 255, 0.22);
}

/* Mobile refinements */
@media (max-width: 600px) {

    .services-intro {
        padding: 25px 20px 35px;
    }

    .services-label {
        padding: 7px 20px;
        margin-bottom: 30px;
        font-size: 16px;
    }

    .services-heading {
        font-size: 30px;
        line-height: 1.3;
    }

    .services-description {
        margin-top: 25px;
        font-size: 17px;
        line-height: 1.5;
    }

    .services-button {
        min-height: 58px;
        padding: 12px 26px;
        margin-top: 38px;
        font-size: 19px;
        box-shadow:
            0 5px 0 #3020d5,
            inset 0 1px 3px rgba(255, 255, 255, 0.22);
    }
}


/* Make Our Services heading bold */
.services-heading {
    font-weight: 700;
}


/* =========================================
   OUR SERVICES — RUNNING WHITE BORDER LIGHT
========================================= */

.services-label {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    border: 2px solid transparent;

    background:
        linear-gradient(#05030d, #05030d) padding-box,
        linear-gradient(110deg, #4930ff, #b9a8ff) border-box;
}

/* Moving white light */

.services-label::before {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 2px;
    border-radius: inherit;

    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 260deg,
        rgba(255, 255, 255, 0.15) 290deg,
        #ffffff 320deg,
        #c9c0ff 335deg,
        transparent 360deg
    );

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;

    animation: servicesBorderLight 3s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes servicesBorderLight {
    to {
        transform: rotate(360deg);
    }
}

/* Keep the label text above the animated border */

.services-label {
    color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
    .services-label::before {
        animation: none;
    }
}


/* =========================================
   VIEW ALL SERVICES — SHAKE + OUTWARD WAVES
========================================= */

.services-button {
    position: relative;
    isolation: isolate;
    animation: servicesButtonShake 3s ease-in-out infinite;
}

/* Expanding wave rings */
.services-button::before,
.services-button::after {
    content: "";
    position: absolute;
    inset: -5px;

    border: 2px solid rgba(153, 132, 255, 0.75);
    border-radius: inherit;

    pointer-events: none;
    z-index: -1;

    animation: servicesButtonWave 2.4s ease-out infinite;
}

.services-button::after {
    animation-delay: 1.2s;
    border-color: rgba(220, 213, 255, 0.6);
}

/* Brief shake, followed by a pause */
@keyframes servicesButtonShake {
    0%, 78%, 100% {
        transform: translateX(0);
    }

    81% {
        transform: translateX(-3px);
    }

    84% {
        transform: translateX(3px);
    }

    87% {
        transform: translateX(-3px);
    }

    90% {
        transform: translateX(3px);
    }

    93% {
        transform: translateX(-1px);
    }

    96% {
        transform: translateX(1px);
    }
}

/* Waves spread outward and fade */
@keyframes servicesButtonWave {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    100% {
        transform: scale(1.12, 1.3);
        opacity: 0;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .services-button,
    .services-button::before,
    .services-button::after {
        animation: none !important;
    }
}


/* =========================================
   SERVICES CARDS
========================================= */

.services-cards {
    width: 100%;
    padding: 10px 45px 45px;
    background: #05030d;
}

/* Individual service card */

.service-card {
    width: 100%;
    padding: 65px 65px 60px;

    background: #05030d;
    border: 2px solid #292633;
    border-radius: 55px;

    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;

    transition: border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.service-card:hover {
    border-color: #5140a0;
    box-shadow: 0 0 20px rgba(83, 60, 255, 0.08);
}

/* TikTok logo */

.service-card-logo {
    width: 180px;
    height: 180px;
    margin-bottom: 100px;

    background: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Card title */

.service-card h3 {
    margin: 0 0 35px;

    color: #ffffff;
    font-size: clamp(25px, 3vw, 42px);
    font-weight: 400;
    line-height: 1.35;
}

/* Card description */

.service-card-description,
.service-card-note {
    color: #f2efff;
    font-size: clamp(19px, 2.5vw, 34px);
    font-weight: 400;
    line-height: 1.65;
}

.service-card-description {
    margin: 0 0 38px;
}

.service-card-note {
    margin: 0 0 35px;
}

/* Sign-up button */

.service-card-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    min-height: 85px;
    padding: 20px 40px;

    color: #ffffff;
    background: #4930ff;
    border: 1px solid #6554ff;
    border-radius: 14px;

    font-size: clamp(20px, 2.6vw, 36px);
    font-weight: 700;
    text-align: center;
    text-decoration: none;

    transition: background 0.25s ease,
                transform 0.25s ease;
}

.service-card-button:hover {
    background: #604cff;
    transform: translateY(-2px);
}

/* Mobile styling */

@media (max-width: 600px) {

    .services-cards {
        padding: 10px 16px 30px;
    }

    .service-card {
        padding: 30px 22px;
        border-radius: 30px;
        border-width: 1px;
    }

    .service-card-logo {
        width: 115px;
        height: 115px;
        margin-bottom: 55px;
    }

    .service-card h3 {
        margin-bottom: 22px;
        font-size: 25px;
    }

    .service-card-description,
    .service-card-note {
        font-size: 18px;
        line-height: 1.7;
    }

    .service-card-description {
        margin-bottom: 25px;
    }

    .service-card-note {
        margin-bottom: 28px;
    }

    .service-card-button {
        min-height: 62px;
        padding: 15px 22px;
        border-radius: 10px;
        font-size: 20px;
    }
}


/* =========================================
   COMPACT SERVICE CARD — MATCH REFERENCE
========================================= */

.services-cards {
    width: 100%;
    padding: 8px 24px 30px;
    background: #05030d;
}

.service-card {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;

    padding: 30px 32px 28px;

    background: #05030d;
    border: 1px solid #292633;
    border-radius: 32px;

    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

/* Smaller logo */

.service-card-logo {
    width: 105px;
    height: 105px;
    margin-bottom: 48px;

    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Smaller title */

.service-card h3 {
    margin: 0 0 20px;
    font-size: 23px;
    line-height: 1.35;
    font-weight: 400;
}

/* Smaller descriptions */

.service-card-description,
.service-card-note {
    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
}

.service-card-description {
    margin: 0 0 23px;
}

.service-card-note {
    margin: 0 0 24px;
}

/* Smaller button */

.service-card-button {
    min-height: 52px;
    padding: 13px 22px;

    border-radius: 9px;
    font-size: 19px;
    font-weight: 700;
}

/* Phone screens */

@media (max-width: 600px) {
    .services-cards {
        padding: 8px 18px 25px;
    }

    .service-card {
        max-width: none;
        padding: 24px 20px;
        border-radius: 26px;
    }

    .service-card-logo {
        width: 95px;
        height: 95px;
        margin-bottom: 42px;
    }

    .service-card h3 {
        font-size: 22px;
        margin-bottom: 18px;
    }

    .service-card-description,
    .service-card-note {
        font-size: 16px;
        line-height: 1.6;
    }

    .service-card-description {
        margin-bottom: 20px;
    }

    .service-card-note {
        margin-bottom: 22px;
    }

    .service-card-button {
        min-height: 48px;
        padding: 12px 18px;
        font-size: 17px;
    }
}


/* Bold titles for all service cards */
.service-card h3 {
    font-weight: 700;
}


/* =========================================
   SERVICE CARD BUTTON — SHAKE + WAVES
========================================= */

.service-card-button {
    position: relative;
    isolation: isolate;
    animation: serviceButtonShake 3s ease-in-out infinite;
}

/* Outward wave rings */
.service-card-button::before,
.service-card-button::after {
    content: "";
    position: absolute;
    inset: -4px;

    border: 1.5px solid rgba(155, 135, 255, 0.8);
    border-radius: inherit;

    pointer-events: none;
    z-index: -1;

    animation: serviceButtonWave 2.4s ease-out infinite;
}

.service-card-button::after {
    animation-delay: 1.2s;
    border-color: rgba(220, 213, 255, 0.65);
}

/* Gentle shake with pauses */
@keyframes serviceButtonShake {
    0%, 78%, 100% {
        transform: translateX(0);
    }

    81% {
        transform: translateX(-2px);
    }

    84% {
        transform: translateX(2px);
    }

    87% {
        transform: translateX(-2px);
    }

    90% {
        transform: translateX(2px);
    }

    93%, 96% {
        transform: translateX(0);
    }
}

/* Waves expand and fade */
@keyframes serviceButtonWave {
    0% {
        transform: scale(1);
        opacity: 0.75;
    }

    100% {
        transform: scale(1.12, 1.3);
        opacity: 0;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .service-card-button,
    .service-card-button::before,
    .service-card-button::after {
        animation: none !important;
    }
}


/* Add space between service card borders */
.services-cards {
    display: flex;
    flex-direction: column;
    gap: 25px;
}


/* =========================================
   COMPACT TRIVIA SERVICE CARD
========================================= */

.trivia-card {
    padding-bottom: 28px;
}

/* Reduce space beneath the quiz image */
.trivia-card .service-card-logo {
    margin-bottom: 35px;
}

/* Compact trivia title */
.trivia-card h3 {
    margin-bottom: 18px;
}

/* Keep the description readable */
.trivia-card .service-card-description {
    margin-bottom: 22px;
    line-height: 1.55;
}

/* No unused space from the second paragraph */
.trivia-card .service-card-note {
    display: none;
}

/* Keep the button fitted to its text */
.trivia-card .service-card-button {
    width: fit-content;
    max-width: 100%;
}

/* Mobile refinements */
@media (max-width: 600px) {
    .trivia-card {
        padding: 24px 20px;
        padding-bottom: 24px;
    }

    .trivia-card .service-card-logo {
        margin-bottom: 30px;
    }

    .trivia-card h3 {
        margin-bottom: 15px;
    }

    .trivia-card .service-card-description {
        margin-bottom: 20px;
    }
}


/* =========================================
   PAID MOVIES CARD
========================================= */

.movie-card {
    height: auto;
    min-height: 0;
    padding-bottom: 28px;
}

.movie-card .service-card-logo {
    margin-bottom: 35px;
}

.movie-card h3 {
    font-weight: 700;
    margin-bottom: 18px;
}

.movie-card .service-card-description {
    margin-bottom: 22px;
    line-height: 1.55;
}

.movie-card .service-card-button {
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 600px) {
    .movie-card {
        padding: 24px 20px;
        padding-bottom: 24px;
    }

    .movie-card .service-card-logo {
        margin-bottom: 30px;
    }
}


/* =========================================
   PAID WHATSAPP STATUS VIEWS CARD
========================================= */

.whatsapp-status-card {
    height: auto;
    min-height: 0;
    padding-bottom: 28px;
}

.whatsapp-status-card .service-card-logo {
    margin-bottom: 35px;
}

.whatsapp-status-card h3 {
    font-weight: 700;
    margin-bottom: 18px;
}

.whatsapp-status-card .service-card-description {
    margin-bottom: 22px;
    line-height: 1.55;
}

.whatsapp-status-card .service-card-button {
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 600px) {
    .whatsapp-status-card {
        padding: 24px 20px;
        padding-bottom: 24px;
    }

    .whatsapp-status-card .service-card-logo {
        margin-bottom: 30px;
    }
}


/* =========================================
   TIKTOK VIDEO DOWNLOAD CARD
========================================= */

.tiktok-download-card {
    height: auto;
    min-height: 0;
    padding-bottom: 28px;
}

.tiktok-download-card .service-card-logo {
    margin-bottom: 35px;
}

.tiktok-download-card h3 {
    font-weight: 700;
    margin-bottom: 18px;
}

.tiktok-download-card .service-card-description {
    margin-bottom: 22px;
    line-height: 1.55;
}

.tiktok-download-card .service-card-button {
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 600px) {
    .tiktok-download-card {
        padding: 24px 20px;
        padding-bottom: 24px;
    }

    .tiktok-download-card .service-card-logo {
        margin-bottom: 30px;
    }
}


/* =========================================
   PAID CHAT SERVICE CARD
========================================= */

.paid-chat-card {
    height: auto;
    min-height: 0;
    padding-bottom: 28px;
}

.paid-chat-card .service-card-logo {
    margin-bottom: 35px;
}

.paid-chat-card h3 {
    font-weight: 700;
    margin-bottom: 18px;
}

.paid-chat-card .service-card-description {
    margin-bottom: 22px;
    line-height: 1.55;
}

.paid-chat-card .service-card-button {
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 600px) {
    .paid-chat-card {
        padding: 24px 20px;
        padding-bottom: 24px;
    }

    .paid-chat-card .service-card-logo {
        margin-bottom: 30px;
    }
}


/* =========================================
   PAID ONLINE MUSIC STREAMING CARD
========================================= */

.music-streaming-card {
    height: auto;
    min-height: 0;
    padding-bottom: 28px;
}

.music-streaming-card .service-card-logo {
    margin-bottom: 35px;
}

.music-streaming-card h3 {
    font-weight: 700;
    margin-bottom: 18px;
}

.music-streaming-card .service-card-description {
    margin-bottom: 22px;
    line-height: 1.55;
}

.music-streaming-card .service-card-button {
    width: fit-content;
    max-width: 100%;
}

@media (max-width: 600px) {
    .music-streaming-card {
        padding: 24px 20px;
        padding-bottom: 24px;
    }

    .music-streaming-card .service-card-logo {
        margin-bottom: 30px;
    }
}



/* =========================================
   MY SOCIAL PAY — REGIONAL NETWORK PANELS
========================================= */

.msp-regional-network {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: 1050px;
    margin: 35px auto 0;
}

.msp-region-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 26px 30px 30px;
    border: 1px solid rgba(46, 131, 113, 0.48);
    border-radius: 30px;

    background:
        radial-gradient(
            ellipse at 10% 0%,
            rgba(23, 88, 88, 0.12),
            transparent 55%
        ),
        linear-gradient(135deg, #08172e, #07132a 65%, #08172a);

    box-shadow: inset 0 0 25px rgba(21, 65, 100, 0.06);

    animation: mspPanelEntrance 0.65s ease both;
    transition: border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.msp-region-panel:hover {
    border-color: rgba(52, 211, 153, 0.65);
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.07);
}

/* Region heading */

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

.msp-region-icon {
    flex: 0 0 72px;
    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    color: #ffd84d;
    font-size: 37px;

    border: 1px solid rgba(38, 185, 145, 0.55);
    border-radius: 23px;

    background: linear-gradient(
        145deg,
        rgba(26, 91, 91, 0.42),
        rgba(12, 39, 59, 0.85)
    );

    box-shadow: inset 0 0 18px rgba(31, 205, 151, 0.04);
}

.msp-region-heading {
    flex: 1;
    min-width: 0;
}

.msp-region-heading h3 {
    margin: 0 0 12px;
    color: #f7f9ff;

    font-size: clamp(18px, 2.5vw, 27px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.msp-region-heading p {
    margin: 0;
    color: #687c99;
    font-size: 15px;
}

/* ACTIVE / EXPANDING badges */

.msp-region-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    flex-shrink: 0;
    padding: 13px 17px;

    border: 1px solid rgba(42, 192, 139, 0.55);
    border-radius: 40px;

    color: #38d99b;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
    white-space: nowrap;
}

.msp-region-status i,
.msp-country-chip i,
.msp-network-live-dot {
    display: inline-block;
    flex-shrink: 0;

    width: 10px;
    height: 10px;
    border-radius: 50%;

    background: #35d99a;
    box-shadow: 0 0 12px rgba(53, 217, 154, 0.5);

    animation: mspStatusPulse 2s ease-in-out infinite;
}

.msp-region-status.expanding-status {
    color: #ffd34d;
    border-color: rgba(235, 191, 60, 0.5);
}

.msp-region-status.expanding-status i {
    background: #e7bd42;
    box-shadow: 0 0 12px rgba(231, 189, 66, 0.4);
}

/* Country chips */

.msp-country-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.msp-country-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    min-height: 58px;
    padding: 13px 17px;

    border: 1px solid #263750;
    border-radius: 22px;

    background: linear-gradient(
        135deg,
        rgba(22, 39, 65, 0.95),
        rgba(13, 29, 53, 0.95)
    );

    color: #b8c5d9;
    font-size: 14px;
    font-weight: 600;

    transition: transform 0.25s ease,
                border-color 0.25s ease,
                background 0.25s ease;
}

.msp-country-chip > span {
    font-size: 21px;
    line-height: 1;
}

.msp-country-chip i {
    width: 9px;
    height: 9px;
    margin-left: 1px;
}

.msp-country-chip:hover {
    transform: translateY(-3px);
    border-color: #347d7c;
    background: #102742;
}

.msp-country-chip.expanding {
    border-color: #25bc8b;
    color: #f2f7ff;
    box-shadow: 0 0 12px rgba(37, 188, 139, 0.09);
}

.msp-country-chip.expanding i {
    background: #e7bd42;
    box-shadow: 0 0 10px rgba(231, 189, 66, 0.5);
}

/* International network message */

.msp-region-message {
    display: flex;
    align-items: center;
    gap: 14px;

    margin: 0;
    padding: 18px;

    border: 1px solid #263750;
    border-radius: 18px;

    color: #9eafc8;
    font-size: 14px;
    line-height: 1.8;
}

.msp-region-message > span {
    font-size: 28px;
}

/* Network live footer */

.msp-network-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;

    margin: 30px auto 0;
    text-align: center;

    color: #647590;
    font-size: 13px;
}

.msp-network-footer strong {
    color: #37d99b;
    letter-spacing: 1.8px;
    font-size: 12px;
}

.msp-network-live-dot {
    width: 12px;
    height: 12px;
}

/* Entrance and status animations */

.msp-region-panel:nth-child(2) {
    animation-delay: 0.08s;
}

.msp-region-panel:nth-child(3) {
    animation-delay: 0.16s;
}

.msp-region-panel:nth-child(4) {
    animation-delay: 0.24s;
}

.msp-region-panel:nth-child(5) {
    animation-delay: 0.32s;
}

.msp-region-panel:nth-child(6) {
    animation-delay: 0.40s;
}

@keyframes mspPanelEntrance {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mspStatusPulse {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* Tablet */

@media (max-width: 700px) {
    .msp-regional-network {
        gap: 17px;
    }

    .msp-region-panel {
        padding: 22px;
        border-radius: 24px;
    }

    .msp-region-header {
        gap: 14px;
        margin-bottom: 22px;
    }

    .msp-region-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
        border-radius: 19px;
        font-size: 30px;
    }

    .msp-country-chips {
        gap: 10px;
    }

    .msp-country-chip {
        min-height: 50px;
        padding: 11px 13px;
        gap: 9px;
        border-radius: 17px;
        font-size: 13px;
    }

    .msp-country-chip > span {
        font-size: 19px;
    }

    .msp-region-status {
        padding: 10px 12px;
        gap: 7px;
        font-size: 10px;
    }
}

/* Mobile */

@media (max-width: 480px) {
    .msp-region-panel {
        padding: 18px 15px 20px;
        border-radius: 22px;
    }

    .msp-region-header {
        gap: 11px;
        margin-bottom: 20px;
    }

    .msp-region-icon {
        flex-basis: 47px;
        width: 47px;
        height: 47px;
        border-radius: 15px;
        font-size: 25px;
    }

    .msp-region-heading h3 {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .msp-region-heading p {
        font-size: 12px;
    }

    .msp-region-status {
        padding: 8px 9px;
        gap: 5px;
        font-size: 8px;
        letter-spacing: 0.6px;
    }

    .msp-region-status i {
        width: 7px;
        height: 7px;
    }

    .msp-country-chips {
        gap: 8px;
    }

    .msp-country-chip {
        min-height: 44px;
        padding: 10px;
        gap: 7px;
        border-radius: 15px;
        font-size: 12px;
    }

    .msp-country-chip > span {
        font-size: 17px;
    }

    .msp-country-chip i {
        width: 7px;
        height: 7px;
    }

    .msp-network-footer {
        gap: 8px;
        font-size: 11px;
        line-height: 1.6;
    }

    .msp-network-footer strong {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msp-regional-network *,
    .msp-regional-network *::before,
    .msp-regional-network *::after,
    .msp-network-footer * {
        animation: none !important;
        transition: none !important;
    }
}


/* Automatic country selection highlight */
.msp-country-chip {
    position: relative;
    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        transform 0.4s ease;
}

.msp-country-chip.msp-country-selected {
    background: linear-gradient(
        135deg,
        rgba(15, 76, 79, 0.95),
        rgba(13, 39, 65, 0.98)
    ) !important;

    border-color: #32dba0 !important;

    box-shadow:
        0 0 8px rgba(50, 219, 160, 0.25),
        inset 0 0 12px rgba(50, 219, 160, 0.08);

    transform: translateY(-2px) scale(1.02);
    color: #ffffff !important;
    z-index: 2;
}

/* Make the selected country's status dot brighter */
.msp-country-chip.msp-country-selected i {
    background: #ffe05b;
    box-shadow: 0 0 12px rgba(255, 224, 91, 0.85);
    transform: scale(1.2);
}

/* =========================================
   MY SOCIAL PAY — ANIMATED COUNTRY NETWORK
========================================= */

.msp-countries {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding: 75px 25px 65px;
    background: #05030d;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

.msp-countries::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;

    width: 650px;
    height: 500px;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);

    background: radial-gradient(
        ellipse,
        rgba(75, 45, 255, 0.24) 0%,
        rgba(57, 36, 190, 0.10) 42%,
        transparent 72%
    );

    animation: mspCountryGlow 7s ease-in-out infinite alternate;
}

.msp-countries-inner {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
}

/* Section label */

.msp-country-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    width: fit-content;
    margin: 0 auto 24px;
    padding: 10px 20px;

    border: 1px solid #5946ff;
    border-radius: 50px;
    background: rgba(30, 20, 70, 0.35);

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #d5ceff;
}

.msp-label-dot,
.msp-network-pulse {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8b78ff;
    box-shadow: 0 0 12px #735aff;
    animation: mspDotPulse 1.8s ease-in-out infinite;
}

/* Heading and description */

.msp-countries h2 {
    margin: 0 auto 20px;
    max-width: 850px;

    text-align: center;
    font-size: clamp(30px, 5vw, 55px);
    line-height: 1.16;
    letter-spacing: -1.5px;
    font-weight: 800;
}

.msp-countries h2 span {
    display: block;

    background: linear-gradient(
        90deg,
        #8b72ff,
        #fff,
        #7660ff,
        #c6baff
    );

    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    animation: mspTextShine 6s linear infinite;
}

.msp-country-description {
    max-width: 680px;
    margin: 0 auto 32px;

    color: #c4bfd6;
    font-size: 16px;
    line-height: 1.8;
    text-align: center;
}

/* Statistics */

.msp-country-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 35px;

    width: fit-content;
    max-width: 100%;
    margin: 0 auto 38px;
    padding: 20px 35px;

    border: 1px solid rgba(123, 101, 255, 0.35);
    border-radius: 20px;
    background: rgba(18, 14, 38, 0.75);
}

.msp-country-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.msp-country-stat strong {
    font-size: 30px;
    font-weight: 800;
    color: #a99aff;
}

.msp-country-stat > span {
    color: #bdb7d2;
    font-size: 12px;
    text-align: center;
}

.msp-stat-divider {
    width: 1px;
    height: 42px;
    background: rgba(150, 130, 255, 0.35);
}

/* Country grid */

.msp-country-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.msp-country-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 155px;
    padding: 20px 10px;

    border: 1px solid #29243b;
    border-radius: 20px;

    background: linear-gradient(
        145deg,
        rgba(26, 22, 43, 0.96),
        rgba(9, 7, 18, 0.98)
    );

    transition:
        transform 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* Subtle light inside each card */

.msp-country-card::before {
    content: "";
    position: absolute;
    z-index: -1;

    width: 110px;
    height: 110px;
    top: -70px;
    right: -45px;

    background: #6246ff;
    filter: blur(45px);
    opacity: 0.25;
    transition: opacity 0.3s ease;
}

.msp-country-card:hover {
    transform: translateY(-5px);
    border-color: #7965ff;
    box-shadow: 0 10px 30px rgba(82, 56, 255, 0.15);
}

.msp-country-card:hover::before {
    opacity: 0.65;
}

.msp-country-flag {
    font-size: 36px;
    line-height: 1.2;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: transform 0.3s ease;
}

.msp-country-card:hover .msp-country-flag {
    transform: scale(1.13);
}

.msp-country-name {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    color: #fff;
}

.msp-country-status {
    font-size: 11px;
    text-align: center;
    color: #a59bbd;
}

/* Bottom message */

.msp-country-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 30px;
    color: #a9a0c5;
    font-size: 13px;
    text-align: center;
}

/* Animations */

@keyframes mspCountryGlow {
    from {
        opacity: 0.55;
        transform: translateX(-50%) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) scale(1.12);
    }
}

@keyframes mspDotPulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 5px #735aff;
    }

    50% {
        opacity: 0.6;
        box-shadow: 0 0 15px #9d8cff;
    }
}

@keyframes mspTextShine {
    to {
        background-position: 250% center;
    }
}

/* Tablets */

@media (max-width: 800px) {
    .msp-countries {
        padding: 60px 20px 50px;
    }

    .msp-country-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .msp-country-card {
        min-height: 140px;
    }
}

/* Phones */

@media (max-width: 480px) {
    .msp-countries {
        padding: 48px 16px 42px;
    }

    .msp-country-label {
        margin-bottom: 20px;
        padding: 9px 15px;
        font-size: 10px;
        letter-spacing: 1.5px;
    }

    .msp-countries h2 {
        font-size: 31px;
        letter-spacing: -0.7px;
    }

    .msp-country-description {
        font-size: 14px;
        line-height: 1.7;
    }

    .msp-country-stats {
        gap: 20px;
        padding: 16px 20px;
        margin-bottom: 28px;
    }

    .msp-country-stat strong {
        font-size: 25px;
    }

    .msp-country-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .msp-country-card {
        min-height: 125px;
        padding: 15px 8px;
        border-radius: 16px;
    }

    .msp-country-flag {
        font-size: 31px;
    }

    .msp-country-name {
        font-size: 14px;
    }

    .msp-country-bottom {
        font-size: 11px;
        line-height: 1.6;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msp-countries *,
    .msp-countries *::before,
    .msp-countries *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================
   MY SOCIAL PAY - GLOBAL NETWORK
========================================= */

.msp-global-card {
    background: linear-gradient(
        135deg,
        #091a33 0%,
        #07142a 55%,
        #091a30 100%
    );
    border: 1px solid rgba(46, 213, 155, 0.28);
    border-radius: 26px;
    padding: 25px 28px;
    margin: 24px 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.18);
}

/* Soft green glow */
.msp-global-card::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -90px;
    width: 240px;
    height: 240px;
    background: radial-gradient(
        circle,
        rgba(40, 220, 155, 0.09),
        transparent 70%
    );
    pointer-events: none;
}

.msp-global-card .msp-region-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 25px;
    position: relative;
    z-index: 1;
}

.msp-global-card .msp-region-icon {
    width: 66px;
    height: 66px;
    min-width: 66px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(46, 213, 155, 0.35);
    border-radius: 20px;
    background: rgba(46, 213, 155, 0.08);
    color: #ffdc58;
    font-size: 29px;
}

.msp-global-card .msp-region-heading {
    flex: 1;
    min-width: 0;
}

.msp-global-card .msp-region-heading h3 {
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 7px;
    letter-spacing: 0.3px;
}

.msp-global-card .msp-region-heading p {
    color: #8293ad;
    font-size: 14px;
    margin: 0;
}

/* GLOBAL badge */
.msp-global-card .msp-region-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border: 1px solid rgba(46, 213, 155, 0.4);
    border-radius: 30px;
    color: #42dfa6;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1px;
    white-space: nowrap;
}

.msp-global-card .msp-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #42dfa6;
    box-shadow: 0 0 10px rgba(66, 223, 166, 0.55);
}

/* Country chips */
.msp-global-card .msp-country-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.msp-global-card .msp-country-chip {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 48px;
    padding: 11px 15px;
    border: 1px solid #253752;
    border-radius: 20px;
    background: rgba(17, 34, 58, 0.82);
    color: #c4cede;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    box-sizing: border-box;
    transition:
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease,
        transform 0.4s ease;
}

.msp-global-card .msp-country-chip > span {
    font-size: 19px;
    line-height: 1;
}

.msp-global-card .msp-country-chip i {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #37dba0;
    box-shadow: 0 0 8px rgba(55, 219, 160, 0.45);
    transition: all 0.4s ease;
}

/* Automatically highlighted country */
.msp-global-card .msp-country-chip.msp-country-selected {
    background: linear-gradient(
        135deg,
        rgba(15, 76, 79, 0.95),
        rgba(13, 39, 65, 0.98)
    );
    border-color: #32dba0;
    box-shadow:
        0 0 12px rgba(50, 219, 160, 0.2),
        inset 0 0 12px rgba(50, 219, 160, 0.07);
    transform: translateY(-2px);
    color: #ffffff;
    z-index: 2;
}

.msp-global-card .msp-country-chip.msp-country-selected i {
    background: #ffe05b;
    box-shadow: 0 0 12px rgba(255, 224, 91, 0.85);
    transform: scale(1.2);
}

/* Mobile layout */
@media (max-width: 600px) {
    .msp-global-card {
        padding: 18px 15px;
        border-radius: 22px;
        margin: 18px 0;
    }

    .msp-global-card .msp-region-header {
        gap: 11px;
        margin-bottom: 20px;
    }

    .msp-global-card .msp-region-icon {
        width: 49px;
        height: 49px;
        min-width: 49px;
        border-radius: 15px;
        font-size: 23px;
    }

    .msp-global-card .msp-region-heading h3 {
        font-size: 15px;
    }

    .msp-global-card .msp-region-heading p {
        font-size: 12px;
    }

    .msp-global-card .msp-region-status {
        padding: 7px 9px;
        font-size: 10px;
        gap: 5px;
    }

    .msp-global-card .msp-country-list {
        gap: 8px;
    }

    .msp-global-card .msp-country-chip {
        min-height: 42px;
        padding: 9px 10px;
        gap: 7px;
        border-radius: 15px;
        font-size: 12px;
    }

    .msp-global-card .msp-country-chip > span {
        font-size: 16px;
    }

    .msp-global-card .msp-country-chip i {
        width: 7px;
        height: 7px;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .msp-global-card .msp-country-chip,
    .msp-global-card .msp-country-chip i {
        transition: none;
    }
}


/* Fade the Global Network subtitle */
.msp-global-card .msp-region-heading p {
    color: #53647e !important;
    opacity: 0.85;
    font-weight: 400;
}

/* Make the GLOBAL indicator dot pulse */
.msp-global-card .msp-region-status .msp-status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #42dfa6;
    box-shadow: 0 0 8px rgba(66, 223, 166, 0.65);
    animation: mspGlobalDotPulse 1.3s ease-in-out infinite;
}

@keyframes mspGlobalDotPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 7px rgba(66, 223, 166, 0.55);
    }

    50% {
        opacity: 0.45;
        transform: scale(1.3);
        box-shadow: 0 0 16px rgba(66, 223, 166, 0.9);
    }
}


/* ==========================================
   FIX: OUTSIDE AFRICA PANEL LAYOUT
========================================== */

.msp-global-card {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    padding: 24px 28px !important;
    position: relative;
    overflow: hidden;
}

/* Keep the heading elements together at the top */
.msp-global-card > .msp-region-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 16px;
    width: 100%;
    margin: 0 0 24px !important;
    position: relative;
    inset: auto !important;
}

/* Icon */
.msp-global-card .msp-region-icon {
    flex: 0 0 66px;
    width: 66px;
    height: 66px;
    margin: 0;
}

/* Heading and subtitle */
.msp-global-card .msp-region-heading {
    display: block !important;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    position: static !important;
}

.msp-global-card .msp-region-heading h3 {
    margin: 0 0 6px !important;
    line-height: 1.25;
    overflow-wrap: normal;
}

.msp-global-card .msp-region-heading p {
    margin: 0 !important;
    line-height: 1.4;
    color: #53647e !important;
    opacity: 1;
}

/* Keep GLOBAL badge at the right */
.msp-global-card .msp-region-status {
    position: static !important;
    flex: 0 0 auto;
    margin: 0 0 0 auto !important;
    align-self: center;
    white-space: nowrap;
}

/* Country chips start BELOW the heading */
.msp-global-card > .msp-country-list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    margin: 0 !important;
    position: static !important;
}

/* Prevent chips from stretching into full-width rows */
.msp-global-card .msp-country-chip {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: flex-start;
    margin: 0 !important;
    box-sizing: border-box;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .msp-global-card {
        padding: 18px 14px !important;
    }

    .msp-global-card > .msp-region-header {
        gap: 10px;
        margin-bottom: 18px !important;
    }

    .msp-global-card .msp-region-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        font-size: 21px;
    }

    .msp-global-card .msp-region-heading h3 {
        font-size: 14px;
    }

    .msp-global-card .msp-region-heading p {
        font-size: 12px;
    }

    .msp-global-card .msp-region-status {
        padding: 7px 9px;
        font-size: 9px;
        letter-spacing: 0.5px;
    }

    .msp-global-card > .msp-country-list {
        gap: 8px;
    }

    .msp-global-card .msp-country-chip {
        min-height: 40px;
        padding: 9px 10px;
        font-size: 12px;
    }
}


/* =========================================
   MYSOCIALPAY — DEVELOPER / CEO GUIDELINES
========================================= */

.msp-ceo-guidelines {
    width: 100%;
    padding: 75px 5% 90px;
    background: #03020b;
    color: #fff;
    overflow: hidden;
}

.msp-ceo-guidelines-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.msp-ceo-advice {
    max-width: 1000px;
    margin: 0 auto 85px;
}

.msp-guidelines-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    padding: 10px 28px;

    border: 2px solid #7460ff;
    border-radius: 50px;

    color: #f7f5ff;
    font-size: clamp(18px, 2.5vw, 28px);

    box-shadow: 0 0 15px rgba(104, 76, 255, 0.12);
}

.msp-ceo-advice h2 {
    margin: 55px 0 30px;
    color: #fff;

    font-size: clamp(38px, 5.5vw, 66px);
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: -1px;
}

.msp-ceo-advice > p {
    max-width: 1000px;
    margin: 0;

    color: #f0eff5;
    font-size: clamp(19px, 2.5vw, 32px);
    font-weight: 400;
    line-height: 1.6;
}

.msp-ceo-learn-more {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 65px;
    min-height: 88px;
    padding: 20px 48px;

    border: 2px solid #796aff;
    border-radius: 60px;

    background: linear-gradient(
        110deg,
        #4930f6,
        #6657ff,
        #4930f6
    );

    color: #fff;
    text-decoration: none;
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 700;

    box-shadow:
        0 8px 0 #3020bd,
        0 0 22px rgba(88, 65, 255, 0.2);

    transition: transform .25s ease, box-shadow .25s ease;
}

.msp-ceo-learn-more:hover {
    transform: translateY(-4px);
    box-shadow:
        0 12px 0 #3020bd,
        0 0 30px rgba(88, 65, 255, 0.35);
}

.msp-ceo-learn-more:active {
    transform: translateY(3px);
    box-shadow: 0 4px 0 #3020bd;
}

/* PROFILE IMAGE AND INFORMATION */

.msp-ceo-profile {
    position: relative;
    width: 100%;
    max-width: 1100px;
    min-height: 600px;
    margin: 0 auto;

    display: flex;
    align-items: stretch;
    overflow: hidden;

    background: #101014;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.msp-ceo-image {
    position: absolute;
    inset: 0;
}

.msp-ceo-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}

.msp-ceo-profile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.98) 0%,
        rgba(0, 0, 0, 0.88) 27%,
        rgba(0, 0, 0, 0.38) 53%,
        rgba(0, 0, 0, 0.02) 100%
    );
}

.msp-ceo-profile-content {
    position: relative;
    z-index: 1;
    align-self: stretch;

    width: 55%;
    padding: 55px 45px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.msp-ceo-brand {
    position: absolute;
    top: 50px;
    left: 45px;

    padding-left: 12px;
    border-left: 3px solid #806aff;

    color: #f7f5ff;
    font-family: Georgia, serif;
    font-size: 19px;
}

.msp-ceo-profile-content h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(45px, 5vw, 72px);
    font-weight: 800;
    line-height: 1.02;
}

.msp-ceo-role {
    margin-top: 16px;
    color: #9c85ff;
    font-family: Georgia, serif;
    font-size: clamp(18px, 2vw, 26px);
}

.msp-ceo-bio {
    max-width: 360px;
    margin-top: 25px;
    padding-left: 15px;

    border-left: 2px solid #fff;
    color: #e4e1e9;

    font-family: Georgia, serif;
    font-size: 15px;
    line-height: 1.6;
}

.msp-ceo-website {
    align-self: flex-end;
    margin-top: 35px;

    color: #f5f3ff;
    font-size: 14px;
}

/* TABLET */

@media (max-width: 800px) {
    .msp-ceo-guidelines {
        padding: 55px 5% 65px;
    }

    .msp-ceo-advice {
        margin-bottom: 60px;
    }

    .msp-ceo-profile {
        min-height: 520px;
    }

    .msp-ceo-profile-content {
        width: 65%;
        padding: 35px 25px;
    }

    .msp-ceo-brand {
        top: 30px;
        left: 25px;
    }
}

/* MOBILE — MATCH THE TALL REFERENCE LAYOUT */

@media (max-width: 600px) {
    .msp-ceo-guidelines {
        padding: 35px 7% 55px;
    }

    .msp-guidelines-label {
        min-height: 48px;
        padding: 8px 24px;
        font-size: 21px;
    }

    .msp-ceo-advice {
        margin-bottom: 75px;
    }

    .msp-ceo-advice h2 {
        margin: 55px 0 35px;
        font-size: clamp(34px, 8.5vw, 48px);
        line-height: 1.45;
        letter-spacing: -0.5px;
    }

    .msp-ceo-advice > p {
        font-size: clamp(17px, 4.5vw, 22px);
        line-height: 1.65;
    }

    .msp-ceo-learn-more {
        min-height: 78px;
        margin-top: 60px;
        padding: 18px 36px;
        font-size: 22px;
    }

    .msp-ceo-profile {
        min-height: 560px;
        aspect-ratio: 0.82;
    }

    .msp-ceo-image img {
        object-position: 58% center;
    }

    .msp-ceo-profile::after {
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.92) 0%,
            rgba(0, 0, 0, 0.58) 42%,
            rgba(0, 0, 0, 0.04) 100%
        );
    }

    .msp-ceo-profile-content {
        width: 72%;
        padding: 28px 18px;
    }

    .msp-ceo-brand {
        top: 35px;
        left: 18px;
        font-size: 16px;
    }

    .msp-ceo-profile-content h3 {
        font-size: clamp(40px, 10vw, 54px);
    }

    .msp-ceo-role {
        margin-top: 12px;
        font-size: 18px;
    }

    .msp-ceo-bio {
        max-width: 260px;
        margin-top: 20px;
        padding-left: 10px;
        font-size: 12px;
        line-height: 1.5;
    }

    .msp-ceo-website {
        margin-top: 25px;
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msp-ceo-learn-more {
        transition: none;
    }
}


/* =========================================
   GUIDELINES SECTION — COMPACT SIZING
========================================= */

.msp-ceo-guidelines {
    padding: 35px 5% 45px;
}

.msp-ceo-advice {
    max-width: 760px;
    margin-bottom: 45px;
}

.msp-guidelines-label {
    min-height: 38px;
    padding: 6px 20px;
    border-width: 1.5px;
    font-size: 17px;
}

.msp-ceo-advice h2 {
    margin: 30px 0 20px;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.3;
    letter-spacing: -0.5px;
}

.msp-ceo-advice > p {
    max-width: 760px;
    font-size: clamp(15px, 1.8vw, 20px);
    line-height: 1.55;
}

.msp-ceo-learn-more {
    min-height: 58px;
    margin-top: 32px;
    padding: 12px 28px;
    border-width: 1.5px;
    font-size: 18px;
    box-shadow:
        0 5px 0 #3020bd,
        0 0 14px rgba(88, 65, 255, 0.15);
}

/* Keep the portrait section compact too */

.msp-ceo-profile {
    max-width: 850px;
    min-height: 460px;
}

.msp-ceo-profile-content {
    padding: 35px 30px;
}

.msp-ceo-brand {
    top: 30px;
    left: 30px;
    font-size: 15px;
}

.msp-ceo-profile-content h3 {
    font-size: clamp(34px, 4vw, 52px);
}

.msp-ceo-role {
    margin-top: 10px;
    font-size: 17px;
}

.msp-ceo-bio {
    max-width: 290px;
    margin-top: 18px;
    font-size: 12px;
    line-height: 1.45;
}

.msp-ceo-website {
    margin-top: 22px;
    font-size: 12px;
}

/* MOBILE */

@media (max-width: 600px) {
    .msp-ceo-guidelines {
        padding: 28px 6% 35px;
    }

    .msp-ceo-advice {
        margin-bottom: 40px;
    }

    .msp-guidelines-label {
        min-height: 34px;
        padding: 5px 17px;
        font-size: 15px;
    }

    .msp-ceo-advice h2 {
        margin: 28px 0 20px;
        font-size: clamp(26px, 6.5vw, 34px);
        line-height: 1.35;
    }

    .msp-ceo-advice > p {
        font-size: 15px;
        line-height: 1.55;
    }

    .msp-ceo-learn-more {
        min-height: 48px;
        margin-top: 28px;
        padding: 10px 24px;
        font-size: 16px;
        box-shadow: 0 4px 0 #3020bd;
    }

    .msp-ceo-profile {
        min-height: 400px;
        aspect-ratio: auto;
    }

    .msp-ceo-profile-content {
        width: 75%;
        padding: 22px 15px;
    }

    .msp-ceo-brand {
        top: 24px;
        left: 15px;
        font-size: 13px;
    }

    .msp-ceo-profile-content h3 {
        font-size: 36px;
    }

    .msp-ceo-role {
        font-size: 15px;
    }

    .msp-ceo-bio {
        max-width: 230px;
        margin-top: 14px;
        font-size: 11px;
    }

    .msp-ceo-website {
        margin-top: 18px;
        font-size: 11px;
    }
}


/* =========================================
   LEARN MORE BUTTON — PREMIUM ANIMATION
========================================= */

.msp-ceo-learn-more {
    position: relative;
    isolation: isolate;
    overflow: visible;

    animation: learnMoreShake 3.5s ease-in-out infinite;

    box-shadow:
        0 8px 0 #3020bd,
        0 0 18px rgba(100, 75, 255, 0.35),
        inset 0 2px 3px rgba(255, 255, 255, 0.25);
}

/* OUTWARD PURPLE WAVES */

.msp-ceo-learn-more::before,
.msp-ceo-learn-more::after {
    content: "";
    position: absolute;
    inset: -5px;

    border: 2px solid rgba(125, 105, 255, 0.85);
    border-radius: inherit;

    z-index: -1;
    pointer-events: none;

    animation: learnMoreWave 2.4s ease-out infinite;
}

.msp-ceo-learn-more::after {
    animation-delay: 1.2s;
    border-color: rgba(190, 175, 255, 0.75);
}

/* MOVING SHINE */

.msp-ceo-learn-more {
    overflow: hidden;
}

.msp-ceo-learn-more span {
    position: relative;
    z-index: 2;
}

.msp-ceo-learn-more::marker {
    content: "";
}

/* SHAKE EFFECT */

@keyframes learnMoreShake {
    0%, 82%, 100% {
        transform: translateX(0);
    }

    85% {
        transform: translateX(-3px);
    }

    88% {
        transform: translateX(3px);
    }

    91% {
        transform: translateX(-2px);
    }

    94% {
        transform: translateX(2px);
    }

    97% {
        transform: translateX(0);
    }
}

/* EXPANDING WAVES */

@keyframes learnMoreWave {
    0% {
        transform: scale(1);
        opacity: 0.85;
    }

    100% {
        transform: scale(1.18, 1.45);
        opacity: 0;
    }
}

/* HOVER GLOW */

.msp-ceo-learn-more:hover {
    animation-play-state: paused;
    transform: translateY(-3px);

    box-shadow:
        0 10px 0 #3020bd,
        0 0 30px rgba(115, 90, 255, 0.7),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .msp-ceo-learn-more,
    .msp-ceo-learn-more::before,
    .msp-ceo-learn-more::after {
        animation: none !important;
    }
}


/* =====================================
   MYSOCIALPAY TESTIMONIALS & REVIEWS
===================================== */

.msp-testimonials {
    width: 100%;
    padding: 65px 5% 55px;
    overflow: hidden;
    background: #03020b;
    color: #fff;
}

.msp-testimonials-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.msp-testimonials-heading {
    max-width: 1000px;
    margin: 0 auto 48px;
    text-align: center;
}

.msp-testimonials-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    min-height: 44px;

    border: 1.5px solid transparent;
    border-radius: 50px;

    background:
        linear-gradient(#03020b, #03020b) padding-box,
        linear-gradient(110deg, #4930f6, #e8e4ff) border-box;

    color: #f8f6ff;
    font-size: clamp(15px, 2vw, 21px);
}

.msp-testimonials-heading h2 {
    margin: 30px 0 22px;
    color: #fff;

    font-size: clamp(30px, 4.5vw, 52px);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -0.7px;
}

.msp-testimonials-heading h2 span {
    display: block;
}

.msp-testimonials-intro {
    max-width: 800px;
    margin: 0 auto;

    color: #c9c6d4;
    font-size: clamp(15px, 1.8vw, 20px);
    line-height: 1.7;
}

/* REVIEW CARDS */

.msp-review-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
}

.msp-review-card {
    position: relative;
    min-width: 0;
    padding: 25px 22px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    background:
        linear-gradient(145deg, #11101e, #080710);

    border: 1px solid rgba(143, 119, 255, 0.2);
    border-radius: 20px;

    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.msp-review-card:hover {
    transform: translateY(-5px);
    border-color: rgba(143, 119, 255, 0.65);

    box-shadow:
        0 16px 35px rgba(72, 47, 220, 0.12);
}

.msp-review-top {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
}

.msp-review-avatar {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: linear-gradient(135deg, #6547ff, #a18aff);

    color: #fff;
    font-size: 21px;
    font-weight: 700;
}

.msp-avatar-blue {
    background: linear-gradient(135deg, #087cf0, #59c7ff);
}

.msp-avatar-pink {
    background: linear-gradient(135deg, #d33d9c, #9865ff);
}

.msp-review-member {
    flex: 1;
    min-width: 0;
}

.msp-review-member h3 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.msp-review-member span {
    display: block;
    color: #bcb8ce;
    font-size: 12px;
    line-height: 1.5;
}

.msp-review-quote {
    align-self: flex-start;
    color: #8068ff;
    font-family: Georgia, serif;
    font-size: 48px;
    line-height: 1;
}

.msp-review-stars {
    margin-top: 22px;
    color: #ffc857;
    font-size: 19px;
    letter-spacing: 3px;
}

.msp-review-text {
    margin-top: 14px;
    color: #e0deea;
    font-size: 15px;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

.msp-review-tag {
    display: inline-flex;
    align-items: center;

    margin-top: 22px;
    padding: 7px 11px;

    border: 1px solid rgba(130, 108, 255, 0.22);
    border-radius: 50px;

    background: rgba(111, 82, 255, 0.08);
    color: #b8aaff;

    font-size: 11px;
    letter-spacing: 0.3px;
}

.msp-reviews-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin-top: 35px;
    text-align: center;
}

.msp-reviews-footer-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;

    border-radius: 50%;
    background: #8c76ff;
    box-shadow: 0 0 12px rgba(140, 118, 255, 0.65);
}

.msp-reviews-footer p {
    color: #aaa6bd;
    font-size: 13px;
    line-height: 1.6;
}

/* TABLET */

@media (max-width: 900px) {
    .msp-testimonials {
        padding: 50px 5% 45px;
    }

    .msp-review-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .msp-review-card {
        padding: 20px 17px;
    }

    .msp-review-card:last-child {
        grid-column: 1 / -1;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .msp-testimonials {
        padding: 35px 6% 35px;
    }

    .msp-testimonials-heading {
        margin-bottom: 30px;
    }

    .msp-testimonials-label {
        min-height: 36px;
        padding: 7px 17px;
        font-size: 14px;
    }

    .msp-testimonials-heading h2 {
        margin: 25px 0 18px;
        font-size: clamp(27px, 7vw, 35px);
        line-height: 1.35;
        letter-spacing: -0.4px;
    }

    .msp-testimonials-intro {
        font-size: 14px;
        line-height: 1.65;
    }

    .msp-review-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .msp-review-card,
    .msp-review-card:last-child {
        grid-column: auto;
        padding: 20px;
        border-radius: 16px;
    }

    .msp-review-avatar {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        font-size: 18px;
    }

    .msp-review-member h3 {
        font-size: 15px;
    }

    .msp-review-stars {
        margin-top: 17px;
        font-size: 17px;
    }

    .msp-review-text {
        margin-top: 11px;
        font-size: 14px;
        line-height: 1.7;
    }

    .msp-review-tag {
        margin-top: 17px;
    }

    .msp-reviews-footer {
        margin-top: 25px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msp-review-card {
        transition: none;
    }
}


/* =====================================
   TESTIMONIALS LABEL — ROTATING WHITE LINE
===================================== */

.msp-testimonials-label {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: none !important;
    background: #03020b !important;
    z-index: 0;
}

/* Rotating gradient creates the moving white highlight */
.msp-testimonials-label::before {
    content: "";
    position: absolute;
    inset: -150%;
    z-index: -2;

    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 265deg,
        #ffffff 300deg,
        #b9adff 318deg,
        transparent 340deg,
        transparent 360deg
    );

    animation: mspTestimonialRingRotate 3s linear infinite;
}

/* Inner background leaves only a thin outline visible */
.msp-testimonials-label::after {
    content: "";
    position: absolute;
    inset: 2px;
    z-index: -1;

    border-radius: inherit;
    background: #03020b;
}

/* Keep the label text above the animated ring */
.msp-testimonials-label {
    color: #ffffff;
}

/* ROTATION */
@keyframes mspTestimonialRingRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* =====================================
   TESTIMONIALS HEADING — BOLD
===================================== */

.msp-testimonials-heading h2 {
    font-weight: 700 !important;
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .msp-testimonials-label::before {
        animation: none;
    }
}


/* =====================================
   ANIMATED TESTIMONIAL STARS
===================================== */

.msp-review-stars {
    display: inline-block;
    transform-origin: center;
    animation: mspStarsGlow 2s ease-in-out infinite;
}

.msp-review-stars {
    background: linear-gradient(
        90deg,
        #ffc857 0%,
        #fff5c2 45%,
        #ffc857 70%,
        #ffdf80 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
        mspStarsShine 3s linear infinite,
        mspStarsGlow 2s ease-in-out infinite;
}

@keyframes mspStarsShine {
    from {
        background-position: 200% center;
    }
    to {
        background-position: -200% center;
    }
}

@keyframes mspStarsGlow {
    0%, 100% {
        filter: drop-shadow(0 0 1px rgba(255, 200, 87, 0.2));
        transform: scale(1);
    }
    50% {
        filter: drop-shadow(0 0 5px rgba(255, 200, 87, 0.65));
        transform: scale(1.04);
    }
}

/* =====================================
   ANIMATED MEMBER EXPERIENCE LABEL
===================================== */

.msp-review-tag {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background: linear-gradient(
        110deg,
        rgba(111, 82, 255, 0.08),
        rgba(143, 119, 255, 0.22),
        rgba(111, 82, 255, 0.08)
    );
    background-size: 200% 100%;

    border-color: rgba(143, 119, 255, 0.55);

    animation:
        mspMemberTagShine 3s ease-in-out infinite,
        mspMemberTagPulse 2.5s ease-in-out infinite;
}

.msp-review-tag::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -70%;
    width: 35%;
    height: 200%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.45),
        transparent
    );

    transform: rotate(20deg);
    pointer-events: none;

    animation: mspMemberTagSweep 3.5s ease-in-out infinite;
}

@keyframes mspMemberTagShine {
    0%, 100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

@keyframes mspMemberTagPulse {
    0%, 100% {
        box-shadow: 0 0 0 rgba(126, 98, 255, 0);
    }
    50% {
        box-shadow: 0 0 12px rgba(126, 98, 255, 0.22);
    }
}

@keyframes mspMemberTagSweep {
    0%, 15% {
        left: -70%;
    }
    55%, 100% {
        left: 150%;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .msp-review-stars,
    .msp-review-tag,
    .msp-review-tag::after {
        animation: none !important;
    }
}


/* =====================================
   VIEW ALL REVIEWS — ANIMATED BUTTON
===================================== */

.msp-view-reviews-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 38px auto 10px;
    padding: 10px 0;
}

.msp-view-reviews-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 76px;
    padding: 18px 46px;

    border: 2px solid #796aff;
    border-radius: 60px;

    background: linear-gradient(
        110deg,
        #4930f6,
        #6657ff,
        #4930f6
    );
    background-size: 200% 100%;

    color: #fff;
    text-decoration: none;
    text-align: center;
    font-size: clamp(20px, 2.5vw, 30px);
    font-weight: 800;

    box-shadow:
        0 7px 0 #3020bd,
        0 0 20px rgba(100, 75, 255, 0.35),
        inset 0 2px 4px rgba(255, 255, 255, 0.25);

    animation:
        mspViewReviewsGlow 2.5s ease-in-out infinite,
        mspViewReviewsGradient 4s linear infinite;
    
    transition: transform .25s ease, box-shadow .25s ease;
}

/* OUTWARD WAVES */

.msp-view-reviews-btn::before,
.msp-view-reviews-btn::after {
    content: "";
    position: absolute;
    inset: -5px;
    z-index: -1;
    border: 2px solid rgba(145, 125, 255, 0.8);
    border-radius: inherit;
    pointer-events: none;

    animation: mspViewReviewsWave 2.4s ease-out infinite;
}

.msp-view-reviews-btn::after {
    animation-delay: 1.2s;
    border-color: rgba(220, 212, 255, 0.75);
}

/* MOVING SHINE ACROSS THE BUTTON */

.msp-view-reviews-btn span {
    position: relative;
    z-index: 1;
}

.msp-view-reviews-btn span::after {
    content: "";
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -45%;
    width: 25%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );

    transform: skewX(-20deg);
    pointer-events: none;

    animation: mspViewReviewsShine 3.5s ease-in-out infinite;
}

/* ANIMATION KEYFRAMES */

@keyframes mspViewReviewsGlow {
    0%, 100% {
        box-shadow:
            0 7px 0 #3020bd,
            0 0 15px rgba(100, 75, 255, 0.25),
            inset 0 2px 4px rgba(255, 255, 255, 0.2);
        transform: translateY(0);
    }

    50% {
        box-shadow:
            0 7px 0 #3020bd,
            0 0 30px rgba(120, 95, 255, 0.6),
            inset 0 2px 5px rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
    }
}

@keyframes mspViewReviewsGradient {
    from { background-position: 0% center; }
    to   { background-position: 200% center; }
}

@keyframes mspViewReviewsWave {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.18, 1.45);
        opacity: 0;
    }
}

@keyframes mspViewReviewsShine {
    0%, 15% { left: -45%; }
    65%, 100% { left: 130%; }
}

/* HOVER */

.msp-view-reviews-btn:hover {
    animation-play-state: paused;
    transform: translateY(-3px);
    box-shadow:
        0 10px 0 #3020bd,
        0 0 35px rgba(120, 95, 255, 0.7);
}

/* MOBILE */

@media (max-width: 600px) {
    .msp-view-reviews-wrap {
        margin-top: 28px;
    }

    .msp-view-reviews-btn {
        min-height: 56px;
        padding: 14px 28px;
        font-size: 19px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .msp-view-reviews-btn,
    .msp-view-reviews-btn::before,
    .msp-view-reviews-btn::after,
    .msp-view-reviews-btn span::after {
        animation: none !important;
    }
}


/* =====================================
   MYSOCIALPAY — LATEST NEWS & ARTICLES
===================================== */

.msp-news-section {
    width: 100%;
    padding: 65px 5% 70px;
    background: #03020b;
    color: #fff;
    overflow: hidden;
}

.msp-news-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.msp-news-heading {
    max-width: 1100px;
    margin: 0 auto 45px;
    text-align: center;
}

.msp-news-heading h2 {
    margin: 0 0 28px;
    color: #fff;

    font-size: clamp(32px, 5.5vw, 62px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.7px;
}

.msp-news-heading p {
    max-width: 1000px;
    margin: 0 auto;

    color: #d6d3e0;
    font-size: clamp(16px, 2.3vw, 25px);
    font-weight: 400;
    line-height: 1.65;
}

/* ARTICLE GRID */

.msp-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.msp-news-card {
    min-width: 0;
    padding: 25px 22px;

    background: linear-gradient(145deg, #11101e, #080710);
    border: 1px solid rgba(143, 119, 255, 0.2);
    border-radius: 18px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.msp-news-card:hover {
    transform: translateY(-5px);
    border-color: rgba(143, 119, 255, 0.65);
    box-shadow: 0 15px 35px rgba(75, 49, 230, 0.14);
}

/* ICONS */

.msp-news-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 15px;
    font-size: 28px;
    font-weight: 700;
}

.msp-news-purple {
    color: #c1b5ff;
    background: rgba(111, 82, 255, 0.17);
    border: 1px solid rgba(143, 119, 255, 0.25);
}

.msp-news-blue {
    color: #83caff;
    background: rgba(35, 142, 255, 0.13);
    border: 1px solid rgba(70, 165, 255, 0.25);
}

.msp-news-pink {
    color: #ff9edb;
    background: rgba(233, 69, 163, 0.12);
    border: 1px solid rgba(233, 69, 163, 0.25);
}

/* ARTICLE TEXT */

.msp-news-category {
    display: inline-block;
    margin-bottom: 12px;

    color: #a99aff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.msp-news-content h3 {
    margin: 0 0 14px;
    color: #fff;

    font-size: 21px;
    font-weight: 700;
    line-height: 1.4;
}

.msp-news-content p {
    margin: 0;

    color: #c6c2d3;
    font-size: 14px;
    line-height: 1.75;
}

.msp-news-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 23px;
    color: #b4a5ff;

    font-size: 14px;
    font-weight: 700;
    text-decoration: none;

    transition: color .2s ease, gap .2s ease;
}

.msp-news-link:hover {
    gap: 14px;
    color: #fff;
}

/* TABLET */

@media (max-width: 900px) {
    .msp-news-section {
        padding: 50px 5% 55px;
    }

    .msp-news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 15px;
    }

    .msp-news-card:last-child {
        grid-column: 1 / -1;
    }

    .msp-news-content h3 {
        font-size: 19px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .msp-news-section {
        padding: 38px 6% 45px;
    }

    .msp-news-heading {
        margin-bottom: 30px;
    }

    .msp-news-heading h2 {
        margin-bottom: 18px;
        font-size: clamp(29px, 7.5vw, 36px);
        line-height: 1.3;
        letter-spacing: -0.4px;
    }

    .msp-news-heading p {
        font-size: 15px;
        line-height: 1.65;
    }

    .msp-news-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .msp-news-card,
    .msp-news-card:last-child {
        grid-column: auto;
        padding: 21px;
        border-radius: 16px;
    }

    .msp-news-icon {
        width: 45px;
        height: 45px;
        margin-bottom: 17px;
        font-size: 24px;
    }

    .msp-news-content h3 {
        font-size: 18px;
    }

    .msp-news-content p {
        font-size: 13px;
    }

    .msp-news-link {
        margin-top: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msp-news-card,
    .msp-news-link {
        transition: none;
    }
}


/* =====================================
   MYSOCIALPAY — FAQ SECTION
===================================== */

.msp-faq-section {
    width: 100%;
    padding: 65px 5% 75px;
    background: #000;
    color: #fff;
}

.msp-faq-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.msp-faq-heading {
    margin-bottom: 45px;
}

.msp-faq-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 9px 24px;
    border: 1.5px solid transparent;
    border-radius: 50px;

    background:
        linear-gradient(#000, #000) padding-box,
        linear-gradient(110deg, #4930f6, #e8e4ff) border-box;

    color: #fff;
    font-size: clamp(15px, 2vw, 21px);
}

.msp-faq-heading h2 {
    margin: 35px 0 25px;

    color: #fff;
    font-size: clamp(34px, 5vw, 62px);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.7px;
}

.msp-faq-heading > p {
    max-width: 1000px;
    color: #d7d5df;
    font-size: clamp(16px, 2.2vw, 25px);
    line-height: 1.65;
}

/* FAQ ITEMS */

.msp-faq-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.msp-faq-item {
    min-width: 0;
    overflow: hidden;

    background: #000;
    border: 1px solid #292833;
    border-radius: 24px;

    transition:
        border-color .25s ease,
        box-shadow .25s ease;
}

.msp-faq-item:hover,
.msp-faq-item[open] {
    border-color: rgba(135, 112, 255, 0.48);
}

.msp-faq-item[open] {
    box-shadow: 0 8px 30px rgba(76, 49, 220, 0.06);
}

/* QUESTION ROW */

.msp-faq-item summary {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;

    padding: 28px 30px;
    color: #fff;

    font-size: clamp(17px, 2.2vw, 25px);
    font-weight: 800;
    line-height: 1.5;

    cursor: pointer;
    list-style: none;
}

.msp-faq-item summary::-webkit-details-marker {
    display: none;
}

.msp-faq-item summary::marker {
    content: "";
}

/* CUSTOM DROPDOWN ARROW */

.msp-faq-arrow {
    position: relative;
    width: 0;
    height: 0;
    flex: 0 0 0;

    margin-top: 9px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid #fff;

    transition: transform .25s ease;
}

.msp-faq-item[open] .msp-faq-arrow {
    transform: rotate(180deg);
}

/* ANSWER */

.msp-faq-answer {
    padding: 0 30px 30px;
    color: #e0dee8;

    font-size: clamp(15px, 1.9vw, 21px);
    line-height: 1.75;
    overflow-wrap: anywhere;

    animation: mspFaqReveal .25s ease;
}

.msp-faq-answer p {
    margin: 0 0 18px;
}

.msp-faq-answer p:last-child {
    margin-bottom: 0;
}

.msp-faq-answer ul,
.msp-faq-answer ol {
    padding-left: 25px;
    margin: 8px 0 20px;
}

.msp-faq-answer li {
    margin-bottom: 7px;
    padding-left: 3px;
}

.msp-faq-answer strong {
    color: #fff;
}

.msp-faq-answer h3 {
    margin: 25px 0 15px;
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
}

.msp-faq-note {
    color: #aaa5bb;
    font-size: 13px;
    line-height: 1.65;
}

/* FEE LIST */

.msp-faq-fees {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 25px;

    margin: 20px 0;
    border-top: 1px solid #292833;
}

.msp-faq-fees > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 13px 0;
    border-bottom: 1px solid #292833;

    font-size: 15px;
}

.msp-faq-fees span {
    color: #d7d3e2;
}

.msp-faq-fees strong {
    color: #b6a6ff;
    text-align: right;
    white-space: nowrap;
}

@keyframes mspFaqReveal {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* TABLET */

@media (max-width: 800px) {
    .msp-faq-section {
        padding: 50px 5% 55px;
    }

    .msp-faq-item {
        border-radius: 20px;
    }

    .msp-faq-item summary {
        padding: 23px 24px;
    }

    .msp-faq-answer {
        padding: 0 24px 25px;
    }
}

/* MOBILE */

@media (max-width: 600px) {
    .msp-faq-section {
        padding: 38px 5% 45px;
    }

    .msp-faq-heading {
        margin-bottom: 30px;
    }

    .msp-faq-label {
        min-height: 36px;
        padding: 7px 15px;
        font-size: 13px;
    }

    .msp-faq-heading h2 {
        margin: 27px 0 20px;
        font-size: clamp(29px, 7.5vw, 38px);
        line-height: 1.3;
        letter-spacing: -0.4px;
    }

    .msp-faq-break {
        display: none;
    }

    .msp-faq-heading > p {
        font-size: 15px;
        line-height: 1.65;
    }

    .msp-faq-list {
        gap: 14px;
    }

    .msp-faq-item {
        border-radius: 17px;
    }

    .msp-faq-item summary {
        gap: 12px;
        padding: 19px 17px;
        font-size: 16px;
        line-height: 1.5;
    }

    .msp-faq-arrow {
        margin-top: 7px;
        border-left-width: 7px;
        border-right-width: 7px;
        border-top-width: 9px;
    }

    .msp-faq-answer {
        padding: 0 17px 21px;
        font-size: 14px;
        line-height: 1.75;
    }

    .msp-faq-answer ul,
    .msp-faq-answer ol {
        padding-left: 20px;
    }

    .msp-faq-answer h3 {
        font-size: 16px;
    }

    .msp-faq-fees {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .msp-faq-fees > div {
        font-size: 14px;
    }
}

/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {
    .msp-faq-item,
    .msp-faq-arrow {
        transition: none;
    }

    .msp-faq-answer {
        animation: none;
    }
}



/* =====================================
   MYSOCIALPAY ENDING SECTION
===================================== */

.msp-ending {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    width: calc(100% - 52px);
    max-width: 1250px;
    margin: 40px auto 0;
    padding: 70px 35px 62px;

    color: #fff;
    text-align: center;

    background:
        radial-gradient(ellipse at 50% 0%,
            rgba(38, 100, 88, .24), transparent 60%),
        #091831;

    border: 1px solid rgba(54, 220, 163, .22);
    border-radius: 42px;
}

.msp-ending-glow {
    position: absolute;
    z-index: -1;
    top: -100px;
    left: 50%;

    width: 420px;
    height: 260px;
    border-radius: 50%;

    background: rgba(50, 230, 160, .10);
    filter: blur(85px);
    transform: translateX(-50%);
}

.msp-ending-content {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

.msp-ending-eyebrow {
    margin-bottom: 22px;

    color: #36e5a1;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 3px;
}

.msp-ending h2 {
    margin: 0 0 20px;

    color: #fff;
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -1.5px;
}

.msp-ending h2 span {
    color: #ffd43b;
}

.msp-ending-content > p {
    max-width: 850px;
    margin: 0 auto;

    color: #8996af;
    font-size: 17px;
    line-height: 1.75;
}

.msp-ending-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;

    margin-top: 42px;
}

.msp-ending-primary,
.msp-ending-secondary {
    min-height: 66px;
    padding: 19px 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 850;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.msp-ending-primary {
    color: #071629;
    background: linear-gradient(105deg, #38e29b, #ffe34d);
    border: 1px solid #f9dc43;
    box-shadow: 0 5px 0 rgba(225, 199, 47, .18);
}

.msp-ending-primary span {
    font-size: 23px;
    transition: transform .25s ease;
}

.msp-ending-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 9px 28px rgba(53, 224, 155, .2);
}

.msp-ending-primary:hover span {
    transform: translateX(5px);
}

.msp-ending-secondary {
    color: #f3f6ff;
    background: rgba(255, 255, 255, .015);
    border: 2px solid #33435e;
}

.msp-ending-secondary:hover {
    transform: translateY(-3px);
    border-color: #36dfa0;
}

.msp-ending-benefits {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;

    margin-top: 35px;
    color: #687994;
    font-size: 13px;
}

.msp-ending-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.msp-ending-benefits i,
.msp-status-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;

    display: inline-block;
    border-radius: 50%;
    background: #37e6a1;
    box-shadow: 0 0 12px rgba(55, 230, 161, .45);
}

/* =====================================
   MYSOCIALPAY FOOTER
===================================== */

.msp-new-footer {
    width: 100%;
    padding: 65px 5% 28px;

    color: #fff;
    background: #06132d;
    border-top: 1px solid rgba(54, 220, 163, .13);
}

.msp-footer-brand-area {
    max-width: 760px;
    margin: 0 auto 65px;
    text-align: center;
}

.msp-footer-name {
    display: inline-block;
    color: #fff;

    font-size: 42px;
    font-weight: 950;
    letter-spacing: -2px;
    text-decoration: none;
}

.msp-footer-name span {
    color: #ffd43b;
}

.msp-footer-name b {
    color: #36dfa0;
}

.msp-footer-brand-area > p {
    max-width: 700px;
    margin: 18px auto;

    color: #697995;
    font-size: 15px;
    line-height: 1.8;
}

.msp-network-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    margin-top: 22px;
    color: #36dfa0;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2px;
}

.msp-status-dot {
    animation: mspStatusPulse 1.8s ease-in-out infinite;
}

@keyframes mspStatusPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .55;
        transform: scale(.78);
    }
}

.msp-footer-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px;

    max-width: 1200px;
    margin: 0 auto;
}

.msp-footer-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
}

.msp-footer-group h3 {
    margin: 0 0 6px;

    color: #ffd43b;
    font-size: 16px;
    font-weight: 950;
    letter-spacing: 1.4px;
}

.msp-footer-group a {
    color: #687995;
    font-size: 14px;
    line-height: 1.5;
    text-decoration: none;
    overflow-wrap: anywhere;

    transition: color .2s ease;
}

.msp-footer-group a:hover {
    color: #36dfa0;
}

.msp-footer-rule {
    max-width: 1200px;
    height: 1px;
    margin: 55px auto 25px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(54, 220, 163, .2),
        transparent
    );
}

.msp-footer-copyright {
    text-align: center;
}

.msp-footer-copyright p {
    margin: 0;
    color: #566580;
    font-size: 13px;
    line-height: 1.8;
}

.msp-footer-copyright strong {
    color: #ffd43b;
}

.msp-footer-socials {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;

    margin-top: 25px;
}

.msp-footer-socials a {
    width: 48px;
    height: 48px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 2px solid #263754;
    border-radius: 50%;

    color: #a0abc0;
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;

    transition:
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.msp-footer-socials a:hover {
    color: #36dfa0;
    border-color: #36dfa0;
    transform: translateY(-3px);
}

/* TABLET */

@media (max-width: 750px) {
    .msp-ending {
        width: calc(100% - 32px);
        padding: 55px 22px;
        border-radius: 30px;
    }

    .msp-ending h2 {
        letter-spacing: -.7px;
    }

    .msp-footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 25px;
    }

    .msp-footer-brand-area {
        margin-bottom: 50px;
    }
}

/* MOBILE */

@media (max-width: 480px) {
    .msp-ending {
        width: calc(100% - 24px);
        margin-top: 25px;
        padding: 43px 17px;
        border-radius: 24px;
    }

    .msp-ending-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .msp-ending h2 {
        font-size: 34px;
        line-height: 1.25;
    }

    .msp-ending-content > p {
        font-size: 14px;
    }

    .msp-ending-buttons {
        gap: 13px;
        margin-top: 30px;
    }

    .msp-ending-primary,
    .msp-ending-secondary {
        width: 100%;
        min-height: 57px;
        padding: 15px 20px;
        font-size: 14px;
    }

    .msp-ending-benefits {
        gap: 13px;
        margin-top: 27px;
        font-size: 11px;
    }

    .msp-new-footer {
        padding: 45px 7% 25px;
    }

    .msp-footer-name {
        font-size: 35px;
    }

    .msp-footer-brand-area > p {
        font-size: 13px;
    }

    .msp-footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 35px 18px;
    }

    .msp-footer-group {
        gap: 14px;
    }

    .msp-footer-group h3 {
        font-size: 13px;
        letter-spacing: 1px;
    }

    .msp-footer-group a {
        font-size: 12px;
    }

    .msp-footer-rule {
        margin-top: 40px;
    }

    .msp-footer-socials a {
        width: 43px;
        height: 43px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .msp-status-dot {
        animation: none;
    }

    .msp-ending-primary,
    .msp-ending-secondary,
    .msp-ending-primary span,
    .msp-footer-socials a {
        transition: none;
    }
}


/* ==========================================
   MYSOCIALPAY CTA — REFERENCE-MATCHING STYLE
========================================== */

.msp-ending {
    width: calc(100% - 52px);
    max-width: 1250px;
    margin: 40px auto 0;
    padding: 75px 35px 65px;

    background:
        radial-gradient(
            ellipse at 50% 0%,
            rgba(23, 78, 111, 0.20),
            transparent 65%
        ),
        #0a1935;

    border: 2px solid rgba(49, 218, 158, 0.24);
    border-radius: 42px;
    text-align: center;
    color: #fff;
}

.msp-ending-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

/* GREEN EYEBROW */

.msp-ending-eyebrow {
    margin-bottom: 25px;
    color: #38e5a2;

    font-size: 14px;
    font-weight: 900;
    letter-spacing: 3.5px;
}

/* BIG, BOLD HEADING */

.msp-ending h2 {
    margin: 0 0 24px;

    color: #fff;
    font-size: clamp(36px, 5.2vw, 64px);
    font-weight: 900 !important;
    line-height: 1.15;
    letter-spacing: -1.8px;
}

.msp-ending h2 span {
    color: #ffd43b;
    font-weight: 900 !important;
}

/* SUBTITLE */

.msp-ending-content > p {
    max-width: 1000px;
    margin: 0 auto;

    color: #8492ac;
    font-size: clamp(15px, 2vw, 24px);
    line-height: 1.65;
}

/* BOTH BUTTONS ON ONE ROW */

.msp-ending-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 22px;

    margin-top: 42px;
}

.msp-ending-primary,
.msp-ending-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    min-height: 76px;
    padding: 20px 32px;
    border-radius: 60px;

    white-space: nowrap;
    text-decoration: none;
    font-size: clamp(13px, 1.6vw, 19px);
    font-weight: 900;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* PRIMARY GRADIENT BUTTON */

.msp-ending-primary {
    color: #06152c;

    background: linear-gradient(
        105deg,
        #39e29b 0%,
        #9de76b 52%,
        #ffdf45 100%
    );

    border: 3px solid #ffda3d;
    box-shadow: 0 0 22px rgba(55, 226, 157, .10);

    animation: mspCtaButtonPulse 2.8s ease-in-out infinite;
}

.msp-ending-primary span {
    font-size: 27px;
    transition: transform .25s ease;
}

.msp-ending-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(55, 226, 157, .25);
}

.msp-ending-primary:hover span {
    transform: translateX(6px);
}

/* SECONDARY OUTLINED BUTTON */

.msp-ending-secondary {
    color: #f4f6ff;
    background: rgba(255, 255, 255, .015);
    border: 2px solid #34445f;
}

.msp-ending-secondary:hover {
    transform: translateY(-3px);
    border-color: #38dfa0;
    box-shadow: 0 0 20px rgba(56, 223, 160, .08);
}

@keyframes mspCtaButtonPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(55, 226, 157, .08);
    }

    50% {
        box-shadow: 0 0 24px 2px rgba(55, 226, 157, .16);
    }
}

/* LIVE BENEFIT DOTS */

.msp-ending-benefits {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 23px;

    margin-top: 35px;
    color: #77859f;
    font-size: 15px;
}

.msp-ending-benefits span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.msp-ending-benefits i {
    position: relative;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;

    border-radius: 50%;
    background: #39e5a2;
    box-shadow: 0 0 10px rgba(57, 229, 162, .6);

    animation: mspLiveDot 1.5s ease-out infinite;
}

.msp-ending-benefits span:nth-child(2) i {
    animation-delay: .3s;
}

.msp-ending-benefits span:nth-child(3) i {
    animation-delay: .6s;
}

.msp-ending-benefits i::after {
    content: "";
    position: absolute;
    inset: -5px;

    border: 1px solid rgba(57, 229, 162, .65);
    border-radius: 50%;

    animation: mspLiveRing 1.5s ease-out infinite;
}

.msp-ending-benefits span:nth-child(2) i::after {
    animation-delay: .3s;
}

.msp-ending-benefits span:nth-child(3) i::after {
    animation-delay: .6s;
}

@keyframes mspLiveDot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .65;
        transform: scale(.8);
    }
}

@keyframes mspLiveRing {
    0% {
        transform: scale(.65);
        opacity: .8;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* TABLET */

@media (max-width: 750px) {
    .msp-ending {
        width: calc(100% - 32px);
        padding: 55px 22px;
        border-radius: 30px;
    }

    .msp-ending-buttons {
        gap: 13px;
    }

    .msp-ending-primary,
    .msp-ending-secondary {
        min-height: 62px;
        padding: 16px 20px;
        font-size: 13px;
    }

    .msp-ending-benefits {
        gap: 15px;
        font-size: 12px;
    }
}

/* SMALL PHONES */

@media (max-width: 480px) {
    .msp-ending {
        width: calc(100% - 24px);
        padding: 43px 14px;
        border-radius: 24px;
    }

    .msp-ending-eyebrow {
        font-size: 10px;
        letter-spacing: 2px;
    }

    .msp-ending h2 {
        font-size: clamp(31px, 8.5vw, 39px);
        letter-spacing: -.8px;
    }

    .msp-ending-content > p {
        font-size: 14px;
    }

    .msp-ending-buttons {
        gap: 8px;
        margin-top: 28px;
    }

    .msp-ending-primary,
    .msp-ending-secondary {
        flex: 1 1 0;
        min-width: 0;
        min-height: 57px;
        padding: 12px 8px;
        gap: 5px;

        font-size: 11px;
        white-space: normal;
        line-height: 1.35;
    }

    .msp-ending-primary span {
        font-size: 19px;
    }

    .msp-ending-benefits {
        gap: 12px;
        margin-top: 26px;
        font-size: 10px;
    }

    .msp-ending-benefits i {
        width: 9px;
        height: 9px;
        flex-basis: 9px;
    }

    .msp-ending-benefits span {
        gap: 7px;
    }
}

/* RESPECT REDUCED-MOTION PREFERENCES */

@media (prefers-reduced-motion: reduce) {
    .msp-ending-primary,
    .msp-ending-benefits i,
    .msp-ending-benefits i::after {
        animation: none !important;
    }
}


/* ==========================================
   FINAL CTA — PRECISE LAYOUT CORRECTION
========================================== */

.msp-ending {
    box-sizing: border-box;
    width: calc(100% - 52px);
    max-width: 1250px;
    min-height: 0;
    margin: 40px auto 0;
    padding: 54px 30px 48px;
    border-radius: 40px;
}

.msp-ending *,
.msp-ending *::before,
.msp-ending *::after {
    box-sizing: border-box;
}

.msp-ending-content {
    max-width: 1100px;
}

/* KEEP THE HEADING ON ONE LINE WHEN SPACE ALLOWS */
.msp-ending h2 {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto 20px;

    font-size: clamp(32px, 4.6vw, 58px);
    font-weight: 900 !important;
    line-height: 1.2;
    letter-spacing: -1.5px;

    text-wrap: balance;
}

.msp-ending h2 span {
    color: #ffd43b;
    font-weight: 900 !important;
}

/* COMPACT SUBTITLE */
.msp-ending-content > p {
    max-width: 1000px;
    margin: 0 auto;
    font-size: clamp(15px, 1.9vw, 22px);
    line-height: 1.55;
}

/* BUTTONS SIDE BY SIDE */
.msp-ending-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 20px;

    width: 100%;
    margin: 34px auto 0;
}

.msp-ending-primary,
.msp-ending-secondary {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    min-height: 62px;
    padding: 16px 27px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    white-space: nowrap;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.2;
}

.msp-ending-primary {
    background: linear-gradient(
        105deg,
        #39e29b,
        #9de76b 52%,
        #ffdf45
    );
    border: 3px solid #ffda3d;
    color: #06152c;
}

.msp-ending-secondary {
    background: transparent;
    border: 2px solid #34445f;
    color: #fff;
}

/* TIGHTER LIVE-BENEFIT ROW */
.msp-ending-benefits {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;

    margin-top: 27px;
    font-size: 13px;
}

/* MEDIUM SCREENS */
@media (max-width: 750px) {
    .msp-ending {
        width: calc(100% - 32px);
        padding: 44px 22px 38px;
        border-radius: 30px;
    }

    .msp-ending h2 {
        font-size: clamp(30px, 5.2vw, 40px);
        letter-spacing: -.7px;
    }

    .msp-ending-buttons {
        gap: 12px;
        margin-top: 28px;
    }

    .msp-ending-primary,
    .msp-ending-secondary {
        padding: 15px 17px;
        min-height: 56px;
        font-size: 13px;
    }

    .msp-ending-benefits {
        gap: 14px;
        font-size: 11px;
    }
}

/* SMALL PHONES */
@media (max-width: 480px) {
    .msp-ending {
        width: calc(100% - 24px);
        padding: 38px 14px 32px;
        border-radius: 24px;
    }

    .msp-ending-eyebrow {
        margin-bottom: 18px;
        font-size: 10px;
        letter-spacing: 1.8px;
    }

    .msp-ending h2 {
        font-size: clamp(27px, 7.2vw, 34px);
        line-height: 1.2;
        letter-spacing: -.5px;
    }

    .msp-ending-content > p {
        font-size: 13px;
        line-height: 1.6;
    }

    .msp-ending-buttons {
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 25px;
    }

    .msp-ending-primary,
    .msp-ending-secondary {
        flex: 1 1 0;
        padding: 13px 7px;
        min-height: 52px;
        font-size: 10px;
        gap: 4px;
    }

    .msp-ending-primary span {
        font-size: 17px;
    }

    .msp-ending-benefits {
        gap: 12px;
        margin-top: 23px;
        font-size: 10px;
    }
}


/* ==========================================
   MYSOCIALPAY CTA — BOLD FONTS + ANIMATED BUTTONS
========================================== */

/* Make all CTA text bold */
.msp-ending,
.msp-ending * {
    font-weight: 700;
}

.msp-ending-eyebrow {
    font-weight: 900 !important;
    letter-spacing: 3px;
}

.msp-ending h2,
.msp-ending h2 span {
    font-weight: 900 !important;
}

.msp-ending-content > p {
    font-weight: 700 !important;
}

.msp-ending-primary,
.msp-ending-secondary {
    font-weight: 900 !important;
    position: relative;
    overflow: visible;
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

/* Gradient primary button: subtle pulse */
.msp-ending-primary {
    animation: mspPrimaryPulse 2.2s ease-in-out infinite;
    transform-origin: center;
}

/* Outward waves around primary button */
.msp-ending-primary::before,
.msp-ending-primary::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: inherit;
    border: 2px solid rgba(57, 226, 157, .65);
    pointer-events: none;
    animation: mspButtonWave 2.4s ease-out infinite;
}

.msp-ending-primary::after {
    animation-delay: 1.2s;
}

@keyframes mspPrimaryPulse {
    0%, 100% {
        box-shadow: 0 7px 0 rgba(210, 174, 35, .25),
                    0 0 0 rgba(57, 226, 157, 0);
    }
    50% {
        box-shadow: 0 7px 0 rgba(210, 174, 35, .25),
                    0 0 23px rgba(57, 226, 157, .24);
    }
}

@keyframes mspButtonWave {
    0% {
        transform: scale(1);
        opacity: .7;
    }
    100% {
        transform: scale(1.12, 1.3);
        opacity: 0;
    }
}

/* Hover movement */
.msp-ending-primary:hover,
.msp-ending-secondary:hover {
    transform: translateY(-4px);
}

.msp-ending-primary:hover {
    box-shadow: 0 10px 28px rgba(57, 226, 157, .28);
}

.msp-ending-secondary:hover {
    border-color: #39e29b;
    box-shadow: 0 0 20px rgba(57, 226, 157, .13);
}

/* Animate the arrow */
.msp-ending-primary span {
    display: inline-block;
    animation: mspArrowMove 1.3s ease-in-out infinite;
}

@keyframes mspArrowMove {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
}

/* Make benefits bold and keep live dots animated */
.msp-ending-benefits,
.msp-ending-benefits span {
    font-weight: 700 !important;
}

.msp-ending-benefits i {
    animation: mspBenefitPulse 1.4s ease-in-out infinite;
}

@keyframes mspBenefitPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: .65;
        transform: scale(.82);
    }
}

/* Accessibility: stop continuous animations if requested */
@media (prefers-reduced-motion: reduce) {
    .msp-ending-primary,
    .msp-ending-primary::before,
    .msp-ending-primary::after,
    .msp-ending-primary span,
    .msp-ending-benefits i {
        animation: none !important;
    }
}


/* =====================================================
   FINAL FIX — MYSOCIALPAY CTA + FOOTER
   This block intentionally comes last to override earlier duplicate rules.
===================================================== */
.msp-ending {
    width: calc(100% - 52px) !important;
    max-width: 1250px !important;
    margin: 40px auto 0 !important;
    padding: clamp(42px, 6vw, 76px) clamp(18px, 4vw, 54px) clamp(40px, 5vw, 64px) !important;
    box-sizing: border-box !important;
    text-align: center;
    background: radial-gradient(ellipse at 50% 0%, rgba(23, 78, 111, .24), transparent 68%), #0a1935 !important;
    border: 2px solid rgba(49, 218, 158, .28) !important;
    border-radius: 42px !important;
}
.msp-ending, .msp-ending * { box-sizing: border-box; font-weight: 700; }
.msp-ending-content { width: 100%; max-width: 1100px; margin: 0 auto; }
.msp-ending-eyebrow {
    margin: 0 0 24px;
    color: #38e5a2;
    font-size: clamp(11px, 1.2vw, 16px);
    font-weight: 900 !important;
    letter-spacing: clamp(1.5px, .35vw, 3.5px);
}
.msp-ending h2 {
    width: 100%; max-width: 1100px; margin: 0 auto 22px;
    color: #fff; font-size: clamp(34px, 5.1vw, 66px);
    font-weight: 900 !important; line-height: 1.15;
    letter-spacing: -1.6px; text-wrap: balance;
}
.msp-ending h2 span { color: #ffd43b !important; font-weight: 900 !important; }
.msp-ending-content > p {
    max-width: 1050px; margin: 0 auto; color: #8492ac;
    font-size: clamp(15px, 2vw, 24px); font-weight: 700 !important; line-height: 1.6;
}
.msp-ending-buttons {
    display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
    align-items: stretch; justify-content: center; gap: clamp(10px, 2vw, 24px);
    width: 100%; margin: clamp(28px, 3.5vw, 44px) auto 0;
}
.msp-ending-primary, .msp-ending-secondary {
    position: relative; isolation: isolate; overflow: visible !important;
    display: inline-flex !important; flex: 0 1 430px; min-width: 0;
    align-items: center; justify-content: center; gap: 12px;
    min-height: 76px; padding: 18px clamp(14px, 2.6vw, 34px);
    border-radius: 60px; white-space: nowrap; text-decoration: none;
    font-size: clamp(13px, 1.55vw, 20px); font-weight: 900 !important; line-height: 1.2;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.msp-ending-primary {
    color: #06152c !important;
    background: linear-gradient(105deg, #39e29b 0%, #9de76b 52%, #ffdf45 100%) !important;
    border: 3px solid #ffda3d !important;
    box-shadow: 0 7px 0 rgba(210,174,35,.28), 0 0 0 rgba(57,226,157,0);
    animation: mspPrimaryGlow 2.2s ease-in-out infinite, mspPrimaryShake 4s ease-in-out infinite;
    transform-origin: center;
}
.msp-ending-primary::before, .msp-ending-primary::after {
    content: ""; position: absolute; inset: -6px; z-index: -1;
    border: 2px solid rgba(57,226,157,.72); border-radius: inherit;
    pointer-events: none; animation: mspButtonWaveFinal 2.4s ease-out infinite;
}
.msp-ending-primary::after { animation-delay: 1.2s; border-color: rgba(255,218,61,.62); }
.msp-ending-primary span { display: inline-block; font-size: 1.35em; animation: mspArrowFinal 1.3s ease-in-out infinite; }
.msp-ending-secondary { color: #f4f6ff !important; background: rgba(255,255,255,.015) !important; border: 2px solid #34445f !important; }
.msp-ending-primary:hover, .msp-ending-secondary:hover { transform: translateY(-4px); }
.msp-ending-primary:hover { box-shadow: 0 10px 30px rgba(55,226,157,.28); }
.msp-ending-secondary:hover { border-color: #39e29b !important; box-shadow: 0 0 20px rgba(56,223,160,.13); }
.msp-ending-benefits {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: clamp(12px, 2vw, 25px); margin-top: 34px; color: #8492ac;
    font-size: clamp(11px, 1.25vw, 16px); font-weight: 700 !important;
}
.msp-ending-benefits span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 700 !important; }
.msp-ending-benefits i {
    position: relative; display: inline-block; width: 12px; height: 12px; flex: 0 0 12px;
    border-radius: 50%; background: #39e5a2; box-shadow: 0 0 12px rgba(57,229,162,.7);
    animation: mspLiveDotFinal 1.5s ease-in-out infinite;
}
.msp-ending-benefits span:nth-child(2) i { animation-delay: .3s; }
.msp-ending-benefits span:nth-child(3) i { animation-delay: .6s; }
.msp-ending-benefits i::after {
    content: ""; position: absolute; inset: -5px; border: 1px solid rgba(57,229,162,.7);
    border-radius: 50%; animation: mspLiveRingFinal 1.5s ease-out infinite;
}
.msp-ending-benefits span:nth-child(2) i::after { animation-delay: .3s; }
.msp-ending-benefits span:nth-child(3) i::after { animation-delay: .6s; }
@keyframes mspPrimaryGlowFinal { 0%,100% { box-shadow: 0 7px 0 rgba(210,174,35,.28),0 0 8px rgba(57,226,157,.08); } 50% { box-shadow: 0 7px 0 rgba(210,174,35,.28),0 0 26px rgba(57,226,157,.28); } }
@keyframes mspPrimaryGlow { 0%,100% { box-shadow: 0 7px 0 rgba(210,174,35,.28),0 0 8px rgba(57,226,157,.08); } 50% { box-shadow: 0 7px 0 rgba(210,174,35,.28),0 0 26px rgba(57,226,157,.28); } }
@keyframes mspPrimaryShake { 0%,82%,100% { translate: 0 0; rotate: 0deg; } 84% { translate: -2px 0; rotate: -.35deg; } 86% { translate: 2px 0; rotate: .35deg; } 88% { translate: -2px 0; rotate: -.35deg; } 90% { translate: 2px 0; rotate: .35deg; } 92% { translate: 0 0; rotate: 0deg; } }
@keyframes mspButtonWaveFinal { 0% { transform: scale(1); opacity: .72; } 100% { transform: scale(1.13,1.32); opacity: 0; } }
@keyframes mspArrowFinal { 0%,100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes mspLiveDotFinal { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .65; transform: scale(.82); } }
@keyframes mspLiveRingFinal { 0% { transform: scale(.65); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }

/* Footer: centered brand/status, three link groups on desktop, two columns on phones. */
.msp-new-footer { width: 100%; padding: 65px 5% 28px; background: #06132d !important; border-top: 1px solid rgba(54,220,163,.13); }
.msp-footer-brand-area { max-width: 760px; margin: 0 auto 65px; text-align: center; }
.msp-footer-name { font-size: clamp(34px, 4vw, 46px); font-weight: 950 !important; letter-spacing: -2px; }
.msp-footer-name span { color: #ffd43b !important; }
.msp-footer-name b { color: #36dfa0 !important; }
.msp-footer-brand-area > p { max-width: 700px; margin: 18px auto; color: #697995; font-weight: 600; font-size: 15px; line-height: 1.8; }
.msp-network-status { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; color: #36dfa0; font-size: 13px; font-weight: 900 !important; letter-spacing: 2px; }
.msp-footer-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 35px; max-width: 1200px; margin: 0 auto; }
.msp-footer-group { display: flex; flex-direction: column; align-items: flex-start; gap: 17px; }
.msp-footer-group h3 { margin: 0 0 6px; color: #ffd43b; font-size: 16px; font-weight: 950 !important; letter-spacing: 1.4px; }
.msp-footer-group a { color: #687995; font-size: 14px; line-height: 1.5; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; transition: color .2s ease; }
.msp-footer-group a:hover { color: #36dfa0; }
.msp-footer-rule { max-width: 1200px; height: 1px; margin: 55px auto 25px; background: linear-gradient(90deg,transparent,rgba(54,220,163,.2),transparent); }
.msp-footer-copyright { text-align: center; }
.msp-footer-copyright p { margin: 0; color: #566580; font-size: 13px; line-height: 1.8; }
.msp-footer-copyright strong { color: #ffd43b; }
.msp-footer-socials { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 25px; }
.msp-footer-socials a { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid #263754; border-radius: 50%; color: #a0abc0; font-size: 20px; font-weight: 800; text-decoration: none; transition: color .2s ease,border-color .2s ease,transform .2s ease; }
.msp-footer-socials a:hover { color: #36dfa0; border-color: #36dfa0; transform: translateY(-3px); }
@media (max-width: 750px) {
 .msp-ending { width: calc(100% - 32px) !important; padding: 45px 22px 40px !important; border-radius: 30px !important; }
 .msp-ending-buttons { gap: 12px; }
 .msp-ending-primary,.msp-ending-secondary { flex-basis: 0; flex-grow: 1; min-height: 60px; padding: 15px 12px; font-size: clamp(11px,1.8vw,15px); }
 .msp-ending-benefits { gap: 14px; }
 .msp-footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px 25px; }
 .msp-footer-brand-area { margin-bottom: 50px; }
}
@media (max-width: 480px) {
 .msp-ending { width: calc(100% - 24px) !important; margin-top: 25px !important; padding: 38px 13px 32px !important; border-radius: 24px !important; }
 .msp-ending-eyebrow { margin-bottom: 18px; font-size: 10px; letter-spacing: 1.5px; }
 .msp-ending h2 { font-size: clamp(27px,7.5vw,36px); line-height: 1.18; letter-spacing: -.6px; }
 .msp-ending-content > p { font-size: 13px; line-height: 1.6; }
 .msp-ending-buttons { flex-wrap: nowrap !important; gap: 8px; margin-top: 25px; }
 .msp-ending-primary,.msp-ending-secondary { flex: 1 1 0; min-width: 0; min-height: 52px; padding: 12px 5px; gap: 4px; font-size: clamp(9px,2.6vw,12px); white-space: normal; text-align: center; }
 .msp-ending-primary span { font-size: 16px; }
 .msp-ending-benefits { gap: 10px 13px; margin-top: 24px; font-size: 10px; }
 .msp-ending-benefits span { gap: 6px; }
 .msp-ending-benefits i { width: 9px; height: 9px; flex-basis: 9px; }
 .msp-new-footer { padding: 45px 7% 25px; }
 .msp-footer-name { font-size: 35px; }
 .msp-footer-brand-area > p { font-size: 13px; }
 .msp-footer-links { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 35px 18px; }
 .msp-footer-group { gap: 14px; }
 .msp-footer-group h3 { font-size: 13px; letter-spacing: 1px; }
 .msp-footer-group a { font-size: 12px; }
 .msp-footer-rule { margin-top: 40px; }
 .msp-footer-socials a { width: 43px; height: 43px; }
}
@media (prefers-reduced-motion: reduce) {
 .msp-ending-primary,.msp-ending-primary::before,.msp-ending-primary::after,.msp-ending-primary span,.msp-ending-benefits i,.msp-ending-benefits i::after,.msp-status-dot { animation: none !important; }
}


/* FORCE THE CTA HEADING TO BE EXTRA BOLD */
.msp-ending h2,
.msp-ending h2 span {
    font-family: inherit !important;
    font-weight: 900 !important;
    -webkit-text-stroke: 1.2px currentColor !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

/* Keep Earning? yellow and bold */
.msp-ending h2 span {
    color: #ffd43b !important;
    -webkit-text-stroke: 1.2px #ffd43b !important;
}

/* Keep the rest of the CTA text bold too */
.msp-ending .msp-ending-eyebrow,
.msp-ending .msp-ending-content > p,
.msp-ending .msp-ending-primary,
.msp-ending .msp-ending-secondary,
.msp-ending .msp-ending-benefits {
    font-weight: 700 !important;
}

/* Make button labels extra bold */
.msp-ending .msp-ending-primary,
.msp-ending .msp-ending-secondary {
    font-weight: 900 !important;
}

/* Mobile heading adjustment */
@media (max-width: 600px) {
    .msp-ending h2,
    .msp-ending h2 span {
        -webkit-text-stroke: .7px currentColor !important;
    }

    .msp-ending h2 span {
        -webkit-text-stroke: .7px #ffd43b !important;
    }
}


/* Add space between CTA and footer */
.msp-ending {
    margin-bottom: 60px !important;
}

/* Slightly smaller gap on mobile */
@media (max-width: 600px) {
    .msp-ending {
        margin-bottom: 35px !important;
    }
}


/* ========================================
   MYSOCIALPAY FLOATING CHANNEL BUTTONS
======================================== */

.msp-social-float {
    position: fixed;
    left: 22px;
    bottom: 24px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.msp-float-btn {
    position: relative;
    width: 82px;
    height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    isolation: isolate;
    animation: mspButtonShake 3s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
}

.msp-whatsapp {
    color: #fff;
    background: linear-gradient(145deg, #38f58a, #00b85c);
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px rgba(37, 211, 102, .25),
                0 8px 24px rgba(0, 0, 0, .25);
}

.msp-telegram {
    color: #fff;
    background: linear-gradient(145deg, #55d5ff, #0088cc);
    border: 4px solid #fff;
    box-shadow: 0 0 0 5px rgba(0, 136, 204, .24),
                0 8px 24px rgba(0, 0, 0, .25);
    animation-delay: .4s;
}

.msp-social-icon {
    position: relative;
    z-index: 3;
    width: 53px;
    height: 53px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.msp-social-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Animated outward waves */
.msp-wave {
    position: absolute;
    inset: -8px;
    border: 3px solid currentColor;
    border-radius: 50%;
    opacity: .65;
    pointer-events: none;
    animation: mspWavePulse 2.2s ease-out infinite;
}

.msp-whatsapp .msp-wave {
    color: #16e777;
}

.msp-telegram .msp-wave {
    color: #19bfff;
}

.msp-wave-two {
    animation-delay: 1.1s;
}

/* Red notification badges */
.msp-social-badge {
    position: absolute;
    z-index: 5;
    top: -15px;
    right: -17px;
    min-width: 66px;
    height: 39px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    border-radius: 24px;
    background: linear-gradient(135deg, #ff5265, #e91636);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .3px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .22);
    animation: mspBadgeBounce 1.8s ease-in-out infinite;
}

.msp-telegram .msp-social-badge {
    min-width: 77px;
    right: -19px;
}

/* Optional labels appear on hover */
.msp-social-label {
    position: absolute;
    left: 94px;
    top: 50%;
    transform: translate(-8px, -50%);
    padding: 9px 13px;
    background: #07152f;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 9px;
    font: 700 12px Arial, sans-serif;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: .25s ease;
    box-shadow: 0 5px 18px rgba(0, 0, 0, .2);
}

.msp-float-btn:hover .msp-social-label {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

.msp-float-btn:hover {
    animation-play-state: paused;
    transform: scale(1.08);
}

/* Shake animation */
@keyframes mspButtonShake {
    0%, 82%, 100% { transform: rotate(0) translateX(0); }
    84% { transform: rotate(-5deg) translateX(-2px); }
    86% { transform: rotate(5deg) translateX(2px); }
    88% { transform: rotate(-4deg) translateX(-2px); }
    90% { transform: rotate(4deg) translateX(2px); }
    92% { transform: rotate(0) translateX(0); }
}

/* Outward pulsing rings */
@keyframes mspWavePulse {
    0% {
        transform: scale(.85);
        opacity: .75;
    }
    100% {
        transform: scale(1.65);
        opacity: 0;
    }
}

/* Badge bounce */
@keyframes mspBadgeBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.05); }
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .msp-social-float {
        left: 14px;
        bottom: 20px;
        gap: 24px;
    }

    .msp-float-btn {
        width: 70px;
        height: 70px;
    }

    .msp-social-icon {
        width: 45px;
        height: 45px;
    }

    .msp-social-badge {
        top: -13px;
        right: -14px;
        min-width: 59px;
        height: 35px;
        font-size: 15px;
        border-width: 3px;
    }

    .msp-telegram .msp-social-badge {
        min-width: 69px;
        right: -16px;
    }

    .msp-social-label {
        display: none;
    }
}

/* Respect reduced-motion accessibility settings */
@media (prefers-reduced-motion: reduce) {
    .msp-float-btn,
    .msp-wave,
    .msp-social-badge {
        animation: none !important;
    }
}