@charset "utf-8";
html,body{
    scroll-behavior: smooth;
    font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif;
    font-family: Microsoft YaHei,tahoma,arial,Hiragino Sans GB,\5b8b\4f53,sans-serif;
}
.text-center{
    text-align: center;
}
.link-style{
    color: #fff;
}
.link-style:hover{
    text-decoration:underline;
    color: #fff;
}
.index-link{
    color: #709dca;
}
.index-link:hover{
    color: #709dca;
    text-decoration: underline;
}
img {
    vertical-align: middle;
    border: 0 none;
    max-width: 100% /* ie8 */;
}
.postion {
    position: relative;
}
em,i{
    font-style: normal!important;
}

/* 导航 */
.navbar{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 70px;
    z-index: 999;
}
.navbar .navbar-logo{
    position: absolute;
    /* width: 240px; */
    height: 70px;
    line-height: 70px;
}
.navbar-pcac{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    line-height: 16px;
    background-image: linear-gradient(135deg, #E64242 0%, #CC1C1C 100%);
    color: #fff;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    height: 29px;
    margin-top: 16px;
    position: relative;
}
.pcac-main{
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    width: 560px;
    background-color: #fff;
    border-radius: 4px;
    padding: 5px;
}
.pcac-main img{
    width: 100%;
}
.navbar .layui-nav .layui-nav-item a{
    color: #777;
}
.navbar .layui-bg-gray{
    background-color: #fff!important;
}
.navbar .navbar-menu{
    position: absolute;
    left: 240px;
    top: 0;
}
.navbar .navbar-right{
    position: absolute;
    right: 16px;
    top: 0;
}
.navbar .navbar-right a.reg-btn{
    color: #ffbb42;
}
.step-box{
    text-align: center;
    padding-bottom: 60px;
}
.step-box img{
    margin-bottom: 50px;
}
.step-box h3{
    color: #394b50;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 10px;
}
.layui-nav .layui-this:after, .layui-nav-bar{
    background-color: #028efc;
}
.shrink-right{
    display: none;
    position: absolute;
    right: 20px;
    height: 60px;
    line-height: 60px;
}
.navbar-collapse{
    height: 0;
    margin-top: 70px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgb(0 0 0 / 5%);
    overflow: hidden;
    transition: all 0.6s ease;
}
.open-this.navbar-collapse{
    height: 273px;
    transition: all 0.6s ease;
}
.navbar-collapse li a{
    display: block;
    padding: 10px 15px;
}
.navbar-tree{
    position: fixed;
    left: -100%;
    top: 0;
    height: 100vh;
    padding-bottom: 0.3rem;
    padding-top: 1.8rem;
    transition: all 0.3s;
    background: #fff;
    box-shadow: 0 0 20px rgb(0 0 0 / 60%);
}

.navbar-tree.open-this{
    left: 0;
    transition: all 0.6s ease;
}
.navbar-tree .layui-nav{
    background-color: transparent;
}
.navbar-tree ul li{
    border-bottom: 1px solid #E6E6E6;
}
.navbar-tree .layui-nav-itemed>a{
    color: #0277f3!important;
}
.navbar-close{
    position: absolute;
    right: 1.0rem;
    top: 1.0rem;
    font-weight: bold;
}
.navbar-tree .layui-nav-itemed>.layui-nav-child{
    background-color: transparent!important;
}
.navbar-tree .layui-nav-itemed>.layui-nav-child dd{
    padding-left: 0.5rem;
}
.navbar-login{
    text-align: center;
    margin-top: 1rem;
}
.navbar-login a{
    border-radius: 1.8rem;
}
.navbar-tree .layui-nav-tree .layui-nav-bar{
    display: none;
}
.navbar .layui-nav .layui-nav-item a:active{
    background-color: transparent;
}
.layui-nav-tree .layui-nav-child dd.layui-this a,.layui-nav-tree .layui-this>a{
    background-color: transparent;
    color: #fff;
}
.layui-nav-tree .layui-nav-item{
    background-color: transparent!important;
}
.layui-nav-tree .layui-nav-child dd{
    background-color: transparent!important;
}
@media screen and (max-width: 767px){
    .navbar-pcac{
        display: none;
    }
    .navbar-menu{
        display: none;
    }
    .navbar-right{
        display: none;
    }
    .shrink-right{
        display: block;
    }
    .login-img{
        display: none;
    }
    .login-form{
        padding-top: 0;
    }
}
.btn-deaful{
    background-color: #028efc;
}
.layui-input-wrap{
    position: relative;
    line-height: 38px;
}
.layui-input-prefix{
    position: absolute;
    top: 0;
    padding: 0 10px;
    width: 35px;
    height: 100%;
    text-align: center;
    transition: all .3s;
    box-sizing: border-box;
    left: 0;
    border-radius: 2px 0 0 2px;
}
.layui-input-prefix .layui-icon{
    font-family: layui-icon!important;
    font-size: 16px;
    font-style: normal;
}
.layui-input-wrap .layui-input {
    padding-right: 35px;
    padding-left: 35px;
}
.layui-input:focus, .layui-textarea:focus{
    border-color: #028efc!important;
}
.layui-form-checked[lay-skin=primary] i{
    border-color: #028efc!important;
    background-color: #028efc;
    color: #fff;
}
.layui-form-checkbox[lay-skin=primary]:hover i{
    border-color: #028efc;
    color: #fff;
}
.reg-form .layui-form-item .layui-form-checkbox[lay-skin=primary]{
    margin-top: -1px;
}
.accept-item{
    color: #a6aeb3;
    font-size: 13px;
}
/* 新首页 */
.layui-header.navbar{
    background-color: transparent;
}
.navbar .index-nav{
    background-color: transparent;
}
.navbar .index-nav .layui-nav-item{
	line-height: 70px;
}
.navbar .index-nav .layui-nav-item a{
    color: #fff;
	font-size:16px;
}
.navbar.scroll{
    background-color: #fff;
}
.navbar.scroll .index-nav .layui-nav-item a{
    color: #777;
}
.navbar .index-nav .layui-nav-item dl a{
    color: #777;
}
.banner{
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /*max-width: 1920px;
    min-width: 1200px;
    margin: 0 auto; */
    background-image: url(../img/banner-index.jpg);
    /* height: calc(100vh - 30px); */
    height: 900px;
}

.index-btn{
    color: #196bff;
    font-size: 16px;
    padding: 12px 60px;
    border-radius: 4px;
}
.banner .banner-btn a{
    border: 1px solid #2271ff;
    background-color: #276CFF;
    color: #fff;
}
.banner .banner-btn a:hover{
    opacity: .9;
    color: #fff;
}
.banner .banner-title{
    color: #ffffff;
    text-align: left;
    padding-top: 28%;
    position: relative;
    opacity: 0.95;
}
.banner .banner-title p{
    font-size: 42px;
    font-weight: 500;
    letter-spacing: 2px;
    text-shadow: -5px -2px 10px rgba(255,255,255,0);
    font-size: 56px;
    color: #272A44;
    letter-spacing: 0;
    font-weight: 600;
}
.banner .banner-title .desc{
    margin-top: 40px;
    margin-bottom: 60px;
    letter-spacing: 1px;
    color: #555;
}
.banner .banner-title .desc span{
    display: block;
    line-height: 33px;
    font-size: 22px;
}
@media screen and (max-width: 767px){
    .banner{
        height: 550px;
    }
    .navbar .shrink-right{
        color: #fff;
    }
    .navbar.scroll .shrink-right{
        color: #777;
    }
    .banner .banner-title p{
        font-size: 36px;
    }
}
/* 首页模块 */
#contact .box-body{
    padding: 48px 0;
}
.model-box{
    /* padding: 2% 0 3% 0; */
    padding: 100px 0;
}
.box-head{
    text-align: center;
    margin-bottom: 60px;
}
.index-mod1 .box-head h1{
    /* margin: 60px 0 80px 0; */
    color: #333;
    font-weight: 600;
    line-height: 1.2em;
}
.model-box h1{
    font-size: 32px;
    font-weight: bold;
    color: #333;
}
.box-head p{
    color: #5c5d5f!important;
    font-size: 16px;
    line-height: 2em;
    letter-spacing: 0px;
    margin-top: 10px;
}
.index-mod1{
    padding-bottom: 100px;
}
.index-mod1 dl {
    position: relative;
    background: #f1f5fe;
    border-radius: 10px;
    padding: 30px 38px;
}
.index-mod1 dl img{
    width: 126px;
}
.index-mod1 dl dt {
    position: absolute;
    top: 0px;
    right: 20px;
}
.index-mod1 dl dd {
    padding-left: 30px;
}
.index-mod1 dl dd h2{
    font-size: 28px;
    color: #2d70f5;
    font-weight: bold;
    margin-top: -30px;
    margin-bottom: 25px;
}

.model-box h2,.coop-mod3 dl dt h2{
    font-size: 28px;
    font-weight: bold;
}
.index-mod2 h2{
    font-weight: bold;
    color: #333;
}
.index-mod1 p{
    color: #1f1c1c;
    padding-right: 25px;
}
.index-mod1 p,.index-mod2 p,.index-mod3 p,.index-mod4 p,.index-mod5 p,.add-banner dd p,.juhe-mod1 dd p,.juhe-mod3 p,.juhe-mod4 dd p,.fenzhang-mod1 p,.fenzhang-mod2 p
,.fenzhang-mod3 p,.fenzhang-mod4 p,.wallet-mod1 p,.wallet-mod2 p,.qyfk-mod3 p,.wallet-mod3 p,.qyfk-mod1 p,.qyfk-mod2 p,.help1 dd p,.help3 p,.coop-model1 dl dd p
,.coop-mod2 dt p,.coop-mod3 dt p,.coop-mod4 dd p,.add-banner p,.index-mod7 p,.fenzhang-mod3 p{
    font-size: 16px;
    line-height: 1.8;
    color: #555;
}
.index-mod2 p,.index-mod4 p,.juhe-mod3 p,.fenzhang-mod1 p,.qyfk-mod1 p,.qyfk-mod2 p,.index-mod3 p,.fenzhang-mod3 p{
    margin: 15px 0 30px 0;
}
.index-mod2 a,.contact p{
    font-size: 16px;
    line-height: 2.85;
}

.index-mod3 dl{
    box-shadow: 0 4px 10px 0 #dfe2f6;
    border-radius: 10px;
    background: url(../img/index-img4.png) 50% no-repeat;
    background-size: 100% 100%;
    height: 414px;
}
.index-mod3 dl dd{
    padding: 30px 16px 30px 16px;
}
.index-mod3 dl dd h4{
    font-size: 17px;
    color: #333;
    letter-spacing: 0;
    /* font-weight: 600; */
    margin-bottom: 10px;
}
.index-mod3 dl dd p{
    font-size: 14px;
    color: #666;
    margin-top: 10px!important;
}
.index-mod3 dl dt{
    padding: 29px 0;
    text-align: center;
}
.index-mod3 dl dt span{
    display: inline-block;
    width: 28px;
    text-align: center;
    line-height: 28px;
    margin-right: 9px;
    font-size: 20px;
    background-color: rgba(223,226,246,.21);
    color: #fff;
    border-radius: 50%;
}
.index-mod3 dl dt b{
    font-family: PingFangSC-Semibold;
    font-size: 20px;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
    font-weight: 600;
}
.index-mod3 .circular{
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #7c8cb4;
    border-radius: 50%;
    margin-right: 8px;
}
.index-mod3 li h4{
    display: flex;
    align-items: center;
}
.index-mod3 li a{
    color: #2271ff;
    display: flex;
    align-items: center;
}
.index-mod3 li .btn-to{
    display: inline-block;
    background: url(../img/to.png) no-repeat;
    background-size: 13px 12px;
    width: 23px;
    height: 22px;
    background-position: center;
}

.model-box .btn-img{
    display: block;
    width: 160px;
    line-height: 46px;
    text-align: center;
    color: #2271ff;
    border-radius: 6px;
    border: 1px solid #2271ff;
}
.model-box .btn-img img{
    margin-left: 7px;
    transition: all 0.3s ease;
}
.model-box .btn-img:hover img{
    margin-left: 13px;
    transition: all 0.3s ease;

}
.index-mod2,.fenzhang-mod1,.wallet-mod2{
    padding-top: 100px;
    padding-bottom: 100px;
}
.model-box .index_btn{
    background-color: #0071ef;
    color: #fff;
    padding: 10px 25px;
    border-radius: 2px;
    font-size: 14px;
}
.model-box .index_btn.btn-blue-primary{
    background-color: rgba(0,113,239,.1);
    color: #0071ef;
}

