body.public-site {
    --site-bg: #f6f8fb;
    --site-surface: #ffffff;
    --site-surface-soft: #eef2f7;
    --site-line: #dde4ee;
    --site-title: #101828;
    --site-text: #5a6072;
    --site-muted: #788296;
    --site-dark: #162033;
    --site-dark-soft: #202b40;
    --site-accent: var(--primary-color, #635bff);
    --site-accent-soft: rgba(99, 91, 255, 0.1);
    --site-shadow: 0 18px 44px rgba(16, 24, 40, 0.08);
    background: var(--site-bg);
    color: var(--site-text);
    font-family: "Inter", "Outfit", sans-serif;
    letter-spacing: 0;
}

body.public-site * {
    letter-spacing: 0;
}

body.public-site .section-wrapper,
body.public-site .inner-wrapper {
    background: var(--site-bg);
    color: var(--site-text);
}

body.public-site a,
body.public-site button,
body.public-site input,
body.public-site textarea,
body.public-site select {
    font-family: inherit;
}

body.public-site img {
    max-width: 100%;
}

body.public-site .container,
body.public-site .custom-container {
    max-width: 1180px;
}

body.public-site .ptb-60 {
    padding-top: 76px;
    padding-bottom: 76px;
}

body.public-site h1,
body.public-site h2,
body.public-site h3,
body.public-site h4,
body.public-site h5,
body.public-site h6,
body.public-site .title,
body.public-site .section-title {
    color: var(--site-title) !important;
    font-weight: 650;
}

body.public-site p,
body.public-site .sub-title,
body.public-site .description {
    color: var(--site-text) !important;
    line-height: 1.75;
}

body.public-site .text--base {
    color: var(--site-accent) !important;
}

body.public-site .btn--base,
body.public-site .btn-active,
body.public-site .cmn--btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    background: var(--site-accent) !important;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 18px;
    box-shadow: 0 10px 22px rgba(99, 91, 255, 0.2);
    transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

/* Compact, distraction-free customer sign-in. The account page is deliberately
   viewport-bound on desktop, while mobile retains normal document scrolling. */
@media (min-width: 769px) {
    body.public-site:has(.account-login-form) {
        min-height: 100svh;
        overflow: hidden;
        background:
            linear-gradient(115deg, rgba(5, 17, 34, .94), rgba(14, 38, 64, .76)),
            url('/frontend/images/payyer/payyer-africa-3d-hero-people.png') center / cover no-repeat;
    }

    body.public-site:has(.account-login-form) .header,
    body.public-site:has(.account-login-form) .footer-section,
    body.public-site:has(.account-login-form) .cookie-main-wrapper,
    body.public-site:has(.account-login-form) .scrollToTop {
        display: none !important;
    }

    body.public-site:has(.account-login-form) .section-wrapper,
    body.public-site:has(.account-login-form) .inner-wrapper,
    body.public-site:has(.account-login-form) .account-section {
        min-height: calc(100svh - 128px);
        background: transparent !important;
    }

    body.public-site:has(.account-login-form) .account-public-nav {
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        gap: 30px;
        min-height: 76px;
        padding: 14px clamp(28px, 4.5vw, 92px);
        color: #fff;
    }

    body.public-site:has(.account-login-form) .account-public-brand {
        display: inline-flex;
        align-items: center;
        margin-right: auto;
    }

    body.public-site:has(.account-login-form) .account-public-brand img {
        display: block;
        width: 138px;
        height: auto;
        max-height: 42px;
        object-fit: contain;
    }

    body.public-site:has(.account-login-form) .account-public-links {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(16px, 1.6vw, 30px);
    }

    body.public-site:has(.account-login-form) .account-public-links a {
        color: rgba(255, 255, 255, .92) !important;
        font-family: "Poppins", sans-serif;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: .04em;
        transition: color .2s ease, transform .2s ease;
    }

    body.public-site:has(.account-login-form) .account-public-links a:hover {
        color: #f3b15b !important;
        transform: translateY(-1px);
    }

    body.public-site:has(.account-login-form) .account-public-signin {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
        padding: 12px 17px;
        border-radius: 999px;
        background: #fff;
        color: #14223a !important;
        font-family: "Poppins", sans-serif;
        font-size: 13px;
        font-weight: 500;
    }

    body.public-site:has(.account-login-form) .account-public-signin span { font-size: 16px; line-height: 1; }

    body.public-site:has(.account-login-form) .account-section {
        display: grid;
        align-items: center;
        padding: 24px 0 !important;
        background: transparent;
    }

    body.public-site:has(.account-login-form) .account-login-form {
        padding: 0 !important;
    }

    body.public-site:has(.account-login-form) .account-login-form form {
        width: min(100%, 440px);
        margin: 0 auto;
        padding: 20px 28px !important;
        border-radius: 22px;
        background: linear-gradient(145deg, rgba(14, 32, 58, .96), rgba(20, 51, 82, .92)) !important;
        border-color: rgba(145, 199, 245, .32) !important;
        box-shadow: 0 30px 70px rgba(0, 0, 0, .38) !important;
        color: #eef6ff;
    }

    body.public-site:has(.account-login-form) .account-logo {
        width: 132px;
    }

    body.public-site:has(.account-login-form) .form-header {
        padding-top: 16px;
    }

    body.public-site:has(.account-login-form) .form-header .title {
        margin-bottom: 7px;
        font-size: 30px;
        line-height: 1.08;
        color: #ffffff !important;
    }

    body.public-site:has(.account-login-form) .form-header p {
        margin-bottom: 0;
        font-size: 14px;
        line-height: 1.55;
        color: #b9cce1 !important;
    }

    body.public-site:has(.account-login-form) .form-input-fild {
        padding-top: 14px;
    }

    body.public-site:has(.account-login-form) .footer-text p {
        margin-top: 12px !important;
        margin-bottom: 0;
    }

    body.public-site:has(.account-login-form) .account-login-form label {
        color: #dce9f7 !important;
    }

    body.public-site:has(.account-login-form) .account-login-form .form--control {
        min-height: 48px;
        border: 1px solid rgba(180, 212, 244, .2);
        border-radius: 12px;
        background: rgba(242, 248, 255, .96);
        color: #172640;
    }

    body.public-site:has(.account-login-form) .account-login-form .btn--base {
        min-height: 48px;
        border-radius: 12px;
        background: linear-gradient(100deg, #f0a64c, #da715d) !important;
        box-shadow: 0 14px 28px rgba(218, 113, 93, .25);
    }

    body.public-site:has(.account-login-form) .account-auth-footer {
        position: relative;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
        min-height: 52px;
        padding: 10px 28px;
        color: rgba(230, 240, 255, .75);
        font-family: "Poppins", sans-serif;
        font-size: 12px;
    }

    body.public-site:has(.account-login-form) .account-auth-footer a { color: #fff !important; }
}

/* Narrow screens must never clip the login panel horizontally. */
body.public-site:has(.account-login-form) { overflow-x: hidden; }

/* Keep the compact original card. Only its actual controls share one width. */
@media (min-width: 769px) {
    body.public-site:has(.account-login-form) .account-login-form .form-input-fild .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.public-site:has(.account-login-form) .account-login-form .form-input-fild .row > .form-group {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.public-site:has(.account-login-form) .account-login-form .account-btn {
        width: 100% !important;
    }

    body.public-site:has(.account-login-form) .account-login-form .form--control,
    body.public-site:has(.account-login-form) .account-login-form .btn--base {
        display: block;
        width: 100% !important;
        max-width: none !important;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 768px) {
    body.public-site:has(.account-login-form) {
        min-height: 100svh;
        background: linear-gradient(115deg, rgba(5, 17, 34, .94), rgba(14, 38, 64, .78)), url('/frontend/images/payyer/payyer-africa-3d-hero-people.png') center / cover fixed;
    }
    body.public-site:has(.account-login-form) .header,
    body.public-site:has(.account-login-form) .footer-section,
    body.public-site:has(.account-login-form) .cookie-main-wrapper,
    body.public-site:has(.account-login-form) .scrollToTop { display: none !important; }
    body.public-site:has(.account-login-form) .section-wrapper,
    body.public-site:has(.account-login-form) .inner-wrapper,
    body.public-site:has(.account-login-form) .account-section { background: transparent !important; }
    body.public-site:has(.account-login-form) .account-public-nav { display: flex; align-items: center; justify-content: space-between; min-height: 68px; padding: 14px 20px; }
    body.public-site:has(.account-login-form) .account-public-brand img { width: 118px; height: auto; }
    body.public-site:has(.account-login-form) .account-public-links { display: none; }
    body.public-site:has(.account-login-form) .account-public-signin { padding: 9px 13px; border-radius: 999px; background: #fff; color: #14223a !important; font-family: "Poppins", sans-serif; font-size: 12px; }
    body.public-site:has(.account-login-form) .account-section { padding: 20px 16px 28px !important; }
    body.public-site:has(.account-login-form) .account-login-form,
    body.public-site:has(.account-login-form) .account-login-form form { width: 100% !important; max-width: 440px; margin-inline: auto; }
    body.public-site:has(.account-login-form) .account-login-form form { padding: 22px 20px !important; background: linear-gradient(145deg, rgba(14, 32, 58, .97), rgba(20, 51, 82, .94)) !important; }
    body.public-site:has(.account-login-form) .account-login-form .form--control,
    body.public-site:has(.account-login-form) .account-login-form .btn--base,
    body.public-site:has(.account-login-form) .account-login-form .forgot-item { width: 100% !important; max-width: 100% !important; min-width: 0; }
    body.public-site:has(.account-login-form) .account-auth-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; padding: 18px 20px 24px; color: rgba(230, 240, 255, .75); font-family: "Poppins", sans-serif; font-size: 11px; text-align: center; }
    body.public-site:has(.account-login-form) .account-auth-footer a { color: #fff !important; }
}

body.public-site .btn--base:hover,
body.public-site .btn-active:hover,
body.public-site .cmn--btn:hover {
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(99, 91, 255, 0.28);
}

body.public-site .form--control,
body.public-site input,
body.public-site textarea {
    border: 1px solid var(--site-line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--site-title) !important;
    box-shadow: none !important;
}

body.public-site .form--control::placeholder,
body.public-site input::placeholder,
body.public-site textarea::placeholder {
    color: var(--site-muted) !important;
}

body.public-site .header-section {
    top: 0;
    z-index: 99;
    width: 100%;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(221, 228, 238, 0.9);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 30px rgba(16, 24, 40, 0.06);
}

body.public-site .header-section.header-fixed,
body.public-site .header-bottom-area {
    background: transparent !important;
    border: 0 !important;
}

body.public-site .header-bottom-area {
    padding: 13px 0;
}

body.public-site .header-menu-content,
body.public-site .navbar {
    min-height: 52px;
}

body.public-site .site-logo img {
    width: auto;
    max-width: 150px;
    max-height: 42px;
    object-fit: contain;
}

body.public-site .main-menu {
    gap: 4px;
}

body.public-site .header-bottom-area .navbar-collapse .main-menu li a,
body.public-site .navbar-right ul li a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border-radius: 7px;
    color: #293244 !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    padding: 7px 9px;
    text-transform: uppercase;
    transition: background-color 180ms ease, color 180ms ease;
}

body.public-site .header-bottom-area .navbar-collapse .main-menu li a {
    font-size: 12px !important;
    transform: none;
}

body.public-site .navbar-right ul li a.help-btn {
    font-size: 12px !important;
    transform: none;
}

body.public-site .header-bottom-area .navbar-collapse .main-menu li a:hover,
body.public-site .header-bottom-area .navbar-collapse .main-menu li a.active,
body.public-site .navbar-right ul li a:hover,
body.public-site .navbar-right ul li a.active {
    background: var(--site-accent-soft);
    color: var(--site-accent) !important;
}

body.public-site .navbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

body.public-site .navbar-right ul {
    margin: 0;
}

body.public-site .language-select .nice-select {
    min-width: 112px;
    height: 40px;
    line-height: 38px;
    border: 1px solid var(--site-line);
    border-radius: 8px;
    background: #ffffff;
    color: #293244 !important;
    padding-left: 14px;
    padding-right: 30px;
    box-shadow: none;
}

body.public-site .language-select .nice-select .current {
    color: #293244 !important;
    font-size: 14px;
    font-weight: 400;
}

body.public-site .language-select .nice-select .list {
    border: 1px solid var(--site-line);
    border-radius: 8px;
    box-shadow: var(--site-shadow);
}

body.public-site .dark-light {
    width: 40px;
    height: 40px;
    margin-left: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-line);
    border-radius: 8px;
    background: #ffffff;
    cursor: pointer;
}

body.public-site .dark-light i {
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    color: var(--site-accent);
    font-size: 20px;
    line-height: 1;
    padding: 0;
}

body.public-site .header-action {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.public-site .header-action .btn--base {
    min-height: 40px;
    padding: 10px 15px;
    box-shadow: none;
}

body.public-site .header-action .btn-active {
    min-height: 40px;
    background: var(--site-dark) !important;
    padding: 10px 15px;
    box-shadow: none;
}

body.public-site .navbar-toggler {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--site-line);
    border-radius: 8px;
    color: var(--site-title);
    box-shadow: none;
}

@media (min-width: 1200px) {
    body.public-site .navbar-expand-xl .navbar-toggler {
        display: none !important;
    }
}

body.public-site .banner-section {
    position: relative;
    padding-top: 108px;
    padding-bottom: 86px;
    background:
        linear-gradient(180deg, #ffffff 0%, #f6f8fb 100%);
    overflow: hidden;
}

body.public-site .banner-section .banner-element,
body.public-site .banner-section .title-badge {
    display: none !important;
}

body.public-site .banner-content {
    max-width: 590px;
}

body.public-site .banner-section .sub-title {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    margin-bottom: 18px;
    border: 1px solid rgba(99, 91, 255, 0.16);
    border-radius: 999px;
    background: var(--site-accent-soft);
    color: var(--site-accent) !important;
    padding: 8px 15px;
    box-shadow: none;
}

body.public-site .banner-section .sub-title span {
    border: 0;
    color: var(--site-accent) !important;
    font-size: 14px;
    font-weight: 650;
    white-space: normal;
    animation: none;
}

body.public-site .banner-section .banner-content .title {
    max-width: 620px;
    padding-top: 0;
    padding-bottom: 22px;
    color: var(--site-title) !important;
    font-size: 56px;
    line-height: 1.06;
}

body.public-site .banner-section .banner-content p {
    max-width: 560px;
    margin-bottom: 28px;
    color: var(--site-text) !important;
    font-size: 16px;
    line-height: 1.85;
}

body.public-site .banner-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

body.public-site .banner-thumb {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 18px;
}

body.public-site .banner-thumb::before {
    position: absolute;
    inset: 40px 14px 14px 46px;
    content: "";
    border-radius: 8px;
    background: #e8edf5;
    border: 1px solid #dfe6f0;
}

body.public-site .banner-thumb img {
    position: relative;
    z-index: 1;
    max-height: 520px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 24px 52px rgba(16, 24, 40, 0.16);
}

body.public-site .section-tag {
    margin-bottom: 38px;
}

body.public-site .section-tag .tag-line {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-bottom: 16px;
    border: 1px solid rgba(99, 91, 255, 0.16);
    border-radius: 999px;
    background: var(--site-accent-soft);
    color: var(--site-accent) !important;
    font-size: 13px;
    font-weight: 650;
    line-height: 1;
    padding: 9px 14px;
}

body.public-site .section-tag .tag-line span {
    display: none;
}

body.public-site .section-title {
    margin-bottom: 14px;
    font-size: 38px;
    line-height: 1.18;
}

body.public-site .section-tag .sub-title {
    max-width: 780px;
    margin-right: auto;
    margin-left: auto;
    font-size: 15px;
}

body.public-site .core-service-section,
body.public-site .how-work-section,
body.public-site .blog-section,
body.public-site .faq-section,
body.public-site .contact-section {
    background: var(--site-bg) !important;
}

body.public-site .core-service-item,
body.public-site .how-work-item,
body.public-site .blog-item,
body.public-site .faq-item,
body.public-site .contact-form-area,
body.public-site .contact-information,
body.public-site .contact-widget-box {
    height: 100%;
    border: 1px solid var(--site-line) !important;
    border-radius: 8px !important;
    background: var(--site-surface) !important;
    box-shadow: var(--site-shadow) !important;
    color: var(--site-text) !important;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body.public-site .core-service-item:hover,
body.public-site .how-work-item:hover,
body.public-site .blog-item:hover {
    border-color: #cbd6e6 !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 22px 54px rgba(16, 24, 40, 0.11) !important;
}

body.public-site .core-service-section .core-service-item {
    padding: 24px;
    border-width: 1px;
}

body.public-site .core-service-section .service-icon,
body.public-site .how-work-section .how-work-icon {
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 18px;
    border: 1px solid rgba(99, 91, 255, 0.14);
    border-radius: 8px;
    background: var(--site-accent-soft);
    padding: 12px;
}

body.public-site .core-service-section .service-icon::before,
body.public-site .how-work-section .how-work-icon::before {
    display: none !important;
}

body.public-site .core-service-section .service-icon img,
body.public-site .how-work-section .how-work-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

body.public-site .service-content .title,
body.public-site .how-work-content .title,
body.public-site .blog-content .title,
body.public-site .faq-title .title {
    margin-bottom: 10px;
    color: var(--site-title) !important;
    font-size: 18px;
    line-height: 1.35;
}

body.public-site .service-content p,
body.public-site .how-work-content p,
body.public-site .blog-content p,
body.public-site .faq-content p {
    color: var(--site-text) !important;
    font-size: 14px;
}

body.public-site .why-choice-us {
    background: #ffffff !important;
    padding-top: 76px;
    padding-bottom: 76px;
}

body.public-site .choice-wrapper,
body.public-site .choice-card,
body.public-site .choice-card-one,
body.public-site .choice-card-two,
body.public-site .choice-card-three,
body.public-site .choice-card-four {
    border-radius: 8px !important;
}

body.public-site .choice-card,
body.public-site .choice-card-one,
body.public-site .choice-card-two,
body.public-site .choice-card-three,
body.public-site .choice-card-four,
body.public-site .choice-wrapper .card-content {
    border: 1px solid var(--site-line) !important;
    background: #ffffff !important;
    box-shadow: var(--site-shadow) !important;
}

body.public-site .choice-wrapper .card-content {
    padding: 22px;
}

body.public-site .choice-wrapper .card-content .title,
body.public-site .choice-wrapper .card-content p {
    color: var(--site-title) !important;
}

body.public-site .choice-wrapper .card-content p {
    color: var(--site-text) !important;
}

body.public-site .overview-section {
    position: relative;
    background: var(--site-dark) !important;
    color: #ffffff;
    overflow: hidden;
}

body.public-site .overview-section::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(99, 91, 255, 0.14), transparent 48%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent 38%);
    pointer-events: none;
}

body.public-site .overview-section .container {
    position: relative;
    z-index: 1;
}

body.public-site .overview-section .section-title,
body.public-site .overview-section .section-tag .sub-title,
body.public-site .overview-section p,
body.public-site .overview-section .title,
body.public-site .overview-section .odometer,
body.public-site .overview-section .counter-sign {
    color: #ffffff !important;
}

body.public-site .overview-section .section-tag .tag-line {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff !important;
}

body.public-site .overview-details,
body.public-site .overview-item {
    border-radius: 8px !important;
}

body.public-site .overview-item {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.08);
    padding: 18px;
}

body.public-site .overview-img img {
    border-radius: 8px;
}

body.public-site .app-section {
    background: #ffffff !important;
}

body.public-site .app-section::after,
body.public-site .app-section::before {
    display: none !important;
}

body.public-site .app-img img,
body.public-site .app-qr img {
    border-radius: 8px;
    box-shadow: var(--site-shadow);
}

body.public-site .app-btn-wrapper {
    gap: 12px;
}

body.public-site .app-btn {
    min-height: 58px;
    border: 1px solid var(--site-line);
    border-radius: 8px;
    background: #ffffff !important;
    box-shadow: var(--site-shadow);
    padding: 12px 16px;
}

body.public-site .app-btn .content,
body.public-site .app-btn .title,
body.public-site .app-btn span {
    color: var(--site-title) !important;
}

body.public-site .app-btn .icon,
body.public-site .app-btn i {
    color: var(--site-accent) !important;
}

body.public-site .faq-wrapper .faq-item {
    overflow: hidden;
    margin-bottom: 14px;
    padding: 0;
}

body.public-site .faq-wrapper .faq-title {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    cursor: pointer;
}

body.public-site .faq-wrapper .faq-title .title {
    margin: 0;
    font-size: 16px;
}

body.public-site .faq-wrapper .faq-content {
    border-top: 1px solid var(--site-line);
    padding: 0 20px 18px;
}

body.public-site .faq-wrapper .right-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--site-accent-soft);
    color: var(--site-accent);
}

body.public-site .blog-item {
    overflow: hidden;
}

body.public-site .blog-thumb img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px 8px 0 0;
}