.index-mod4 .item1{
    background: url(../img/expert1.80b94441.png) no-repeat;
}
.index-mod4 .item2{
    background: url(../img/expert2.54dba3bf.png) no-repeat;
}
.index-mod4 .item3{
    background: url(../img/expert3.508c35ac.png) no-repeat;
}
.index-mod4 .item4{
    background: url(../img/expert4.842d0433.png) no-repeat;
}
.index-mod4 .item5{
    background: url(../img/expert5.ae2196e2.png) no-repeat;
}
.index-mod4 .item6{
    background: url(../img/expert6.604a025f.png) no-repeat;
}
.index-mod5,.fenzhang-mod4,.wallet-mod1,.wallet-mod2,.index-mod3{
    padding-top: 80px;
}
.index-mod4 .index-mod4-item {
    color: #fff;
    padding: 36px 20px;
    background-size: 100% 100%;
    border-radius: 10px;
}
.index-mod4 .index-mod4-item h2{
    margin-bottom: 20px;
}
.index-mod4 .btn-img{
    margin: 30px auto 0 auto;
}
.index-mod5 dl{
    background: #fff;
    box-shadow: 0 5px 20px 3px rgb(212 224 243);
    display: flex;
    padding: 28px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 18px;
}
.index-mod5 dl dt{
    width: 70%;
}
.index-mod5 dl h3{
    margin-bottom: 10px;
}
.index-mod7 .box{
    background: #fff;
    box-shadow: 0 0 14px 0 rgb(199 212 240 / 50%);
    border-radius: 6px;
    padding: 30px 26px 30px 34px;
    position: relative;
    /* height: 468px; */
    box-sizing: border-box;
}
.index-mod7 .box h4{
    margin-top: 59px;
    font-size: 20px;
    color: #333;
    letter-spacing: 0;
    font-weight: 600;
}
.index-mod7 .box p{
    color: #666;
    margin-top: 30px;
}
.index-mod7 .btn-img{
    line-height: 38px;
}
.model-box h3{
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
.index-mod7 .box ul{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
.index-mod7 .box ul li{
    color: #333;
}
.index-mod7 .box span{
    display: inline-block;
    width: 6px;
    height: 6px;
    background: #2271ff;
    border-radius: 50%;
    margin-right: 6px;
}
.partners-item{
    cursor: pointer;
    height: 200px;
    text-align: center;
    transition: all .5s ease;
}
.partners-item img{
    margin-top: 32px;
}
.partners-item h3{
    font-size: 17px;
    font-weight: 600;
    margin-top: 20px;
}

.contact{
    background: url(../img/footer-banner.png) no-repeat;
    background-size: 100% 100%;
    height: auto;
    padding: 25px 0 15px 0;
    color: #fff;
}
.contact .contact-btn{
    padding: 0 18px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    display: inline-block;
    color: #fff;
    border: 0.11vw #fff solid;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    margin-top: 26px;
}
.contact .contact-btn:hover {
    background: #fff;
    color: #33AAFF;
}
.contact .title-h2{
    font-size: 2.125rem;
    line-height: 2.5rem;
    font-weight: 500;
    margin-bottom: 0.625rem;
    letter-spacing: 1px;
}
.contact .title-p{
    letter-spacing: 1px;
}
.weixin {
    display: flex;
}
.weixin .we-customer {
    margin-right: 1.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.we-customer-qr {
    display: block;
    left: -2.1875rem;
    top: 0;
    width: 7.375rem;
    height: 9.875rem;
    background-color: white;
    box-shadow: 0px 1px 3px 0px rgb(194 203 212 / 50%);
    border-radius: 4px 4px 4px 0px;
    color: #202020;
}
.we-customer-qr .we-customer-qr-div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.we-customer-qr .we-customer-qr-div .we-customer-qr-span1 {
    font-size: 0.75rem;
    font-weight: 500;
    color: #202020;
    margin-top: 0.3125rem;
}
.we-customer-qr .we-customer-qr-div .we-customer-qr-span2 {
    font-size: 0.75rem;
    color: #9b9b9b;
}
.we-customer-qr .we-customer-qr-div img {
    width: 7rem;
    height: 7rem;
}
.weixin .we-public {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.foot dt {
    padding-bottom: 20px;
}
.foot dt h2{
    font-size: 18px;
}
.foot dd a {
    display: block;
    color: #281d1d;
    line-height: 2;
    font-size: 14px;
}
.foot dl{
    min-height: 200px;
}
.copyright span{
    margin-right: 10px;
}
.copyright {
    margin: 0 auto;
    color: #606060;
    font-size: 0.75rem;
    padding: 20px 0;
    background: #f7f8fa;
}
@media (max-width: 992px){
    .contact {
        background: url(../img/bg_5.png) no-repeat;
        background-size: 100%;
        height: auto;
        padding: 0.6rem 0.3rem;
        text-align: center;
    }
    .weixin .phone-hide{
        display: none;
    }
    .copyright p > span{
        display: block;
        line-height: 1.41rem;
        font-size: 0.85rem;
        font-weight: 400;
        color: #202020;
    }
    .model-box .btn-img{
        display: inline-block;
    }
    .btn-center{
        text-align: center;
    }
    #contact .box-body{
        padding: 18px 0;
    }
}
/* 聚合支付 */
.add-banner dt img.pc-show {
    width: 100%;
    display: block;
    height: auto;
    object-fit: cover;
}
.juhe-mod1,.juhe-mod2,.juhe-mod3,.juhe-mod4{
    padding-top: 4%;
}

.add-banner dd{
    margin-top: -19%;
}
.add-banner h5 {
    color: #0277f3;
    font-size: 36px;
    padding: 50px 0 0px 0;
    font-weight: bold;
    margin-bottom: 15px;
    padding-top: 22%;
}
.phone-show{
    display: none;
}
.juhe-mod1 dl{
    height: 250px;
    text-align: center;
}
.juhe-mod1 dd{
    margin-top: 20px;
}
.juhe-mod1 dl,.coop-model1 dl{
    background: #fff;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 20px;
    padding: 15px 25px;
}
.wallet-mod2 dt,.qyfk-mod3 dt,.coop-model1 dl dt {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.juhe-mod1 dt h2,.fenzhang-mod4 dt h2,.wallet-mod2 dd h2,.qyfk-mod3 dd h2,.help1 h2,.coop-model1 dl h2,.coop-mod2 dt h2{
    margin-left: 16px;
    font-size: 20px;
}
.juhe-mod4 dl{
    padding: 30px 25px;
    text-align: center;
}
.juhe-mod4 dl h2{
    font-size: 28px;
    padding: 40px 0 0 0;
    position: relative;
}
.juhe-mod4 dl h2 b{
    display: block;
    width: 100%;
    position: absolute;
    z-index: 1;
    text-align: center;
    bottom: 0;
    left: 0;
    color: #EAF6FF;
    font-size: 54px;
}
.juhe-mod4 dl h2 span{
    display: block;
    position: relative;
    z-index: 2;
    font-size: 20px;
}
.juhe-mod4 dd p{
    margin-top: 15px;
}
.juhe-mod4 img{
    width: 72px;
}

/* 智能分账 */

.fenzhang_banner{
    background: url(../img/fenzhang-banner.jpg) no-repeat;

}
.wallet_banner{
    background: url(../img/wallet-banner.jpg) no-repeat;
}
.qyfk_banner{
    background: url(../img/qyfk-banner.jpg) no-repeat;
}
.solu_banner{
    background: url(../img/solu01.jpg) no-repeat;
}
.coop_banner{
    background: url(../img/coop-banner.jpg) no-repeat;
}
.tag{
    margin-top: 25px;
    line-height: 25px;
}
.tag span{
    display: block;
    margin-bottom: 20px;
    font-size: 16px;
}
.tag .tag-label{
    color: #333;
    display: inline-block;
    font-weight: bold;
    margin-right: 20px;
    font-size: 17px;
}
.tag i{
    display: inline-block;
    width: 4px;
    height: 12px;
    background: #2271ff;
    margin-right: 6px;
}
.fenzhang-mod3 h2{
    color: #333;
}
.fenzhang-mod4 dl{
    padding: 151px 38px 24px 38px;
    background: #f1f5fe;
    border-radius: 10px;
    text-align: center;
    position: relative;
}
.fenzhang-mod4 dl dt img{
    position: absolute;
    right: calc(50% - 73px);
    top: -35px;
    width: 146px;
}
.fenzhang-mod4 h1{
    padding-bottom: 20px;
}
.fenzhang-mod4 h2{
    margin-bottom: 20px;
}
.fenzhang-mod4 p{
    font-size: 14px;
    color: #636b90;
    letter-spacing: 0;
    line-height: 26px;
}
.text-middle{
    margin-top: 15%;
}
/* 账户钱包 */
.wallet-mod1 p{
    background: #fff;
    box-shadow: 0 5px 20px 3px rgb(212 224 243);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 20px;
    padding: 65px 0 65px 30px;
    padding-right: 35%;
}
.wallet-mod1 .p-right{
    padding-left: 35%;
    padding-right: 30px;
}
.wallet-img{
    position: absolute;
    top: 7%;
    left: 32%;
}
.wallet-mod2 dl,.qyfk-mod3 dl {
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding: 30px 25px;
    position: relative;
    box-shadow: 0 2px 9px 3px rgb(233 240 255);
    background: #fff;
}
.wallet-mod2 dd h2,.qyfk-mod3 dd h2{
    margin-left: 0;
    margin-bottom: 20px;
}
.wallet-mod2 dt,.qyfk-mod3 dt{
    position: absolute;
    top: -25px;
    right: 25px;
}
.wallet-mod1,.wallet-mod2{
    padding-top: 4%;
}
.btm-82{
    margin-bottom: 82px;
}

/* 2024.3.1开始 */
.wallet-mod3 .hy-img{
    width: 95px;
    margin-top: 40%;
}
.wallet-mod3 .hy-name{
    font-size: 20px;
    font-weight: 400;
    color: #000;
    line-height: 28px;
    margin: 12px 0 0;
}
.wallet-mod3 .item{
    height: 272px;
    background: #f2f6ff;
    text-align: center;
    border-right: 1px solid #fff;
}
.wallet-mod3 .item:last-child{
    border-right: none;
}
/* 2024.3.1结束 */
/* 解决方案 */
.qyfk-mod1 .layui-tab-title li{
    font-size: 20px;
    min-width: 20%;
    box-sizing: border-box;
    line-height: 20px;
    height: 41px;
}
.qyfk-mod1 .layui-tab-content{
    padding-top: 30px;
}

.qyfk-mod1 dl{
    background-color: #fafafa;
    border-radius: 8px;
    padding: 36px 30px 10px 30px;
    box-sizing: border-box;
    display: flex;
}
.qyfk-mod1 dl dt{
    padding-right: 30px;
}
.qyfk-mod1 dl h2{
    font-size: 22px;
}
.tab-content-title{
    display: flex;
    align-items: center;
}
.tab-content-title img{
    width: 52px;
}
.tab-content-title h4{
    font-size: 20px;
    font-weight: bold;
    color: #333;
}
.qyfk-mod1 .layui-tab-brief>.layui-tab-title .layui-this{
    color: #0277f3;
}
.qyfk-mod1 .layui-tab-brief>.layui-tab-title .layui-this:after {
    border: none;
    border-radius: 0;
    border-bottom: 2px solid #0277f3;
}



.qyfk-mod2 dl,.solution1-mod1 dl{
    background: -webkit-linear-gradient(left, #ffffff, #e9f3ff);
    background: -o-linear-gradient(bottom, #ffffff, #e9f3ff);
    background: -moz-linear-gradient(bottom, #ffffff, #e9f3ff);
    background: linear-gradient(to bottom, #ffffff, #e9f3ff);
    box-shadow: 0 2px 9px 3px rgba(209, 228, 250);
    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;
    border-radius: 12px;
    padding: 30px;
    height: 400px;
    position: relative;
}
.qyfk-mod2 dl h2,.solution1-mod1 dl h2{
    font-size: 24px;
    font-weight: bold;
    margin-top: 20px;
}
.qyfk-mod2 dl span {
    display: block;
    margin: 10px 0 30px 0;
    font-size: 15px;
}
.qyfk-mod2 dl p {
    line-height: 0.55;
    font-size: 14px;
    color: #787878;
    background: url(../img/dian.png) no-repeat 0 2px;
    padding-left: 16px;
}
.qyfk-mod2 dl dd a {
    display: flex;
    margin-top: 40px;
    color: #0478ff;
    font-size: 16px;
    position: absolute;
    bottom: 30px;
}
.qyfk-mod2 dl dd i{
    display: block;
    background: url(../img/to.png) no-repeat;
    background-size: 13px 12px;
    width: 23px;
    height: 22px;
    background-position: center;
}
.qyfk-mod2 dt{
    width: 80px;
}
.banner3{
    width: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 560px;
}
.juhe-banner{
    background: url(../img/fenzhang-banner.png) no-repeat;
}
/* .fenzhang_banner{
    background: url(../img/fenzhang-banner.png) no-repeat;

} */
/* .solu-banner{
    background: url(../img/solu01.png) no-repeat;
} */
/* 解决方案：数娱平台 */
.solution1-mod1 dl{
    height: 185px;
}
.solution1-mod1 dl dt{
    height: 126px;
}
/* 行业资讯 */
.banner1{
    height: 320px;
    text-align: center;
}
.banner1 dd h3{
    color: #fff;
    font-size: 40px;
    font-weight: bold;
}
.banner1 dd{
    position: absolute;
    right: 0;
    left: 0;
    bottom: 38%;
}
.banner1 dt img.pc-show{
    height: 320px;
}
.news{
    padding: 60px 15px;
}
.news h2 {
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news .news-list{
    padding: 0 20px;
}
.news .news-list p {
    font-size: 14px;
    line-height: 1.25;
}
.news .news-list li,.hot-news li{
    border-bottom: 1px #f2f2f2 solid;
    padding: 25px 0;
}
.news .news-list p {
    color: #787878;
    margin: 10px 0 15px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.news .news-list i {
    color: #33aaff;
    font-size: 12px;
    font-style: normal;
}
.news .news-list li a:hover h2{
    color: #33AAFF;
    text-decoration: underline;
}
.page {
    margin: 40px auto;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.page a {
    display: flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    color: #333333;
    border-radius: 50px;
    border: 1px solid #E6E6E6;
    margin: 4px;
    transition: all .1s;
}
.page a:hover{
    background: #33AAFF;
    color: #fff;
    border: 1px solid #33AAFF;
}
.page a.active{
    background: #33AAFF;
    color: #fff;
    border: 1px solid #33AAFF;
}
.input-group-icon input{
    padding: 30px 45px 30px 15px;
    border: 0;
    background: #33aaff;
    color: #fff;
    font-size: 16px;
    border-radius: 8px;
}
.input-group-icon input::placeholder {
    color: rgba(255, 255, 255, .5);
 }
.input-group-icon i{
    position: absolute;
    right: 15px;
    top: 18px;
    z-index: 99;
    cursor: pointer;
    font-size: 22px;
    color: rgba(255, 255, 255, .5);
}
.input-group-icon i:hover{
    color: #fff;
}
.hot-news{
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 0 20px;
    margin-top: 25px;
}
.hot-news .tit h2 {
    font-size: 20px;
    color: #333;
    font-weight: bold;
    display: flex;
    padding: 30px 0 10px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hot-news .tit h2 i {
    display: block;
    width: 6px;
    height: 18px;
    background: #33aaff;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    align-self: center;
    margin-right: 10px;
}
.hot-news ul li h2{
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    white-space: initial;
}
.hot-news ul{
    height: auto;
    max-height: 560px;
    overflow: hidden;
}
.hot-news ul li i{
    color: #999999;
    font-size: 12px;
}
.hot-news li:last-child{
    border-bottom: none;
}
.content{
    padding: 0 10px;
}
.content .title{
    border-bottom: 1px solid #e6e5e5;
}
.content .title h1 {
    font-weight: bold;
    font-size: 36px;
    color: #222d39;
}
.content .title p {
    font-size: 14px;
    color: #8b8b8b;
    padding: 15px 0;
}
.content .cont {
    padding-top: 30px;
}
.content .cont p {
    font-size: 16px;
    line-height: 1.95;
    letter-spacing: 1px;
    text-indent: 2em;
    margin-bottom: 5px;
}
.tag span p{
    padding: 6px 0px;
    color: #808082;
    border-radius: 4px;
    margin: 5px 0px;
    font-size: 14px;
}
/* 帮助中心 */
#helpBg{
    background-image: url(../img/helpBg.png);
    background: url(../img/helpBg.png) top center no-repeat;
    background-size: cover;
}
.help-banner {
    height: 375px;
    overflow: hidden;
}
.input-group-banner{
    display: flex;
    justify-content: space-between;
    width: 66%;
    background: #fff;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    margin: 0 auto;
    padding-left: 50px;
    height: 62px;
}
.input-group-banner input{
    border: none;
    line-height: 62px;
    height: 62px;
    font-size: 16px;
}
.input-group-banner i{
    position: absolute;
    left: 20px;
    top: 18px;
    font-size: 26px;
    color: #028efc;
}
.input-group-banner span{
    display: block;
    width: 140px;
    text-align: center;
    color: #fff;
    background: #7ca8fa;
    cursor: pointer;
    height: 52px;
    line-height: 52px;
    align-self: center;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    margin-right: 5px;
    font-size: 16px;
}
.help1{
    padding: 30px 30px 45px 30px;
    background: #fff;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
.help1 dl {
    margin-top: 15px;
}
.help1 dl a{
    display: flex;
}
.help1 dl a:hover h2{
    color: #333;
}
.help1 dl a p{
    margin-top: 15px;
    margin-left: 16px;
    color: #1f1c1c;
}
.help2 .help2-item{
    background: #fff;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    min-height: 320px;
    padding: 25px;
    box-shadow: 0 2px 9px 3px rgba(233, 240, 255, .3);
    border: none;
}
.help2 .help2-item h2{
    padding: 0;
}
.help2 .help2-item li{
    border-bottom: none;
    padding: 5px 0;
}
.help2 .help2-item ul{
    padding-top: 15px;
}
.help2 .help2-item li a {
    display: block;
    line-height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: url(../img/dian.png) no-repeat 0 16px;
    padding-left: 15px;
    font-size: 18px;
}
.help2 .help2-item li a:hover{
    color: #3c7cf7;
}
.help2 .help2-item .tit{
    border-bottom: 1px #efefef solid;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
.help2 .help2-item .tit a{
    color: #3c7cf7;
    font-size: 16px;
}
.help2 .help2-item li h2{
    margin-bottom: 0;
}
.help3{
    margin-bottom: 50px;
    background: #3275ff;
    overflow: hidden;
    position: relative;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding-left: 60px;
    color: #fff;
}
.help3 h2{
    font-size: 36px;
    font-weight: bold;
    margin-top: 40px;
}
.help3 i{
    display: block;
    width: 80px;
    height: 6px;
    background: #fff;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    margin: 25px 0;
}
.help3 p{
    color: #fff;
}
.help3 a{
    display: block;
    width: 146px;
    text-align: center;
    line-height: 50px;
    background: #fff;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    color: #3c7cf7;
    font-size: 20px;
    margin-top: 45px;
}
/* 联系我们 */
.cont-model{
    padding: 60px 15px;
}
.cont-model h2 {
    color: #2969e5;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}
.cont-model ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}
.cont-model ul li{
    width: 50%;
    font-size: 18px;
    line-height: 2.65;
    background: url(../img/tion_icon.png) no-repeat 0 15px;
    color: #787878;
    padding-left: 35px;
    box-sizing: border-box;
}
.cont-model h3{
    font-size: 28px;
    margin-bottom: 35px;
}
.cont-model h3 i {
    font-size: 14px;
    color: #787878;
    margin-left: 25px;
}
.cont-model .layui-input-block{
    margin-left: 0;
}
.cont-model .layui-input-block input{
    height: 52px;
    line-height: 52px;
    border-radius: 8px;
    padding-left: 35px;
    position: relative;
}
.cont-model .layui-input-block .layui-btn{
    height: 50px;
    line-height: 50px;
    border-radius: 8px;
    font-size: 16px;
}
.cont-model .layui-input-block i {
    color: #f00;
    position: absolute;
    left: 15px;
    top: 13px;
    z-index: 99;
    font-size: 18px;
    font-weight: bold;
}
.cont-btn{
    background-color: #3476f6;
}

/* 2024.2.28 */
.card-tel{
    background-color: #f7f8fb;
    padding: 34px 75px 34px 40px;
}
.card-tel h2{
    font-size: 30px;
    color: #4285f4;
    margin-top: 20px;
}
.card-tel p{
    font-size: 16px;
    color: #737c8b;
    margin-top: 20px;
}
.card-qr{
    display: flex;
    justify-content: space-around;
}
.card-qr p{
    font-size: 26px;
    color: #20242b;
    font-weight: 700;
    line-height: 37px;
    margin-top: 53px;
}
.card-qr {
    padding: 34px 0px 34px 40px;
}
.card-qr span{
    display: inline-block;
    font-size: 16px;
    color: #737c8b;
    line-height: 22px;
    margin-top: 14px;
    padding-left: 4px;
}
.card-qr .chatTxt img{
    width: 170px;
}
.card-qr .chatTxt h6{
    font-size: 10px;
}

/* 登录 */

.login-wrap{
    margin: 0 auto;
}
.wrapper{
    padding-top: 23%;
}
.login-bg .navbar{
    box-shadow: none;
}
.login-main{
    background-color: #fff;
    border-radius: 8px;
    padding: 45px 45px 15px 45px;
    box-sizing: border-box;
    box-shadow: 0 0 24px 0 rgb(22 129 255 / 12%);
    min-height: 500px;
}
.login-bg{
    width: 100%;
    height: 100vh;
    background: url(https://so.xindukj.com/assets/img/bing.php) no-repeat;
    background-size: cover;
}
.login-main .login-title{
    font-size: 20px;
    color: #000;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}
.login-main .layui-input-prefix{
    color: #3af;
}
.login-main .login-form input{
    border-radius: 6px;
    height: 42px;
    line-height: 42px;
}
.login-main .layui-tab-brief>.layui-tab-title{
    margin-bottom: 10px;
}
.login-main .layui-tab-brief>.layui-tab-title li{
    font-weight: bold;
    width: 50%;
    box-sizing: border-box;
}
.login-main .layui-tab-brief>.layui-tab-title .layui-this{
    color: #028efc;
}
.login-main .layui-tab-brief>.layui-tab-title .layui-this:after{
    border-bottom: 2px solid #028efc;
}
.login-main .login-form .login-qrcode {
    display: flex;
    justify-content: center;
    position: relative;
}
.login-main .login-form .login-qrcode .qrcode-img {
    width: 226px;
    height: 226px;
}
.login-main .login-form .login-qrcode .qrcode-img img {
    width: 100%;
    box-shadow: 0 5px 12px 0 #c7c9dd;
}
.lg-wx{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 38px;
}
.lg-wx img{
    width: 17px;
    height: 17px;
    margin-right: 10px;
}
.login-main .login-form .qrcode-content{
    z-index: 1;
    position: absolute;
    width: 226px;
    height: 226px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.6);
}
.login-main .login-form .qrcode-content span {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}
.login-main .login-form .layui-form-checkbox{
    margin-top: 0;
    padding-left: 22px;
}
@media screen and (min-width: 1200px){
    .login-wrap {
        width: 900px;
    }
}
@media screen and (min-width: 992px) and (max-width:1199px){
    .login-wrap {
        width: 700px;
    }
    .banner2{
        height: 500px;
    }
}
@media screen and (min-width: 768px) and (max-width:992px){
    .login-wrap {
        width: 400px;
    }
}

/* 商务合作 */
.banner2{
    height: 668px;
}
.coop-model1 dl{
    background: linear-gradient(225deg,#f9fbff,#eff5ff);
    border-radius: 8px;
}
.coop-mod2 dl{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.coop-mod2 dt h2{
    margin: 30px 0 15px 0;
}
.coop-mod2 dd{
    margin-left: 30px;
}
.coop-mod3 dl{
    background: #fcfeff;
    border: 1px #f3f3f3 solid;
    padding: 30px;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
}
.coop-mod3 dt p{
    color: #787878;
    margin: 10px 0 20px 0;
}
.coop-mod3 dd{
    display: flex;

}
.coop-mod3 dd span {
    margin-right: 15px;
}
.coop-mod3 dd span em{
    display: block;
    text-align: center;
    color: #787878;
    margin-top: 8px;
}
.coop-mod3 .coop-item-tag{
    position: absolute;
    top: 45px;
    right: 45px;
    width: 180px;
    text-align: center;
    line-height: 38px;
    background: #3976fd;
    color: #fff;
    -moz-border-radius: 800px;
    -webkit-border-radius: 800px;
    border-radius: 800px;
    font-size: 16px;
    line-height: 2.85;
}
.coop-mod4 h2{
    position: relative;
    padding: 60px 0 20px 0!important;
}
.coop-mod4 h2 b{
    display: block;
    text-align: center;
    position: absolute;
    bottom: 10px;
    left: 28px;
    font-size: 64px;
    z-index: 1;
    color: #EAF6FF;
}
.coop-mod4 h2 span{
    position: relative;
    z-index: 3;
    font-size: 20px;
}
.agree-main{
    padding: 45px 15px;
}
.agree-main p{
    font-size: 16px;
    line-height: 2;
}
.agree-main h3{
    font-weight: bold;
    line-height: 2;
    font-size: 18px;
}


/* 支付测试 */
.pcOne dl h2{
    font-size: 20px;
    font-weight: bold;
}
.pcOne dl h3{
    font-size: 20px;
    margin: 25px 0;
    font-weight: normal;
}
.pcOne dl p{
    color: #787878;
    font-size: 16px;
    line-height: 2.85;
}
.pcOne dl p:last-child {
    color: #ff8e0e;
}
.pcOne .pay{
    text-align: right;
}
.pcOne .pay h2 {
    color: #787878;
    font-size: 28px;
}
.pcOne .pay h2 i {
    color: #127dff;
    font-size: 38px;
    font-weight: bold;
}
.pcOne .pay p {
    text-align: right;
    color: #127dff;
    line-height: 2.8;
}
.pcTwo .tit{
    font-size: 20px;
    border-bottom: #f1f1f1 1px solid;
    padding: 25px 0;
}
.pcTwo .dl_dl dl {
    line-height: 39px;
    background: #fff;
    border: #dde0e5 1px solid;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    padding-left: 40px;
    margin-top: 45px;
    font-size: 20px;
    cursor: pointer;
    box-sizing: border-box;
}

.pcTwo .dl_dl dt img {
    margin-right: 10px;
    width: 30px;
}

.pcTwo .dl_dl dl.cur {
    border: #24b1f0 1px solid;
}
.pcTwo .pays {
    background: #127dff;
    width: 300px;
    line-height: 64px;
    text-align: center;
    color: #fff;
    font-size: 20px;
    margin: 70px auto;
    cursor: pointer;
    border-radius: 8px;
}


@media (max-width: 992px){
    .add-banner h5{
        font-size: 26px;
        padding-top: 42%;
    }
    .add-banner{
        height: 380px;
    }
    .model-box h2{
        font-size: 20px;
    }
    .model-box h1{
        font-size: 20px;
        padding-top: 0;
        padding-bottom: 30px;
    }
    .text-middle{
        margin-top: 0;
    }
    .tag .tag-label{
        display: block;
        margin-bottom: 10px;
    }
    .box-head{
        margin-bottom: 0;
    }
    .wallet-img{
        display: none;
    }
    .wallet-mod1 p{
        padding-right: 30px;
    }
    .wallet-mod1 .p-right{
        padding-left: 30px;
    }
    .solution1-mod1 dl dt{
        height: 8.8rem;
        overflow: hidden;
    }
    .solution1-mod1{
        margin-top: 5rem;
    }
    .news{
        padding: 0 15px 60px 15px;
    }
    .input-group-banner{
        width: 80%;
    }
    .help-banner{
        height: 17rem;
    }
    .help-banner dd{
        bottom: 38%;
    }
    .login-left-img{
        display: none;
    }
    .login-bg{
        background-image: none;
        background-color: #FAFAFA;
    }
    .login-main{
        box-shadow: none;
    }
    .wrapper{
        margin-top: 20%;
    }
    .login-main .login-form .layui-form-checkbox{
        margin-right: 0;
        margin-bottom: 0;
    }
    .index-mod1 ,.index-mod4,.index-mod5{
        padding-bottom: 45px;
    }
    .index-mod1 .box-head h1{
        margin-bottom: 10px;
    }
   

    .index-mod3 .box-head h1,.index-mod6 .box-head h1{
        padding-bottom: 0;
        /* padding-top: 30px; */
    }
    .index-mod2{
        margin-top: 0;
        padding-bottom: 58px;
    }
    .banner1{
        height: 320px;
    }
    .coop-mod4 dl{
        text-align: center;
    }
    .index-mod5,.index-mod2,.fenzhang-mod4,.wallet-mod1,.wallet-mod2,.index-mod3{
        padding-top: 30px;
    }
    .banner .banner-title{
        padding-top: 50%;
        text-align: center;
    }
    .banner-btn{
        text-align: center;
    }
    .model-box{
        padding: 30px 0;
    }
    .fenzhang-mod4 .fenzhang-mod4-item{
        margin-top: 30px;
    }
    .index-mod7 .box h4{
        margin-top: 0;
    }
	
    /* 2024.3.1开始 */
    .wallet-mod3 .hy-img{
        margin-top: 15%;
    }
    /* 2024.3.1结束 */
}

@media screen and (max-width: 767px){
        .card-qr p{
            margin-top: 0;
        }
    }

/* xdpay dynamic theme: keeps the original asset/css/index-1.11.css path */
body.xdpay-dynamic-theme {
    background: #f7fbff;
    color: #101828;
    overflow-x: hidden;
}

body.xdpay-dynamic-theme * {
    box-sizing: border-box;
}

body.xdpay-dynamic-theme a,
body.xdpay-dynamic-theme button {
    transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease, opacity .22s ease;
}

body.xdpay-dynamic-theme img {
    max-width: 100%;
}

body.xdpay-dynamic-theme .wow {
    visibility: visible !important;
}

body.xdpay-dynamic-theme .layui-container {
    width: min(1180px, calc(100% - 32px));
    padding-left: 0;
    padding-right: 0;
}

body.xdpay-dynamic-theme .layui-header.navbar {
    height: 74px;
    background: rgba(5, 18, 43, .38);
    border-bottom: 1px solid rgba(255, 255, 255, .18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.xdpay-dynamic-theme .navbar.scroll {
    background: rgba(255, 255, 255, .9);
    border-bottom-color: rgba(43, 92, 190, .12);
    box-shadow: 0 18px 45px rgba(28, 74, 134, .12);
}

body.xdpay-dynamic-theme .navbar .navbar-logo {
    height: 74px;
    align-items: center;
}

body.xdpay-dynamic-theme .navbar .navbar-logo a {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
}

body.xdpay-dynamic-theme .navbar .navbar-logo img {
    object-fit: contain;
    filter: drop-shadow(0 8px 18px rgba(28, 79, 180, .18));
}

body.xdpay-dynamic-theme .navbar .index-nav .layui-nav-item {
    line-height: 74px;
}

body.xdpay-dynamic-theme .navbar .index-nav .layui-nav-item a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0 17px;
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    font-weight: 500;
    border-radius: 999px;
}

body.xdpay-dynamic-theme .navbar.scroll .index-nav .layui-nav-item a {
    color: #23304d;
}

body.xdpay-dynamic-theme .navbar .index-nav .layui-nav-item a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .16);
}

body.xdpay-dynamic-theme .navbar.scroll .index-nav .layui-nav-item a:hover {
    color: #1c6eff;
    background: rgba(28, 110, 255, .08);
}

body.xdpay-dynamic-theme .navbar .index-nav .layui-nav-item a.layui-btn {
    height: 42px;
    min-height: 42px;
    padding: 0 23px;
    color: #fff !important;
    border: 0;
    background: linear-gradient(100deg, #176bff, #00b8d9 52%, #35d399);
    background-size: 180% 100%;
    box-shadow: 0 12px 28px rgba(19, 112, 255, .28);
    animation: xdpayFlow 5s ease-in-out infinite;
}

body.xdpay-dynamic-theme .navbar .index-nav .layui-nav-item a.layui-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 38px rgba(19, 112, 255, .34);
}

body.xdpay-dynamic-theme .navbar .index-nav .layui-nav-item dl {
    padding: 8px;
    border: 1px solid rgba(28, 110, 255, .1);
    border-radius: 14px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 20px 50px rgba(15, 36, 84, .16);
}

body.xdpay-dynamic-theme .navbar .index-nav .layui-nav-item dl a {
    color: #34405c;
    line-height: 42px;
    border-radius: 10px;
}

body.xdpay-dynamic-theme .navbar .shrink-right {
    right: 18px;
    top: 18px;
    width: 44px;
    height: 44px;
    line-height: 44px;
    color: #fff;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 13px;
    background: rgba(255, 255, 255, .12);
}

body.xdpay-dynamic-theme .navbar.scroll .shrink-right {
    color: #176bff;
    border-color: rgba(23, 107, 255, .18);
    background: rgba(23, 107, 255, .08);
}

body.xdpay-dynamic-theme .banner {
    min-height: 780px;
    height: auto;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(5, 20, 56, .92) 0%, rgba(8, 40, 98, .82) 38%, rgba(5, 116, 156, .55) 100%),
        url(../img/banner-index.jpg) center / cover no-repeat;
}

body.xdpay-dynamic-theme .banner::before,
body.xdpay-dynamic-theme .banner::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
}

body.xdpay-dynamic-theme .banner::before {
    background:
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: linear-gradient(90deg, rgba(0,0,0,.78), transparent 78%);
    animation: xdpayGridMove 18s linear infinite;
}

body.xdpay-dynamic-theme .banner::after {
    background:
        linear-gradient(100deg, transparent 0 18%, rgba(53, 211, 153, .24) 32%, transparent 46%),
        linear-gradient(120deg, transparent 0 40%, rgba(0, 184, 217, .28) 52%, transparent 68%),
        linear-gradient(90deg, rgba(255,255,255,.06), transparent 36%);
    transform: translateX(-12%);
    animation: xdpayLightPass 9s ease-in-out infinite alternate;
}

body.xdpay-dynamic-theme .banner-box {
    position: relative;
    min-height: 780px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 54px;
}

body.xdpay-dynamic-theme .banner-box::after {
    position: absolute;
    right: 0;
    top: 51%;
    z-index: 0;
    width: min(485px, 42vw);
    height: 360px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)),
        radial-gradient(circle at 16% 18%, rgba(53, 211, 153, .38), transparent 28%),
        linear-gradient(135deg, rgba(17, 47, 104, .58), rgba(5, 14, 38, .68));
    box-shadow: 0 30px 90px rgba(0, 20, 65, .34);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transform: translateY(-50%);
    content: "";
    animation: xdpayFloatCard 6s ease-in-out infinite;
}

body.xdpay-dynamic-theme .banner-box::before {
    position: absolute;
    right: 42px;
    top: calc(50% - 118px);
    z-index: 0;
    width: min(385px, 34vw);
    height: 236px;
    border-radius: 20px;
    background:
        linear-gradient(90deg, rgba(255,255,255,.7) 0 16%, transparent 16% 100%) 0 24px / 100% 24px no-repeat,
        linear-gradient(90deg, #35d399 0 22%, #00b8d9 22% 46%, #176bff 46% 74%, #ffb020 74% 100%) left bottom / 100% 82px no-repeat,
        rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 20px 50px rgba(4, 17, 48, .24);
    content: "";
    animation: xdpayChartRise 4.8s ease-in-out infinite;
}

body.xdpay-dynamic-theme .banner .banner-title {
    position: relative;
    z-index: 2;
    width: min(690px, 58%);
    padding-top: 0;
    color: #fff;
    text-align: left;
    animation: xdpayHeroIn .72s ease both;
}

body.xdpay-dynamic-theme .banner .banner-title p {
    margin: 0;
    color: #fff;
    font-size: clamp(42px, 5.2vw, 76px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0;
    word-break: keep-all;
    overflow-wrap: normal;
    text-shadow: 0 18px 50px rgba(0, 20, 64, .28);
}

body.xdpay-dynamic-theme .banner .banner-title p::before {
    display: flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    height: 34px;
    margin-bottom: 22px;
    padding: 0 14px;
    color: #c8fff0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
    border: 1px solid rgba(200, 255, 240, .36);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    content: "Pay gateway / realtime settlement";
}

body.xdpay-dynamic-theme .banner .banner-title .desc {
    max-width: 580px;
    margin-top: 26px;
    margin-bottom: 36px;
    color: rgba(255, 255, 255, .78);
}

body.xdpay-dynamic-theme .banner .banner-title .desc span {
    line-height: 1.85;
    font-size: clamp(17px, 1.5vw, 22px);
}

body.xdpay-dynamic-theme .banner .banner-btn a,
body.xdpay-dynamic-theme .model-box .index_btn,
body.xdpay-dynamic-theme .model-box .btn-img,
body.xdpay-dynamic-theme .contact .contact-btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    font-weight: 700;
}

body.xdpay-dynamic-theme .banner .banner-btn a,
body.xdpay-dynamic-theme .model-box .index_btn {
    border: 0;
    background: linear-gradient(100deg, #35d399, #00b8d9 48%, #176bff);
    background-size: 180% 100%;
    color: #fff;
    box-shadow: 0 18px 40px rgba(0, 131, 196, .28);
    animation: xdpayFlow 5.6s ease-in-out infinite;
}

body.xdpay-dynamic-theme .banner .banner-btn {
    position: relative;
    z-index: 2;
    animation: xdpayHeroIn .72s .12s ease both;
}

body.xdpay-dynamic-theme .banner .banner-btn a:hover,
body.xdpay-dynamic-theme .model-box .index_btn:hover,
body.xdpay-dynamic-theme .model-box .btn-img:hover,
body.xdpay-dynamic-theme .contact .contact-btn:hover {
    color: #fff;
    opacity: 1;
    transform: translateY(-3px);
    box-shadow: 0 22px 52px rgba(0, 108, 255, .28);
}

body.xdpay-dynamic-theme .model-box {
    position: relative;
    padding: 92px 0;
    background: #f7fbff;
}

body.xdpay-dynamic-theme .model-box[style*="linear-gradient"] {
    background:
        linear-gradient(135deg, rgba(23, 107, 255, .06), rgba(53, 211, 153, .06)),
        #f4f8ff !important;
}

body.xdpay-dynamic-theme .box-head {
    margin-bottom: 44px;
}

body.xdpay-dynamic-theme .model-box h1 {
    color: #111c3a;
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.22;
}

body.xdpay-dynamic-theme .box-head p,
body.xdpay-dynamic-theme .index-mod1 p,
body.xdpay-dynamic-theme .index-mod2 p,
body.xdpay-dynamic-theme .index-mod3 p,
body.xdpay-dynamic-theme .index-mod4 p,
body.xdpay-dynamic-theme .index-mod5 p,
body.xdpay-dynamic-theme .index-mod7 p {
    color: #667085 !important;
}

body.xdpay-dynamic-theme .index-mod1 dl,
body.xdpay-dynamic-theme .index-mod3 dl,
body.xdpay-dynamic-theme .index-mod5 dl,
body.xdpay-dynamic-theme .index-mod7 .box,
body.xdpay-dynamic-theme .partners-item {
    border: 1px solid rgba(31, 92, 202, .09);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 18px 45px rgba(25, 64, 138, .09);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.xdpay-dynamic-theme .index-mod1 dl,
body.xdpay-dynamic-theme .index-mod5 dl,
body.xdpay-dynamic-theme .index-mod7 .box {
    border-radius: 24px;
}

body.xdpay-dynamic-theme .index-mod1 dl {
    min-height: 238px;
    overflow: hidden;
}

body.xdpay-dynamic-theme .index-mod1 dl::after,
body.xdpay-dynamic-theme .index-mod5 dl::after,
body.xdpay-dynamic-theme .index-mod7 .box::after {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, transparent 0 40%, rgba(255,255,255,.72) 48%, transparent 58%);
    opacity: 0;
    transform: translateX(-60%);
    content: "";
}

body.xdpay-dynamic-theme .index-mod1 dl:hover,
body.xdpay-dynamic-theme .index-mod3 dl:hover,
body.xdpay-dynamic-theme .index-mod5 dl:hover,
body.xdpay-dynamic-theme .partners-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 28px 60px rgba(20, 74, 170, .14);
}

body.xdpay-dynamic-theme .index-mod1 dl:hover::after,
body.xdpay-dynamic-theme .index-mod5 dl:hover::after,
body.xdpay-dynamic-theme .index-mod7 .box:hover::after {
    opacity: 1;
    animation: xdpaySheen 1.1s ease both;
}

body.xdpay-dynamic-theme .index-mod1 dl dd h2,
body.xdpay-dynamic-theme .index-mod2 h2,
body.xdpay-dynamic-theme .index-mod7 .box h4,
body.xdpay-dynamic-theme .model-box h3 {
    color: #111c3a;
}

body.xdpay-dynamic-theme .index-mod1 dl dd h2 {
    color: #176bff;
}

body.xdpay-dynamic-theme .index-mod1 dl dt img,
body.xdpay-dynamic-theme .index-mod5 dl dt img {
    filter: drop-shadow(0 14px 28px rgba(23, 107, 255, .18));
}

body.xdpay-dynamic-theme .index-mod3 dl {
    position: relative;
    height: 420px;
    overflow: hidden;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(10, 40, 102, .94), rgba(16, 70, 148, .9) 42%, rgba(255,255,255,.96) 42% 100%);
}

body.xdpay-dynamic-theme .index-mod3 dl::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: .38;
    content: "";
    animation: xdpayGridMove 15s linear infinite;
}

body.xdpay-dynamic-theme .index-mod3 dl > * {
    position: relative;
    z-index: 1;
}

body.xdpay-dynamic-theme .index-mod3 dl dt span {
    background: rgba(255, 255, 255, .16);
}

body.xdpay-dynamic-theme .index-mod3 .circular {
    background: linear-gradient(135deg, #35d399, #176bff);
    box-shadow: 0 0 0 4px rgba(23, 107, 255, .08);
}

body.xdpay-dynamic-theme .index-mod3 li a,
body.xdpay-dynamic-theme .model-box .btn-img {
    color: #176bff;
}

body.xdpay-dynamic-theme .model-box .btn-img {
    border-color: rgba(23, 107, 255, .22);
    background: rgba(23, 107, 255, .06);
}

body.xdpay-dynamic-theme .model-box .index_btn.btn-blue-primary {
    color: #176bff;
    background: rgba(23, 107, 255, .1);
    box-shadow: none;
}

body.xdpay-dynamic-theme .index-mod4 .index-mod4-item {
    min-height: 158px;
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 18px 45px rgba(10, 35, 90, .13);
}

body.xdpay-dynamic-theme .index-mod4 .index-mod4-item::after {
    display: block;
    width: 68px;
    height: 3px;
    margin-top: 24px;
    background: linear-gradient(90deg, #35d399, #fff);
    border-radius: 999px;
    content: "";
}

body.xdpay-dynamic-theme .index-mod5 dl {
    position: relative;
    min-height: 172px;
    align-items: center;
}

body.xdpay-dynamic-theme .index-mod5 dl dt {
    width: 96px;
    flex: 0 0 96px;
}

body.xdpay-dynamic-theme .index-mod7 .box {
    overflow: hidden;
}

body.xdpay-dynamic-theme .partners-item {
    height: 178px;
    border-radius: 22px;
}

body.xdpay-dynamic-theme .contact {
    background:
        linear-gradient(110deg, rgba(6, 24, 58, .96), rgba(23, 107, 255, .9) 52%, rgba(0, 184, 217, .9)),
        url(../img/footer-banner.png) center / cover no-repeat;
}

body.xdpay-dynamic-theme .contact .title-h2 {
    color: #fff;
    font-weight: 800;
}

body.xdpay-dynamic-theme .contact .title-p {
    color: rgba(255, 255, 255, .76) !important;
}

body.xdpay-dynamic-theme .contact .contact-btn {
    border: 1px solid rgba(255,255,255,.44);
    background: rgba(255,255,255,.14);
    color: #fff;
}

body.xdpay-dynamic-theme .footer {
    background: #07162f;
    color: rgba(255,255,255,.72);
}

body.xdpay-dynamic-theme .footer .foot {
    background: transparent;
}

body.xdpay-dynamic-theme .footer h2 {
    color: #fff;
}

body.xdpay-dynamic-theme .footer a {
    color: rgba(255,255,255,.66);
}

body.xdpay-dynamic-theme .footer a:hover {
    color: #35d399;
}

body.xdpay-dynamic-theme .copyright {
    background: #061127;
    color: rgba(255,255,255,.58);
}

body.xdpay-dynamic-theme .copyright a {
    color: rgba(255,255,255,.72);
}

body.xdpay-dynamic-theme .navbar-tree {
    background: rgba(7, 22, 47, .96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.xdpay-dynamic-theme .navbar-tree .layui-nav,
body.xdpay-dynamic-theme .navbar-tree .layui-nav-tree {
    background: transparent;
}

body.xdpay-dynamic-theme .navbar-tree .layui-nav-item a {
    min-height: 48px;
    color: rgba(255,255,255,.86);
}

body.xdpay-dynamic-theme .navbar-login a {
    width: 100%;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(100deg, #35d399, #176bff);
}

@keyframes xdpayFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes xdpayGridMove {
    to { background-position: 64px 64px; }
}

@keyframes xdpayLightPass {
    from { transform: translateX(-14%); opacity: .72; }
    to { transform: translateX(8%); opacity: .95; }
}

@keyframes xdpayFloatCard {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(calc(-50% - 14px)) translateX(-8px); }
}

@keyframes xdpayChartRise {
    0%, 100% { transform: translateY(0); filter: saturate(1); }
    50% { transform: translateY(-10px); filter: saturate(1.18); }
}

@keyframes xdpaySheen {
    from { transform: translateX(-70%); }
    to { transform: translateX(92%); }
}

@keyframes xdpayHeroIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 1024px) {
    body.xdpay-dynamic-theme .banner {
        min-height: 720px;
    }

    body.xdpay-dynamic-theme .banner-box {
        min-height: 720px;
    }

    body.xdpay-dynamic-theme .banner-box::before,
    body.xdpay-dynamic-theme .banner-box::after {
        opacity: .34;
    }

    body.xdpay-dynamic-theme .banner .banner-title {
        width: 70%;
    }
}

@media screen and (max-width: 767px) {
    body.xdpay-dynamic-theme .layui-container {
        width: calc(100% - 28px);
    }

    body.xdpay-dynamic-theme .layui-header.navbar {
        height: 66px;
    }

    body.xdpay-dynamic-theme .navbar .navbar-logo {
        height: 66px;
    }

    body.xdpay-dynamic-theme .navbar .navbar-logo img {
        max-width: 118px;
        height: auto !important;
    }

    body.xdpay-dynamic-theme .banner,
    body.xdpay-dynamic-theme .banner-box {
        min-height: 620px;
    }

    body.xdpay-dynamic-theme .banner-box {
        padding-top: 84px;
        justify-content: flex-start;
    }

    body.xdpay-dynamic-theme .banner-box::before,
    body.xdpay-dynamic-theme .banner-box::after {
        right: auto;
        left: 10%;
        top: auto;
        bottom: 24px;
        width: 80%;
        opacity: .18;
        transform: none;
    }

    body.xdpay-dynamic-theme .banner-box::before {
        height: 176px;
    }

    body.xdpay-dynamic-theme .banner-box::after {
        height: 248px;
    }

    body.xdpay-dynamic-theme .banner .banner-title {
        width: 100%;
        text-align: left;
    }

    body.xdpay-dynamic-theme .banner .banner-title p {
        font-size: clamp(34px, 10.5vw, 42px);
        line-height: 1.16;
    }

    body.xdpay-dynamic-theme .banner .banner-title p::before {
        height: auto;
        min-height: 32px;
        flex-wrap: wrap;
        margin-bottom: 16px;
        white-space: normal;
    }

    body.xdpay-dynamic-theme .banner .banner-title .desc {
        margin-top: 20px;
        margin-bottom: 28px;
    }

    body.xdpay-dynamic-theme .banner .banner-btn,
    body.xdpay-dynamic-theme .banner .banner-btn a {
        width: 100%;
    }

    body.xdpay-dynamic-theme .model-box {
        padding: 54px 0;
    }

    body.xdpay-dynamic-theme .box-head {
        margin-bottom: 28px;
    }

    body.xdpay-dynamic-theme .index-mod1 dl,
    body.xdpay-dynamic-theme .index-mod5 dl {
        margin-bottom: 16px;
        padding: 24px;
    }

    body.xdpay-dynamic-theme .index-mod1 dl dt {
        right: 12px;
        opacity: .26;
    }

    body.xdpay-dynamic-theme .index-mod1 dl dd {
        padding-left: 0;
    }

    body.xdpay-dynamic-theme .index-mod1 dl dd h2 {
        margin-top: 0;
    }

    body.xdpay-dynamic-theme .index-mod3 dl {
        height: auto;
        min-height: 350px;
        margin-bottom: 16px;
    }

    body.xdpay-dynamic-theme .index-mod5 dl {
        display: block;
    }

    body.xdpay-dynamic-theme .index-mod5 dl dt {
        width: 72px;
        margin-bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.xdpay-dynamic-theme *,
    body.xdpay-dynamic-theme *::before,
    body.xdpay-dynamic-theme *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* Clean beast pass: keep motion, remove visual noise from dense lines */
body.xdpay-beast-theme {
    background:
        linear-gradient(90deg, rgba(16,16,16,.035) 1px, transparent 1px),
        linear-gradient(rgba(16,16,16,.035) 1px, transparent 1px),
        var(--beast-paper);
    background-size: 72px 72px;
    animation: beastBodyGridRunClean 18s linear infinite;
}

body.xdpay-beast-theme::before {
    opacity: .32;
}

body.xdpay-beast-theme::after {
    opacity: .28;
    background: linear-gradient(135deg, var(--beast-blue) 0 48%, var(--beast-pink) 48% 100%);
}

body.xdpay-beast-theme .xdpay-particles {
    opacity: .52;
}

body.xdpay-beast-theme .banner {
    background:
        radial-gradient(circle at 76% 22%, rgba(255,79,216,.18), transparent 24%),
        linear-gradient(118deg, var(--beast-yellow) 0 52%, var(--beast-blue) 52% 100%);
}

body.xdpay-beast-theme .banner::before {
    opacity: .07;
    background:
        linear-gradient(90deg, var(--beast-ink) 1px, transparent 1px),
        linear-gradient(var(--beast-ink) 1px, transparent 1px);
    background-size: 84px 84px;
    animation: beastGridJogClean 18s steps(6, end) infinite;
}

body.xdpay-beast-theme .banner::after {
    display: none;
}

body.xdpay-beast-theme .banner-box::after {
    background:
        linear-gradient(90deg, var(--beast-ink) 0 18%, transparent 18% 100%) 28px 34px / 78% 28px no-repeat,
        linear-gradient(90deg, var(--beast-green) 0 31%, var(--beast-blue) 31% 66%, var(--beast-red) 66% 100%) 30px 210px / calc(100% - 60px) 104px no-repeat,
        var(--beast-paper);
}

body.xdpay-beast-theme .banner .banner-btn a::after,
body.xdpay-beast-theme .model-box .index_btn.btn-blue-primary::after {
    background: linear-gradient(90deg, var(--beast-pink) 0 48%, var(--beast-blue) 48% 100%);
    animation-duration: 2.2s;
}

body.xdpay-beast-theme .contact {
    background: linear-gradient(120deg, var(--beast-yellow) 0 36%, var(--beast-blue) 36% 68%, var(--beast-pink) 68% 100%);
}

@keyframes beastBodyGridRunClean {
    to { background-position: 72px 72px, 72px 72px, 0 0; }
}

@keyframes beastGridJogClean {
    to { background-position: 84px 84px; }
}

/* Ultra-clean beast pass: remove remaining grid noise */
body.xdpay-beast-theme {
    background: var(--beast-paper);
    animation: none;
}

body.xdpay-beast-theme .xdpay-particles {
    opacity: .38;
}

body.xdpay-beast-theme .banner {
    background:
        radial-gradient(circle at 74% 22%, rgba(255,79,216,.12), transparent 24%),
        linear-gradient(118deg, var(--beast-yellow) 0 52%, var(--beast-blue) 52% 100%);
}

body.xdpay-beast-theme .banner::before,
body.xdpay-beast-theme .banner::after {
    display: none;
}

body.xdpay-beast-theme .banner-box::after {
    background:
        linear-gradient(90deg, var(--beast-ink) 0 18%, transparent 18% 100%) 28px 34px / 78% 28px no-repeat,
        linear-gradient(90deg, var(--beast-red) 0 28%, var(--beast-yellow) 28% 55%, var(--beast-blue) 55% 78%, var(--beast-green) 78% 100%) 30px 210px / calc(100% - 60px) 104px no-repeat,
        var(--beast-paper);
}

body.xdpay-beast-theme .banner .banner-title .desc span {
    background: rgba(255, 248, 222, .94);
}

body.xdpay-beast-theme .contact {
    background:
        radial-gradient(circle at 18% 50%, rgba(255,255,255,.36), transparent 24%),
        linear-gradient(120deg, var(--beast-yellow) 0 38%, var(--beast-blue) 38% 70%, var(--beast-pink) 70% 100%);
}

/* xdpay beast brutalist edition: same original css path, stronger dynamic style */
body.xdpay-beast-theme {
    --beast-ink: #101010;
    --beast-paper: #fff8de;
    --beast-yellow: #ffe500;
    --beast-red: #ff3d00;
    --beast-blue: #00d9ff;
    --beast-green: #22ff75;
    --beast-pink: #ff4fd8;
    --beast-shadow: 8px 8px 0 #101010;
    background:
        linear-gradient(90deg, rgba(16,16,16,.08) 1px, transparent 1px),
        linear-gradient(rgba(16,16,16,.08) 1px, transparent 1px),
        var(--beast-paper);
    background-size: 34px 34px;
    color: var(--beast-ink);
}

body.xdpay-beast-theme::before {
    position: fixed;
    left: -8vw;
    top: 90px;
    z-index: 0;
    width: 36vw;
    height: 36vw;
    min-width: 260px;
    min-height: 260px;
    border: 4px solid var(--beast-ink);
    background: var(--beast-yellow);
    box-shadow: var(--beast-shadow);
    transform: rotate(-12deg);
    content: "";
    animation: beastBlockDrift 8s ease-in-out infinite;
}

body.xdpay-beast-theme::after {
    position: fixed;
    right: -90px;
    bottom: 8vh;
    z-index: 0;
    width: 280px;
    height: 280px;
    border: 4px solid var(--beast-ink);
    border-radius: 50%;
    background: repeating-linear-gradient(135deg, var(--beast-blue) 0 16px, var(--beast-pink) 16px 32px);
    box-shadow: var(--beast-shadow);
    content: "";
    animation: beastSpin 18s linear infinite;
}

body.xdpay-beast-theme .xdpay-particles {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .95;
    mix-blend-mode: multiply;
}

body.xdpay-beast-theme .layui-header.navbar {
    z-index: 50;
    height: 82px;
    background: var(--beast-paper);
    border-bottom: 4px solid var(--beast-ink);
    box-shadow: 0 8px 0 var(--beast-ink);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.xdpay-beast-theme .navbar.scroll {
    background: var(--beast-yellow);
    border-bottom-color: var(--beast-ink);
    box-shadow: 0 8px 0 var(--beast-ink);
}

body.xdpay-beast-theme .navbar .layui-container,
body.xdpay-beast-theme .banner-box,
body.xdpay-beast-theme .model-box,
body.xdpay-beast-theme .contact,
body.xdpay-beast-theme .footer,
body.xdpay-beast-theme .copyright {
    position: relative;
    z-index: 2;
}

body.xdpay-beast-theme .navbar .navbar-logo {
    height: 82px;
}

body.xdpay-beast-theme .navbar .navbar-logo a {
    gap: 10px;
}

body.xdpay-beast-theme .navbar .navbar-logo img {
    display: none !important;
}

body.xdpay-beast-theme .xdpay-brand-title {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    color: var(--beast-paper);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 0;
    border: 4px solid var(--beast-ink);
    background: var(--beast-ink);
    box-shadow: 5px 5px 0 var(--beast-red);
    transform: rotate(-2deg);
}

body.xdpay-beast-theme .navbar .index-nav .layui-nav-item {
    line-height: 82px;
}

body.xdpay-beast-theme .navbar .index-nav .layui-nav-item a,
body.xdpay-beast-theme .navbar.scroll .index-nav .layui-nav-item a {
    min-height: 44px;
    margin-left: 8px;
    padding: 0 15px;
    color: var(--beast-ink);
    border: 3px solid transparent;
    border-radius: 0;
    font-size: 16px;
    font-weight: 900;
}

body.xdpay-beast-theme .navbar .index-nav .layui-nav-item a:hover {
    color: var(--beast-ink);
    border-color: var(--beast-ink);
    background: var(--beast-green);
    box-shadow: 4px 4px 0 var(--beast-ink);
    transform: translate(-2px, -2px) rotate(-1deg);
}

body.xdpay-beast-theme .navbar .index-nav .layui-nav-item a.layui-btn {
    color: var(--beast-ink) !important;
    border: 4px solid var(--beast-ink);
    border-radius: 0;
    background: var(--beast-blue);
    box-shadow: 6px 6px 0 var(--beast-ink);
    animation: beastButtonBang 1.8s steps(2, end) infinite;
}

body.xdpay-beast-theme .navbar .index-nav .layui-nav-item a.layui-btn:hover {
    background: var(--beast-red);
    box-shadow: 9px 9px 0 var(--beast-ink);
}

body.xdpay-beast-theme .navbar .index-nav .layui-nav-item dl {
    border: 4px solid var(--beast-ink);
    border-radius: 0;
    background: var(--beast-paper);
    box-shadow: var(--beast-shadow);
}

body.xdpay-beast-theme .navbar .index-nav .layui-nav-item dl a {
    color: var(--beast-ink);
}

body.xdpay-beast-theme .navbar .shrink-right {
    top: 18px;
    width: 48px;
    height: 48px;
    line-height: 44px;
    color: var(--beast-ink);
    border: 4px solid var(--beast-ink);
    border-radius: 0;
    background: var(--beast-yellow);
    box-shadow: 5px 5px 0 var(--beast-ink);
}

body.xdpay-beast-theme .banner {
    min-height: 790px;
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 79, 216, .34), transparent 28%),
        linear-gradient(120deg, rgba(255, 229, 0, .96) 0 54%, rgba(0, 217, 255, .92) 54% 100%);
    border-bottom: 5px solid var(--beast-ink);
}

body.xdpay-beast-theme .banner::before {
    opacity: .26;
    background:
        linear-gradient(90deg, var(--beast-ink) 2px, transparent 2px),
        linear-gradient(var(--beast-ink) 2px, transparent 2px);
    background-size: 48px 48px;
    mask-image: none;
    animation: beastGridJog 9s steps(8, end) infinite;
}

body.xdpay-beast-theme .banner::after {
    background:
        repeating-linear-gradient(135deg, rgba(16,16,16,.9) 0 10px, transparent 10px 24px);
    opacity: .12;
    animation: beastStripeMove 8s linear infinite;
}

body.xdpay-beast-theme .banner-box {
    min-height: 790px;
}

body.xdpay-beast-theme .banner-box::after {
    right: -10px;
    top: 52%;
    z-index: 0;
    width: min(500px, 42vw);
    height: 390px;
    border: 5px solid var(--beast-ink);
    border-radius: 0;
    background:
        linear-gradient(90deg, var(--beast-ink) 0 18%, transparent 18% 100%) 28px 34px / 86% 28px no-repeat,
        linear-gradient(90deg, var(--beast-green) 0 25%, var(--beast-blue) 25% 52%, var(--beast-red) 52% 76%, var(--beast-pink) 76% 100%) 30px 210px / calc(100% - 60px) 110px no-repeat,
        var(--beast-paper);
    box-shadow: 14px 14px 0 var(--beast-ink);
    opacity: 1;
    transform: translateY(-50%) rotate(3deg);
    animation: beastTerminalPunch 4.5s ease-in-out infinite;
}

body.xdpay-beast-theme .banner-box::before {
    right: 55px;
    top: calc(50% - 76px);
    z-index: 1;
    width: min(360px, 30vw);
    height: 138px;
    border: 5px solid var(--beast-ink);
    border-radius: 0;
    background:
        linear-gradient(90deg, var(--beast-red) 0 24%, var(--beast-yellow) 24% 50%, var(--beast-blue) 50% 76%, var(--beast-green) 76% 100%);
    box-shadow: 9px 9px 0 var(--beast-ink);
    transform: rotate(-4deg);
    animation: beastCardKick 3.5s steps(2, end) infinite;
}

body.xdpay-beast-theme .banner .banner-title {
    width: min(720px, 60%);
}

body.xdpay-beast-theme .banner .banner-title p::before {
    min-height: 40px;
    padding: 0 14px;
    color: var(--beast-paper);
    border: 4px solid var(--beast-ink);
    border-radius: 0;
    background: var(--beast-red);
    box-shadow: 6px 6px 0 var(--beast-ink);
    content: "LIVE PAYMENTS / 粒子风控中";
    font-size: 14px;
    line-height: 1.15;
    text-shadow: none;
    white-space: nowrap;
    transform: rotate(-1deg);
}

body.xdpay-beast-theme .banner .banner-title p {
    color: var(--beast-ink);
    font-size: clamp(58px, 7vw, 104px);
    font-weight: 1000;
    line-height: .98;
    text-shadow:
        4px 4px 0 var(--beast-paper),
        8px 8px 0 var(--beast-pink);
    animation: beastTitlePulse 2.8s steps(2, end) infinite;
}

body.xdpay-beast-theme .banner .banner-title .desc {
    max-width: 620px;
    color: var(--beast-ink);
}

body.xdpay-beast-theme .banner .banner-title .desc span {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: 8px;
    padding: 6px 10px;
    color: var(--beast-ink);
    font-size: clamp(18px, 1.6vw, 24px);
    font-weight: 800;
    border: 3px solid var(--beast-ink);
    background: rgba(255, 248, 222, .82);
    box-shadow: 5px 5px 0 var(--beast-ink);
    animation: beastLabelSlide 5s ease-in-out infinite;
}

body.xdpay-beast-theme .banner .banner-btn a,
body.xdpay-beast-theme .model-box .index_btn,
body.xdpay-beast-theme .model-box .btn-img,
body.xdpay-beast-theme .contact .contact-btn {
    min-height: 54px;
    border: 4px solid var(--beast-ink);
    border-radius: 0;
    color: var(--beast-ink);
    background: var(--beast-green);
    box-shadow: var(--beast-shadow);
    font-size: 17px;
    font-weight: 1000;
    letter-spacing: 0;
    animation: beastButtonBang 1.8s steps(2, end) infinite, beastNudge 2.6s ease-in-out infinite;
}

body.xdpay-beast-theme .banner .banner-btn a:hover,
body.xdpay-beast-theme .model-box .index_btn:hover,
body.xdpay-beast-theme .model-box .btn-img:hover,
body.xdpay-beast-theme .contact .contact-btn:hover {
    color: var(--beast-ink);
    background: var(--beast-pink);
    box-shadow: 12px 12px 0 var(--beast-ink);
    transform: translate(-4px, -4px) rotate(-1deg);
}

body.xdpay-beast-theme .model-box,
body.xdpay-beast-theme .model-box[style*="linear-gradient"] {
    background:
        linear-gradient(90deg, rgba(16,16,16,.07) 1px, transparent 1px),
        linear-gradient(rgba(16,16,16,.07) 1px, transparent 1px),
        var(--beast-paper) !important;
    background-size: 34px 34px !important;
}

body.xdpay-beast-theme .box-head h1,
body.xdpay-beast-theme .model-box h1 {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 12px 18px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: var(--beast-yellow);
    box-shadow: var(--beast-shadow);
    font-size: clamp(30px, 4vw, 56px);
    line-height: 1.08;
    transform: rotate(-1deg);
}

body.xdpay-beast-theme .box-head p {
    color: var(--beast-ink) !important;
    font-weight: 800;
}

body.xdpay-beast-theme .index-mod1 dl,
body.xdpay-beast-theme .index-mod3 dl,
body.xdpay-beast-theme .index-mod5 dl,
body.xdpay-beast-theme .index-mod7 .box,
body.xdpay-beast-theme .partners-item {
    border: 5px solid var(--beast-ink);
    border-radius: 0;
    background: var(--beast-paper);
    box-shadow: var(--beast-shadow);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    animation: beastCardFloat 5.5s ease-in-out infinite;
}

body.xdpay-beast-theme .index-mod1 .layui-col-md6:nth-child(2) dl,
body.xdpay-beast-theme .index-mod5 .layui-col-md4:nth-child(2) dl,
body.xdpay-beast-theme .index-mod3 .layui-col-md3:nth-child(2) dl {
    animation-delay: .45s;
}

body.xdpay-beast-theme .index-mod1 .layui-col-md6:nth-child(3) dl,
body.xdpay-beast-theme .index-mod5 .layui-col-md4:nth-child(3) dl,
body.xdpay-beast-theme .index-mod3 .layui-col-md3:nth-child(3) dl {
    animation-delay: .9s;
}

body.xdpay-beast-theme .index-mod1 dl {
    background:
        linear-gradient(135deg, rgba(255, 229, 0, .28), transparent 46%),
        var(--beast-paper);
}

body.xdpay-beast-theme .index-mod1 dl:nth-child(2n),
body.xdpay-beast-theme .index-mod5 dl:nth-child(2n) {
    transform: rotate(1deg);
}

body.xdpay-beast-theme .index-mod1 dl:hover,
body.xdpay-beast-theme .index-mod3 dl:hover,
body.xdpay-beast-theme .index-mod5 dl:hover,
body.xdpay-beast-theme .partners-item:hover {
    box-shadow: 14px 14px 0 var(--beast-ink);
    transform: translate(-5px, -5px) rotate(-1deg);
}

body.xdpay-beast-theme .index-mod1 dl dd h2,
body.xdpay-beast-theme .index-mod2 h2,
body.xdpay-beast-theme .index-mod7 .box h4,
body.xdpay-beast-theme .model-box h3 {
    color: var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-beast-theme .index-mod1 dl dd h2 {
    display: inline-block;
    padding: 4px 8px;
    background: var(--beast-blue);
    border: 3px solid var(--beast-ink);
    box-shadow: 4px 4px 0 var(--beast-ink);
}

body.xdpay-beast-theme .index-mod1 p,
body.xdpay-beast-theme .index-mod2 p,
body.xdpay-beast-theme .index-mod3 p,
body.xdpay-beast-theme .index-mod4 p,
body.xdpay-beast-theme .index-mod5 p,
body.xdpay-beast-theme .index-mod7 p {
    color: var(--beast-ink) !important;
    font-weight: 700;
}

body.xdpay-beast-theme .index-mod3 dl {
    background:
        linear-gradient(180deg, var(--beast-ink) 0 39%, var(--beast-paper) 39% 100%);
}

body.xdpay-beast-theme .index-mod3 dl::before {
    opacity: .22;
    background:
        linear-gradient(90deg, var(--beast-yellow) 2px, transparent 2px),
        linear-gradient(var(--beast-yellow) 2px, transparent 2px);
    background-size: 22px 22px;
}

body.xdpay-beast-theme .index-mod3 dl dt span {
    color: var(--beast-ink);
    background: var(--beast-yellow);
}

body.xdpay-beast-theme .index-mod3 dl dt b {
    color: var(--beast-paper);
}

body.xdpay-beast-theme .index-mod3 .circular {
    background: var(--beast-red);
    box-shadow: 0 0 0 4px var(--beast-yellow);
}

body.xdpay-beast-theme .index-mod3 li a,
body.xdpay-beast-theme .model-box .btn-img {
    color: var(--beast-ink);
}

body.xdpay-beast-theme .model-box .index_btn.btn-blue-primary {
    color: var(--beast-ink);
    border: 4px solid var(--beast-ink);
    background: var(--beast-yellow);
    box-shadow: var(--beast-shadow);
}

body.xdpay-beast-theme .index-mod4 .index-mod4-item {
    border: 5px solid var(--beast-ink);
    border-radius: 0;
    box-shadow: var(--beast-shadow);
    filter: saturate(1.35) contrast(1.05);
}

body.xdpay-beast-theme .index-mod4 .index-mod4-item h2,
body.xdpay-beast-theme .index-mod4 .index-mod4-item span {
    text-shadow: 3px 3px 0 var(--beast-ink);
}

body.xdpay-beast-theme .index-mod5 dl dt {
    width: 96px;
}

body.xdpay-beast-theme .contact {
    border-top: 5px solid var(--beast-ink);
    border-bottom: 5px solid var(--beast-ink);
    background:
        repeating-linear-gradient(135deg, var(--beast-yellow) 0 18px, var(--beast-blue) 18px 36px, var(--beast-pink) 36px 54px);
}

body.xdpay-beast-theme .contact .title-h2 {
    display: inline-block;
    padding: 8px 12px;
    color: var(--beast-ink);
    border: 4px solid var(--beast-ink);
    background: var(--beast-paper);
    box-shadow: var(--beast-shadow);
    font-weight: 1000;
}

body.xdpay-beast-theme .contact .title-p {
    display: inline-block;
    padding: 6px 10px;
    color: var(--beast-ink) !important;
    border: 3px solid var(--beast-ink);
    background: var(--beast-yellow);
    font-weight: 900;
}

body.xdpay-beast-theme .footer {
    border-top: 5px solid var(--beast-ink);
    background: var(--beast-ink);
}

body.xdpay-beast-theme .footer h2 {
    color: var(--beast-yellow);
}

body.xdpay-beast-theme .footer a {
    color: var(--beast-paper);
}

body.xdpay-beast-theme .footer a:hover {
    color: var(--beast-green);
}

body.xdpay-beast-theme .copyright {
    background: var(--beast-yellow);
    color: var(--beast-ink);
    border-top: 5px solid var(--beast-ink);
}

body.xdpay-beast-theme .navbar-tree {
    border-left: 5px solid var(--beast-ink);
    background: var(--beast-paper);
}

body.xdpay-beast-theme .navbar-tree .layui-nav-item a {
    color: var(--beast-ink);
    font-weight: 900;
}

body.xdpay-beast-theme .navbar-login a {
    border: 4px solid var(--beast-ink);
    border-radius: 0;
    color: var(--beast-ink);
    background: var(--beast-green);
    box-shadow: var(--beast-shadow);
}

@keyframes beastBlockDrift {
    0%, 100% { transform: rotate(-12deg) translate(0, 0); }
    50% { transform: rotate(-7deg) translate(18px, 10px); }
}

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

@keyframes beastGridJog {
    to { background-position: 96px 48px; }
}

@keyframes beastStripeMove {
    to { background-position: 150px 0; }
}

@keyframes beastTerminalPunch {
    0%, 100% { transform: translateY(-50%) rotate(3deg); }
    50% { transform: translateY(calc(-50% - 16px)) rotate(1deg); }
}

@keyframes beastCardKick {
    0%, 100% { transform: rotate(-4deg) translate(0, 0); }
    50% { transform: rotate(2deg) translate(-10px, -8px); }
}

@keyframes beastButtonBang {
    0%, 100% { background: var(--beast-blue); }
    50% { background: var(--beast-green); }
}

@keyframes beastTitlePulse {
    0%, 100% {
        text-shadow: 4px 4px 0 var(--beast-paper), 8px 8px 0 var(--beast-pink);
    }
    50% {
        text-shadow: 4px 4px 0 var(--beast-green), 10px 10px 0 var(--beast-red);
    }
}

@keyframes beastLabelSlide {
    0%, 100% { transform: translateX(0) rotate(0); }
    50% { transform: translateX(10px) rotate(-1deg); }
}

@keyframes beastNudge {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -4px; }
}

@keyframes beastCardFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}

@media screen and (max-width: 1024px) {
    body.xdpay-beast-theme .banner .banner-title {
        width: 74%;
    }
}

@media screen and (max-width: 767px) {
    body.xdpay-beast-theme::before {
        left: -110px;
        top: 130px;
        opacity: .45;
    }

    body.xdpay-beast-theme::after {
        width: 190px;
        height: 190px;
        opacity: .6;
    }

    body.xdpay-beast-theme .layui-header.navbar {
        height: 70px;
        box-shadow: 0 5px 0 var(--beast-ink);
    }

    body.xdpay-beast-theme .navbar .navbar-logo {
        height: 70px;
    }

    body.xdpay-beast-theme .xdpay-brand-title {
        max-width: 220px;
        min-height: 42px;
        font-size: 16px;
    }

    body.xdpay-beast-theme .banner,
    body.xdpay-beast-theme .banner-box {
        min-height: 700px;
    }

    body.xdpay-beast-theme .banner-box {
        padding-top: 94px;
    }

    body.xdpay-beast-theme .banner .banner-title {
        width: 100%;
    }

    body.xdpay-beast-theme .banner .banner-title p {
        font-size: clamp(42px, 15vw, 58px);
        line-height: .98;
    }

    body.xdpay-beast-theme .banner .banner-title .desc span {
        font-size: 16px;
    }

    body.xdpay-beast-theme .banner-box::after {
        left: 34px;
        bottom: 42px;
        width: calc(100% - 68px);
        height: 220px;
        opacity: .9;
        transform: rotate(2deg);
    }

    body.xdpay-beast-theme .banner-box::before {
        left: 58px;
        bottom: 104px;
        top: auto;
        width: calc(100% - 116px);
        height: 84px;
        opacity: .9;
    }

    body.xdpay-beast-theme .box-head h1,
    body.xdpay-beast-theme .model-box h1 {
        font-size: clamp(28px, 8.8vw, 38px);
    }

    body.xdpay-beast-theme .index-mod1 dl,
    body.xdpay-beast-theme .index-mod5 dl {
        padding: 22px;
    }
}

/* Beast dynamic final layer: visible motion, cursor trail target, and click hit feedback */
body.xdpay-beast-theme {
    animation: beastBodyGridRun 8s linear infinite;
}

body.xdpay-beast-theme .xdpay-beast-cursor {
    position: fixed;
    left: -13px;
    top: -13px;
    z-index: 9999;
    width: 26px;
    height: 26px;
    border: 4px solid var(--beast-ink);
    background: var(--beast-yellow);
    box-shadow: 6px 6px 0 var(--beast-red);
    pointer-events: none;
    mix-blend-mode: multiply;
    will-change: transform;
}

body.xdpay-beast-theme.xdpay-beast-hit .banner,
body.xdpay-beast-theme.xdpay-beast-hit .layui-header.navbar,
body.xdpay-beast-theme.xdpay-beast-hit .model-box,
body.xdpay-beast-theme.xdpay-beast-hit .contact {
    animation: beastScreenHit .26s steps(2, end);
}

body.xdpay-beast-theme .banner {
    background-size: auto, 180% 180%;
    animation: beastHeroColorRun 7s ease-in-out infinite;
}

body.xdpay-beast-theme .banner .banner-title p::before {
    content: "LIVE PAYMENTS / RISK PARTICLES";
}

body.xdpay-beast-theme .banner .banner-btn a::after,
body.xdpay-beast-theme .model-box .index_btn.btn-blue-primary::after {
    content: "";
    position: absolute;
    inset: -8px;
    z-index: -1;
    border: 3px solid var(--beast-ink);
    background: repeating-linear-gradient(90deg, var(--beast-pink) 0 12px, var(--beast-blue) 12px 24px);
    transform: translate(10px, 10px);
    animation: beastButtonAfterRun 1.2s steps(2, end) infinite;
}

body.xdpay-beast-theme .banner .banner-btn a,
body.xdpay-beast-theme .model-box .index_btn.btn-blue-primary {
    overflow: visible;
    position: relative;
}

@keyframes beastBodyGridRun {
    to { background-position: 34px 34px, 34px 34px, 0 0; }
}

@keyframes beastHeroColorRun {
    0%, 100% { background-position: 0 0, 0 0; }
    50% { background-position: 0 0, 100% 45%; }
}

@keyframes beastButtonAfterRun {
    0%, 100% { transform: translate(10px, 10px) rotate(0); }
    50% { transform: translate(15px, 5px) rotate(-1deg); }
}

@keyframes beastScreenHit {
    0% { transform: translate(0, 0); filter: saturate(1); }
    25% { transform: translate(8px, -4px) rotate(.35deg); filter: saturate(1.7) contrast(1.18); }
    50% { transform: translate(-7px, 5px) rotate(-.25deg); }
    75% { transform: translate(4px, -3px) rotate(.15deg); }
    100% { transform: translate(0, 0); filter: saturate(1); }
}

@media (prefers-reduced-motion: reduce) {
    body.xdpay-beast-theme,
    body.xdpay-beast-theme *,
    body.xdpay-beast-theme *::before,
    body.xdpay-beast-theme *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }

    body.xdpay-beast-theme .xdpay-particles,
    body.xdpay-beast-theme .xdpay-beast-cursor {
        display: none !important;
    }
}

/* Final upload clarity fixes: readable CTA, footer, QR, and contact surfaces */
body.xdpay-beast-theme {
    background: var(--beast-paper);
    animation: none;
}

body.xdpay-beast-theme .xdpay-particles {
    opacity: .32;
}

body.xdpay-beast-theme .banner {
    background:
        radial-gradient(circle at 74% 22%, rgba(255,79,216,.12), transparent 24%),
        linear-gradient(118deg, var(--beast-yellow) 0 52%, var(--beast-blue) 52% 100%);
}

body.xdpay-beast-theme .banner::before,
body.xdpay-beast-theme .banner::after {
    display: none;
}

body.xdpay-beast-theme .banner .banner-btn {
    position: relative;
    z-index: 6;
    width: fit-content;
    margin-top: 30px;
}

body.xdpay-beast-theme .banner .banner-btn a,
body.xdpay-beast-theme .banner .banner-btn .index-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 64px;
    padding: 0 30px;
    color: var(--beast-ink) !important;
    border: 5px solid var(--beast-ink);
    background: var(--beast-green) !important;
    box-shadow: 10px 10px 0 var(--beast-ink);
    font-size: 22px;
    font-weight: 1000;
    line-height: 1;
    text-align: center;
    text-shadow: none !important;
    animation: beastNudge 2.8s ease-in-out infinite;
}

body.xdpay-beast-theme .banner .banner-btn a::after,
body.xdpay-beast-theme .banner .banner-btn .index-btn::after {
    display: none !important;
}

body.xdpay-beast-theme .banner .banner-btn a:hover {
    background: var(--beast-yellow) !important;
    box-shadow: 14px 14px 0 var(--beast-ink);
}

body.xdpay-beast-theme .contact {
    padding: 56px 0;
    border-top: 6px solid var(--beast-ink);
    border-bottom: 6px solid var(--beast-ink);
    background:
        radial-gradient(circle at 16% 52%, rgba(255,255,255,.34), transparent 24%),
        linear-gradient(120deg, var(--beast-yellow) 0 38%, var(--beast-blue) 38% 70%, var(--beast-pink) 70% 100%) !important;
}

body.xdpay-beast-theme .contact .box-body {
    padding: 0;
}

body.xdpay-beast-theme .contact .layui-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

body.xdpay-beast-theme .contact .layui-col-md3,
body.xdpay-beast-theme .contact .layui-col-md3.layui-col-md-offset6 {
    float: none;
    width: auto;
    margin-left: 0;
}

body.xdpay-beast-theme .contact .title-h2 {
    margin: 0 0 12px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: var(--beast-paper);
    box-shadow: 8px 8px 0 var(--beast-ink);
    font-size: clamp(28px, 3.2vw, 48px);
    line-height: 1.08;
}

body.xdpay-beast-theme .contact .title-p {
    color: var(--beast-ink) !important;
    border: 4px solid var(--beast-ink);
    background: var(--beast-green);
    box-shadow: 6px 6px 0 var(--beast-ink);
    font-size: 18px;
}

body.xdpay-beast-theme .contact .contact-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 190px;
    min-height: 60px;
    color: var(--beast-paper) !important;
    border: 5px solid var(--beast-ink);
    background: var(--beast-ink) !important;
    box-shadow: 10px 10px 0 var(--beast-yellow);
    font-size: 20px;
    font-weight: 1000;
}

body.xdpay-beast-theme .footer {
    padding: 0;
    border-top: 6px solid var(--beast-ink);
    background: var(--beast-ink) !important;
}

body.xdpay-beast-theme .footer .foot {
    padding: 48px 0;
}

body.xdpay-beast-theme .footer .layui-row {
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr)) minmax(250px, 300px);
    gap: 18px;
}

body.xdpay-beast-theme .footer dl {
    float: none !important;
    width: auto !important;
    min-height: 172px;
    margin: 0;
    padding: 16px;
    border: 4px solid var(--beast-ink);
    background: var(--beast-paper);
    box-shadow: 7px 7px 0 var(--beast-red);
    box-sizing: border-box;
}

body.xdpay-beast-theme .footer dt h2,
body.xdpay-beast-theme .footer h2 {
    display: inline-block;
    margin: 0 0 12px;
    padding: 4px 8px;
    color: var(--beast-ink) !important;
    border: 3px solid var(--beast-ink);
    background: var(--beast-yellow);
    font-size: 18px;
    font-weight: 1000;
}

body.xdpay-beast-theme .footer dd {
    margin: 0;
}

body.xdpay-beast-theme .footer a {
    display: block;
    width: fit-content;
    margin: 8px 0 0;
    color: var(--beast-ink) !important;
    font-size: 15px;
    font-weight: 800;
    line-height: 1.35;
}

body.xdpay-beast-theme .footer a:hover {
    color: var(--beast-red) !important;
}

body.xdpay-beast-theme .weixin {
    display: flex;
    gap: 12px;
    align-items: stretch;
    justify-content: center;
}

body.xdpay-beast-theme .weixin .we-customer,
body.xdpay-beast-theme .weixin .we-public,
body.xdpay-beast-theme .we-customer-qr,
body.xdpay-beast-theme .we-customer-qr .we-customer-qr-div {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

body.xdpay-beast-theme .we-customer-qr .we-customer-qr-div {
    display: flex;
    min-width: 112px;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border: 3px solid var(--beast-ink);
    background: #fff;
}

body.xdpay-beast-theme .we-customer-qr .we-customer-qr-div span {
    color: var(--beast-ink) !important;
    font-weight: 900;
}

body.xdpay-beast-theme .we-customer-qr .we-customer-qr-div .we-customer-qr-span1 {
    font-size: 14px;
}

body.xdpay-beast-theme .we-customer-qr .we-customer-qr-div .we-customer-qr-span2 {
    margin: 2px 0 8px;
    font-size: 12px;
}

body.xdpay-beast-theme .we-customer-qr .we-customer-qr-div img {
    display: block;
    width: 96px;
    height: 96px;
    border: 2px solid var(--beast-ink);
    object-fit: contain;
    background: #fff;
}

body.xdpay-beast-theme .copyright {
    padding: 20px 12px;
    color: var(--beast-ink);
    border-top: 6px solid var(--beast-ink);
    background: var(--beast-yellow) !important;
    font-weight: 900;
}

body.xdpay-beast-theme .copyright a {
    color: var(--beast-red);
}

@media screen and (max-width: 900px) {
    body.xdpay-beast-theme .contact .layui-row {
        align-items: flex-start;
        flex-direction: column;
    }

    body.xdpay-beast-theme .footer .layui-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.xdpay-beast-theme .footer dl:last-child {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 520px) {
    body.xdpay-beast-theme .banner .banner-btn a,
    body.xdpay-beast-theme .banner .banner-btn .index-btn {
        min-width: 180px;
        min-height: 58px;
        font-size: 19px;
    }

    body.xdpay-beast-theme .footer .layui-row {
        grid-template-columns: 1fr;
    }

    body.xdpay-beast-theme .weixin {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

/* Contact page */
body.xdpay-contact-page {
    min-height: 100vh;
    background: var(--beast-paper);
}

body.xdpay-contact-page .xdpay-contact-main {
    position: relative;
    z-index: 2;
    padding-top: 82px;
}

body.xdpay-contact-page .xdpay-contact-hero {
    min-height: 660px;
    display: flex;
    align-items: center;
    border-bottom: 6px solid var(--beast-ink);
    background:
        radial-gradient(circle at 80% 22%, rgba(255,79,216,.14), transparent 23%),
        linear-gradient(118deg, var(--beast-yellow) 0 51%, var(--beast-blue) 51% 100%);
}

body.xdpay-contact-page .xdpay-contact-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
    gap: 46px;
    align-items: center;
}

body.xdpay-contact-page .xdpay-kicker {
    display: inline-flex;
    margin-bottom: 18px;
    padding: 9px 14px;
    color: var(--beast-paper);
    border: 5px solid var(--beast-ink);
    background: var(--beast-red);
    box-shadow: 8px 8px 0 var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-contact-page .xdpay-contact-copy h1 {
    margin: 0;
    color: var(--beast-ink);
    font-size: clamp(64px, 9vw, 126px);
    font-weight: 1000;
    line-height: .9;
    text-shadow: 5px 5px 0 var(--beast-paper), 10px 10px 0 var(--beast-pink);
}

body.xdpay-contact-page .xdpay-contact-copy p {
    max-width: 660px;
    margin: 28px 0 0;
    padding: 16px 18px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: rgba(255,248,222,.95);
    box-shadow: 9px 9px 0 var(--beast-ink);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.7;
}

body.xdpay-contact-page .xdpay-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

body.xdpay-contact-page .xdpay-contact-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    min-width: 168px;
    padding: 0 24px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: var(--beast-green);
    box-shadow: 9px 9px 0 var(--beast-ink);
    font-size: 19px;
    font-weight: 1000;
}

body.xdpay-contact-page .xdpay-contact-actions a:nth-child(2) {
    background: var(--beast-paper);
}

body.xdpay-contact-page .xdpay-contact-board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 22px;
    border: 6px solid var(--beast-ink);
    background: var(--beast-paper);
    box-shadow: 16px 16px 0 var(--beast-ink);
    transform: rotate(2deg);
}

body.xdpay-contact-page .xdpay-qr-card {
    display: flex;
    min-height: 238px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: 5px solid var(--beast-ink);
    background: #fff;
    box-shadow: 8px 8px 0 var(--beast-blue);
    text-align: center;
}

body.xdpay-contact-page .xdpay-qr-card:nth-child(2) {
    box-shadow: 8px 8px 0 var(--beast-pink);
}

body.xdpay-contact-page .xdpay-qr-card strong {
    display: inline-block;
    padding: 5px 9px;
    color: var(--beast-paper);
    border: 3px solid var(--beast-ink);
    background: var(--beast-ink);
    font-size: 18px;
    font-weight: 1000;
}

body.xdpay-contact-page .xdpay-qr-card span {
    margin: 8px 0 12px;
    color: var(--beast-ink);
    font-weight: 900;
}

body.xdpay-contact-page .xdpay-qr-card img {
    width: 132px;
    height: 132px;
    border: 3px solid var(--beast-ink);
    background: #fff;
    object-fit: contain;
}

body.xdpay-contact-page .xdpay-contact-info {
    padding: 58px 0;
    background: var(--beast-paper);
}

body.xdpay-contact-page .xdpay-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

body.xdpay-contact-page .xdpay-contact-grid article {
    min-height: 220px;
    padding: 24px;
    border: 5px solid var(--beast-ink);
    background: #fff;
    box-shadow: 10px 10px 0 var(--beast-ink);
}

body.xdpay-contact-page .xdpay-contact-grid b {
    display: inline-block;
    padding: 5px 10px;
    color: var(--beast-ink);
    border: 4px solid var(--beast-ink);
    background: var(--beast-yellow);
    font-size: 22px;
    font-weight: 1000;
}

body.xdpay-contact-page .xdpay-contact-grid h2 {
    margin: 18px 0 10px;
    color: var(--beast-ink);
    font-size: 28px;
    font-weight: 1000;
}

body.xdpay-contact-page .xdpay-contact-grid p {
    color: var(--beast-ink);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.7;
}

@media screen and (max-width: 900px) {
    body.xdpay-contact-page .xdpay-contact-main {
        padding-top: 70px;
    }

    body.xdpay-contact-page .xdpay-contact-hero {
        min-height: auto;
        padding: 68px 0;
    }

    body.xdpay-contact-page .xdpay-contact-hero-inner,
    body.xdpay-contact-page .xdpay-contact-grid {
        grid-template-columns: 1fr;
    }

    body.xdpay-contact-page .xdpay-contact-board {
        transform: none;
    }
}

@media screen and (max-width: 520px) {
    body.xdpay-contact-page .xdpay-contact-board {
        grid-template-columns: 1fr;
    }

    body.xdpay-contact-page .xdpay-contact-copy h1 {
        font-size: clamp(48px, 17vw, 72px);
    }
}

/* Final footer layout pass: keep contact links aligned and QR cards obvious. */
body.xdpay-beast-theme .footer .layui-row {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(138px, 1fr));
    gap: 24px;
    align-items: stretch;
}

body.xdpay-beast-theme .footer .layui-row::before,
body.xdpay-beast-theme .footer .layui-row::after {
    display: none !important;
}

body.xdpay-beast-theme .footer dl:last-child {
    grid-column: 1 / -1;
    min-height: auto;
    padding: 18px 20px;
    box-shadow: 8px 8px 0 var(--beast-blue);
}

body.xdpay-beast-theme .footer dl:last-child dd {
    width: 100%;
}

body.xdpay-beast-theme .footer dl:last-child .weixin {
    width: 100%;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
}

body.xdpay-beast-theme .footer dl:last-child .we-customer-qr .we-customer-qr-div {
    min-width: 172px;
    padding: 14px;
}

body.xdpay-beast-theme .footer dl:last-child .we-customer-qr .we-customer-qr-div .we-customer-qr-span1 {
    font-size: 16px;
}

body.xdpay-beast-theme .footer dl:last-child .we-customer-qr .we-customer-qr-div .we-customer-qr-span2 {
    margin: 4px 0 10px;
    font-size: 13px;
}

body.xdpay-beast-theme .footer dl:last-child .we-customer-qr .we-customer-qr-div img {
    width: 124px;
    height: 124px;
}

@media screen and (max-width: 900px) {
    body.xdpay-beast-theme .footer .layui-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    body.xdpay-beast-theme .footer dl:last-child {
        grid-column: 1 / -1;
    }
}

@media screen and (max-width: 520px) {
    body.xdpay-beast-theme .footer .layui-row {
        grid-template-columns: 1fr;
    }
}

/* Solution page + restored blue/yellow hero motion */
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) {
    background:
        radial-gradient(circle at 8% 26%, rgba(255,229,0,.22), transparent 26%),
        radial-gradient(circle at 92% 78%, rgba(0,217,255,.2), transparent 28%),
        var(--beast-paper);
    animation: xdpayPageColorPulse 9s ease-in-out infinite;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-particles {
    opacity: .48;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 75% 22%, rgba(255,79,216,.16), transparent 24%),
        linear-gradient(118deg, var(--beast-yellow) 0 30%, var(--beast-yellow) 42%, var(--beast-blue) 58%, var(--beast-blue) 100%);
    background-size: 150% 150%, 240% 240%;
    animation: xdpayHeroBlueYellowSwap 6.8s ease-in-out infinite !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::before {
    display: block !important;
    position: absolute;
    inset: -18% -8%;
    z-index: 0;
    border: 0;
    background:
        linear-gradient(105deg, transparent 0 23%, rgba(255,255,255,.5) 23% 34%, transparent 34% 54%, rgba(255,61,0,.2) 54% 67%, transparent 67% 100%);
    content: "";
    opacity: .82;
    pointer-events: none;
    transform: translateX(-10%) skewX(-10deg);
    animation: xdpayHeroLightSweep 5.4s cubic-bezier(.45,0,.2,1) infinite;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::after {
    display: block !important;
    position: absolute;
    right: clamp(22px, 7vw, 118px);
    top: 132px;
    z-index: 1;
    width: clamp(118px, 15vw, 218px);
    height: clamp(118px, 15vw, 218px);
    border: 5px solid var(--beast-ink);
    border-radius: 0;
    background: linear-gradient(135deg, var(--beast-green) 0 48%, var(--beast-pink) 48% 100%);
    box-shadow: 10px 10px 0 var(--beast-ink);
    content: "";
    opacity: .86;
    pointer-events: none;
    transform: rotate(8deg);
    animation: xdpayHeroBlockFlip 4.8s steps(2, end) infinite;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner-box {
    position: relative;
    z-index: 2;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title .desc span {
    backdrop-filter: none;
}

body.xdpay-solution-page {
    min-height: 100vh;
    background: var(--beast-paper);
}

body.xdpay-solution-page .xdpay-particles {
    opacity: .44;
}

body.xdpay-solution-page .xdpay-solution-main {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding-top: 82px;
}

body.xdpay-solution-page .xdpay-solution-hero {
    position: relative;
    min-height: 690px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 6px solid var(--beast-ink);
    background:
        radial-gradient(circle at 80% 18%, rgba(255,79,216,.16), transparent 23%),
        linear-gradient(118deg, var(--beast-yellow) 0 31%, var(--beast-yellow) 43%, var(--beast-blue) 58%, var(--beast-blue) 100%);
    background-size: 150% 150%, 235% 235%;
    animation: xdpayHeroBlueYellowSwap 7.2s ease-in-out infinite;
}

body.xdpay-solution-page .xdpay-solution-hero::before {
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    background:
        linear-gradient(105deg, transparent 0 22%, rgba(255,255,255,.45) 22% 34%, transparent 34% 56%, rgba(255,61,0,.18) 56% 66%, transparent 66% 100%);
    content: "";
    opacity: .82;
    transform: translateX(-10%) skewX(-10deg);
    animation: xdpayHeroLightSweep 5.8s cubic-bezier(.45,0,.2,1) infinite;
}

body.xdpay-solution-page .xdpay-solution-hero::after {
    position: absolute;
    right: clamp(18px, 8vw, 126px);
    top: 122px;
    z-index: 1;
    width: clamp(112px, 14vw, 206px);
    height: clamp(112px, 14vw, 206px);
    border: 5px solid var(--beast-ink);
    background: linear-gradient(135deg, var(--beast-green) 0 50%, var(--beast-pink) 50% 100%);
    box-shadow: 10px 10px 0 var(--beast-ink);
    content: "";
    opacity: .82;
    transform: rotate(7deg);
    animation: xdpayHeroBlockFlip 5.2s steps(2, end) infinite;
}

body.xdpay-solution-page .xdpay-solution-hero-inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
    gap: 48px;
    align-items: center;
}

body.xdpay-solution-page .xdpay-kicker,
body.xdpay-solution-page .xdpay-section-head span,
body.xdpay-solution-page .xdpay-solution-cta span {
    display: inline-flex;
    width: fit-content;
    padding: 8px 12px;
    color: var(--beast-paper);
    border: 4px solid var(--beast-ink);
    background: var(--beast-red);
    box-shadow: 7px 7px 0 var(--beast-ink);
    font-weight: 1000;
    letter-spacing: 0;
}

body.xdpay-solution-page .xdpay-solution-copy h1 {
    max-width: 740px;
    margin: 18px 0 0;
    color: var(--beast-ink);
    font-size: clamp(64px, 8.4vw, 122px);
    font-weight: 1000;
    line-height: .9;
    text-shadow: 5px 5px 0 var(--beast-paper), 10px 10px 0 var(--beast-pink);
}

body.xdpay-solution-page .xdpay-solution-copy p {
    max-width: 640px;
    margin: 28px 0 0;
    padding: 16px 18px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: rgba(255,248,222,.95);
    box-shadow: 9px 9px 0 var(--beast-ink);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.7;
}

body.xdpay-solution-page .xdpay-solution-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 28px;
}

body.xdpay-solution-page .xdpay-solution-actions a,
body.xdpay-solution-page .xdpay-solution-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    min-height: 58px;
    padding: 0 24px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: var(--beast-green);
    box-shadow: 9px 9px 0 var(--beast-ink);
    font-size: 19px;
    font-weight: 1000;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

body.xdpay-solution-page .xdpay-solution-actions a:nth-child(2) {
    background: var(--beast-paper);
}

body.xdpay-solution-page .xdpay-solution-actions a:hover,
body.xdpay-solution-page .xdpay-solution-cta a:hover {
    color: var(--beast-ink);
    background: var(--beast-yellow);
    box-shadow: 13px 13px 0 var(--beast-ink);
    transform: translate(-4px, -4px) rotate(-1deg);
}

body.xdpay-solution-page .xdpay-solution-console {
    position: relative;
    padding: 18px;
    border: 6px solid var(--beast-ink);
    background: var(--beast-paper);
    box-shadow: 16px 16px 0 var(--beast-ink);
    transform: rotate(2deg);
    animation: xdpayConsoleFloat 5.6s ease-in-out infinite;
}

body.xdpay-solution-page .xdpay-console-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    color: var(--beast-paper);
    border: 4px solid var(--beast-ink);
    background: var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-solution-page .xdpay-console-top span,
body.xdpay-solution-page .xdpay-console-top b {
    padding: 9px 12px;
}

body.xdpay-solution-page .xdpay-console-top b {
    color: var(--beast-ink);
    background: var(--beast-green);
}

body.xdpay-solution-page .xdpay-solution-console img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 5px solid var(--beast-ink);
    object-fit: cover;
    filter: saturate(1.18) contrast(1.04);
}

body.xdpay-solution-page .xdpay-solution-visual {
    display: block;
}

body.xdpay-solution-page .xdpay-mobile-router {
    display: none;
}

body.xdpay-solution-page .xdpay-route-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

body.xdpay-solution-page .xdpay-route-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    color: var(--beast-ink);
    border: 4px solid var(--beast-ink);
    background: #fff;
    box-shadow: 5px 5px 0 var(--beast-blue);
}

body.xdpay-solution-page .xdpay-route-list div:nth-child(2) {
    box-shadow-color: var(--beast-pink);
}

body.xdpay-solution-page .xdpay-route-list div:nth-child(3) {
    box-shadow-color: var(--beast-yellow);
}

body.xdpay-solution-page .xdpay-route-list strong,
body.xdpay-solution-page .xdpay-route-list span {
    font-weight: 1000;
}

body.xdpay-solution-page .xdpay-route-list span {
    font-size: 13px;
}

body.xdpay-solution-page .xdpay-solution-suite,
body.xdpay-solution-page .xdpay-solution-flow,
body.xdpay-solution-page .xdpay-solution-scenes {
    position: relative;
    padding: 66px 0;
    border-bottom: 6px solid var(--beast-ink);
    background: var(--beast-paper);
}

body.xdpay-solution-page .xdpay-solution-flow {
    background:
        radial-gradient(circle at 18% 18%, rgba(34,255,117,.2), transparent 24%),
        var(--beast-paper);
}

body.xdpay-solution-page .xdpay-solution-scenes {
    background:
        radial-gradient(circle at 84% 20%, rgba(255,79,216,.16), transparent 22%),
        linear-gradient(118deg, rgba(255,229,0,.72) 0 40%, rgba(0,217,255,.62) 40% 100%);
}

body.xdpay-solution-page .xdpay-section-head {
    margin-bottom: 28px;
}

body.xdpay-solution-page .xdpay-section-head h2,
body.xdpay-solution-page .xdpay-solution-cta h2 {
    width: fit-content;
    max-width: 100%;
    margin: 18px 0 0;
    padding: 12px 16px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: var(--beast-yellow);
    box-shadow: 8px 8px 0 var(--beast-ink);
    font-size: clamp(30px, 4vw, 56px);
    font-weight: 1000;
    line-height: 1.08;
}

body.xdpay-solution-page .xdpay-solution-cards,
body.xdpay-solution-page .xdpay-flow-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
}

body.xdpay-solution-page .xdpay-flow-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

body.xdpay-solution-page .xdpay-solution-cards article,
body.xdpay-solution-page .xdpay-flow-grid article,
body.xdpay-solution-page .xdpay-scenes-strip article {
    min-height: 220px;
    padding: 22px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: #fff;
    box-shadow: 9px 9px 0 var(--beast-ink);
    transition: transform .18s ease, box-shadow .18s ease;
}

body.xdpay-solution-page .xdpay-solution-cards article:nth-child(2n) {
    background: rgba(255,229,0,.22);
}

body.xdpay-solution-page .xdpay-solution-cards article:hover,
body.xdpay-solution-page .xdpay-flow-grid article:hover,
body.xdpay-solution-page .xdpay-scenes-strip article:hover {
    box-shadow: 14px 14px 0 var(--beast-ink);
    transform: translate(-5px, -5px) rotate(-1deg);
}

body.xdpay-solution-page .xdpay-solution-cards img {
    width: 62px;
    height: 62px;
    padding: 10px;
    border: 4px solid var(--beast-ink);
    background: var(--beast-green);
    object-fit: contain;
}

body.xdpay-solution-page .xdpay-solution-cards h3,
body.xdpay-solution-page .xdpay-flow-grid h3 {
    margin: 18px 0 10px;
    color: var(--beast-ink);
    font-size: 24px;
    font-weight: 1000;
}

body.xdpay-solution-page .xdpay-solution-cards p,
body.xdpay-solution-page .xdpay-flow-grid p {
    color: var(--beast-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.7;
}

body.xdpay-solution-page .xdpay-flow-grid b {
    display: inline-block;
    padding: 5px 10px;
    color: var(--beast-ink);
    border: 4px solid var(--beast-ink);
    background: var(--beast-blue);
    font-size: 24px;
    font-weight: 1000;
}

body.xdpay-solution-page .xdpay-scenes-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

body.xdpay-solution-page .xdpay-scenes-strip article {
    min-height: 190px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    background: var(--beast-paper);
}

body.xdpay-solution-page .xdpay-scenes-strip img {
    display: block;
    width: 100%;
    height: 104px;
    object-fit: contain;
}

body.xdpay-solution-page .xdpay-scenes-strip strong {
    display: inline-block;
    width: fit-content;
    margin-top: 12px;
    padding: 5px 9px;
    color: var(--beast-paper);
    border: 3px solid var(--beast-ink);
    background: var(--beast-ink);
    font-size: 18px;
    font-weight: 1000;
}

body.xdpay-solution-page .xdpay-solution-cta {
    padding: 56px 0;
    border-bottom: 6px solid var(--beast-ink);
    background:
        radial-gradient(circle at 14% 50%, rgba(255,255,255,.36), transparent 24%),
        linear-gradient(120deg, var(--beast-yellow) 0 38%, var(--beast-blue) 38% 70%, var(--beast-pink) 70% 100%);
}

body.xdpay-solution-page .xdpay-solution-cta .layui-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 26px;
}

body.xdpay-solution-page .xdpay-solution-cta a {
    flex: 0 0 auto;
    color: var(--beast-paper);
    background: var(--beast-ink);
}

@keyframes xdpayPageColorPulse {
    0%, 100% { background-position: 0 0, 0 0, 0 0; }
    50% { background-position: 28px 16px, -32px -20px, 0 0; }
}

@keyframes xdpayHeroBlueYellowSwap {
    0%, 100% {
        background-position: 0 0, 0 46%;
        filter: saturate(1.02);
    }
    50% {
        background-position: 6% 4%, 100% 54%;
        filter: saturate(1.18);
    }
}

@keyframes xdpayHeroLightSweep {
    0%, 100% { transform: translateX(-22%) skewX(-10deg); opacity: .62; }
    50% { transform: translateX(18%) skewX(-10deg); opacity: .9; }
}

@keyframes xdpayHeroBlockFlip {
    0%, 100% {
        background: linear-gradient(135deg, var(--beast-green) 0 50%, var(--beast-pink) 50% 100%);
        transform: rotate(7deg) translate(0, 0);
    }
    50% {
        background: linear-gradient(135deg, var(--beast-yellow) 0 50%, var(--beast-blue) 50% 100%);
        transform: rotate(-5deg) translate(-12px, 10px);
    }
}

@keyframes xdpayConsoleFloat {
    0%, 100% { transform: rotate(2deg) translate(0, 0); }
    50% { transform: rotate(-1deg) translate(-6px, -12px); }
}

@media screen and (max-width: 1100px) {
    body.xdpay-solution-page .xdpay-solution-cards,
    body.xdpay-solution-page .xdpay-scenes-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 900px) {
    body.xdpay-solution-page .xdpay-solution-main {
        padding-top: 70px;
    }

    body.xdpay-solution-page .xdpay-solution-hero {
        min-height: auto;
        padding: 68px 0;
    }

    body.xdpay-solution-page .xdpay-solution-hero-inner,
    body.xdpay-solution-page .xdpay-flow-grid {
        grid-template-columns: 1fr;
    }

    body.xdpay-solution-page .xdpay-solution-console {
        transform: none;
    }

    body.xdpay-solution-page .xdpay-solution-cta .layui-container {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media screen and (max-width: 560px) {
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::after,
    body.xdpay-solution-page .xdpay-solution-hero::after {
        width: 106px;
        height: 106px;
        opacity: .56;
    }

    body.xdpay-solution-page .xdpay-solution-copy h1 {
        font-size: clamp(48px, 17vw, 72px);
    }

    body.xdpay-solution-page .xdpay-solution-cards,
    body.xdpay-solution-page .xdpay-scenes-strip {
        grid-template-columns: 1fr;
    }

    body.xdpay-solution-page .xdpay-route-list div {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Homepage final: blue/yellow motion + real right-side payment module. */
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner {
    background:
        radial-gradient(circle at 76% 22%, rgba(255, 79, 216, .18), transparent 24%),
        radial-gradient(circle at 16% 76%, rgba(34, 255, 117, .2), transparent 26%),
        linear-gradient(118deg, var(--beast-yellow) 0 31%, var(--beast-yellow) 43%, var(--beast-blue) 58%, var(--beast-blue) 100%);
    background-size: 150% 150%, 145% 145%, 235% 235%;
    animation: xdpayHeroBlueYellowSwap 6.8s ease-in-out infinite !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::before {
    display: block !important;
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    border: 0;
    background:
        linear-gradient(105deg, transparent 0 23%, rgba(255, 255, 255, .5) 23% 34%, transparent 34% 54%, rgba(255, 61, 0, .2) 54% 67%, transparent 67% 100%);
    content: "";
    opacity: .82;
    pointer-events: none;
    transform: translateX(-12%) skewX(-10deg);
    animation: xdpayHeroLightSweep 5.2s cubic-bezier(.45, 0, .2, 1) infinite;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::after,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner-box::before,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner-box::after {
    display: none !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner-box {
    overflow: visible;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title {
    position: relative;
    z-index: 6;
    width: min(690px, 53%);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal {
    position: absolute;
    top: 51%;
    right: clamp(22px, 6.5vw, 88px);
    z-index: 5;
    width: min(462px, 36vw);
    padding: 22px;
    border: 6px solid var(--beast-ink);
    background:
        linear-gradient(105deg, rgba(255, 248, 222, .95) 0 55%, rgba(255, 255, 255, .85) 55% 100%);
    box-shadow: 16px 16px 0 var(--beast-ink);
    color: var(--beast-ink);
    transform: translateY(-50%) rotate(2deg);
    animation: xdpayHomeTerminalFloat 4.8s ease-in-out infinite;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--beast-paper);
    border: 4px solid var(--beast-ink);
    background: var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top span,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top b {
    padding: 9px 12px;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top b {
    color: var(--beast-ink);
    background: var(--beast-green);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 124px;
    margin: 0 10px 18px;
    border: 5px solid var(--beast-ink);
    box-shadow: 8px 8px 0 var(--beast-ink);
    transform: rotate(2deg);
    overflow: hidden;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars i:nth-child(1) {
    background: var(--beast-red);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars i:nth-child(2) {
    background: var(--beast-yellow);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars i:nth-child(3) {
    background: var(--beast-blue);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars i:nth-child(4) {
    background: var(--beast-green);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes {
    display: grid;
    gap: 10px;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 4px solid var(--beast-ink);
    background: rgba(255, 255, 255, .94);
    box-shadow: 5px 5px 0 var(--beast-blue);
    font-weight: 1000;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes div:nth-child(2) {
    box-shadow-color: var(--beast-green);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes div:nth-child(3) {
    box-shadow-color: var(--beast-pink);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes strong,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes span {
    color: var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes span {
    font-size: 13px;
}

@keyframes xdpayHomeBlueWhiteFlow {
    0%, 100% {
        background-position: 0 0, 12% 18%, 0 48%;
        filter: saturate(1.02);
    }
    50% {
        background-position: 8% 6%, 70% 42%, 100% 52%;
        filter: saturate(1.16);
    }
}

@keyframes xdpayHomeWhiteSweep {
    0%, 100% { transform: translateX(-20%) skewX(-10deg); opacity: .56; }
    50% { transform: translateX(20%) skewX(-10deg); opacity: .88; }
}

@keyframes xdpayHomeTerminalFloat {
    0%, 100% { transform: translateY(-50%) rotate(2deg); }
    50% { transform: translateY(calc(-50% - 12px)) rotate(-1deg); }
}

@media screen and (max-width: 900px) {
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title {
        width: 100%;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 360px);
        margin: 30px auto 0;
        padding: 14px;
        transform: none;
        animation: none;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars {
        min-height: 92px;
        margin-right: 0;
        margin-left: 0;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page),
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner,
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::before,
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::after,
    body.xdpay-solution-page .xdpay-solution-hero,
    body.xdpay-solution-page .xdpay-solution-hero::before,
    body.xdpay-solution-page .xdpay-solution-hero::after,
    body.xdpay-solution-page .xdpay-solution-console {
        animation: none !important;
    }
}

/* Final readability guard: keep motion behind the content, never over the CTA. */
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-btn {
    position: relative;
    z-index: 12;
    opacity: 1 !important;
    animation-name: none !important;
    filter: none !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title p {
    opacity: 1 !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title .desc span {
    color: var(--beast-ink) !important;
    background: rgba(255, 248, 222, .96) !important;
    opacity: 1 !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-btn a,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-btn .index-btn {
    position: relative;
    z-index: 13;
    color: var(--beast-ink) !important;
    background: var(--beast-green) !important;
    opacity: 1 !important;
    filter: none !important;
    mix-blend-mode: normal !important;
    animation: beastNudge 2.8s ease-in-out infinite !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::before {
    z-index: 0;
    opacity: .44;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::after {
    z-index: 1;
    opacity: .64;
}

@media screen and (max-width: 560px) {
    html,
    body.xdpay-solution-page {
        overflow-x: hidden;
    }

    body.xdpay-solution-page .layui-container {
        width: calc(100% - 28px);
    }

    body.xdpay-solution-page .xdpay-solution-hero {
        padding: 64px 0 54px;
    }

    body.xdpay-solution-page .xdpay-solution-copy h1 {
        max-width: calc(100% - 24px);
        font-size: clamp(36px, 11.6vw, 46px);
        line-height: .96;
        overflow-wrap: anywhere;
        text-shadow: 3px 3px 0 var(--beast-paper), 6px 6px 0 var(--beast-pink);
    }

    body.xdpay-solution-page .xdpay-solution-copy p {
        max-width: calc(100% - 28px);
        box-sizing: border-box;
        font-size: 17px;
        box-shadow: 5px 5px 0 var(--beast-ink);
    }

    body.xdpay-solution-page .xdpay-solution-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        max-width: calc(100% - 28px);
    }

    body.xdpay-solution-page .xdpay-solution-actions a {
        min-width: 0;
        flex: none;
        padding: 0 14px;
        font-size: 17px;
    }

    body.xdpay-solution-page .xdpay-solution-console {
        width: 100%;
        max-width: 326px;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
        transform: none !important;
        animation: none !important;
    }

    body.xdpay-solution-page .xdpay-console-top {
        display: none;
    }

    body.xdpay-solution-page .xdpay-solution-visual {
        display: none;
    }

    body.xdpay-solution-page .xdpay-mobile-router {
        display: block;
        width: 100%;
        padding: 12px;
        border: 5px solid var(--beast-ink);
        background:
            linear-gradient(112deg, rgba(255,239,90,.78) 0 34%, rgba(255,196,0,.72) 34% 63%, rgba(34,255,117,.72) 63% 100%),
            var(--beast-yellow);
        box-shadow: 4px 4px 0 var(--beast-ink);
        box-sizing: border-box;
        color: var(--beast-ink);
    }

    body.xdpay-solution-page .xdpay-mobile-router-top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 14px;
        padding: 8px;
        color: var(--beast-paper);
        background: var(--beast-ink);
        font-size: 12px;
        font-weight: 1000;
    }

    body.xdpay-solution-page .xdpay-mobile-router-top b {
        display: none;
    }

    body.xdpay-solution-page .xdpay-mobile-router h2 {
        margin: 0;
        color: var(--beast-ink);
        font-size: clamp(27px, 9.4vw, 34px);
        font-weight: 1000;
        line-height: 1.04;
        text-shadow: 3px 3px 0 var(--beast-paper), 6px 6px 0 var(--beast-pink);
    }

    body.xdpay-solution-page .xdpay-mobile-router p {
        margin: 10px 0 16px;
        color: var(--beast-ink);
        font-size: 15px;
        font-weight: 1000;
        line-height: 1.5;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid article {
        min-height: 72px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 11px 13px;
        border: 4px solid var(--beast-ink);
        box-shadow: 4px 4px 0 var(--beast-ink);
        box-sizing: border-box;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid strong {
        color: var(--beast-ink);
        font-size: 24px;
        font-weight: 1000;
        line-height: 1.1;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid span {
        margin-top: 6px;
        color: var(--beast-ink);
        font-size: 13px;
        font-weight: 1000;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid .router-core {
        grid-row: auto;
        min-height: 76px;
        background: var(--beast-blue);
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid .router-pay {
        background: var(--beast-green);
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid .router-split {
        background: var(--beast-red);
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid .router-wallet {
        background: var(--beast-pink);
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid .router-transfer {
        background: var(--beast-yellow);
    }

    body.xdpay-solution-page .xdpay-route-list {
        display: none;
    }

    body.xdpay-solution-page .xdpay-section-head h2,
    body.xdpay-solution-page .xdpay-solution-cta h2 {
        box-sizing: border-box;
        font-size: clamp(28px, 10vw, 38px);
    }
}

/* Mobile solution visual: replace the oversized image area with a safe compact module. */
@media screen and (max-width: 560px) {
    body.xdpay-solution-page .xdpay-solution-hero-inner {
        width: 100%;
        max-width: 100%;
        gap: 34px;
    }

    body.xdpay-solution-page .xdpay-solution-console {
        width: min(100%, 292px);
        max-width: 292px;
        margin: 0 auto;
        overflow: visible;
    }

    body.xdpay-solution-page .xdpay-mobile-router {
        padding: 12px;
        border: 4px solid var(--beast-ink);
        background:
            linear-gradient(130deg, rgba(255,229,0,.92) 0 42%, rgba(34,255,117,.78) 42% 100%),
            var(--beast-paper);
        box-shadow: none;
    }

    body.xdpay-solution-page .xdpay-mobile-router-top {
        display: none;
    }

    body.xdpay-solution-page .xdpay-mobile-router h2 {
        display: inline-block;
        margin: 0 0 8px;
        padding: 6px 8px;
        border: 3px solid var(--beast-ink);
        background: var(--beast-paper);
        box-shadow: 4px 4px 0 var(--beast-ink);
        font-size: 30px;
        line-height: 1.05;
        text-shadow: none;
    }

    body.xdpay-solution-page .xdpay-mobile-router p {
        margin: 8px 0 12px;
        padding: 8px 10px;
        border: 3px solid var(--beast-ink);
        background: rgba(255,248,222,.94);
        font-size: 14px;
        line-height: 1.45;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid {
        gap: 8px;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid article {
        min-height: 62px;
        padding: 10px 12px;
        border: 3px solid var(--beast-ink);
        box-shadow: none;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid strong {
        font-size: 21px;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid span {
        margin-top: 4px;
        font-size: 12px;
    }
}

/* Final mobile width lock: keep the whole solution hero inside small phones. */
@media screen and (max-width: 560px) {
    html,
    body,
    body.xdpay-solution-page,
    body.xdpay-solution-page .xdpay-solution-main,
    body.xdpay-solution-page .xdpay-solution-hero {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body.xdpay-solution-page .layui-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-right: 18px;
        padding-left: 18px;
        box-sizing: border-box;
    }

    body.xdpay-solution-page .xdpay-kicker {
        max-width: 100%;
        box-sizing: border-box;
        font-size: 12px;
        box-shadow: 4px 4px 0 var(--beast-ink);
    }

    body.xdpay-solution-page .xdpay-solution-copy,
    body.xdpay-solution-page .xdpay-solution-copy h1,
    body.xdpay-solution-page .xdpay-solution-copy p,
    body.xdpay-solution-page .xdpay-solution-actions {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    body.xdpay-solution-page .xdpay-solution-copy h1 {
        font-size: clamp(34px, 10.4vw, 41px);
        line-height: 1.06;
        word-break: keep-all;
        overflow-wrap: anywhere;
        text-shadow: 2px 2px 0 var(--beast-paper), 4px 4px 0 var(--beast-pink);
    }

    body.xdpay-solution-page .xdpay-solution-copy p {
        padding: 13px;
        border-width: 4px;
        box-shadow: 4px 4px 0 var(--beast-ink);
        font-size: 16px;
        line-height: 1.62;
    }

    body.xdpay-solution-page .xdpay-solution-actions a {
        width: 100%;
        box-sizing: border-box;
    }

    body.xdpay-solution-page .xdpay-solution-console {
        width: 100%;
        max-width: 292px;
    }
}

/* Final mobile composition: cleaner phone-first brutalism for solution.html. */
@media screen and (max-width: 560px) {
    body.xdpay-solution-page *,
    body.xdpay-solution-page *::before,
    body.xdpay-solution-page *::after {
        box-sizing: border-box;
    }

    body.xdpay-solution-page {
        --mobile-paper: rgba(255, 248, 222, .96);
        --mobile-line: 3px;
        background: var(--beast-yellow);
    }

    body.xdpay-solution-page .xdpay-particles {
        opacity: .26;
    }

    body.xdpay-solution-page .xdpay-solution-main {
        padding-top: 66px;
    }

    body.xdpay-solution-page .xdpay-solution-hero {
        min-height: auto;
        padding: 32px 0 38px;
        border-bottom-width: 4px;
        background:
            radial-gradient(circle at 104% 14%, rgba(255, 79, 216, .34), transparent 27%),
            linear-gradient(130deg, var(--beast-yellow) 0 46%, var(--beast-blue) 46% 72%, var(--beast-green) 72% 100%);
        background-size: 160% 160%, 235% 235%;
    }

    body.xdpay-solution-page .xdpay-solution-hero::before {
        inset: -26% -42%;
        background:
            linear-gradient(112deg, transparent 0 36%, rgba(255, 255, 255, .36) 36% 45%, transparent 45% 100%);
        opacity: .58;
    }

    body.xdpay-solution-page .xdpay-solution-hero::after {
        top: 106px;
        right: -32px;
        width: 86px;
        height: 86px;
        border-width: 3px;
        box-shadow: 5px 5px 0 var(--beast-ink);
        opacity: .42;
    }

    body.xdpay-solution-page .xdpay-solution-hero-inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px;
        width: calc(100vw - 32px) !important;
        max-width: 420px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 0;
        padding-left: 0;
        box-sizing: border-box;
    }

    body.xdpay-solution-page .xdpay-kicker {
        padding: 6px 9px;
        border-width: 3px;
        box-shadow: 3px 3px 0 var(--beast-ink);
        font-size: 11px;
        line-height: 1.1;
    }

    body.xdpay-solution-page .xdpay-solution-copy h1 {
        margin: 14px 0 0;
        font-size: clamp(39px, 13.6vw, 52px);
        line-height: .92;
        text-shadow: 2px 2px 0 var(--beast-paper), 4px 4px 0 var(--beast-pink);
        word-break: keep-all;
    }

    body.xdpay-solution-page .xdpay-solution-copy h1 span {
        display: block;
    }

    body.xdpay-solution-page .xdpay-solution-copy h1 span + span {
        margin-left: 22px;
    }

    body.xdpay-solution-page .xdpay-solution-copy p {
        width: 100%;
        max-width: 100%;
        margin-top: 14px;
        padding: 11px 12px;
        border-width: 3px;
        background: var(--mobile-paper);
        box-shadow: none;
        font-size: 14px;
        font-weight: 850;
        line-height: 1.56;
        overflow-wrap: anywhere;
        word-break: break-all;
    }

    body.xdpay-solution-page .xdpay-solution-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 14px;
        width: 100%;
        max-width: 100%;
    }

    body.xdpay-solution-page .xdpay-solution-actions a {
        width: 100%;
        min-height: 48px;
        padding: 0 8px;
        border-width: 3px;
        box-shadow: 3px 3px 0 var(--beast-ink);
        font-size: 15px;
        line-height: 1;
    }

    body.xdpay-solution-page .xdpay-solution-actions a:hover {
        box-shadow: 4px 4px 0 var(--beast-ink);
        transform: none;
    }

    body.xdpay-solution-page .xdpay-solution-console {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        transform: none !important;
        animation: none !important;
    }

    body.xdpay-solution-page .xdpay-console-top,
    body.xdpay-solution-page .xdpay-solution-visual,
    body.xdpay-solution-page .xdpay-route-list {
        display: none;
    }

    body.xdpay-solution-page .xdpay-mobile-router {
        position: relative;
        display: block;
        width: 100%;
        max-width: 100%;
        padding: 12px;
        overflow: hidden;
        border: var(--mobile-line) solid var(--beast-ink);
        background:
            linear-gradient(135deg, rgba(255, 229, 0, .94) 0 44%, rgba(34, 255, 117, .9) 44% 100%),
            var(--beast-paper);
        box-shadow: none;
        color: var(--beast-ink);
    }

    body.xdpay-solution-page .xdpay-mobile-router::before {
        position: absolute;
        top: 52px;
        left: -30%;
        z-index: 0;
        width: 160%;
        height: 30px;
        border-top: 2px solid rgba(16, 16, 16, .32);
        border-bottom: 2px solid rgba(16, 16, 16, .32);
        background: rgba(0, 217, 255, .55);
        content: "";
        transform: rotate(-7deg);
        animation: xdpayMobileSignal 3.8s ease-in-out infinite;
    }

    body.xdpay-solution-page .xdpay-mobile-router > * {
        position: relative;
        z-index: 1;
    }

    body.xdpay-solution-page .xdpay-mobile-router-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0 0 10px;
        padding: 0;
        color: var(--beast-ink);
        background: transparent;
        font-size: 11px;
        font-weight: 1000;
        line-height: 1;
    }

    body.xdpay-solution-page .xdpay-mobile-router-top span,
    body.xdpay-solution-page .xdpay-mobile-router-top b {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        padding: 0 8px;
        border: 2px solid var(--beast-ink);
        background: var(--mobile-paper);
    }

    body.xdpay-solution-page .xdpay-mobile-router-top b {
        color: var(--beast-paper);
        background: var(--beast-ink);
    }

    body.xdpay-solution-page .xdpay-mobile-router h2 {
        display: block;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        color: var(--beast-ink);
        font-size: clamp(23px, 7.2vw, 28px);
        font-weight: 1000;
        line-height: 1.12;
        text-shadow: 2px 2px 0 var(--beast-paper);
    }

    body.xdpay-solution-page .xdpay-mobile-router p {
        margin: 6px 0 10px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--beast-ink);
        font-size: 13px;
        font-weight: 900;
        line-height: 1.5;
    }

    body.xdpay-solution-page .xdpay-mobile-flow {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        align-items: center;
        margin: 10px 0;
    }

    body.xdpay-solution-page .xdpay-mobile-flow span {
        min-width: 0;
        min-height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border: 2px solid var(--beast-ink);
        background: var(--mobile-paper);
        box-sizing: border-box;
        font-size: 11px;
        font-weight: 1000;
        text-align: center;
        line-height: 1.15;
    }

    body.xdpay-solution-page .xdpay-mobile-flow i {
        display: none;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid article {
        min-height: 54px;
        justify-content: center;
        padding: 8px 10px;
        border: 2px solid var(--beast-ink);
        box-shadow: none;
        box-sizing: border-box;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid .router-core,
    body.xdpay-solution-page .xdpay-mobile-router-grid .router-transfer {
        grid-column: 1 / -1;
        min-height: 50px;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid .router-core {
        grid-column: auto;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid strong {
        color: var(--beast-ink);
        font-size: 17px;
        font-weight: 1000;
        line-height: 1.05;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid span {
        margin-top: 4px;
        color: var(--beast-ink);
        font-size: 11px;
        font-weight: 900;
        line-height: 1.1;
    }

    body.xdpay-solution-page .xdpay-solution-suite,
    body.xdpay-solution-page .xdpay-solution-flow,
    body.xdpay-solution-page .xdpay-solution-scenes {
        padding: 42px 0;
        border-bottom-width: 4px;
    }

    body.xdpay-solution-page .xdpay-section-head {
        margin-bottom: 18px;
    }

    body.xdpay-solution-page .xdpay-section-head h2,
    body.xdpay-solution-page .xdpay-solution-cta h2 {
        width: 100%;
        padding: 10px 12px;
        border-width: 3px;
        box-shadow: 4px 4px 0 var(--beast-ink);
        font-size: clamp(21px, 6.4vw, 25px);
        line-height: 1.2;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    body.xdpay-solution-page .xdpay-solution-cards,
    body.xdpay-solution-page .xdpay-flow-grid,
    body.xdpay-solution-page .xdpay-scenes-strip {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.xdpay-solution-page .xdpay-solution-cards article,
    body.xdpay-solution-page .xdpay-flow-grid article,
    body.xdpay-solution-page .xdpay-scenes-strip article {
        min-height: auto;
        padding: 16px;
        border-width: 3px;
        box-shadow: 4px 4px 0 var(--beast-ink);
    }

    body.xdpay-solution-page .xdpay-solution-cards article:hover,
    body.xdpay-solution-page .xdpay-flow-grid article:hover,
    body.xdpay-solution-page .xdpay-scenes-strip article:hover {
        box-shadow: 4px 4px 0 var(--beast-ink);
        transform: none;
    }
}

@keyframes xdpayMobileSignal {
    0%, 100% { transform: translateX(-9px) rotate(-7deg); opacity: .42; }
    50% { transform: translateX(14px) rotate(-7deg); opacity: .72; }
}

@media screen and (max-width: 560px) and (prefers-reduced-motion: reduce) {
    body.xdpay-solution-page .xdpay-mobile-router::before {
        animation: none !important;
    }
}

/* Solution mobile center lock: keep this page away from cramped right edges. */
@media screen and (max-width: 560px) {
    html,
    body.xdpay-solution-page {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.xdpay-solution-page .xdpay-solution-main,
    body.xdpay-solution-page .xdpay-solution-hero,
    body.xdpay-solution-page .xdpay-solution-suite,
    body.xdpay-solution-page .xdpay-solution-flow,
    body.xdpay-solution-page .xdpay-solution-scenes,
    body.xdpay-solution-page .xdpay-solution-cta {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    body.xdpay-solution-page .xdpay-solution-hero {
        padding-top: 34px;
        padding-bottom: 38px;
    }

    body.xdpay-solution-page .xdpay-solution-hero::after {
        display: none;
    }

    body.xdpay-solution-page .xdpay-solution-hero-inner,
    body.xdpay-solution-page .xdpay-solution-suite > .layui-container,
    body.xdpay-solution-page .xdpay-solution-flow > .layui-container,
    body.xdpay-solution-page .xdpay-solution-scenes > .layui-container,
    body.xdpay-solution-page .xdpay-solution-cta > .layui-container {
        width: min(calc(100vw - 60px), 316px) !important;
        max-width: 316px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
    }

    body.xdpay-solution-page .xdpay-kicker {
        margin-right: auto;
        margin-left: auto;
    }

    body.xdpay-solution-page .xdpay-solution-copy h1 {
        width: 100%;
        margin-top: 12px;
        text-align: center;
        font-size: clamp(36px, 11vw, 46px);
        line-height: .94;
    }

    body.xdpay-solution-page .xdpay-solution-copy h1 span + span {
        margin-left: 0;
    }

    body.xdpay-solution-page .xdpay-solution-copy p {
        margin-right: auto;
        margin-left: auto;
        border-width: 2px;
        font-size: 14px;
        line-height: 1.58;
        white-space: normal;
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    body.xdpay-solution-page .xdpay-solution-actions {
        width: 100%;
        max-width: 296px;
        margin-right: auto;
        margin-left: auto;
    }

    body.xdpay-solution-page .xdpay-solution-actions a {
        border-width: 2px;
        box-shadow: 3px 3px 0 var(--beast-ink);
    }

    body.xdpay-solution-page .xdpay-solution-console {
        width: 100%;
        max-width: 296px;
        margin-right: auto;
        margin-left: auto;
    }

    body.xdpay-solution-page .xdpay-mobile-router {
        width: 100%;
        max-width: 296px;
        margin-right: auto;
        margin-left: auto;
        padding: 12px;
        border-width: 2px;
    }

    body.xdpay-solution-page .xdpay-mobile-router::before {
        left: -18%;
        width: 136%;
        opacity: .72;
    }

    body.xdpay-solution-page .xdpay-mobile-router h2 {
        font-size: clamp(22px, 7vw, 26px);
        text-align: center;
        white-space: normal;
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    body.xdpay-solution-page .xdpay-mobile-router p {
        text-align: center;
    }

    body.xdpay-solution-page .xdpay-mobile-flow {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    body.xdpay-solution-page .xdpay-mobile-flow span {
        padding: 0 3px;
        font-size: 11px;
        white-space: nowrap;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid article {
        min-width: 0;
        border-width: 2px;
    }

    body.xdpay-solution-page .xdpay-mobile-router-grid .router-transfer {
        grid-column: 1 / -1;
    }

    body.xdpay-solution-page .xdpay-section-head h2,
    body.xdpay-solution-page .xdpay-solution-cta h2 {
        width: 100%;
        border-width: 2px;
        box-shadow: 3px 3px 0 var(--beast-ink);
        font-size: clamp(20px, 6.1vw, 24px);
        text-align: center;
        white-space: normal !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
}

/* Homepage final override: blue-yellow hero, no image block, real payment module. */
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 76% 22%, rgba(255, 79, 216, .18), transparent 24%),
        radial-gradient(circle at 15% 78%, rgba(34, 255, 117, .2), transparent 26%),
        linear-gradient(118deg, var(--beast-yellow) 0 31%, var(--beast-yellow) 43%, var(--beast-blue) 58%, var(--beast-blue) 100%) !important;
    background-size: 150% 150%, 145% 145%, 235% 235% !important;
    animation: xdpayHeroBlueYellowSwap 6.8s ease-in-out infinite !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::before {
    display: block !important;
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    border: 0;
    background:
        linear-gradient(105deg, transparent 0 23%, rgba(255, 255, 255, .5) 23% 34%, transparent 34% 54%, rgba(255, 61, 0, .2) 54% 67%, transparent 67% 100%);
    content: "";
    opacity: .82;
    pointer-events: none;
    transform: translateX(-12%) skewX(-10deg);
    animation: xdpayHeroLightSweep 5.2s cubic-bezier(.45, 0, .2, 1) infinite;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::after,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner-box::before,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner-box::after {
    display: none !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner-box {
    overflow: visible;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title {
    position: relative;
    z-index: 6;
    width: min(690px, 53%) !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .index-btn {
    border-color: var(--beast-ink) !important;
    background:
        linear-gradient(90deg, var(--beast-yellow) 0%, var(--beast-yellow) 34%, var(--beast-blue) 34%, var(--beast-blue) 68%, var(--beast-green) 68% 100%) !important;
    background-size: 220% 100% !important;
    box-shadow: 10px 10px 0 var(--beast-ink) !important;
    color: var(--beast-ink) !important;
    animation: xdpayHomeCtaPulse 2.4s steps(3, end) infinite !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .index-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 12px 12px 0 var(--beast-ink) !important;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal {
    position: absolute;
    top: 51%;
    right: clamp(22px, 6.5vw, 88px);
    z-index: 5;
    box-sizing: border-box;
    width: min(462px, 36vw);
    padding: 22px;
    border: 6px solid var(--beast-ink);
    background:
        linear-gradient(105deg, rgba(255, 248, 222, .95) 0 55%, rgba(255, 255, 255, .88) 55% 100%);
    box-shadow: 16px 16px 0 var(--beast-ink);
    color: var(--beast-ink);
    transform: translateY(-50%) rotate(2deg);
    animation: xdpayHomeTerminalFloat 4.8s ease-in-out infinite;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal *,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal *::before,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal *::after {
    box-sizing: border-box;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
    color: var(--beast-paper);
    border: 4px solid var(--beast-ink);
    background: var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top span,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top b {
    padding: 9px 12px;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top b {
    color: var(--beast-ink);
    background: var(--beast-green);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    min-height: 124px;
    margin: 0 10px 18px;
    border: 5px solid var(--beast-ink);
    box-shadow: 8px 8px 0 var(--beast-ink);
    overflow: hidden;
    transform: rotate(2deg);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars i:nth-child(1) {
    background: var(--beast-red);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars i:nth-child(2) {
    background: var(--beast-yellow);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars i:nth-child(3) {
    background: var(--beast-blue);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars i:nth-child(4) {
    background: var(--beast-green);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes {
    display: grid;
    gap: 10px;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 4px solid var(--beast-ink);
    background: rgba(255, 255, 255, .94);
    box-shadow: 5px 5px 0 var(--beast-blue);
    font-weight: 1000;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes div:nth-child(2) {
    box-shadow-color: var(--beast-green);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes div:nth-child(3) {
    box-shadow-color: var(--beast-pink);
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes strong,
body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes span {
    color: var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes span {
    font-size: 13px;
}

@media screen and (max-width: 900px) {
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title {
        width: 100% !important;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal {
        position: relative;
        top: auto;
        right: auto;
        width: min(100%, 302px);
        max-width: calc(100vw - 80px);
        margin: 30px auto 0;
        padding: 12px;
        border-width: 5px;
        box-shadow: 7px 7px 0 var(--beast-ink);
        transform: none;
        animation: none;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top {
        margin-bottom: 14px;
        border-width: 3px;
        font-size: 13px;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top span,
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top b {
        padding: 8px 9px;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars {
        min-height: 92px;
        margin-right: 0;
        margin-left: 0;
        border-width: 4px;
        box-shadow: 4px 4px 0 var(--beast-ink);
        transform: rotate(1deg);
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes div {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 9px 10px;
        border-width: 3px;
        box-shadow: 3px 3px 0 var(--beast-blue);
    }
}

@keyframes xdpayHomeCtaPulse {
    0%,
    100% {
        background-position: 0 0;
    }

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

/* Mobile homepage: restore the first-version wild blue/yellow composition. */
@media screen and (max-width: 560px) {
    html,
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) {
        overflow-x: hidden !important;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .navbar .navbar-right {
        display: none !important;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .navbar .shrink-right {
        display: flex !important;
        align-items: center;
        justify-content: center;
        top: 18px;
        right: 30px;
        width: 46px;
        height: 46px;
        line-height: 46px;
        color: var(--beast-ink);
        border: 4px solid var(--beast-ink);
        background: var(--beast-yellow);
        box-shadow: 6px 6px 0 var(--beast-ink);
        font-size: 22px;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner {
        min-height: 660px;
        overflow: hidden;
        background:
            radial-gradient(circle at 86% 96%, rgba(255, 79, 216, .45), transparent 18%),
            linear-gradient(116deg, var(--beast-yellow) 0 34%, #f3db00 34% 45%, var(--beast-blue) 45% 100%) !important;
        background-size: 150% 150%, 225% 225% !important;
        animation: xdpayHeroBlueYellowSwap 6.8s ease-in-out infinite !important;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner::before {
        opacity: .3;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner-box {
        min-height: 660px;
        width: calc(100% - 28px) !important;
        padding-top: 98px;
        overflow: visible;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title {
        z-index: 18;
        width: 100% !important;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title p::before {
        margin-bottom: 16px;
        font-size: 13px;
        box-shadow: 6px 6px 0 var(--beast-ink);
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title p {
        max-width: 335px;
        font-size: clamp(50px, 15.8vw, 62px);
        line-height: .9;
        text-shadow: 4px 4px 0 var(--beast-paper), 8px 8px 0 var(--beast-pink);
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title .desc {
        margin-top: 14px;
        gap: 10px;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title .desc span {
        width: fit-content;
        max-width: calc(100vw - 86px);
        padding: 8px 10px;
        font-size: 15px;
        transform: rotate(-1deg);
        box-shadow: 5px 5px 0 var(--beast-ink);
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-title .desc span:nth-child(2) {
        transform: rotate(1deg);
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .banner-btn {
        position: relative;
        z-index: 21;
        margin-top: 28px;
        text-align: left;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .banner .index-btn {
        min-width: 176px;
        height: 58px;
        padding: 0 22px;
        font-size: 21px;
        background: var(--beast-green) !important;
        box-shadow: 11px 11px 0 var(--beast-ink) !important;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal {
        position: absolute;
        left: 54px;
        right: auto;
        top: 270px;
        z-index: 8;
        display: block;
        width: min(365px, calc(100vw - 72px));
        max-width: none;
        height: 258px;
        margin: 0;
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        transform: none;
        animation: none;
        pointer-events: none;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal::before {
        position: absolute;
        left: -14px;
        top: -18px;
        width: min(330px, calc(100vw - 78px));
        height: 172px;
        border: 5px solid var(--beast-ink);
        background:
            linear-gradient(90deg, transparent 0 58%, var(--beast-paper) 58% 100%),
            rgba(255, 248, 222, .78);
        box-shadow: 13px 13px 0 var(--beast-ink);
        content: "";
        opacity: .9;
        transform: rotate(2.5deg);
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal::after {
        position: absolute;
        left: 4px;
        top: 122px;
        width: min(292px, calc(100vw - 100px));
        height: 104px;
        border: 5px solid var(--beast-ink);
        background:
            linear-gradient(90deg, var(--beast-red) 0 24%, var(--beast-yellow) 24% 49%, var(--beast-blue) 49% 74%, var(--beast-green) 74% 100%);
        box-shadow: 10px 10px 0 var(--beast-ink);
        content: "";
        opacity: .96;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-terminal-top,
    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-routes {
        display: none;
    }

    body.xdpay-beast-theme:not(.xdpay-contact-page):not(.xdpay-solution-page) .xdpay-home-bars {
        position: absolute;
        left: 4px;
        top: 122px;
        z-index: 2;
        display: grid;
        width: min(292px, calc(100vw - 100px));
        height: 104px;
        min-height: 0;
        margin: 0;
        border: 5px solid var(--beast-ink);
        box-shadow: 10px 10px 0 var(--beast-ink);
        transform: none;
    }
}

/* Solution final module: use real blocks instead of hero imagery. */
body.xdpay-solution-page .xdpay-solution-module {
    position: relative;
    display: block;
    min-height: 342px;
    padding: 16px;
    overflow: hidden;
    border: 5px solid var(--beast-ink);
    background:
        radial-gradient(circle at 88% 20%, rgba(255, 79, 216, .22), transparent 22%),
        linear-gradient(126deg, rgba(255, 229, 0, .94) 0 41%, rgba(0, 217, 255, .88) 41% 72%, rgba(34, 255, 117, .78) 72% 100%);
    box-shadow: 9px 9px 0 var(--beast-ink);
    color: var(--beast-ink);
}

body.xdpay-solution-page .xdpay-solution-module::before {
    position: absolute;
    inset: 42px 24px auto auto;
    width: 42%;
    height: 128px;
    border: 5px solid var(--beast-ink);
    background: rgba(255, 248, 222, .76);
    box-shadow: 10px 10px 0 var(--beast-ink);
    content: "";
    transform: rotate(5deg);
}

body.xdpay-solution-page .xdpay-solution-module::after {
    position: absolute;
    right: -48px;
    bottom: -54px;
    width: 150px;
    height: 150px;
    border: 5px solid var(--beast-ink);
    border-radius: 50%;
    background: repeating-linear-gradient(135deg, var(--beast-blue) 0 16px, var(--beast-pink) 16px 32px);
    content: "";
    opacity: .84;
}

body.xdpay-solution-page .xdpay-solution-module > * {
    position: relative;
    z-index: 2;
}

body.xdpay-solution-page .xdpay-solution-module-core {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 13px 14px;
    border: 4px solid var(--beast-ink);
    background: var(--beast-ink);
    box-shadow: 6px 6px 0 var(--beast-red);
    color: var(--beast-paper);
    font-weight: 1000;
}

body.xdpay-solution-page .xdpay-solution-module-core strong,
body.xdpay-solution-page .xdpay-solution-module-core span {
    color: inherit;
    font-weight: 1000;
}

body.xdpay-solution-page .xdpay-solution-module-core span {
    color: var(--beast-ink);
    padding: 7px 9px;
    background: var(--beast-green);
}

body.xdpay-solution-page .xdpay-solution-module-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

body.xdpay-solution-page .xdpay-solution-module-grid article {
    min-height: 96px;
    padding: 13px 12px;
    border: 4px solid var(--beast-ink);
    background: rgba(255, 248, 222, .95);
    box-shadow: 5px 5px 0 var(--beast-blue);
}

body.xdpay-solution-page .xdpay-solution-module-grid article:nth-child(2) {
    box-shadow-color: var(--beast-pink);
}

body.xdpay-solution-page .xdpay-solution-module-grid article:nth-child(3) {
    box-shadow-color: var(--beast-green);
}

body.xdpay-solution-page .xdpay-solution-module-grid article:nth-child(4) {
    box-shadow-color: var(--beast-yellow);
}

body.xdpay-solution-page .xdpay-solution-module-grid b,
body.xdpay-solution-page .xdpay-solution-module-grid span {
    display: block;
    color: var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-solution-page .xdpay-solution-module-grid b {
    font-size: 22px;
    line-height: 1.12;
}

body.xdpay-solution-page .xdpay-solution-module-grid span {
    margin-top: 8px;
    font-size: 13px;
}

body.xdpay-solution-page .xdpay-solution-module-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    height: 42px;
    margin-top: 16px;
    border: 4px solid var(--beast-ink);
    box-shadow: 6px 6px 0 var(--beast-ink);
}

body.xdpay-solution-page .xdpay-solution-module-flow i:nth-child(1) {
    background: var(--beast-red);
}

body.xdpay-solution-page .xdpay-solution-module-flow i:nth-child(2) {
    background: var(--beast-yellow);
}

body.xdpay-solution-page .xdpay-solution-module-flow i:nth-child(3) {
    background: var(--beast-blue);
}

body.xdpay-solution-page .xdpay-solution-module-flow i:nth-child(4) {
    background: var(--beast-green);
}

@media screen and (max-width: 560px) {
    body.xdpay-solution-page .xdpay-solution-module {
        display: none !important;
    }

    body.xdpay-solution-page .xdpay-mobile-router {
        display: block;
    }
}

/* More page: product capability overview. */
body.xdpay-more-page {
    min-height: 100vh;
    background: var(--beast-paper);
    color: var(--beast-ink);
}

body.xdpay-more-page .xdpay-particles {
    opacity: .34;
}

body.xdpay-more-page .xdpay-more-main {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding-top: 82px;
}

body.xdpay-more-page .xdpay-more-hero {
    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    border-bottom: 6px solid var(--beast-ink);
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 79, 216, .2), transparent 24%),
        linear-gradient(118deg, var(--beast-yellow) 0 33%, var(--beast-yellow) 44%, var(--beast-blue) 58%, var(--beast-blue) 100%);
    background-size: 150% 150%, 235% 235%;
    animation: xdpayHeroBlueYellowSwap 7s ease-in-out infinite;
}

body.xdpay-more-page .xdpay-more-hero::before {
    position: absolute;
    inset: -20% -10%;
    z-index: 0;
    background:
        linear-gradient(105deg, transparent 0 23%, rgba(255, 255, 255, .48) 23% 34%, transparent 34% 54%, rgba(255, 61, 0, .18) 54% 67%, transparent 67% 100%);
    content: "";
    opacity: .8;
    transform: translateX(-10%) skewX(-10deg);
    animation: xdpayHeroLightSweep 5.4s cubic-bezier(.45, 0, .2, 1) infinite;
}

body.xdpay-more-page .xdpay-more-hero-inner {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 500px);
    gap: 46px;
    align-items: center;
}

body.xdpay-more-page .xdpay-more-copy h1 {
    max-width: 760px;
    margin: 18px 0 0;
    color: var(--beast-ink);
    font-size: clamp(60px, 7.4vw, 102px);
    font-weight: 1000;
    line-height: .92;
    text-shadow: 5px 5px 0 var(--beast-paper), 9px 9px 0 var(--beast-pink);
}

body.xdpay-more-page .xdpay-more-copy h1 span {
    display: block;
}

body.xdpay-more-page .xdpay-more-copy p {
    max-width: 650px;
    margin: 28px 0 0;
    padding: 16px 18px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: rgba(255, 248, 222, .96);
    box-shadow: 9px 9px 0 var(--beast-ink);
    font-size: 20px;
    font-weight: 900;
    line-height: 1.65;
}

body.xdpay-more-page .xdpay-more-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 28px;
}

body.xdpay-more-page .xdpay-more-actions a {
    min-width: 170px;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: var(--beast-green);
    box-shadow: 9px 9px 0 var(--beast-ink);
    font-size: 18px;
    font-weight: 1000;
}

body.xdpay-more-page .xdpay-more-actions a:nth-child(2) {
    background: var(--beast-paper);
}

body.xdpay-more-page .xdpay-more-actions a:hover {
    color: var(--beast-ink);
    background: var(--beast-yellow);
    box-shadow: 13px 13px 0 var(--beast-ink);
    transform: translate(-4px, -4px) rotate(-1deg);
}

body.xdpay-more-page .xdpay-more-board {
    position: relative;
    padding: 20px;
    border: 6px solid var(--beast-ink);
    background: var(--beast-paper);
    box-shadow: 16px 16px 0 var(--beast-ink);
    transform: rotate(2deg);
    animation: xdpayConsoleFloat 5.4s ease-in-out infinite;
}

body.xdpay-more-page .xdpay-more-board-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    color: var(--beast-paper);
    border: 4px solid var(--beast-ink);
    background: var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-more-page .xdpay-more-board-top span,
body.xdpay-more-page .xdpay-more-board-top b {
    padding: 9px 12px;
}

body.xdpay-more-page .xdpay-more-board-top b {
    color: var(--beast-ink);
    background: var(--beast-green);
}

body.xdpay-more-page .xdpay-more-board-core {
    min-height: 168px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 22px;
    border: 5px solid var(--beast-ink);
    background:
        linear-gradient(126deg, var(--beast-yellow) 0 38%, var(--beast-blue) 38% 70%, var(--beast-green) 70% 100%);
    box-shadow: 9px 9px 0 var(--beast-ink);
}

body.xdpay-more-page .xdpay-more-board-core strong {
    color: var(--beast-ink);
    font-size: 38px;
    font-weight: 1000;
    line-height: 1;
}

body.xdpay-more-page .xdpay-more-board-core span {
    width: fit-content;
    margin-top: 14px;
    padding: 8px 10px;
    color: var(--beast-ink);
    border: 3px solid var(--beast-ink);
    background: var(--beast-paper);
    font-weight: 1000;
}

body.xdpay-more-page .xdpay-more-board-bars {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    height: 72px;
    margin-top: 18px;
    border: 5px solid var(--beast-ink);
    box-shadow: 8px 8px 0 var(--beast-ink);
    overflow: hidden;
}

body.xdpay-more-page .xdpay-more-board-bars i:nth-child(1) {
    background: var(--beast-red);
}

body.xdpay-more-page .xdpay-more-board-bars i:nth-child(2) {
    background: var(--beast-yellow);
}

body.xdpay-more-page .xdpay-more-board-bars i:nth-child(3) {
    background: var(--beast-blue);
}

body.xdpay-more-page .xdpay-more-board-bars i:nth-child(4) {
    background: var(--beast-green);
}

body.xdpay-more-page .xdpay-more-products,
body.xdpay-more-page .xdpay-more-flow {
    padding: 78px 0;
    border-bottom: 6px solid var(--beast-ink);
    background: var(--beast-paper);
}

body.xdpay-more-page .xdpay-more-flow {
    background:
        linear-gradient(90deg, rgba(16, 16, 16, .06) 1px, transparent 1px),
        linear-gradient(rgba(16, 16, 16, .06) 1px, transparent 1px),
        var(--beast-paper);
    background-size: 34px 34px;
}

body.xdpay-more-page .xdpay-more-product-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

body.xdpay-more-page .xdpay-more-product-grid article {
    min-height: 360px;
    padding: 24px;
    border: 5px solid var(--beast-ink);
    background: var(--beast-paper);
    box-shadow: 9px 9px 0 var(--beast-ink);
    transition: transform .22s ease, box-shadow .22s ease;
}

body.xdpay-more-page .xdpay-more-product-grid article:hover {
    box-shadow: 14px 14px 0 var(--beast-ink);
    transform: translate(-4px, -4px) rotate(-1deg);
}

body.xdpay-more-page .xdpay-more-product-grid article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 42px;
    color: var(--beast-paper);
    border: 4px solid var(--beast-ink);
    background: var(--beast-red);
    box-shadow: 5px 5px 0 var(--beast-ink);
    font-size: 18px;
    font-weight: 1000;
}

body.xdpay-more-page .xdpay-more-product-grid article:nth-child(2) > span {
    background: var(--beast-blue);
    color: var(--beast-ink);
}

body.xdpay-more-page .xdpay-more-product-grid article:nth-child(3) > span {
    background: var(--beast-green);
    color: var(--beast-ink);
}

body.xdpay-more-page .xdpay-more-product-grid article:nth-child(4) > span {
    background: var(--beast-yellow);
    color: var(--beast-ink);
}

body.xdpay-more-page .xdpay-more-product-grid h3 {
    margin-top: 28px;
    color: var(--beast-ink);
    font-size: 32px;
    font-weight: 1000;
    line-height: 1.1;
}

body.xdpay-more-page .xdpay-more-product-grid p {
    margin-top: 14px;
    color: var(--beast-ink);
    font-size: 16px;
    font-weight: 800;
    line-height: 1.65;
}

body.xdpay-more-page .xdpay-more-product-grid ul {
    display: grid;
    gap: 9px;
    margin-top: 18px;
}

body.xdpay-more-page .xdpay-more-product-grid li {
    padding: 8px 10px;
    color: var(--beast-ink);
    border: 3px solid var(--beast-ink);
    background: rgba(255, 255, 255, .72);
    font-weight: 1000;
}

body.xdpay-more-page .xdpay-more-flow-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

body.xdpay-more-page .xdpay-more-flow-grid article {
    min-height: 150px;
    padding: 20px;
    color: var(--beast-ink);
    border: 5px solid var(--beast-ink);
    background: var(--beast-yellow);
    box-shadow: 8px 8px 0 var(--beast-ink);
}

body.xdpay-more-page .xdpay-more-flow-grid article:nth-child(2) {
    background: var(--beast-blue);
}

body.xdpay-more-page .xdpay-more-flow-grid article:nth-child(3) {
    background: var(--beast-green);
}

body.xdpay-more-page .xdpay-more-flow-grid article:nth-child(4) {
    background: var(--beast-pink);
}

body.xdpay-more-page .xdpay-more-flow-grid b,
body.xdpay-more-page .xdpay-more-flow-grid span {
    display: block;
    color: var(--beast-ink);
    font-weight: 1000;
}

body.xdpay-more-page .xdpay-more-flow-grid b {
    font-size: 26px;
}

body.xdpay-more-page .xdpay-more-flow-grid span {
    margin-top: 10px;
    font-size: 15px;
}

@media screen and (max-width: 1100px) {
    body.xdpay-more-page .xdpay-more-product-grid,
    body.xdpay-more-page .xdpay-more-flow-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media screen and (max-width: 900px) {
    body.xdpay-more-page .xdpay-more-main {
        padding-top: 70px;
    }

    body.xdpay-more-page .xdpay-more-hero {
        min-height: auto;
        padding: 58px 0 48px;
    }

    body.xdpay-more-page .xdpay-more-hero-inner {
        grid-template-columns: 1fr;
    }

    body.xdpay-more-page .xdpay-more-board {
        transform: none;
        animation: none;
    }
}

@media screen and (max-width: 560px) {
    html,
    body.xdpay-more-page {
        overflow-x: hidden;
    }

    body.xdpay-more-page .navbar .navbar-right {
        display: none !important;
    }

    body.xdpay-more-page .navbar .shrink-right {
        display: flex !important;
        align-items: center;
        justify-content: center;
        top: 18px;
        right: 30px;
        width: 46px;
        height: 46px;
        line-height: 46px;
        color: var(--beast-ink);
        border: 4px solid var(--beast-ink);
        background: var(--beast-yellow);
        box-shadow: 6px 6px 0 var(--beast-ink);
        font-size: 22px;
    }

    body.xdpay-more-page .xdpay-more-hero {
        padding: 38px 0 42px;
    }

    body.xdpay-more-page .xdpay-more-hero-inner,
    body.xdpay-more-page .xdpay-more-products > .layui-container,
    body.xdpay-more-page .xdpay-more-flow > .layui-container {
        width: min(calc(100vw - 42px), 340px) !important;
        max-width: 340px !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box;
    }

    body.xdpay-more-page .xdpay-kicker {
        padding: 6px 9px;
        border-width: 3px;
        box-shadow: 4px 4px 0 var(--beast-ink);
        font-size: 11px;
    }

    body.xdpay-more-page .xdpay-more-copy h1 {
        font-size: clamp(42px, 13vw, 52px);
        line-height: .96;
        text-shadow: 3px 3px 0 var(--beast-paper), 5px 5px 0 var(--beast-pink);
    }

    body.xdpay-more-page .xdpay-more-copy p {
        padding: 12px;
        border-width: 3px;
        box-shadow: 5px 5px 0 var(--beast-ink);
        font-size: 15px;
        line-height: 1.58;
    }

    body.xdpay-more-page .xdpay-more-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.xdpay-more-page .xdpay-more-actions a {
        width: 100%;
        min-height: 50px;
        border-width: 3px;
        box-shadow: 4px 4px 0 var(--beast-ink);
        font-size: 16px;
    }

    body.xdpay-more-page .xdpay-more-board {
        padding: 12px;
        border-width: 4px;
        box-shadow: 6px 6px 0 var(--beast-ink);
    }

    body.xdpay-more-page .xdpay-more-board-top {
        border-width: 3px;
        font-size: 12px;
    }

    body.xdpay-more-page .xdpay-more-board-top span,
    body.xdpay-more-page .xdpay-more-board-top b {
        padding: 8px;
    }

    body.xdpay-more-page .xdpay-more-board-core {
        min-height: 138px;
        padding: 16px;
        border-width: 4px;
        box-shadow: 5px 5px 0 var(--beast-ink);
    }

    body.xdpay-more-page .xdpay-more-board-core strong {
        font-size: 28px;
    }

    body.xdpay-more-page .xdpay-more-board-bars {
        height: 54px;
        border-width: 4px;
        box-shadow: 5px 5px 0 var(--beast-ink);
    }

    body.xdpay-more-page .xdpay-more-products,
    body.xdpay-more-page .xdpay-more-flow {
        padding: 44px 0;
        border-bottom-width: 4px;
    }

    body.xdpay-more-page .xdpay-section-head h2 {
        font-size: clamp(24px, 8vw, 32px);
        line-height: 1.15;
    }

    body.xdpay-more-page .xdpay-more-product-grid,
    body.xdpay-more-page .xdpay-more-flow-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body.xdpay-more-page .xdpay-more-product-grid article,
    body.xdpay-more-page .xdpay-more-flow-grid article {
        min-height: auto;
        padding: 18px;
        border-width: 3px;
        box-shadow: 4px 4px 0 var(--beast-ink);
    }

    body.xdpay-more-page .xdpay-more-product-grid h3 {
        font-size: 28px;
    }
}