body.public-site .blog-content {
    padding: 22px;
}

body.public-site .blog-btn {
    color: var(--site-accent) !important;
    font-weight: 650;
}

body.public-site .contact-form-area,
body.public-site .contact-information {
    padding: 26px;
}

body.public-site .contact-widget-box {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
    padding: 18px;
}

body.public-site .contact-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--site-accent-soft);
    color: var(--site-accent);
}

body.public-site .contact-icon i {
    color: var(--site-accent) !important;
    font-size: 22px;
}

body.public-site .contact-containt,
body.public-site .contact-containt p,
body.public-site .contact-containt a {
    color: var(--site-text) !important;
}

body.public-site .modern-contact-section {
    padding: 84px 0 96px;
    background: linear-gradient(180deg, var(--site-bg) 0%, #edf3fb 100%) !important;
}

body.public-site .modern-contact-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 24px;
    align-items: stretch;
}

body.public-site .modern-contact-section .contact-information,
body.public-site .modern-contact-section .contact-form-area {
    height: auto;
}

body.public-site .modern-contact-info {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: linear-gradient(135deg, #07111f 0%, #10233c 58%, #123d39 100%) !important;
    color: #ffffff !important;
    padding: 36px !important;
}

body.public-site .modern-contact-info::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.55;
    pointer-events: none;
}

body.public-site .modern-contact-info > * {
    position: relative;
    z-index: 1;
}

body.public-site .contact-kicker,
body.public-site .modern-contact-header .sub-title {
    display: inline-flex;
    width: fit-content;
    min-height: 32px;
    align-items: center;
    margin-bottom: 16px;
    border: 1px solid rgba(22, 185, 129, 0.28);
    border-radius: 999px;
    background: rgba(22, 185, 129, 0.12);
    color: #5fe0a6 !important;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    padding: 8px 13px;
}

body.public-site .modern-contact-info h1 {
    margin: 0 0 16px;
    color: #ffffff !important;
    font-size: 42px;
    font-weight: 760;
    line-height: 1.12;
}

body.public-site .modern-contact-info > p {
    margin: 0;
    color: #cbd8e8 !important;
    font-size: 15px;
    line-height: 1.75;
}

body.public-site .modern-contact-list {
    display: grid;
    gap: 12px;
    margin-top: 34px;
}

body.public-site .modern-contact-section .contact-widget-box {
    height: auto;
    margin: 0 !important;
    border-color: rgba(255, 255, 255, 0.13) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

body.public-site .modern-contact-section .contact-icon {
    background: rgba(22, 185, 129, 0.14) !important;
}

body.public-site .modern-contact-section .contact-containt .title {
    margin: 0 0 4px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 760;
}

body.public-site .modern-contact-section .contact-containt,
body.public-site .modern-contact-section .contact-containt span,
body.public-site .modern-contact-section .contact-containt a {
    color: #d8e2ef !important;
    font-size: 14px;
    line-height: 1.55;
}

body.public-site .modern-contact-section .contact-form-area {
    padding: 34px !important;
}

body.public-site .modern-contact-header {
    margin-bottom: 24px;
}

body.public-site .modern-contact-header .sub-title {
    border-color: rgba(99, 91, 255, 0.2);
    background: var(--site-accent-soft);
    color: var(--site-accent) !important;
}

body.public-site .modern-contact-header .title {
    margin: 0;
    color: var(--site-title) !important;
    font-size: 28px;
    font-weight: 760;
    line-height: 1.2;
}

body.public-site .modern-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

body.public-site .modern-contact-section .form-group {
    margin-bottom: 0;
}

body.public-site .modern-contact-section label {
    display: block;
    margin-bottom: 8px;
    color: var(--site-title) !important;
    font-size: 13px;
    font-weight: 700;
}

body.public-site .modern-contact-section label span {
    color: #ef4444;
}

body.public-site .modern-contact-section .form--control {
    min-height: 50px;
    padding: 13px 15px;
}

body.public-site .modern-contact-section textarea.form--control {
    min-height: 142px;
    resize: vertical;
}

body.public-site .modern-contact-message,
body.public-site .modern-contact-submit {
    grid-column: 1 / -1;
}

body.public-site .modern-contact-submit .btn--base {
    min-height: 50px;
    margin-top: 4px;
}

body.public-site .footer-section {
    background-color: #151c2b !important;
    background-image: none !important;
    border-top: 0;
    color: #f4f6fb;
}

body.public-site .footer-section.bg_img {
    background-color: #151c2b !important;
    background-image: none !important;
}

body.public-site .footer-section.bg-overlay-banner::after {
    display: none !important;
}

body.public-site .footer-content {
    padding-top: 58px;
}

body.public-site .footer-section .footer-widget-heading h3,
body.public-site .footer-section .footer-social-icon span,
body.public-site .footer-section .footer-text p,
body.public-site .footer-section .footer-widget ul li a,
body.public-site .footer-section .copyright-text p,
body.public-site .footer-section .copyright-text p a {
    color: #f4f6fb !important;
}

body.public-site .footer-section .footer-widget-heading h3 {
    margin-bottom: 20px;
    font-size: 18px;
}

body.public-site .footer-section .footer-text img {
    width: auto;
    max-width: 150px;
    max-height: 44px;
    margin-bottom: 22px;
}

body.public-site .footer-section .footer-social-icon a {
    margin-right: 8px;
}

body.public-site .footer-section .footer-social-icon i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
}

body.public-site .footer-section .footer-social-icon i:hover {
    background: var(--site-accent) !important;
}

body.public-site .footer-section .footer-widget ul li {
    width: 100%;
    float: none;
    margin-bottom: 10px;
}

body.public-site .footer-section .footer-widget ul li a:hover,
body.public-site .footer-section .copyright-text p a {
    color: #ffffff !important;
}

body.public-site .footer-section .subscribe-form {
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.13);
}

body.public-site .footer-section .subscribe-form input {
    height: 50px;
    border: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    padding: 12px 58px 12px 16px;
}

body.public-site .footer-section .subscribe-form input::placeholder {
    color: rgba(255, 255, 255, 0.82) !important;
}

body.public-site .footer-section .subscribe-form button {
    top: 5px;
    right: 5px;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--site-accent) !important;
}

body.public-site .footer-section .copyright-text {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

body.public-site .scrollToTop {
    right: 22px;
    bottom: 22px;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--site-accent) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(99, 91, 255, 0.28);
}

body.public-site .scrollToTop i,
body.public-site .scrollToTop small {
    color: #ffffff !important;
}

body.public-site .cookie-main-wrapper {
    max-width: 620px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: #101828 !important;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.24);
}

body.public-site .cookie-main-wrapper p,
body.public-site .cookie-main-wrapper a {
    color: #ffffff !important;
}

body.public-site .cookie-btn,
body.public-site .cookie-btn-cross {
    min-height: 38px;
    border-radius: 8px;
    padding: 9px 14px;
}

body.public-site.dark {
    --site-bg: #0f1724;
    --site-surface: #151f2f;
    --site-surface-soft: #1c283a;
    --site-line: #2a3548;
    --site-title: #f8fafc;
    --site-text: #cbd5e1;
    --site-muted: #94a3b8;
    --site-dark: #0b1220;
    --site-dark-soft: #151f2f;
    --site-accent-soft: rgba(99, 91, 255, 0.18);
    --site-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

body.public-site.dark .section-wrapper,
body.public-site.dark .inner-wrapper,
body.public-site.dark .core-service-section,
body.public-site.dark .how-work-section,
body.public-site.dark .blog-section,
body.public-site.dark .faq-section,
body.public-site.dark .contact-section {
    background: var(--site-bg) !important;
}

body.public-site.dark .header-section {
    background: rgba(15, 23, 36, 0.94);
    border-bottom-color: rgba(42, 53, 72, 0.9);
}

body.public-site.dark .header-bottom-area .navbar-collapse .main-menu li a,
body.public-site.dark .navbar-right ul li a,
body.public-site.dark .language-select .nice-select,
body.public-site.dark .language-select .nice-select .current,
body.public-site.dark .navbar-toggler {
    color: var(--site-title) !important;
}

body.public-site.dark .language-select .nice-select,
body.public-site.dark .dark-light,
body.public-site.dark .navbar-toggler {
    border-color: var(--site-line);
    background: var(--site-surface);
}

body.public-site.dark .banner-section,
body.public-site.dark .app-section,
body.public-site.dark .why-choice-us {
    background: var(--site-bg) !important;
}

body.public-site.dark .banner-section {
    background:
        linear-gradient(180deg, #101828 0%, #0f1724 100%) !important;
}

body.public-site.dark .banner-thumb::before {
    background: var(--site-surface-soft);
    border-color: var(--site-line);
}

body.public-site.dark .form--control,
body.public-site.dark input,
body.public-site.dark textarea,
body.public-site.dark .app-btn {
    background: var(--site-surface) !important;
    color: var(--site-title) !important;
}

body.public-site.dark .choice-card,
body.public-site.dark .choice-card-one,
body.public-site.dark .choice-card-two,
body.public-site.dark .choice-card-three,
body.public-site.dark .choice-card-four,
body.public-site.dark .choice-wrapper .card-content {
    background: var(--site-surface) !important;
    border-color: var(--site-line) !important;
}

body.public-site.dark .footer-section {
    background-color: #151c2b !important;
    background-image: none !important;
}

@media (max-width: 1199px) {
    body.public-site .navbar-collapse {
        margin-top: 14px;
        border: 1px solid var(--site-line);
        border-radius: 8px;
        background: var(--site-surface);
        box-shadow: var(--site-shadow);
        padding: 14px;
    }

    body.public-site .main-menu,
    body.public-site .navbar-right,
    body.public-site .header-action {
        align-items: stretch;
        width: 100%;
    }

    body.public-site .navbar-right {
        gap: 12px;
        margin-top: 12px;
    }

    body.public-site .header-action .btn--base,
    body.public-site .header-action .btn-active {
        flex: 1;
    }

    body.public-site .banner-section .banner-content .title {
        font-size: 44px;
    }
}

@media (max-width: 991px) {
    body.public-site .ptb-60,
    body.public-site .why-choice-us {
        padding-top: 58px;
        padding-bottom: 58px;
    }

    body.public-site .banner-section {
        padding-top: 76px;
        padding-bottom: 60px;
    }

    body.public-site .banner-content {
        max-width: 100%;
    }

    body.public-site .banner-thumb {
        padding: 10px;
    }

    body.public-site .section-title {
        font-size: 32px;
    }
}

@media (max-width: 767px) {
    body.public-site .header-bottom-area {
        padding: 10px 0;
    }

    body.public-site .site-logo img {
        max-width: 132px;
    }

    body.public-site .banner-section {
        padding-top: 58px;
    }

    body.public-site .banner-section .banner-content .title {
        font-size: 34px;
        line-height: 1.12;
    }

    body.public-site .banner-section .banner-content p {
        font-size: 15px;
    }

    body.public-site .banner-btn .btn--base {
        width: 100%;
    }

    body.public-site .section-title {
        font-size: 28px;
    }

    body.public-site .contact-form-area,
    body.public-site .contact-information {
        padding: 20px;
    }
}

/* Real motion layer: scroll reveals, orbit movement, light sweeps and pointer-driven depth. */
body.public-site:has(.pago-home).pago-motion-ready .pago-animate {
    opacity: 0;
    transform: perspective(1200px) translate3d(0,52px,-70px) rotateX(5deg);
    transition: opacity .82s ease, transform 1.05s cubic-bezier(.16,1,.3,1);
}
body.public-site:has(.pago-home).pago-motion-ready .pago-animate.is-visible {
    opacity: 1;
    transform: perspective(1200px) translate3d(0,0,0) rotateX(0);
}
body.public-site:has(.pago-home) .pago-trust-shell,
body.public-site:has(.pago-home) .pago-split-card,
body.public-site:has(.pago-home) .pago-personal-hero,
body.public-site:has(.pago-home) .modern-contact-shell { overflow:hidden; }
body.public-site:has(.pago-home) .pago-trust-shell::after,
body.public-site:has(.pago-home) .pago-split-card::after,
body.public-site:has(.pago-home) .pago-personal-hero::after {
    content:"";
    position:absolute;
    inset:-30% auto -30% -24%;
    width:24%;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.19),transparent);
    transform:skewX(-22deg) translateX(-620%);
    animation:payyer-light-sweep 7.2s ease-in-out infinite;
}
body.public-site:has(.pago-home) .pago-split-card:nth-child(2)::after { animation-delay:-3.5s; }
body.public-site:has(.pago-home) .pago-orbit-stage { animation:payyer-orbit-float 7s ease-in-out infinite; transform-style:preserve-3d; }
body.public-site:has(.pago-home) .pago-orbit-node { animation:payyer-node-pulse 3.3s ease-in-out infinite; }
body.public-site:has(.pago-home) .pago-orbit-node.node-two { animation-delay:-1.1s; }
body.public-site:has(.pago-home) .pago-orbit-node.node-three { animation-delay:-2.2s; }
body.public-site:has(.pago-home) .pago-feature-card i,
body.public-site:has(.pago-home) .pago-audience-card i,
body.public-site:has(.pago-home) .pago-advantage-card i { animation:payyer-icon-breathe 3.6s ease-in-out infinite; }
@keyframes payyer-light-sweep { 0%,20% { transform:skewX(-22deg) translateX(-620%); opacity:0; } 30% { opacity:1; } 56%,100% { transform:skewX(-22deg) translateX(1150%); opacity:0; } }
@keyframes payyer-orbit-float { 0%,100% { transform:perspective(1000px) rotateX(0) rotateY(0) translateY(0); } 50% { transform:perspective(1000px) rotateX(7deg) rotateY(-8deg) translateY(-15px); } }
@keyframes payyer-node-pulse { 0%,100% { transform:translateZ(0) scale(1); box-shadow:0 10px 24px rgba(0,0,0,.18); } 50% { transform:translateZ(28px) scale(1.12); box-shadow:0 18px 36px rgba(72,204,255,.35); } }
@keyframes payyer-icon-breathe { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-4px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
    body.public-site:has(.pago-home) *, body.public-site:has(.pago-home) *::before, body.public-site:has(.pago-home) *::after { animation:none !important; transition:none !important; }
}

@media (max-width: 575px) {
    body.public-site .navbar-right {
        align-items: stretch;
    }

    body.public-site .language-select .nice-select,
    body.public-site .dark-light {
        width: 100%;
    }

    body.public-site .cookie-main-wrapper {
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

/* Final contrast guard: no public single-page content may inherit invisible text. */
body.public-site:has(.pago-home) .pago-section:not(.pago-trust) h2,
body.public-site:has(.pago-home) .pago-section:not(.pago-trust) h3,
body.public-site:has(.pago-home) .pago-section:not(.pago-trust) h4,
body.public-site:has(.pago-home) .pago-section:not(.pago-trust) strong { color:#10233e !important; }
body.public-site:has(.pago-home) .pago-section:not(.pago-trust) p,
body.public-site:has(.pago-home) .pago-section:not(.pago-trust) small,
body.public-site:has(.pago-home) .pago-section:not(.pago-trust) .contact-containt span { color:#50647d !important; }

/* Premium footer: clear PAYYER branding with a dimensional dark finish. */
body.public-site .footer-section {
    position:relative;
    overflow:hidden;
    background:radial-gradient(circle at 78% -40%,rgba(87,102,255,.28),transparent 41%),radial-gradient(circle at 12% 130%,rgba(251,157,87,.16),transparent 43%),linear-gradient(125deg,#06111e,#101a2b 56%,#071924) !important;
    border-top:1px solid rgba(158,220,255,.17) !important;
}
body.public-site .footer-section::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg,transparent 0 41%,rgba(255,255,255,.045) 41.1% 41.3%,transparent 41.4% 100%); }
body.public-site .footer-section .container { position:relative; z-index:1; }
body.public-site .footer-section .footer-text img { display:block !important; width:210px !important; max-width:210px !important; height:auto !important; max-height:none !important; object-fit:contain; filter:none !important; opacity:1 !important; margin:0 0 24px !important; }

/* Equal-height contact panels with readable high-contrast copy. */
body.public-site:has(.pago-home) .modern-contact-shell {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    align-items: stretch !important;
}
body.public-site:has(.pago-home) .modern-contact-shell > * { min-width:0; display:flex; }
body.public-site:has(.pago-home) .modern-contact-info,
body.public-site:has(.pago-home) .modern-contact-section .contact-form-area { width:100%; height:100% !important; }
body.public-site:has(.pago-home) .modern-contact-info h1,
body.public-site:has(.pago-home) .modern-contact-info h4,
body.public-site:has(.pago-home) .modern-contact-info .title { color:#fff !important; }
body.public-site:has(.pago-home) .modern-contact-info > p,
body.public-site:has(.pago-home) .modern-contact-info .contact-containt span { color:rgba(232,243,255,.82) !important; }
body.public-site:has(.pago-home) .modern-contact-info .contact-widget-box { background:rgba(255,255,255,.12) !important; border-color:rgba(203,233,255,.17) !important; }
@media(max-width:767px){body.public-site:has(.pago-home) .modern-contact-shell{grid-template-columns:1fr!important}.modern-contact-shell > *{display:block!important}}

/* PAYYER editorial gallery: the image-led visual language of a premium fintech. */
body.public-site:has(.pago-home) .pago-editorial { padding:clamp(100px,12vw,190px) 2.1vw; background:#fff; overflow:hidden; }
body.public-site:has(.pago-home) .pago-editorial-intro { max-width:1240px; margin:0 auto clamp(54px,7vw,106px); display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:50px; }
body.public-site:has(.pago-home) .pago-editorial-intro span { color:#6f7c87; font-family:"Poppins",sans-serif; font-size:11px; letter-spacing:.14em; font-weight:600; }
body.public-site:has(.pago-home) .pago-editorial-intro h2 { margin:14px 0 0; color:#101a23; font-family:"Rethink Sans",sans-serif; font-size:clamp(42px,5.2vw,92px); line-height:.92; letter-spacing:-.075em; font-weight:500; }
body.public-site:has(.pago-home) .pago-editorial-intro p { margin:0; color:#617181; font-family:"Poppins",sans-serif; font-size:clamp(16px,1.25vw,21px); line-height:1.62; max-width:520px; }
body.public-site:has(.pago-home) .pago-editorial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
body.public-site:has(.pago-home) .pago-editorial-tile { position:relative; min-height:clamp(330px,34vw,620px); overflow:hidden; border-radius:18px; background:#0a111a; cursor:pointer; transform:translateZ(0); }
body.public-site:has(.pago-home) .pago-editorial-tile::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.75) 100%); transition:background .5s ease; }
body.public-site:has(.pago-home) .pago-editorial-tile::after { content:""; position:absolute; inset:-30%; z-index:2; background:linear-gradient(112deg,transparent 39%,rgba(255,255,255,.24) 50%,transparent 61%); transform:translateX(-130%) rotate(12deg); transition:transform .85s cubic-bezier(.2,.8,.2,1); pointer-events:none; }
body.public-site:has(.pago-home) .pago-editorial-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.25s cubic-bezier(.2,.8,.2,1),filter .7s ease; }
body.public-site:has(.pago-home) .pago-editorial-tile div { position:absolute; z-index:3; left:30px; right:30px; bottom:26px; display:flex; flex-direction:column; gap:7px; color:#fff; transform:translateY(9px); transition:transform .45s ease; }
body.public-site:has(.pago-home) .pago-editorial-tile strong { color:#fff; font-family:"Poppins",sans-serif; font-size:clamp(17px,1.45vw,24px); font-weight:500; }
body.public-site:has(.pago-home) .pago-editorial-tile span { color:rgba(255,255,255,.72); font-family:"Poppins",sans-serif; font-size:12px; }
body.public-site:has(.pago-home) .pago-editorial-tile:hover img { transform:scale(1.09) rotate(.7deg); filter:saturate(1.15) contrast(1.05); }
body.public-site:has(.pago-home) .pago-editorial-tile:hover::before { background:linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.86)); }
body.public-site:has(.pago-home) .pago-editorial-tile:hover::after { transform:translateX(130%) rotate(12deg); }
body.public-site:has(.pago-home) .pago-editorial-tile:hover div { transform:translateY(0); }
@media(max-width:900px){body.public-site:has(.pago-home) .pago-editorial-intro{grid-template-columns:1fr;gap:24px}.pago-editorial-grid{grid-template-columns:1fr!important}.pago-editorial-tile{min-height:420px!important}}

/* Cinematic animated global network — replaces the flat coverage grid. */
body.public-site:has(.pago-home) .pago-coverage { min-height: min(820px, 88vh); background:radial-gradient(circle at 68% 42%,#173b65 0,transparent 32%),linear-gradient(125deg,#06121f,#0d2740 60%,#071d31) !important; }
body.public-site:has(.pago-home) .pago-coverage::before { width:900px; height:900px; right:-350px; top:-380px; background:radial-gradient(circle,rgba(93,211,255,.22),transparent 67%); }
body.public-site:has(.pago-home) .pago-coverage h2 { color:#fff !important; font-size:clamp(38px,3.5vw,68px) !important; letter-spacing:-.055em; }
body.public-site:has(.pago-home) .pago-coverage p { color:rgba(224,239,255,.72) !important; font-size:clamp(16px,1.2vw,21px); line-height:1.7; }
body.public-site:has(.pago-home) .pago-coverage .pago-eyebrow { color:#8de0ff !important; border-color:rgba(141,224,255,.35); background:rgba(57,177,255,.1); }
body.public-site:has(.pago-home) .pago-coverage .pago-text-link { color:#7fe1c3 !important; font-size:16px; }
body.public-site:has(.pago-home) .pago-global-stage { position:relative; isolation:isolate; min-height:590px; overflow:hidden; border:1px solid rgba(153,220,255,.2); border-radius:32px; background:radial-gradient(circle at 50% 50%,rgba(44,117,184,.32),transparent 48%),linear-gradient(145deg,rgba(12,33,57,.9),rgba(6,16,31,.9)); box-shadow:inset 0 1px rgba(255,255,255,.12),0 36px 80px rgba(0,5,16,.45); perspective:1200px; }
body.public-site:has(.pago-home) .pago-global-stage::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(109,203,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(109,203,255,.07) 1px,transparent 1px); background-size:44px 44px; mask-image:radial-gradient(circle at center,black,transparent 72%); opacity:.8; }
body.public-site:has(.pago-home) .pago-global-noise { position:absolute; inset:0; opacity:.5; background:radial-gradient(circle at 20% 22%,rgba(102,216,255,.2) 0 1px,transparent 2px),radial-gradient(circle at 80% 68%,rgba(255,170,86,.26) 0 1px,transparent 2px); background-size:59px 73px,83px 67px; animation:payyer-network-drift 16s linear infinite; }
body.public-site:has(.pago-home) .pago-global-globe { position:absolute; width:330px; height:330px; left:50%; top:50%; border-radius:50%; transform:translate(-50%,-50%) rotateX(15deg); background:radial-gradient(circle at 34% 25%,#9eeeff 0 3%,#2688c2 16%,#0d4d82 42%,#071b3b 68%,#030b1e 100%); box-shadow:inset -35px -25px 80px rgba(0,0,0,.65),inset 18px 15px 36px rgba(255,255,255,.24),0 0 0 1px rgba(150,232,255,.48),0 0 55px rgba(57,189,255,.52),0 0 130px rgba(55,113,255,.35); animation:payyer-globe-spin 15s linear infinite; transform-style:preserve-3d; }
body.public-site:has(.pago-home) .pago-global-meridian,body.public-site:has(.pago-home) .pago-global-equator { position:absolute; border:1px solid rgba(192,244,255,.42); border-radius:50%; }
body.public-site:has(.pago-home) .pago-global-meridian { top:5%; bottom:5%; left:30%; right:30%; }
body.public-site:has(.pago-home) .pago-global-meridian.meridian-two { left:12%; right:12%; opacity:.65; }
body.public-site:has(.pago-home) .pago-global-equator { left:3%; right:3%; top:44%; height:16%; }
body.public-site:has(.pago-home) .pago-global-continent { position:absolute; background:linear-gradient(135deg,rgba(124,249,181,.9),rgba(35,178,169,.5)); filter:drop-shadow(0 0 10px rgba(80,255,195,.6)); opacity:.75; }
body.public-site:has(.pago-home) .continent-one { width:84px; height:58px; left:46px; top:84px; border-radius:50% 42% 55% 36%; transform:rotate(-22deg); }
body.public-site:has(.pago-home) .continent-two { width:52px; height:96px; right:55px; top:135px; border-radius:47% 58% 36% 55%; transform:rotate(21deg); }
body.public-site:has(.pago-home) .continent-three { width:72px; height:32px; left:105px; bottom:62px; border-radius:55% 42% 48% 35%; }
body.public-site:has(.pago-home) .pago-global-orbit { position:absolute; left:50%; top:50%; border:1px solid rgba(101,212,255,.35); border-radius:50%; transform-style:preserve-3d; }
body.public-site:has(.pago-home) .orbit-a { width:500px; height:150px; margin:-75px 0 0 -250px; transform:rotateX(69deg) rotateZ(9deg); animation:payyer-orbit-turn 8s linear infinite; }
body.public-site:has(.pago-home) .orbit-b { width:465px; height:210px; margin:-105px 0 0 -232px; transform:rotateX(66deg) rotateY(29deg); animation:payyer-orbit-turn 12s linear infinite reverse; }
body.public-site:has(.pago-home) .orbit-c { width:410px; height:180px; margin:-90px 0 0 -205px; transform:rotateX(72deg) rotateY(-36deg); opacity:.6; animation:payyer-orbit-turn 15s linear infinite; }
body.public-site:has(.pago-home) .pago-global-node { position:absolute; width:10px; height:10px; border-radius:50%; background:#eafcff; box-shadow:0 0 0 7px rgba(80,215,255,.15),0 0 24px #7eeaff; animation:payyer-node-flash 2.7s ease-in-out infinite; }
body.public-site:has(.pago-home) .node-1{left:24%;top:30%}.node-2{left:72%;top:22%;animation-delay:-.7s}.node-3{left:81%;top:60%;animation-delay:-1.3s}.node-4{left:18%;top:66%;animation-delay:-2s}.node-5{left:51%;top:16%;animation-delay:-1.7s}.node-6{left:55%;top:78%;animation-delay:-.4s}.node-7{left:35%;top:52%;animation-delay:-2.4s}.node-8{left:67%;top:47%;animation-delay:-1s}
body.public-site:has(.pago-home) .pago-global-route { position:absolute; left:50%; top:50%; width:290px; height:120px; border-top:2px dashed rgba(143,230,255,.7); border-radius:50%; transform-origin:left center; }
body.public-site:has(.pago-home) .route-one{transform:rotate(-23deg)}.route-two{transform:rotate(129deg);width:240px}.route-three{transform:rotate(197deg);width:205px;opacity:.65}
body.public-site:has(.pago-home) .pago-global-stat { position:absolute; z-index:2; padding:15px 18px; border:1px solid rgba(185,233,255,.25); border-radius:16px; background:rgba(8,24,45,.72); backdrop-filter:blur(14px); box-shadow:0 18px 38px rgba(0,0,0,.28); }
body.public-site:has(.pago-home) .pago-global-stat strong { display:block; color:#fff !important; font-size:30px; line-height:1; letter-spacing:-.06em; } body.public-site:has(.pago-home) .pago-global-stat strong span{color:#73e4bf !important}.pago-global-stat small{color:rgba(218,239,255,.72) !important;font-size:11px}
body.public-site:has(.pago-home) .stat-countries { left:28px; bottom:35px; }.stat-currencies{right:28px;top:32px}
body.public-site:has(.pago-home) .pago-global-live { position:absolute; z-index:2; left:28px; top:30px; color:#bdeaff; font-size:11px; letter-spacing:.15em; }.pago-global-live i{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#6dffc2;box-shadow:0 0 16px #6dffc2;animation:payyer-node-flash 1.5s infinite}
@keyframes payyer-globe-spin { from{transform:translate(-50%,-50%) rotateX(15deg) rotateY(0)} to{transform:translate(-50%,-50%) rotateX(15deg) rotateY(360deg)} }
@keyframes payyer-orbit-turn { from{rotate:0deg} to{rotate:360deg} }
@keyframes payyer-network-drift { from{background-position:0 0,0 0} to{background-position:120px 90px,-140px 120px} }
@keyframes payyer-node-flash { 0%,100%{opacity:.45;scale:.8} 50%{opacity:1;scale:1.15} }
@media(max-width:767px){body.public-site:has(.pago-home) .pago-global-stage{min-height:440px;margin-top:28px}.pago-global-globe{scale:.72}.pago-global-orbit{scale:.72}.pago-global-stat{scale:.78}.stat-countries{left:8px!important;bottom:12px!important}.stat-currencies{right:8px!important;top:12px!important}}

/* Full-bleed PAYYER canvas and visible three-dimensional motion. */
body.public-site:has(.pago-home) { overflow-x: hidden; }
body.public-site:has(.pago-home) .pago-home > section .container,
body.public-site:has(.pago-home) .pago-home > .pago-section .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 4.2vw !important;
    padding-right: 4.2vw !important;
}
body.public-site:has(.pago-home) .pago-section {
    min-height: min(760px, 82vh);
    display: flex;
    align-items: center;
}
body.public-site:has(.pago-home) .pago-section:nth-of-type(even) {
    background: linear-gradient(112deg, rgba(230,244,255,.74), rgba(255,255,255,.44)) !important;
}
@media (prefers-reduced-motion: no-preference) {
    body.public-site:has(.pago-home) .pago-feature-card,
    body.public-site:has(.pago-home) .pago-audience-card,
    body.public-site:has(.pago-home) .pago-usecase-card,
    body.public-site:has(.pago-home) .pago-advantage-card {
        animation: payyer-3d-float 6.5s cubic-bezier(.45,.05,.55,.95) infinite;
        transform-style: preserve-3d;
        will-change: transform;
    }
    body.public-site:has(.pago-home) .pago-feature-card:nth-child(even),
    body.public-site:has(.pago-home) .pago-audience-card:nth-child(even),
    body.public-site:has(.pago-home) .pago-usecase-card:nth-child(even),
    body.public-site:has(.pago-home) .pago-advantage-card:nth-child(even) { animation-delay: -2.3s; }
    body.public-site:has(.pago-home) .pago-feature-card:nth-child(3n),
    body.public-site:has(.pago-home) .pago-audience-card:nth-child(3n),
    body.public-site:has(.pago-home) .pago-usecase-card:nth-child(3n) { animation-delay: -4.1s; }
    body.public-site:has(.pago-home) .pago-map-panel,
    body.public-site:has(.pago-home) .pago-personal-hero,
    body.public-site:has(.pago-home) .modern-contact-shell { animation: payyer-3d-panel 9s ease-in-out infinite; }
}
@keyframes payyer-3d-float {
    0%,100% { transform: perspective(1200px) rotateX(0) rotateY(0) translate3d(0,0,0); }
    50% { transform: perspective(1200px) rotateX(3deg) rotateY(-4deg) translate3d(0,-13px,30px); }
}
@keyframes payyer-3d-panel {
    0%,100% { transform: perspective(1500px) rotateX(0) rotateY(0) translateZ(0); }
    50% { transform: perspective(1500px) rotateX(1.2deg) rotateY(1.5deg) translate3d(0,-9px,24px); }
}
@media (max-width: 767px) {
    body.public-site:has(.pago-home) .pago-home > section .container,
    body.public-site:has(.pago-home) .pago-home > .pago-section .container { padding-left: 6vw !important; padding-right: 6vw !important; }
    body.public-site:has(.pago-home) .pago-section { min-height: auto; }
}

body.public-site .pago-home {
    --pago-bg: #f4f7fb;
    --pago-ink: #0d1726;
    --pago-text: #536176;
    --pago-muted: #7a8799;
    --pago-line: #dbe4ef;
    --pago-surface: #ffffff;
    --pago-navy: #07111f;
    --pago-blue: #2f6bff;
    --pago-green: #16b981;
    --pago-teal: #1bb6a7;
    --pago-amber: #f4b740;
    --pago-red: #ff6b6b;
    --pago-shadow: 0 24px 58px rgba(13, 23, 38, 0.1);
    background: var(--pago-bg);
    color: var(--pago-text);
}

body.public-site .pago-home h1,
body.public-site .pago-home h2,
body.public-site .pago-home h3,
body.public-site .pago-home strong {
    color: var(--pago-ink) !important;
}

body.public-site .pago-home p {
    color: var(--pago-text) !important;
}

body.public-site .pago-hero {
    position: relative;
    min-height: 720px;
    padding: 126px 0 110px;
    background:
        linear-gradient(135deg, #07111f 0%, #10233c 58%, #0e3b38 100%);
    color: #ffffff;
    overflow: hidden;
}

body.public-site .pago-hero::before {
    position: absolute;
    inset: 0;
    content: "";
    background:
        linear-gradient(90deg, rgba(7, 17, 31, 0.08), rgba(7, 17, 31, 0.5) 62%, rgba(7, 17, 31, 0.18)),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 1px, transparent 1px, transparent 84px);
    pointer-events: none;
}

body.public-site .pago-hero .container {
    position: relative;
    z-index: 2;
}

body.public-site .pago-hero-content {
    max-width: 620px;
}

body.public-site .pago-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    margin-bottom: 18px;
    border: 1px solid rgba(22, 185, 129, 0.24);
    border-radius: 999px;
    background: rgba(22, 185, 129, 0.1);
    color: var(--pago-green) !important;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    padding: 9px 14px;
}

body.public-site .pago-hero h1 {
    max-width: 610px;
    margin-bottom: 22px;
    color: #ffffff !important;
    font-size: 62px;
    font-weight: 760;
    line-height: 1.04;
}

body.public-site .pago-hero h1.pago-animated-heading {
    color: transparent !important;
    background:
        linear-gradient(90deg, #ffffff 0%, #6ee7f9 18%, #8b5cf6 36%, #ff4fd8 54%, #fbbf24 72%, #34d399 88%, #ffffff 100%);
    background-size: 320% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pagoHeadlineColorPlay 5.5s ease-in-out infinite;
    text-shadow: 0 0 28px rgba(99, 91, 255, 0.22);
}

@keyframes pagoHeadlineColorPlay {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

body.public-site .pago-hero p {
    max-width: 570px;
    margin-bottom: 30px;
    color: #d8e2ef !important;
    font-size: 17px;
    line-height: 1.78;
}

body.public-site .pago-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

body.public-site .pago-home .btn--base {
    background: var(--pago-green) !important;
    box-shadow: 0 14px 28px rgba(22, 185, 129, 0.24);
}

body.public-site .pago-link-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 12px 18px;
}

body.public-site .pago-link-btn.dark {
    border-color: var(--pago-line);
    background: #ffffff;
    color: var(--pago-ink) !important;
}

body.public-site .pago-hero-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 570px;
    margin-top: 42px;
}

body.public-site .pago-hero-metrics div {
    min-height: 92px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    padding: 18px;
}

body.public-site .pago-hero-metrics strong {
    display: block;
    margin-bottom: 7px;
    color: #ffffff !important;
    font-size: 28px;
    font-weight: 760;
    line-height: 1;
}

body.public-site .pago-hero-metrics span {
    color: #b8c7d9;
    font-size: 13px;
    font-weight: 650;
}

body.public-site .pago-hero-visual {
    position: absolute;
    z-index: 1;
    top: 104px;
    right: max(24px, calc((100vw - 1180px) / 2));
    width: 520px;
    min-height: 520px;
    pointer-events: none;
}

body.public-site .pago-dashboard-card,
body.public-site .pago-virtual-card,
body.public-site .pago-wallet-tile {
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}

body.public-site .pago-dashboard-card {
    width: 390px;
    min-height: 340px;
    margin-left: auto;
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(16px);
    padding: 22px;
}

body.public-site .pago-dashboard-top {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
}

body.public-site .pago-dashboard-top span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff6b6b;
}

body.public-site .pago-dashboard-top span:nth-child(2) {
    background: var(--pago-amber);
}

body.public-site .pago-dashboard-top span:nth-child(3) {
    background: var(--pago-green);
}

body.public-site .pago-dashboard-stat small {
    display: block;
    margin-bottom: 8px;
    color: #aebdd0;
    font-size: 13px;
    font-weight: 700;
}

body.public-site .pago-dashboard-stat strong {
    color: #ffffff !important;
    font-size: 34px;
    line-height: 1;
}

body.public-site .pago-dashboard-bars {
    height: 116px;
    display: flex;
    align-items: end;
    gap: 12px;
    margin: 28px 0;
    padding: 16px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
}

body.public-site .pago-dashboard-bars span {
    width: 100%;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, var(--pago-green), var(--pago-blue));
}

body.public-site .pago-dashboard-row {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: rgba(22, 185, 129, 0.12);
    color: #d8fff0;
    padding: 12px 14px;
}

body.public-site .pago-dashboard-row i {
    color: var(--pago-green);
    font-size: 22px;
}

body.public-site .pago-virtual-card {
    position: absolute;
    left: 0;
    bottom: 58px;
    width: 348px;
    min-height: 216px;
    background:
        linear-gradient(135deg, rgba(7, 17, 31, 0.78), rgba(17, 39, 69, 0.82)),
        url("../images/africocard/africocard-card-background.png") center / cover;
    color: #ffffff;
    padding: 24px;
}

body.public-site .pago-card-head,
body.public-site .pago-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    font-size: 13px;
    font-weight: 750;
    text-transform: uppercase;
}

body.public-site .pago-card-head span,
body.public-site .pago-card-bottom span,
body.public-site .pago-card-bottom strong {
    color: #ffffff !important;
}

body.public-site .pago-card-head i {
    font-size: 25px;
}

body.public-site .pago-chip {
    width: 44px;
    height: 34px;
    margin-top: 30px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: linear-gradient(135deg, #e9c764, #8f7434);
}

body.public-site .pago-card-number {
    margin: 22px 0 22px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    word-spacing: 6px;
}

body.public-site .pago-wallet-tile {
    position: absolute;
    right: 24px;
    bottom: 0;
    width: 240px;
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffffff;
    padding: 18px;
}

body.public-site .pago-wallet-tile i {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(47, 107, 255, 0.1);
    color: var(--pago-blue);
    font-size: 26px;
}

body.public-site .pago-wallet-tile span {
    display: block;
    color: var(--pago-muted);
    font-size: 12px;
    font-weight: 700;
}

body.public-site .pago-wallet-tile strong {
    color: var(--pago-ink) !important;
    font-size: 18px;
}

body.public-site .pago-section {
    padding: 88px 0;
}

/* PAYYER trust / UFI 3D experience */
body.public-site .pago-trust {
    background: radial-gradient(circle at 82% 15%, rgba(94, 104, 255, .18), transparent 28%), #091323;
}
body.public-site .pago-trust-shell {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 56px;
    min-height: 440px;
    padding: 56px;
    border: 1px solid rgba(154, 200, 255, .18);
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(15, 36, 67, .95), rgba(10, 20, 38, .78));
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3), inset 0 1px rgba(255,255,255,.1);
}
body.public-site .pago-trust h2 { color: #f7fbff; font-size: 42px; line-height: 1.15; margin: 14px 0; }
body.public-site .pago-trust p { color: #b9c9dc; max-width: 650px; font-size: 16px; line-height: 1.75; }
body.public-site .pago-trust-points { display: grid; gap: 12px; margin-top: 28px; }
body.public-site .pago-trust-points span { color: #e9f5ff; font-weight: 650; }
body.public-site .pago-trust-points i { color: #64d4ff; margin-right: 10px; font-size: 20px; vertical-align: middle; }
body.public-site .pago-orbit-stage { position: relative; width: 340px; height: 340px; margin: auto; transform-style: preserve-3d; animation: pago-float 7s ease-in-out infinite; }
body.public-site .pago-orbit-core { position: absolute; inset: 105px; z-index: 3; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #ffffff, #bfdbff 45%, #4775bd); box-shadow: 0 20px 46px rgba(36, 123, 245, .55), inset -12px -12px 25px rgba(0, 41, 96, .28); }
body.public-site .pago-orbit-core img { width: 65%; max-height: 70px; object-fit: contain; }
body.public-site .pago-orbit { position:absolute; inset: 35px; border: 1px solid rgba(116, 207, 255, .42); border-radius: 50%; transform: rotateX(68deg) rotateZ(15deg); }
body.public-site .pago-orbit-two { inset: 6px 58px; border-color: rgba(136, 120, 255, .45); transform: rotateY(68deg) rotateZ(-22deg); }
body.public-site .pago-orbit-node { position: absolute; z-index:4; display:grid; place-items:center; width:52px; height:52px; border-radius:16px; color:#fff; background:linear-gradient(135deg,#527cf6,#56c6dd); box-shadow: 0 15px 24px rgba(0,0,0,.3); }
body.public-site .pago-orbit-node i { font-size:25px; }
body.public-site .node-one { top:18px; left:68px; } body.public-site .node-two { right:14px; bottom:76px; background:linear-gradient(135deg,#8f6cf0,#df70ce); } body.public-site .node-three { left:12px; bottom:65px; background:linear-gradient(135deg,#17a98b,#65d3aa); }
@keyframes pago-float { 0%,100% { transform: translateY(0) rotateY(-8deg); } 50% { transform: translateY(-14px) rotateY(8deg); } }
@media (max-width: 768px) { body.public-site .pago-trust-shell { grid-template-columns: 1fr; padding: 30px; gap: 28px; } body.public-site .pago-trust h2 { font-size: 32px; } body.public-site .pago-orbit-stage { transform: scale(.82); margin: -20px auto; } }

/* PAYYER immersive 3D visual language */
body.public-site .pago-hero {
    min-height: 810px;
    padding: 162px 0 132px;
    isolation: isolate;
    background: radial-gradient(circle at 74% 23%, #204d8b 0, transparent 27%), radial-gradient(circle at 82% 78%, #642c8c 0, transparent 28%), linear-gradient(125deg, #05091d 0%, #071c36 47%, #082e36 100%);
}
body.public-site .pago-hero::after { content:""; position:absolute; inset:0; z-index:-1; opacity:.5; background: linear-gradient(112deg, transparent 0 37%, rgba(117,121,255,.09) 37.1% 37.3%, transparent 37.4% 100%), linear-gradient(68deg, transparent 0 63%, rgba(83,232,221,.08) 63.1% 63.3%, transparent 63.4% 100%); }
body.public-site .pago-hero-content { max-width: 650px; transform: translateZ(0); animation: pago-rise .8s cubic-bezier(.2,.8,.2,1) both; }
body.public-site .pago-hero h1 { max-width:650px; font-size: 72px; letter-spacing: -3.3px; }
body.public-site .pago-hero p { max-width: 590px; font-size: 18px; }
body.public-site .pago-eyebrow { border-color: rgba(101,226,255,.35); background: rgba(67,205,251,.1); color:#7fe4ff !important; box-shadow: inset 0 1px rgba(255,255,255,.16), 0 10px 35px rgba(36,185,255,.13); }
body.public-site .pago-home .btn--base { border-radius: 14px; background: linear-gradient(120deg,#4cd8df,#6b63f4 53%,#d15de5) !important; box-shadow: 0 18px 40px rgba(81,100,246,.38); }
body.public-site .pago-link-btn { border-radius:14px; backdrop-filter: blur(18px); }
body.public-site .pago-hero-metrics div { border-radius: 18px; background: linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.045)); backdrop-filter: blur(18px); box-shadow: inset 0 1px rgba(255,255,255,.18), 0 18px 44px rgba(0,0,0,.18); }
body.public-site .pago-hero-visual { top: 118px; width: 610px; min-height: 560px; perspective: 1300px; }
body.public-site .pago-aurora-orb { position:absolute; z-index:-1; border-radius:50%; filter:blur(6px); animation:pago-orb 8s ease-in-out infinite; }
body.public-site .orb-cyan { width:270px; height:270px; right:10px; top:14px; background: radial-gradient(circle,#46d9e5 0,rgba(70,217,229,.05) 68%,transparent 70%); }
body.public-site .orb-violet { width:300px; height:300px; left:0; bottom:0; background:radial-gradient(circle,#934eea 0,rgba(147,78,234,.03) 70%,transparent 72%); animation-delay:-4s; }
body.public-site .pago-hero-ring { position:absolute; z-index:0; border:1px solid rgba(154,213,255,.27); border-radius:50%; transform:rotateX(66deg) rotateZ(-20deg); animation:pago-ring 12s linear infinite; }
body.public-site .ring-one { width:530px; height:210px; top:145px; left:28px; } body.public-site .ring-two { width:440px; height:170px; top:180px; left:70px; animation-direction:reverse; animation-duration:9s; }
body.public-site .pago-dashboard-card { position:relative; z-index:2; width:420px; min-height:360px; border-radius:26px; background:linear-gradient(135deg,rgba(28,49,83,.82),rgba(28,35,71,.47)); box-shadow: inset 0 1px rgba(255,255,255,.24), 24px 30px 60px rgba(0,0,0,.34); transform: rotateY(-13deg) rotateX(6deg); animation:pago-dashboard-float 7s ease-in-out infinite; }
body.public-site .pago-virtual-card { z-index:4; width:375px; min-height:235px; border-radius:26px; background:linear-gradient(135deg,rgba(3,11,29,.8),rgba(24,52,98,.8)),url("../images/africocard/africocard-card-background.png") center/cover; box-shadow: -22px 38px 65px rgba(0,0,0,.43), inset 0 1px rgba(255,255,255,.3); transform:rotateY(17deg) rotateX(7deg) rotateZ(-5deg); animation:pago-card-float 6s ease-in-out infinite; }
body.public-site .pago-wallet-tile { z-index:5; border-radius:18px; background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(212,243,255,.88)); box-shadow:0 22px 48px rgba(1,9,29,.28); transform:translateZ(75px) rotateY(-8deg); }
body.public-site .pago-feature-card, body.public-site .pago-audience-card, body.public-site .pago-usecase-card, body.public-site .pago-step-card, body.public-site .pago-advantage-card { border-radius:22px; transition:transform .35s ease, box-shadow .35s ease; }
body.public-site .pago-feature-card:hover, body.public-site .pago-audience-card:hover, body.public-site .pago-usecase-card:hover { transform: translateY(-10px) rotateX(2deg) rotateY(-2deg); box-shadow:0 26px 50px rgba(29,70,131,.22); }
@keyframes pago-rise { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes pago-orb { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-25px,19px) scale(1.13)} }
@keyframes pago-ring { to { transform:rotateX(66deg) rotateZ(340deg); } }
@keyframes pago-dashboard-float { 0%,100%{transform:rotateY(-13deg) rotateX(6deg) translateY(0)} 50%{transform:rotateY(-7deg) rotateX(2deg) translateY(-19px)} }
@keyframes pago-card-float { 0%,100%{transform:rotateY(17deg) rotateX(7deg) rotateZ(-5deg) translateY(0)} 50%{transform:rotateY(11deg) rotateX(2deg) rotateZ(-2deg) translateY(-24px)} }
@media (prefers-reduced-motion: reduce) { body.public-site .pago-hero *, body.public-site .pago-trust * { animation:none !important; } }
@media (max-width: 991px) { body.public-site .pago-hero { min-height:auto; padding:120px 0 74px; } body.public-site .pago-hero h1 { font-size:52px; } body.public-site .pago-hero-visual { position:relative; top:auto; right:auto; margin:44px auto 0; max-width:100%; transform:scale(.9); transform-origin:top center; } }
@media (max-width: 575px) { body.public-site .pago-hero h1 { font-size:42px; letter-spacing:-2px; } body.public-site .pago-hero-visual { width:460px; margin-left:50%; transform:translateX(-50%) scale(.7); height:375px; margin-bottom:-95px; } }

/* AfricoCard reference palette: PAYYER edition */
body.public-site {
    --pago-bg: #fffdf9;
    --pago-ink: #061619;
    --pago-text: #5e6b6d;
    --pago-muted: #8b9695;
    --pago-line: #e2e6dd;
    --pago-surface: #ffffff;
    --pago-surface-soft: #f6f9f1;
    --pago-navy: #001d21;
    --pago-green: #f8553c;
    --pago-blue: #11575a;
    font-family: "DM Sans", sans-serif;
}
body.public-site .pago-home h1, body.public-site .pago-home h2, body.public-site .pago-home h3 { font-family:"Rethink Sans", sans-serif; }
body.public-site .header-section { background:rgba(0,29,33,.98) !important; border-bottom:1px solid rgba(255,255,255,.08); }
body.public-site .header-bottom-area { background:transparent !important; }
body.public-site .site-logo img { width:174px !important; height:auto !important; max-height:52px; object-fit:contain; }
body.public-site .header-bottom-area .navbar-collapse .main-menu li a { color:#d9e3dd !important; font-family:"DM Sans",sans-serif; font-weight:550; }
body.public-site .header-bottom-area .navbar-collapse .main-menu li a:hover, body.public-site .header-bottom-area .navbar-collapse .main-menu li a.active { color:#ff8c79 !important; }
body.public-site .pago-hero {
    min-height:760px;
    background:radial-gradient(circle at 78% 15%,rgba(248,85,60,.23),transparent 27%), radial-gradient(circle at 71% 77%,rgba(87,183,165,.18),transparent 29%), #001d21;
}
body.public-site .pago-hero::before { background:linear-gradient(90deg,rgba(0,29,33,.42),rgba(0,29,33,.04) 58%,rgba(0,29,33,.2)), repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 88px); }
body.public-site .pago-hero h1.pago-animated-heading { background:linear-gradient(100deg,#fff 0%,#fff3ee 27%,#ff957f 54%,#f8553c 73%,#ffcfad 100%); background-size:230% 100%; -webkit-background-clip:text; background-clip:text; }
body.public-site .pago-home .btn--base { background:#f8553c !important; box-shadow:0 17px 34px rgba(248,85,60,.32); }
body.public-site .pago-home .btn--base:hover { background:#e33116 !important; transform:translateY(-2px); }
body.public-site .pago-eyebrow { background:rgba(248,85,60,.13); border-color:rgba(248,85,60,.35); color:#ff9d8a !important; }
body.public-site .pago-hero-metrics div { border-radius:3px; background:rgba(255,255,255,.09); }
body.public-site .pago-dashboard-card { border-radius:5px; background:linear-gradient(145deg,rgba(18,65,68,.92),rgba(1,30,34,.75)); }
body.public-site .pago-virtual-card { border-radius:8px; background:linear-gradient(135deg,#102f32,#001d21 57%,#74352d); }
body.public-site .pago-chip { background:linear-gradient(135deg,#f7bd83,#9d632e); }
body.public-site .pago-dashboard-bars span { background:linear-gradient(180deg,#ff9c82,#f8553c); }
body.public-site .pago-wallet-tile { border-radius:3px; background:#fffdf9; }
body.public-site .orb-cyan { background:radial-gradient(circle,#70c6af 0,rgba(112,198,175,.05) 68%,transparent 70%); }
body.public-site .orb-violet { background:radial-gradient(circle,#f8553c 0,rgba(248,85,60,.03) 70%,transparent 72%); }
body.public-site .pago-hero-ring { border-color:rgba(255,187,168,.42); }
body.public-site .pago-feature-card, body.public-site .pago-audience-card, body.public-site .pago-usecase-card, body.public-site .pago-step-card, body.public-site .pago-advantage-card { border-radius:3px; box-shadow:0 18px 38px rgba(0,29,33,.08); }
body.public-site .pago-feature-card:hover, body.public-site .pago-audience-card:hover, body.public-site .pago-usecase-card:hover { box-shadow:0 24px 52px rgba(0,29,33,.16); }
body.public-site .pago-trust { background: #001d21; }
body.public-site .pago-trust-shell { border-radius:3px; background:linear-gradient(135deg,#042b2e,#001d21 67%,#183a38); }
body.public-site .pago-orbit-core { background:radial-gradient(circle at 30% 20%,#fff,#ffd4c9 45%,#f8553c); }
body.public-site .pago-orbit-node { border-radius:3px; background:linear-gradient(135deg,#f8553c,#fb9c74); }
body.public-site .node-two { background:linear-gradient(135deg,#117b72,#65b996); } body.public-site .node-three { background:linear-gradient(135deg,#bc4c3c,#f88b67); }

/* Dedicated Africa 3D hero — single cinematic composition */
body.public-site .pago-hero {
    min-height: 760px;
    background: linear-gradient(90deg, rgba(0,16,21,.94) 0%, rgba(0,16,21,.76) 35%, rgba(0,16,21,.18) 68%, rgba(0,16,21,.16) 100%), url("../images/payyer/payyer-africa-3d-hero-people.png") center right / cover no-repeat !important;
}
body.public-site .pago-hero::before { background: linear-gradient(90deg,rgba(0,18,22,.25),transparent 60%) !important; }
body.public-site .pago-hero::after { background: radial-gradient(circle at 12% 43%, rgba(248,85,60,.20), transparent 22%), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) !important; background-size:auto, 96px 96px !important; opacity:.65; }
body.public-site .pago-hero-visual { display:none; }
body.public-site .pago-hero-content { position:relative; z-index:3; max-width:625px; padding-top:34px; }
body.public-site .pago-hero h1.pago-animated-heading {
    color:#fff !important;
    background:none !important;
    -webkit-background-clip:initial;
    background-clip:initial;
    -webkit-text-fill-color:#fff;
    font-size:clamp(58px, 6.2vw, 98px);
    line-height:.96;
    letter-spacing:-.075em;
    text-shadow: 0 2px 0 rgba(255,255,255,.13), 0 12px 0 rgba(0,0,0,.08), 0 29px 45px rgba(0,0,0,.68);
    transform-style:preserve-3d;
    animation: payyer-white-3d 5.8s cubic-bezier(.55,.02,.2,1) infinite;
}
body.public-site .pago-hero p { color:rgba(255,255,255,.84) !important; max-width:540px; font-size:17px; }
body.public-site .pago-hero .pago-eyebrow { color:#fff1ed !important; border-color:rgba(255,255,255,.28); background:rgba(248,85,60,.24); }
body.public-site .pago-hero-metrics { max-width:535px; }
body.public-site .pago-hero-metrics div { border-color:rgba(255,255,255,.19); background:rgba(0,18,22,.37); backdrop-filter: blur(12px); }
@keyframes payyer-white-3d { 0%,100% { transform:perspective(850px) rotateX(0deg) rotateY(0deg) translateZ(0); } 45% { transform:perspective(850px) rotateX(2.2deg) rotateY(-2.5deg) translate3d(6px,-7px,30px); } 70% { transform:perspective(850px) rotateX(-1deg) rotateY(1.4deg) translate3d(-3px,2px,10px); } }
@media (max-width: 767px) { body.public-site .pago-hero { min-height:720px; background-position:64% center !important; } body.public-site .pago-hero-content { padding-top:0; } body.public-site .pago-hero h1.pago-animated-heading { font-size:56px; } }

/* Full-bleed PAYYER Africa editorial hero */
body.public-site:has(.pago-home) .header-section { position:absolute !important; z-index:20; width:100%; background:transparent !important; border-bottom:0 !important; }
body.public-site:has(.pago-home) .header-bottom-area { background:transparent !important; }
body.public-site:has(.pago-home) .header-menu-content { min-height:104px; }
body.public-site:has(.pago-home) .header .container.custom-container { width:100%; max-width:none; padding-left:4.5vw; padding-right:4.5vw; }
body.public-site:has(.pago-home) .header-menu-content { position:relative; }
body.public-site:has(.pago-home) .site-logo { position:absolute !important; left:0 !important; top:25px; margin:0 !important; z-index:5; }
body.public-site:has(.pago-home) .header .navbar-collapse { justify-content:flex-end !important; }
body.public-site:has(.pago-home) .header .main-menu { margin-left:auto !important; margin-right:24px !important; }
body.public-site:has(.pago-home) .site-logo img { width:188px !important; filter:none; opacity:1; }
body.public-site:has(.pago-home) .pago-hero {
    min-height:100vh;
    padding:clamp(170px, 20vh, 280px) 0 74px;
    background:linear-gradient(90deg,rgba(12,18,24,.44) 0%,rgba(12,18,24,.05) 60%,rgba(12,18,24,.22) 100%), url("../images/payyer/payyer-africa-wildlife-hero-8k.jpg") center center / cover no-repeat !important;
}
body.public-site:has(.pago-home) .pago-hero::before { background:linear-gradient(180deg,rgba(0,13,18,.37),transparent 28%,rgba(0,8,11,.22) 100%) !important; }
body.public-site:has(.pago-home) .pago-hero::after { display:none; }
body.public-site:has(.pago-home) .pago-hero .container { width:100%; max-width:none; padding-left:4.2vw; padding-right:2vw; }
body.public-site:has(.pago-home) .pago-hero-content { width:100%; max-width:none; padding-top:0; }
body.public-site:has(.pago-home) .pago-hero h1.pago-animated-heading {
    max-width:100%;
    color:#fff !important;
    font-family:"Rethink Sans",sans-serif;
    font-size:clamp(108px,14.2vw,290px);
    font-weight:500;
    line-height:.79;
    letter-spacing:-.074em;
    text-transform:none;
    text-shadow:0 2px 0 rgba(255,255,255,.1),0 17px 38px rgba(0,0,0,.4);
    animation:payyer-editorial-text 9s cubic-bezier(.5,0,.25,1) infinite;
}
body.public-site:has(.pago-home) .pago-hero h1.pago-animated-heading span { display:block; color:#fff; opacity:0; transform:translate3d(-36px,18px,0) rotateX(-14deg); animation:payyer-word-fade 9s cubic-bezier(.16,1,.3,1) infinite; }
body.public-site:has(.pago-home) .pago-hero h1.pago-animated-heading span:nth-child(2) { margin-left:0; animation-delay:.22s; }
body.public-site:has(.pago-home) .pago-hero h1.pago-animated-heading span:nth-child(3) { margin-left:0; animation-delay:.44s; }
body.public-site:has(.pago-home) .pago-hero .pago-eyebrow { margin-bottom:28px; color:#fff !important; background:transparent; border-color:rgba(255,255,255,.45); }
body.public-site:has(.pago-home) .pago-hero p { max-width:470px; color:#fff !important; font-size:16px; line-height:1.55; text-shadow:0 2px 12px rgba(0,0,0,.55); }
body.public-site:has(.pago-home) .pago-actions { margin-top:22px; }
body.public-site:has(.pago-home) .pago-hero-metrics { position:absolute; z-index:4; right:4.2vw; bottom:42px; display:grid; max-width:520px; grid-template-columns:1fr; gap:12px; }
body.public-site:has(.pago-home) .pago-hero-metrics div { min-height:0; padding:0; border:0; border-radius:0; background:transparent; text-align:right; box-shadow:none; }
body.public-site:has(.pago-home) .pago-hero-metrics strong { display:inline; color:#fff; font-size:clamp(12px,1vw,18px); font-weight:500; letter-spacing:.12em; line-height:1.2; text-transform:uppercase; text-shadow:0 3px 16px rgba(0,0,0,.55); } body.public-site:has(.pago-home) .pago-hero-metrics span { margin-left:9px; color:#fff; font-size:10px; text-transform:uppercase; }
@keyframes payyer-editorial-text { 0%,100% { transform:perspective(1000px) rotateX(0) translateY(0); } 50% { transform:perspective(1000px) rotateX(1.2deg) translateY(-8px); } }
@keyframes payyer-word-fade { 0%,8% { opacity:0; transform:translate3d(-36px,18px,0) rotateX(-14deg); } 18%,78% { opacity:1; transform:translate3d(0,0,0) rotateX(0); } 92%,100% { opacity:0; transform:translate3d(26px,-12px,0) rotateX(8deg); } }
@media(max-width:767px) { body.public-site:has(.pago-home) .pago-hero { min-height:100svh; padding:175px 0 70px; background-position:57% center !important; } body.public-site:has(.pago-home) .pago-hero .container { padding-left:6vw; } body.public-site:has(.pago-home) .pago-hero h1.pago-animated-heading { font-size:clamp(76px,21vw,132px); line-height:.8; } body.public-site:has(.pago-home) .pago-hero h1.pago-animated-heading span:nth-child(2) { margin-left:4vw; } body.public-site:has(.pago-home) .pago-hero-metrics { display:none; } body.public-site:has(.pago-home) .header-menu-content { min-height:80px; } }

/* PAYYER single-page system — light, high-contrast, dimensional sections. */
body.public-site:has(.pago-home) .pago-home {
    background:
        radial-gradient(circle at 8% 22%, rgba(70, 160, 255, .11), transparent 26%),
        radial-gradient(circle at 91% 37%, rgba(255, 169, 73, .12), transparent 25%),
        #f4f8fc;
}
body.public-site:has(.pago-home) .pago-section {
    position: relative;
    overflow: hidden;
    padding: clamp(84px, 10vw, 150px) 0;
    background: transparent !important;
}
body.public-site:has(.pago-home) .pago-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    right: -270px;
    top: -270px;
    background: radial-gradient(circle, rgba(110, 211, 243, .18), transparent 68%);
    pointer-events: none;
}
body.public-site:has(.pago-home) .pago-section .container { position: relative; z-index: 1; }
body.public-site:has(.pago-home) .pago-section h2,
body.public-site:has(.pago-home) .pago-section h3,
body.public-site:has(.pago-home) .pago-section strong { color: #10233e !important; }
body.public-site:has(.pago-home) .pago-section p,
body.public-site:has(.pago-home) .pago-section li,
body.public-site:has(.pago-home) .pago-section span,
body.public-site:has(.pago-home) .pago-section small { color: #50647d !important; }
body.public-site:has(.pago-home) .pago-section .pago-eyebrow { color: #315d9e !important; }

body.public-site:has(.pago-home) .pago-feature-card,
body.public-site:has(.pago-home) .pago-step-card,
body.public-site:has(.pago-home) .pago-audience-card,
body.public-site:has(.pago-home) .pago-usecase-card,
body.public-site:has(.pago-home) .pago-advantage-card,
body.public-site:has(.pago-home) .pago-map-panel,
body.public-site:has(.pago-home) .pago-split-card,
body.public-site:has(.pago-home) .pago-personal-hero,
body.public-site:has(.pago-home) .pago-referral-wrap,
body.public-site:has(.pago-home) .modern-contact-shell {
    border: 1px solid rgba(122, 157, 197, .22) !important;
    box-shadow: 0 24px 56px rgba(35, 66, 105, .14), inset 0 1px rgba(255,255,255,.96) !important;
    transform: perspective(1200px) rotateX(0deg) translateZ(0);
    transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease;
}
body.public-site:has(.pago-home) .pago-feature-card:hover,
body.public-site:has(.pago-home) .pago-step-card:hover,
body.public-site:has(.pago-home) .pago-audience-card:hover,
body.public-site:has(.pago-home) .pago-usecase-card:hover,
body.public-site:has(.pago-home) .pago-advantage-card:hover {
    transform: perspective(1200px) rotateX(3deg) rotateY(-3deg) translate3d(0,-10px,22px) !important;
    box-shadow: 0 32px 62px rgba(35, 66, 105, .22), inset 0 1px rgba(255,255,255,.98) !important;
}
body.public-site:has(.pago-home) .pago-trust-shell,
body.public-site:has(.pago-home) .pago-final-panel {
    border: 1px solid rgba(122, 157, 197, .22) !important;
    box-shadow: 0 30px 72px rgba(35, 66, 105, .18), inset 0 1px rgba(255,255,255,.22) !important;
}
body.public-site:has(.pago-home) .pago-trust-shell h2,
body.public-site:has(.pago-home) .pago-trust-shell p,
body.public-site:has(.pago-home) .pago-final-panel h2 { color: #fff !important; }
body.public-site:has(.pago-home) .pago-trust-shell span,
body.public-site:has(.pago-home) .pago-final-panel span { color: rgba(255,255,255,.82) !important; }
body.public-site:has(.pago-home) .modern-contact-section,
body.public-site:has(.pago-home) .contact-section { background: transparent !important; }
body.public-site:has(.pago-home) .modern-contact-shell { background: linear-gradient(135deg, #fff 0%, #eef8ff 100%) !important; }
body.public-site:has(.pago-home) .contact-form-area .form--control {
    color: #14233b !important;
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(80, 125, 178, .24) !important;
}
body.public-site:has(.pago-home) .contact-form-area label,
body.public-site:has(.pago-home) .modern-contact-info h1,
body.public-site:has(.pago-home) .modern-contact-info h4,
body.public-site:has(.pago-home) .modern-contact-header h2 { color: #10233e !important; }
@media (prefers-reduced-motion: no-preference) {
    body.public-site:has(.pago-home) .pago-section .pago-section-head,
    body.public-site:has(.pago-home) .pago-section .pago-trust-shell,
    body.public-site:has(.pago-home) .pago-section .pago-split-card,
    body.public-site:has(.pago-home) .pago-section .modern-contact-shell { animation: payyer-section-rise .8s both; }
}
@keyframes payyer-section-rise { from { opacity: 0; transform: perspective(1200px) translate3d(0,36px,-36px) rotateX(3deg); } to { opacity: 1; transform: perspective(1200px) translate3d(0,0,0) rotateX(0); } }

body.public-site .pago-section-head {
    max-width: 780px;
    margin: 0 auto 42px;
}

body.public-site .pago-section-head h2,
body.public-site .pago-coverage h2,
body.public-site .pago-split-copy h2,
body.public-site .pago-personal h2,
body.public-site .pago-referral h2,
body.public-site .pago-final-panel h2 {
    margin-bottom: 16px;
    font-size: 42px;
    font-weight: 760;
    line-height: 1.16;
}

body.public-site .pago-section-head p,
body.public-site .pago-coverage p,
body.public-site .pago-split-copy p,
body.public-site .pago-personal p,
body.public-site .pago-referral p,
body.public-site .pago-final-panel p {
    margin: 0;
    font-size: 16px;
    line-height: 1.76;
}

body.public-site .pago-text-link,
body.public-site .pago-usecase-card a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 26px;
    color: var(--pago-green) !important;
    font-size: 14px;
    font-weight: 750;
}

body.public-site .pago-map-panel {
    position: relative;
    min-height: 420px;
    overflow: hidden;
    border: 1px solid var(--pago-line);
    border-radius: 8px;
    background:
        linear-gradient(180deg, #ffffff 0%, #edf5ff 100%);
    box-shadow: var(--pago-shadow);
}

body.public-site .pago-map-grid {
    position: absolute;
    inset: 24px;
    border-radius: 8px;
    background:
        linear-gradient(rgba(47, 107, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(47, 107, 255, 0.1) 1px, transparent 1px);
    background-size: 44px 44px;
}

body.public-site .pago-map-dot {
    position: absolute;
    width: 13px;
    height: 13px;
    border: 3px solid #ffffff;
    border-radius: 50%;
    background: var(--pago-green);
    box-shadow: 0 0 0 8px rgba(22, 185, 129, 0.12);
}

body.public-site .pago-dot-1 { left: 12%; top: 22%; }
body.public-site .pago-dot-2 { left: 24%; top: 54%; background: var(--pago-blue); }
body.public-site .pago-dot-3 { left: 38%; top: 34%; }
body.public-site .pago-dot-4 { left: 51%; top: 65%; background: var(--pago-amber); }
body.public-site .pago-dot-5 { left: 62%; top: 26%; }
body.public-site .pago-dot-6 { left: 73%; top: 46%; background: var(--pago-blue); }
body.public-site .pago-dot-7 { left: 82%; top: 70%; }
body.public-site .pago-dot-8 { left: 18%; top: 76%; background: var(--pago-red); }
body.public-site .pago-dot-9 { left: 44%; top: 18%; background: var(--pago-blue); }
body.public-site .pago-dot-10 { left: 70%; top: 78%; background: var(--pago-amber); }
body.public-site .pago-dot-11 { left: 88%; top: 30%; }

body.public-site .pago-map-card {
    position: absolute;
    left: 28px;
    bottom: 28px;
    width: 250px;
    border: 1px solid var(--pago-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 20px 42px rgba(13, 23, 38, 0.12);
    padding: 18px;
}

body.public-site .pago-map-card.secondary {
    right: 28px;
    left: auto;
    top: 28px;
    bottom: auto;
}

body.public-site .pago-map-card strong {
    display: block;
    margin-bottom: 8px;
    font-size: 20px;
}

body.public-site .pago-map-card span {
    color: var(--pago-text);
    font-size: 13px;
    line-height: 1.55;
}

body.public-site .pago-feature-grid,
body.public-site .pago-audience-grid,
body.public-site .pago-usecase-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

body.public-site .pago-feature-card,
body.public-site .pago-audience-card,
body.public-site .pago-usecase-card,
body.public-site .pago-step-card,
body.public-site .pago-advantage-card {
    min-height: 100%;
    border: 1px solid var(--pago-line);
    border-radius: 8px;
    background: var(--pago-surface);
    box-shadow: var(--pago-shadow);
    padding: 24px;
}

body.public-site .pago-feature-card i,
body.public-site .pago-audience-card i,
body.public-site .pago-advantage-card i {
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    border-radius: 8px;
    background: rgba(22, 185, 129, 0.1);
    color: var(--pago-green);
    font-size: 28px;
}

body.public-site .pago-feature-card:nth-child(2) i,
body.public-site .pago-audience-card:nth-child(2n) i,
body.public-site .pago-advantage-card:nth-child(2) i {
    background: rgba(47, 107, 255, 0.1);
    color: var(--pago-blue);
}

body.public-site .pago-feature-card:nth-child(3) i,
body.public-site .pago-audience-card:nth-child(3n) i,
body.public-site .pago-advantage-card:nth-child(3) i {
    background: rgba(244, 183, 64, 0.14);
    color: #b7791f;
}

body.public-site .pago-feature-card h3,
body.public-site .pago-audience-card h3,
body.public-site .pago-usecase-card h3,
body.public-site .pago-step-card h3,
body.public-site .pago-advantage-card h3 {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.34;
}

body.public-site .pago-feature-card p,
body.public-site .pago-audience-card p,
body.public-site .pago-usecase-card p,
body.public-site .pago-step-card p,
body.public-site .pago-advantage-card p {
    margin: 0;
    color: var(--pago-text) !important;
    font-size: 14px;
    line-height: 1.7;
}

body.public-site .pago-split-section {
    background: #ffffff;
}

body.public-site .pago-split-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.82fr);
    gap: 34px;
    align-items: center;
    margin-bottom: 28px;
    border: 1px solid var(--pago-line);
    border-radius: 8px;
    background: #f7fbff;
    padding: 34px;
}

body.public-site .pago-split-card.reverse {
    grid-template-columns: minmax(360px, 0.82fr) minmax(0, 1fr);
}

body.public-site .pago-split-card.reverse .pago-split-copy {
    order: 2;
}

body.public-site .pago-split-card.reverse .pago-gift-grid {
    order: 1;
}

body.public-site .pago-check-list {
    display: grid;
    gap: 12px;
    margin: 24px 0 0;
}

body.public-site .pago-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--pago-text);
    font-size: 14px;
    line-height: 1.55;
}

body.public-site .pago-check-list i {
    width: 22px;
    height: 22px;
    min-width: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(22, 185, 129, 0.12);
    color: var(--pago-green);
}

body.public-site .pago-asset-panel {
    border: 1px solid var(--pago-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--pago-shadow);
    padding: 20px;
}

body.public-site .pago-coin-row {
    min-height: 72px;
    display: grid;
    grid-template-columns: 52px 1fr 34px;
    align-items: center;
    gap: 12px;
    border-radius: 8px;
    background: #f4f8ff;
    padding: 12px;
}

body.public-site .pago-coin-row img {
    width: 38px;
    height: 38px;
}

body.public-site .pago-coin-row strong,
body.public-site .pago-coin-row small {
    display: block;
}

body.public-site .pago-coin-row small {
    color: var(--pago-muted);
}

body.public-site .pago-coin-row i {
    color: var(--pago-blue);
    font-size: 24px;
}

body.public-site .pago-mini-card {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 16px 0;
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(7, 17, 31, 0.78), rgba(17, 39, 69, 0.82)),
        url("../images/africocard/africocard-card-background.png") center / cover;
    color: #ffffff;
    padding: 20px;
}

body.public-site .pago-mini-card span,
body.public-site .pago-mini-card strong {
    color: #ffffff !important;
}

body.public-site .pago-ledger {
    display: grid;
    gap: 10px;
}

body.public-site .pago-ledger div,
body.public-site .pago-fee-card dl div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--pago-line);
    padding-bottom: 10px;
}

body.public-site .pago-ledger span,
body.public-site .pago-fee-card dt {
    color: var(--pago-muted);
    font-size: 13px;
    font-weight: 700;
}

body.public-site .pago-ledger strong,
body.public-site .pago-fee-card dd {
    color: var(--pago-ink) !important;
    font-size: 14px;
    font-weight: 800;
}

body.public-site .pago-gift-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

body.public-site .pago-gift-grid span {
    min-height: 104px;
    display: flex;
    align-items: end;
    justify-content: flex-start;
    border: 1px solid var(--pago-line);
    border-radius: 8px;
    background: linear-gradient(135deg, #ffffff, #eaf3ff);
    color: var(--pago-ink);
    font-size: 14px;
    font-weight: 800;
    padding: 16px;
    box-shadow: var(--pago-shadow);
}

body.public-site .pago-gift-grid span:nth-child(2n) {
    background: linear-gradient(135deg, #ffffff, #eafbf4);
}

body.public-site .pago-gift-grid span:nth-child(3n) {
    background: linear-gradient(135deg, #ffffff, #fff7e4);
}

body.public-site .pago-step-grid,
body.public-site .pago-advantage-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

body.public-site .pago-step-card span {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border-radius: 8px;
    background: var(--pago-navy);
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
}

body.public-site .pago-audience {
    background: #ffffff;
}

body.public-site .pago-audience-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.public-site .pago-usecase-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

body.public-site .pago-usecase-card {
    display: flex;
    flex-direction: column;
}

body.public-site .pago-usecase-card > span {
    display: inline-flex;
    width: fit-content;
    min-height: 30px;
    align-items: center;
    margin-bottom: 18px;
    border-radius: 999px;
    background: rgba(47, 107, 255, 0.1);
    color: var(--pago-blue);
    font-size: 12px;
    font-weight: 800;
    padding: 8px 11px;
}

body.public-site .pago-usecase-card a {
    margin-top: auto;
    padding-top: 22px;
}

body.public-site .pago-advantage {
    background: var(--pago-navy);
}

body.public-site .pago-advantage-wrap {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    gap: 34px;
    align-items: start;
}

body.public-site .pago-advantage .pago-section-head {
    margin: 0;
}

body.public-site .pago-advantage h2,
body.public-site .pago-advantage p,
body.public-site .pago-advantage-card h3,
body.public-site .pago-advantage-card p {
    color: #ffffff !important;
}

body.public-site .pago-advantage-card {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

body.public-site .pago-personal {
    background: #ffffff;
}

body.public-site .pago-personal-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 34px;
    align-items: center;
    border: 1px solid var(--pago-line);
    border-radius: 8px;
    background: #f7fbff;
    padding: 36px;
}

body.public-site .pago-fee-card {
    border: 1px solid var(--pago-line);
    border-radius: 8px;
    background: #ffffff;
    box-shadow: var(--pago-shadow);
    padding: 24px;
}

body.public-site .pago-fee-card > span {
    color: var(--pago-green);
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

body.public-site .pago-fee-card h3 {
    margin: 8px 0 18px;
    font-size: 26px;
    font-weight: 800;
}

body.public-site .pago-fee-card dl {
    display: grid;
    gap: 12px;
    margin-bottom: 22px;
}

body.public-site .pago-fee-card dd {
    margin: 0;
}

body.public-site .pago-fee-card .btn--base {
    width: 100%;
}

body.public-site .pago-referral {
    background: #edf7f4;
}

body.public-site .pago-referral-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 26px;
    align-items: center;
}

body.public-site .pago-referral-steps {
    display: grid;
    gap: 12px;
}

body.public-site .pago-referral-steps div {
    min-height: 64px;
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(22, 185, 129, 0.18);
    border-radius: 8px;
    background: #ffffff;
    padding: 12px;
}

body.public-site .pago-referral-steps strong {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--pago-green);
    color: #ffffff !important;
}

body.public-site .pago-referral-steps span {
    color: var(--pago-ink);
    font-size: 14px;
    font-weight: 750;
}

body.public-site .pago-final-cta {
    padding: 80px 0 96px;
    background: #ffffff;
}

body.public-site .pago-final-panel {
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid var(--pago-line);
    border-radius: 8px;
    background:
        linear-gradient(135deg, #07111f, #123d39);
    text-align: center;
    box-shadow: var(--pago-shadow);
    padding: 46px;
}

body.public-site .pago-final-panel h2 {
    max-width: 720px;
    margin-right: auto;
    margin-left: auto;
    color: #ffffff !important;
}

@media (max-width: 1199px) {
    body.public-site .pago-hero {
        min-height: 660px;
    }

    body.public-site .pago-hero h1 {
        font-size: 52px;
    }

    body.public-site .pago-hero-visual {
        width: 450px;
        opacity: 0.9;
    }

    body.public-site .pago-dashboard-card {
        width: 340px;
    }

    body.public-site .pago-virtual-card {
        width: 312px;
    }

    body.public-site .pago-feature-grid,
    body.public-site .pago-usecase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    body.public-site .pago-hero {
        min-height: auto;
        padding: 82px 0 64px;
    }

    body.public-site .pago-hero-visual {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        min-height: 500px;
        margin-top: 42px;
    }

    body.public-site .pago-dashboard-card {
        margin-right: 0;
    }

    body.public-site .pago-section {
        padding: 68px 0;
    }

    body.public-site .pago-section-head h2,
    body.public-site .pago-coverage h2,
    body.public-site .pago-split-copy h2,
    body.public-site .pago-personal h2,
    body.public-site .pago-referral h2,
    body.public-site .pago-final-panel h2 {
        font-size: 34px;
    }

    body.public-site .pago-split-card,
    body.public-site .pago-split-card.reverse,
    body.public-site .pago-advantage-wrap,
    body.public-site .pago-personal-hero,
    body.public-site .pago-referral-wrap {
        grid-template-columns: 1fr;
    }

    body.public-site .pago-split-card.reverse .pago-split-copy,
    body.public-site .pago-split-card.reverse .pago-gift-grid {
        order: initial;
    }

    body.public-site .pago-step-grid,
    body.public-site .pago-audience-grid,
    body.public-site .pago-advantage-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body.public-site .pago-hero h1 {
        font-size: 38px;
    }

    body.public-site .pago-hero p {
        font-size: 15px;
    }

    body.public-site .pago-actions .btn--base,
    body.public-site .pago-actions .pago-link-btn {
        width: 100%;
    }

    body.public-site .pago-hero-metrics,
    body.public-site .pago-feature-grid,
    body.public-site .pago-step-grid,
    body.public-site .pago-audience-grid,
    body.public-site .pago-usecase-grid,
    body.public-site .pago-advantage-grid,
    body.public-site .pago-gift-grid {
        grid-template-columns: 1fr;
    }

    body.public-site .pago-hero-visual {
        min-height: 560px;
    }

    body.public-site .pago-dashboard-card,
    body.public-site .pago-virtual-card,
    body.public-site .pago-wallet-tile {
        position: relative;
        left: auto;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-bottom: 14px;
    }

    body.public-site .pago-map-panel {
        min-height: 500px;
    }

    body.public-site .pago-map-card,
    body.public-site .pago-map-card.secondary {
        right: 18px;
        left: 18px;
        width: auto;
    }

    body.public-site .pago-map-card.secondary {
        top: 18px;
    }

    body.public-site .pago-map-card {
        bottom: 18px;
    }

    body.public-site .pago-split-card,
    body.public-site .pago-personal-hero,
    body.public-site .pago-final-panel {
        padding: 24px;
    }
}

@media (max-width: 575px) {
    body.public-site .pago-hero {
        padding-top: 62px;
    }

    body.public-site .pago-hero h1 {
        font-size: 32px;
    }

    body.public-site .pago-section-head h2,
    body.public-site .pago-coverage h2,
    body.public-site .pago-split-copy h2,
    body.public-site .pago-personal h2,
    body.public-site .pago-referral h2,
    body.public-site .pago-final-panel h2 {
        font-size: 28px;
    }
}

body.public-site .fees-page {
    --fees-bg: #151515;
    --fees-panel: #050607;
    --fees-panel-soft: #0b111c;
    --fees-line: #223047;
    --fees-text: #c3d5ec;
    --fees-white: #ffffff;
    --fees-purple: #89158b;
    --fees-purple-soft: #2a184a;
    --fees-blue: #72a9ff;
    --fees-green: #5cf082;
    --fees-gold: #ffd75c;
    background: var(--fees-bg);
    color: var(--fees-text);
}

body.public-site .fees-page h1,
body.public-site .fees-page h2,
body.public-site .fees-page h3,
body.public-site .fees-page p,
body.public-site .fees-page span,
body.public-site .fees-page strong {
    letter-spacing: 0;
}

body.public-site .fees-hero {
    padding: 56px 0 18px;
    background:
        linear-gradient(180deg, #07111f 0%, #151515 100%);
}

body.public-site .fees-eyebrow,
body.public-site .fees-offer-pill,
body.public-site .fees-plan-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    border: 1px solid rgba(128, 89, 255, 0.62);
    border-radius: 999px;
    background: rgba(128, 89, 255, 0.24);
    color: #e9e4ff !important;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    padding: 7px 13px;
}

body.public-site .fees-hero h1 {
    margin: 14px 0 8px;
    color: var(--fees-white) !important;
    font-size: 42px;
    font-weight: 820;
    line-height: 1.05;
}

body.public-site .fees-hero p {
    max-width: 620px;
    color: var(--fees-text) !important;
    font-size: 14px;
    line-height: 1.55;
}

body.public-site .fees-pricing-section {
    padding: 24px 0 58px;
    background: var(--fees-bg);
}

body.public-site .fees-offer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 20px;
    align-items: center;
    margin-bottom: 26px;
    border: 1px solid rgba(128, 89, 255, 0.46);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(82, 47, 132, 0.5), rgba(8, 11, 21, 0.96) 72%),
        #07080b;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28);
    padding: 24px 30px;
}

body.public-site .fees-offer-card h2 {
    margin: 18px 0 8px;
    color: var(--fees-white) !important;
    font-size: 28px;
    font-weight: 820;
    line-height: 1.12;
}

body.public-site .fees-offer-card p {
    margin: 0;
    color: var(--fees-white) !important;
    font-size: 15px;
    line-height: 1.45;
}

body.public-site .fees-offer-action {
    display: grid;
    justify-items: end;
    gap: 18px;
}

body.public-site .fees-offer-action > span {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(255, 215, 92, 0.25);
    border-radius: 999px;
    background: rgba(255, 215, 92, 0.12);
    color: #9e937b !important;
    font-size: 11px;
    font-weight: 850;
    text-transform: uppercase;
    padding: 7px 13px;
}

body.public-site .fees-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--fees-purple);
    color: var(--fees-white) !important;
    font-size: 14px;
    font-weight: 820;
    line-height: 1.2;
    text-align: center;
    padding: 12px 22px;
    transition: transform 180ms ease, background-color 180ms ease;
}

body.public-site .fees-button:hover {
    transform: translateY(-2px);
    background: #a21ca5;
    color: var(--fees-white) !important;
}

body.public-site .fees-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

body.public-site .fees-plan-card {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(128, 89, 255, 0.34);
    border-radius: 8px;
    background:
        radial-gradient(circle at 92% 6%, rgba(128, 89, 255, 0.12), transparent 42%),
        var(--fees-panel);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
    padding: 22px;
}

body.public-site .fees-plan-card.is-blue {
    border-color: rgba(77, 141, 255, 0.34);
    background:
        radial-gradient(circle at 92% 6%, rgba(58, 121, 255, 0.14), transparent 42%),
        var(--fees-panel);
}

body.public-site .fees-plan-card.is-gold {
    border-color: rgba(178, 114, 17, 0.45);
    background:
        radial-gradient(circle at 92% 6%, rgba(178, 114, 17, 0.18), transparent 42%),
        var(--fees-panel);
}

body.public-site .fees-plan-card.is-blue .fees-plan-badge {
    border-color: rgba(114, 169, 255, 0.52);
    background: rgba(62, 126, 237, 0.2);
    color: #c9dcff !important;
}

body.public-site .fees-plan-card.is-gold .fees-plan-badge {
    border-color: rgba(255, 192, 55, 0.55);
    background: rgba(255, 184, 40, 0.16);
    color: var(--fees-gold) !important;
}

body.public-site .fees-plan-card h2 {
    margin: 16px 0 18px;
    color: var(--fees-white) !important;
    font-size: 24px;
    font-weight: 820;
    line-height: 1.18;
}

body.public-site .fees-plan-card.is-blue h2 {
    color: var(--fees-blue) !important;
}

body.public-site .fees-plan-card.is-gold h2 {
    color: var(--fees-gold) !important;
}

body.public-site .fees-top-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

body.public-site .fees-mini-box {
    min-height: 68px;
    display: grid;
    align-content: center;
    gap: 6px;
    border: 1px solid var(--fees-line);
    border-radius: 8px;
    background: var(--fees-panel-soft);
    padding: 12px;
}

body.public-site .fees-mini-box span,
body.public-site .fees-detail-list span {
    color: var(--fees-text) !important;
    font-size: 13px;
    line-height: 1.35;
}

body.public-site .fees-mini-box strong {
    color: var(--fees-white) !important;
    font-size: 19px;
    font-weight: 850;
    line-height: 1.1;
}

body.public-site .fees-mini-box strong.is-free {
    color: var(--fees-green) !important;
}

body.public-site .fees-detail-list {
    overflow: hidden;
    border: 1px solid var(--fees-line);
    border-radius: 8px;
    background: rgba(11, 17, 28, 0.42);
}

body.public-site .fees-detail-list div {
    min-height: 44px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--fees-line);
    padding: 10px 14px;
}

body.public-site .fees-detail-list div:last-child {
    border-bottom: 0;
}

body.public-site .fees-detail-list div.is-wide {
    grid-template-columns: 1fr;
    align-items: start;
}

body.public-site .fees-detail-list strong {
    color: var(--fees-white) !important;
    font-size: 13px;
    font-weight: 850;
    line-height: 1.35;
    text-align: right;
}

body.public-site .fees-detail-list .is-success {
    color: var(--fees-green) !important;
}

body.public-site .fees-detail-list .is-strong {
    color: var(--fees-white) !important;
    font-weight: 850;
}

body.public-site .fees-warning-note {
    margin: 18px 0 0;
    border: 1px solid rgba(255, 192, 55, 0.28);
    border-radius: 8px;
    background: rgba(94, 61, 8, 0.28);
    color: #fff0bd !important;
    font-size: 13px;
    line-height: 1.45;
    padding: 14px;
}

body.public-site .fees-card-button {
    align-self: center;
    min-width: 220px;
    margin-top: auto;
    transform: none;
}

body.public-site .fees-warning-note + .fees-card-button {
    transform: none;
    margin-top: 18px;
}

@media (max-width: 1199px) {
    body.public-site .fees-offer-card {
        padding: 24px;
    }

    body.public-site .fees-offer-card h2 {
        font-size: 26px;
    }

    body.public-site .fees-card-button {
        transform: none;
        margin-top: 22px;
    }
}

@media (max-width: 991px) {
    body.public-site .fees-offer-card {
        grid-template-columns: 1fr;
    }

    body.public-site .fees-offer-action {
        justify-items: start;
        gap: 18px;
    }
}

@media (max-width: 767px) {
    body.public-site .fees-hero {
        padding-top: 44px;
    }

    body.public-site .fees-hero h1 {
        font-size: 34px;
    }

    body.public-site .fees-offer-card,
    body.public-site .fees-plan-card {
        padding: 18px;
    }

    body.public-site .fees-offer-card h2 {
        margin-top: 14px;
        font-size: 24px;
    }

    body.public-site .fees-offer-card p {
        font-size: 14px;
    }

    body.public-site .fees-top-grid {
        grid-template-columns: 1fr;
    }

    body.public-site .fees-detail-list div {
        grid-template-columns: 1fr;
        gap: 6px;
        padding: 10px 12px;
    }

    body.public-site .fees-detail-list strong {
        text-align: left;
    }

    body.public-site .fees-button,
    body.public-site .fees-card-button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 575px) {
    body.public-site .fees-pricing-section {
        padding-bottom: 44px;
    }

    body.public-site .fees-plan-card h2 {
        font-size: 22px;
    }
}

/* Modern compact Fees page refresh */
body.public-site .fees-page {
    --fees-bg: #f5f7fb;
    --fees-panel: #ffffff;
    --fees-panel-soft: #f8fafc;
    --fees-line: #d9e2ef;
    --fees-text: #475569;
    --fees-heading: #0f172a;
    --fees-muted: #64748b;
    --fees-purple: #7c2d92;
    --fees-blue: #2563eb;
    --fees-green: #12805c;
    --fees-gold: #b7791f;
    background: var(--fees-bg) !important;
    color: var(--fees-text) !important;
}

body.public-site .fees-page,
body.public-site .fees-page * {
    letter-spacing: 0 !important;
}

body.public-site .fees-page .container {
    max-width: 1180px;
}

body.public-site .fees-hero {
    padding: 38px 0 14px !important;
    background: var(--fees-bg) !important;
    text-align: center;
}

body.public-site .fees-eyebrow,
body.public-site .fees-offer-pill,
body.public-site .fees-plan-badge {
    min-height: 26px !important;
    border: 1px solid rgba(124, 45, 146, 0.18) !important;
    background: #f3e8ff !important;
    color: #6d247d !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 6px 10px !important;
}

body.public-site .fees-hero h1 {
    margin: 12px 0 6px !important;
    color: var(--fees-heading) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    line-height: 1.12 !important;
}

body.public-site .fees-hero p {
    max-width: 560px !important;
    margin: 0 auto !important;
    color: var(--fees-muted) !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}

body.public-site .fees-pricing-section {
    padding: 18px 0 44px !important;
    background: var(--fees-bg) !important;
}

body.public-site .fees-offer-card {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 18px !important;
    margin-bottom: 18px !important;
    border: 1px solid var(--fees-line) !important;
    border-radius: 8px !important;
    background: var(--fees-panel) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06) !important;
    padding: 18px 20px !important;
}

body.public-site .fees-offer-card h2 {
    margin: 12px 0 6px !important;
    color: var(--fees-heading) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

body.public-site .fees-offer-card p {
    margin: 0 !important;
    color: var(--fees-muted) !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

body.public-site .fees-offer-action {
    gap: 12px !important;
}

body.public-site .fees-offer-action > span {
    min-height: 26px !important;
    border: 1px solid rgba(183, 121, 31, 0.2) !important;
    background: #fff7ed !important;
    color: #8a5a17 !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    padding: 6px 10px !important;
}

body.public-site .fees-button {
    min-height: 38px !important;
    border-radius: 8px !important;
    background: var(--fees-purple) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    padding: 10px 16px !important;
    box-shadow: none !important;
}

body.public-site .fees-button:hover {
    background: #6b237d !important;
    color: #ffffff !important;
}

body.public-site .fees-card-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.public-site .fees-plan-card {
    border: 1px solid var(--fees-line) !important;
    border-radius: 8px !important;
    background: var(--fees-panel) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.055) !important;
    padding: 18px !important;
}

body.public-site .fees-plan-card.is-blue,
body.public-site .fees-plan-card.is-gold {
    background: var(--fees-panel) !important;
}

body.public-site .fees-plan-card.is-blue .fees-plan-badge {
    border-color: rgba(37, 99, 235, 0.18) !important;
    background: #eff6ff !important;
    color: var(--fees-blue) !important;
}

body.public-site .fees-plan-card.is-gold .fees-plan-badge {
    border-color: rgba(183, 121, 31, 0.22) !important;
    background: #fffbeb !important;
    color: var(--fees-gold) !important;
}

body.public-site .fees-plan-card h2,
body.public-site .fees-plan-card.is-blue h2,
body.public-site .fees-plan-card.is-gold h2 {
    margin: 12px 0 14px !important;
    color: var(--fees-heading) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

body.public-site .fees-top-grid {
    gap: 8px !important;
    margin-bottom: 12px !important;
}

body.public-site .fees-mini-box {
    min-height: 58px !important;
    gap: 4px !important;
    border: 1px solid var(--fees-line) !important;
    border-radius: 8px !important;
    background: var(--fees-panel-soft) !important;
    padding: 10px !important;
}

body.public-site .fees-mini-box span,
body.public-site .fees-detail-list span {
    color: var(--fees-muted) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

body.public-site .fees-mini-box strong {
    color: var(--fees-heading) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
}

body.public-site .fees-mini-box strong.is-free,
body.public-site .fees-detail-list .is-success {
    color: var(--fees-green) !important;
}

body.public-site .fees-detail-list {
    border: 1px solid var(--fees-line) !important;
    border-radius: 8px !important;
    background: var(--fees-panel) !important;
}

body.public-site .fees-detail-list div {
    min-height: 38px !important;
    gap: 10px !important;
    border-bottom: 1px solid var(--fees-line) !important;
    padding: 8px 10px !important;
}

body.public-site .fees-detail-list strong {
    color: var(--fees-heading) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
}

body.public-site .fees-detail-list .is-strong {
    color: var(--fees-heading) !important;
    font-weight: 800 !important;
}

body.public-site .fees-warning-note {
    margin: 12px 0 0 !important;
    border: 1px solid #fde68a !important;
    border-radius: 8px !important;
    background: #fffbeb !important;
    color: #7c4a03 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    padding: 10px !important;
}

body.public-site .fees-card-button {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 14px !important;
}

@media (max-width: 1199px) {
    body.public-site .fees-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 991px) {
    body.public-site .fees-offer-card {
        grid-template-columns: 1fr !important;
    }

    body.public-site .fees-offer-action {
        justify-items: start !important;
    }
}

@media (max-width: 767px) {
    body.public-site .fees-hero h1 {
        font-size: 28px !important;
    }

    body.public-site .fees-card-grid {
        grid-template-columns: 1fr !important;
    }

    body.public-site .fees-plan-card,
    body.public-site .fees-offer-card {
        padding: 14px !important;
    }
}

/* Header auth buttons and Fees dark mode */
body.public-site .navbar-right .header-action {
    gap: 8px !important;
}

body.public-site .navbar-right .header-action a.btn--base.btn {
    min-height: 38px !important;
    min-width: 86px !important;
    border: 1px solid var(--site-line) !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: var(--site-title) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 10px 16px !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
}

body.public-site .navbar-right .header-action a.btn--base.btn:hover,
body.public-site .navbar-right .header-action a.btn--base.btn:focus {
    border-color: var(--site-accent) !important;
    background: var(--site-accent-soft) !important;
    color: var(--site-accent) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.public-site .navbar-right .header-action a.btn-active {
    min-height: 38px !important;
    min-width: 92px !important;
    border: 1px solid var(--site-accent) !important;
    border-radius: 8px !important;
    background: var(--site-accent) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    padding: 10px 16px !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    white-space: nowrap !important;
}

body.public-site .navbar-right .header-action a.btn-active:hover,
body.public-site .navbar-right .header-action a.btn-active:focus {
    border-color: #4f46e5 !important;
    background: #4f46e5 !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
}

body.public-site.dark .navbar-right .header-action a.btn--base.btn {
    border-color: var(--site-line) !important;
    background: var(--site-surface) !important;
    color: var(--site-title) !important;
}

body.public-site.dark .navbar-right .header-action a.btn--base.btn:hover,
body.public-site.dark .navbar-right .header-action a.btn--base.btn:focus {
    border-color: var(--site-accent) !important;
    background: rgba(99, 91, 255, 0.16) !important;
    color: #dbeafe !important;
}

body.public-site.dark .navbar-right .header-action a.btn-active {
    border-color: var(--site-accent) !important;
    background: var(--site-accent) !important;
    color: #ffffff !important;
}

body.public-site.dark .fees-page {
    --fees-bg: #0f1724;
    --fees-panel: #151f2f;
    --fees-panel-soft: #1c283a;
    --fees-line: #2a3548;
    --fees-text: #cbd5e1;
    --fees-heading: #f8fafc;
    --fees-muted: #94a3b8;
    --fees-purple: #8b5cf6;
    --fees-blue: #60a5fa;
    --fees-green: #4ade80;
    --fees-gold: #facc15;
    background: var(--fees-bg) !important;
    color: var(--fees-text) !important;
}

body.public-site.dark .fees-hero,
body.public-site.dark .fees-pricing-section {
    background: var(--fees-bg) !important;
}

body.public-site.dark .fees-hero h1,
body.public-site.dark .fees-plan-card h2,
body.public-site.dark .fees-plan-card.is-blue h2,
body.public-site.dark .fees-plan-card.is-gold h2,
body.public-site.dark .fees-mini-box strong,
body.public-site.dark .fees-detail-list strong,
body.public-site.dark .fees-detail-list .is-strong {
    color: var(--fees-heading) !important;
}

body.public-site.dark .fees-hero p,
body.public-site.dark .fees-offer-card p,
body.public-site.dark .fees-mini-box span,
body.public-site.dark .fees-detail-list span {
    color: var(--fees-muted) !important;
}

body.public-site.dark .fees-offer-card,
body.public-site.dark .fees-plan-card,
body.public-site.dark .fees-detail-list {
    border-color: var(--fees-line) !important;
    background: var(--fees-panel) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24) !important;
}

body.public-site.dark .fees-mini-box {
    border-color: var(--fees-line) !important;
    background: var(--fees-panel-soft) !important;
}

body.public-site.dark .fees-detail-list div {
    border-bottom-color: var(--fees-line) !important;
}

body.public-site.dark .fees-eyebrow,
body.public-site.dark .fees-offer-pill,
body.public-site.dark .fees-plan-badge {
    border-color: rgba(139, 92, 246, 0.32) !important;
    background: rgba(139, 92, 246, 0.14) !important;
    color: #ddd6fe !important;
}

body.public-site.dark .fees-plan-card.is-blue .fees-plan-badge {
    border-color: rgba(96, 165, 250, 0.32) !important;
    background: rgba(96, 165, 250, 0.14) !important;
    color: #bfdbfe !important;
}

body.public-site.dark .fees-plan-card.is-gold .fees-plan-badge,
body.public-site.dark .fees-offer-action > span {
    border-color: rgba(250, 204, 21, 0.34) !important;
    background: rgba(250, 204, 21, 0.12) !important;
    color: #fde68a !important;
}

body.public-site.dark .fees-warning-note {
    border-color: rgba(250, 204, 21, 0.28) !important;
    background: rgba(120, 83, 12, 0.22) !important;
    color: #fde68a !important;
}

body.public-site .pago-final-panel .pago-eyebrow,
body.public-site .pago-final-panel h2,
body.public-site .pago-final-panel p,
body.public-site.dark .pago-final-panel .pago-eyebrow,
body.public-site.dark .pago-final-panel h2,
body.public-site.dark .pago-final-panel p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

body.public-site .pago-advantage .pago-section-head h2,
body.public-site .pago-advantage .pago-section-head p,
body.public-site .pago-advantage .pago-advantage-card h3,
body.public-site .pago-advantage .pago-advantage-card p,
body.public-site.dark .pago-advantage .pago-section-head h2,
body.public-site.dark .pago-advantage .pago-section-head p,
body.public-site.dark .pago-advantage .pago-advantage-card h3,
body.public-site.dark .pago-advantage .pago-advantage-card p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
}

body.public-site.dark .pago-home {
    --pago-bg: #0b111d;
    --pago-ink: #f8fafc;
    --pago-text: #cbd5e1;
    --pago-muted: #94a3b8;
    --pago-line: #293548;
    --pago-surface: #141d2b;
    --pago-surface-soft: #101827;
    --pago-navy: #070f1d;
    --pago-shadow: 0 24px 58px rgba(0, 0, 0, 0.32);
    background: #0b111d !important;
    color: var(--pago-text) !important;
}

body.public-site.dark .pago-home,
body.public-site.dark .pago-platform,
body.public-site.dark .pago-coverage,
body.public-site.dark .pago-steps,
body.public-site.dark .pago-usecases {
    background: #0b111d !important;
}

body.public-site.dark .pago-split-section,
body.public-site.dark .pago-audience,
body.public-site.dark .pago-personal,
body.public-site.dark .pago-final-cta {
    background: #0f1724 !important;
}

body.public-site.dark .pago-referral {
    background: linear-gradient(135deg, #0d1d1c 0%, #0b111d 100%) !important;
}

body.public-site.dark .pago-home h1:not(.pago-animated-heading),
body.public-site.dark .pago-home h2,
body.public-site.dark .pago-home h3,
body.public-site.dark .pago-home strong,
body.public-site.dark .pago-referral-steps span,
body.public-site.dark .pago-wallet-tile strong,
body.public-site.dark .pago-ledger strong,
body.public-site.dark .pago-fee-card dd {
    color: var(--pago-ink) !important;
}

body.public-site.dark .pago-home p,
body.public-site.dark .pago-check-list li,
body.public-site.dark .pago-map-card span,
body.public-site.dark .pago-coin-row small,
body.public-site.dark .pago-wallet-tile span,
body.public-site.dark .pago-ledger span,
body.public-site.dark .pago-fee-card dt {
    color: var(--pago-text) !important;
}

body.public-site.dark .pago-feature-card,
body.public-site.dark .pago-audience-card,
body.public-site.dark .pago-usecase-card,
body.public-site.dark .pago-step-card,
body.public-site.dark .pago-map-card,
body.public-site.dark .pago-asset-panel,
body.public-site.dark .pago-wallet-tile,
body.public-site.dark .pago-fee-card,
body.public-site.dark .pago-referral-steps div {
    border-color: var(--pago-line) !important;
    background: var(--pago-surface) !important;
    box-shadow: var(--pago-shadow) !important;
}

body.public-site.dark .pago-split-card,
body.public-site.dark .pago-personal-hero {
    border-color: var(--pago-line) !important;
    background: linear-gradient(135deg, #101827 0%, #121e2e 100%) !important;
}

body.public-site.dark .pago-map-panel {
    border-color: var(--pago-line) !important;
    background: linear-gradient(180deg, #111c2b 0%, #0c1421 100%) !important;
    box-shadow: var(--pago-shadow) !important;
}

body.public-site.dark .pago-map-grid {
    background:
        linear-gradient(rgba(96, 165, 250, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(96, 165, 250, 0.12) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
}

body.public-site.dark .pago-coin-row,
body.public-site.dark .pago-dashboard-bars {
    background: var(--pago-surface-soft) !important;
}

body.public-site.dark .pago-gift-grid span {
    border-color: var(--pago-line) !important;
    background: linear-gradient(135deg, #141d2b 0%, #102036 100%) !important;
    color: var(--pago-ink) !important;
    box-shadow: var(--pago-shadow) !important;
}

body.public-site.dark .pago-gift-grid span:nth-child(2n) {
    background: linear-gradient(135deg, #141d2b 0%, #0f2b25 100%) !important;
}

body.public-site.dark .pago-gift-grid span:nth-child(3n) {
    background: linear-gradient(135deg, #141d2b 0%, #2b2410 100%) !important;
}

body.public-site.dark .pago-ledger div,
body.public-site.dark .pago-fee-card dl div {
    border-bottom-color: var(--pago-line) !important;
}

body.public-site.dark .pago-link-btn.dark {
    border-color: var(--pago-line) !important;
    background: var(--pago-surface) !important;
    color: var(--pago-ink) !important;
}

body.public-site.dark .language-select .nice-select .list,
body.public-site.dark .language-select .nice-select .option {
    border-color: var(--site-line) !important;
    background: var(--site-surface) !important;
    color: var(--site-title) !important;
}

body.public-site.dark .language-select .nice-select .option:hover,
body.public-site.dark .language-select .nice-select .option.focus,
body.public-site.dark .language-select .nice-select .option.selected.focus {
    background: var(--site-surface-soft) !important;
    color: var(--site-title) !important;
}

body.public-site.dark .modern-contact-section {
    background: linear-gradient(180deg, #0b111d 0%, #0f1724 100%) !important;
}

body.public-site.dark .modern-contact-section .contact-form-area {
    border-color: var(--site-line) !important;
    background: var(--site-surface) !important;
}

body.public-site.dark .modern-contact-header .title,
body.public-site.dark .modern-contact-section label {
    color: var(--site-title) !important;
}

body.public-site.dark .modern-contact-section .form--control {
    border-color: var(--site-line) !important;
    background: #101827 !important;
    color: var(--site-title) !important;
}

body.public-site.dark .modern-contact-section .form--control::placeholder {
    color: var(--site-muted) !important;
}

@media (max-width: 991px) {
    body.public-site .modern-contact-shell {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
        gap: 18px;
    }

    body.public-site .modern-contact-info h1 {
        font-size: 34px;
    }

    body.public-site .modern-contact-info,
    body.public-site .modern-contact-section .contact-form-area {
        padding: 26px !important;
    }
}

@media (max-width: 767px) {
    body.public-site .modern-contact-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    body.public-site .modern-contact-section {
        padding: 42px 0 64px;
    }

    body.public-site .modern-contact-info,
    body.public-site .modern-contact-section .contact-form-area {
        padding: 22px !important;
    }

    body.public-site .modern-contact-info h1 {
        font-size: 28px;
    }

    body.public-site .modern-contact-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}

@media (max-width: 575px) {
    body.public-site .navbar-right .header-action {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    body.public-site .navbar-right .header-action a.btn--base.btn,
    body.public-site .navbar-right .header-action a.btn-active {
        width: 100%;
    }
}

/* CONTACT FINAL — keep both panels aligned and readable on every display. */
body.public-site .contact-section .modern-contact-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 22px !important;
}
body.public-site .contact-section .modern-contact-shell > * {
    min-width: 0 !important;
    display: flex !important;
}
body.public-site .contact-section .modern-contact-info,
body.public-site .contact-section .contact-form-area {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
}
body.public-site .contact-section .modern-contact-info {
    background: linear-gradient(135deg, #07172b 0%, #102b49 58%, #0b4a4a 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px rgba(255,255,255,.15), 0 28px 70px rgba(7,31,57,.28) !important;
}
body.public-site .contact-section .modern-contact-info h1,
body.public-site .contact-section .modern-contact-info h4,
body.public-site .contact-section .modern-contact-info .title,
body.public-site .contact-section .modern-contact-info strong {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.public-site .contact-section .modern-contact-info p,
body.public-site .contact-section .modern-contact-info .contact-containt span,
body.public-site .contact-section .modern-contact-info .contact-containt {
    color: rgba(234,244,255,.9) !important;
    opacity: 1 !important;
}
body.public-site .contact-section .modern-contact-info .contact-widget-box {
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(214,240,255,.22) !important;
}
body.public-site .contact-section .modern-contact-info .contact-icon {
    background: linear-gradient(135deg, #5b7cff, #6be0cf) !important;
}
@media (max-width: 767px) {
    body.public-site .contact-section .modern-contact-shell { grid-template-columns: 1fr !important; }
    body.public-site .contact-section .modern-contact-shell > * { display: block !important; }
}