* {
    margin: 0;
    padding: 0;
    /* overflow-x: hidden; */
}

body {
    box-sizing: border-box;
}

.homePage {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.top {
    background: #ffffff;
}

.menu {
    height: 6rem;
    display: flex;
    /* justify-content: center; */
    align-items: center;
}

.menu .menu-con {
    /* width: 70.8%; */
    width: 100%;
    margin: 0 15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu .menu-con .nav-logo {
    width: 7.25rem;
    height: 2.75rem;
}

.menu .menu-con .menu-left {
    display: flex;
    gap: 2.5rem;
    align-items: center;
}

.menu .menu-con .menu-left .nav-item {
    font-family: Source Han Sans;
    font-weight: 500;
    font-size: 1.125rem;
    color: #000000;
    cursor: pointer;
}

.menu .menu-con .menu-left .nav-item:hover {
    color: #4865f3;
}

.menu .menu-con .menu-left .nav-item-Active {
    color: #4865f3;
}

.menu .menu-con .menu-right {}

.menu .menu-con .menu-right .nav-btn {
    width: 7.0625rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: normal;
    display: inline-block;
    text-align: center;
    line-height: 2.25rem;
    background: #2563EB;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(37, 99, 235, 0.3);
    cursor: pointer;
}

/* 顶部内容 */
.top .top-content {
    width: 100%;
    height: 39.375rem;
    background: url(/static/img/homeImages/topPoster.png);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.top .top-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.03) 0%, rgba(72, 101, 243, 0.06) 100%);
    pointer-events: none;
}

.top .top-content::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
    animation: topGlow 8s ease-in-out infinite;
    pointer-events: none;
}

@keyframes topGlow {

    0%,
    100% {
        transform: translate(0, 0);
        opacity: 0.5;
    }

    50% {
        transform: translate(5%, 5%);
        opacity: 1;
    }
}



/* 公共样式 */
.self-btn {
    width: 14.25rem;
    height: 3.625rem;
    font-weight: normal;
    text-align: center;
    font-size: 1.375rem;
    line-height: 3.625rem;
    color: #ffffff;
    background: #2563EB;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(37, 99, 235, 0.3);
    border-radius: 0.5rem;
    cursor: pointer;
    box-sizing: border-box;
    position: absolute;
    top: 26.375rem;
    left: 14.625rem;
    /* 无法选中 */
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.self-btn .arrow-icon {
    display: inline-block;
    animation: arrowWiggle 2s ease-in-out infinite;
}

@keyframes arrowWiggle {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(0.625rem);
    }
}

.secTitle {
    font-family: Source Han Sans SC;
    font-size: 2.375rem;
    font-weight: bold;
    line-height: 2.375rem;
    text-align: center;
    color: #333333;
}

.secIntro {
    font-family: Source Han Sans SC;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5rem;
    text-align: center;
    color: #64748B;
    margin: 2.75rem 0 4.8125rem;
}

/* 第二块区域 */
.second-box {
    background-color: #ffffff;
    padding: 5.625rem 0;
}

.second-box .features-container {
    width: 100%;
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.second-box .feature-card {
    width: 21.5625rem;
    height: 16.5rem;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    border-radius: 1.125rem;
    opacity: 0;
    transform: translateY(2.5rem);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.second-box .feature-card.card-visible {
    opacity: 1;
    transform: translateY(0);
}

.second-box .feature-card .feature-title {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.125rem;
    color: #0F172A;
    position: absolute;
    top: 8.3125rem;
    left: 1.6875rem;
}

.second-box .feature-card .feature-desc {
    width: 15rem;
    font-size: 1rem;
    line-height: 1.75rem;
    color: #475569;
    position: absolute;
    top: 10.625rem;
    left: 2.25rem;
}

.second-box .card-fast {
    background: url(/static/img/homeImages/cardFast.png);
}

.second-box .card-accurate {
    background: url(/static/img/homeImages/cardAccurate.png);
}

.second-box .card-stable {
    background: url(/static/img/homeImages/cardStable.png);
}

.second-box .card-excellent {
    background: url(/static/img/homeImages/cardExcellent.png);
}

/* 第三块区域 */
.third-box {
    background-color: #F9FAFD;
    padding: 6.625rem 0 5rem;
    position: relative;
    overflow: hidden;
}

.third-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(37, 99, 235, 0.02) 0%, transparent 70%);
    animation: thirdBoxGlow 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes thirdBoxGlow {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

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

.third-box .hard-img {
    width: 81.25rem;
    height: 28.75rem;
    background: url(/static/img/homeImages/hardImg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.third-box .hard-img.img-visible {
    opacity: 1;
    transform: scale(1);
}

/* 第四块区域 */

.fourth-box {
    background-color: #ffffff;
    padding: 6.125rem 0 4.6875rem;
}

.fourth-box .version-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
}

.fourth-box .version-card {
    width: 44.375rem;
    height: 9rem;
    border-radius: 1.5rem;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    opacity: 0;
    transform: translateY(1.875rem);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fourth-box .version-card.version-visible {
    opacity: 1;
    transform: translateY(0);
}

.fourth-box .version-card-basic.version-visible {
    transition-delay: 0.1s;
}

.fourth-box .version-card-pro.version-visible {
    transition-delay: 0.2s;
}

.fourth-box .version-card-basic {
    background: url(/static/img/homeImages/versionBasic.png);
}

.fourth-box .version-card-pro {
    background: url(/static/img/homeImages/versionPro.png);
}

.fourth-box .full-process-box {
    width: 90rem;
    margin: 10.25rem auto 0;
}

.fourth-box .full-process-box .align-left {
    text-align: left;
}

.fourth-box .full-process-box .mar-bottom {
    margin-bottom: 2.8125rem;
}

.fourth-box .full-process-box .title-tab {
    display: flex;
    justify-content: space-between;
}

/* 第四块区域tab */
.tab-container .tabBox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 0.875rem;
}

.tab-container .secTabs {
    width: 40.75rem;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.875rem;
    background: #F7FAFF;
    box-sizing: border-box;
    border: 0.0625rem solid #E9F1FD;
    border-radius: 0.75rem;
    /* 无法选中 */
    user-select: none;
}

.tab-container .secTabs .secTabItem {
    height: 2.5rem;
    padding: 0 1.25rem;
    border-radius: 0.75rem;
    font-family: Source Han Sans SC;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 2.5rem;
    text-align: center;
    color: #2563EB;
    cursor: pointer;
    transition: all 0.1s ease;
}

.tab-container .secTabs .secTabActive {
    background: #2563EB;
    color: #ffffff;
}

/* 第四块区域内容容器 */
.secDetailContainer {
    width: 90rem;
    height: 29.375rem;
    border-radius: 1.5rem;
    position: relative;
    overflow: hidden;
}

/* 第四块区域tab内容详情 */
.secDetailConBox {
    width: 90rem;
    height: 29.375rem;
    display: flex;
    justify-content: space-between;
    padding: 1.375rem 0 1.375rem 3rem;
    box-sizing: border-box;
    border-radius: 1.5rem;
    background: #F7FAFF;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.3s ease;
}

.secDetailConBox.fade-up {
    opacity: 0;
    transform: translateY(1.25rem);
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.secDetailConBox.detail-visible {
    opacity: 1;
    transform: translateY(0);
}

.secDetailConBox .detailConLeft {
    flex: 1;
    margin-right: 6.25rem;
}

.secDetailConBox .secDetailRightImg {
    width: 36.25rem;
    height: 26.5625rem;
    background: url(/static/img/homeImages/aibsbx.png);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* 轮播图切换效果 - 整个内容区域 */
.secDetailConBox.slide-in-right {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
}

.secDetailConBox.slide-out-left {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.3s ease;
}

.secDetailConBox.slide-in-left {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.3s ease;
}

.secDetailConBox.slide-out-right {
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

/* 第四块区域tab内容详情-左侧 */
.secDetailConBox .detailConLeft .detailConLeftTitle {
    font-family: Source Han Sans SC;
    font-size: 1.75rem;
    font-weight: bold;
    line-height: normal;
    color: #4865f3;
    margin: 0.3125rem 0 0.75rem;
    background: linear-gradient(99deg, #597EED 8%, #54A7EA 96%);
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.secDetailConBox .detailConLeft .detailConLeftIntro {
    font-family: Source Han Sans SC;
    font-size: 1.25rem;
    font-weight: normal;
    line-height: normal;
    color: #333333;
    margin-bottom: 1.875rem;
}

.secDetailConBox .detailConLeft .detailConDesc {
    width: 44.5rem;
    height: 6rem;
    font-family: Source Han Sans SC;
    font-size: 1.125rem;
    font-weight: normal;
    line-height: 2rem;
    color: #64748B;
    margin-bottom: 2.8125rem;
}

.secDetailConBox .detailConLeft .detailConBtns {
    display: flex;
    gap: 1.875rem;
    margin-bottom: 3rem;
}

.secDetailConBox .detailConLeft .detailConBtn {
    height: 2.5rem;
    font-family: Source Han Sans SC;
    font-size: 1.125rem;
    font-weight: normal;
    line-height: 2.5rem;
    text-align: center;
    color: #2563EB;
    border-radius: 0.5rem;
    background: #E7EFFD;
    padding: 0 0.875rem;
    box-sizing: border-box;
    border: 0.0625rem solid #DAE4F4;
    display: flex;
    align-items: center;
    /* 无法选中 */
    user-select: none;
}

.secDetailConBox .detailConLeft .detailConBtnImg {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
}


.secDetailConBox .detailConLeft .learnMoreBtn {
    width: 11.25rem;
    height: 2.5rem;
    color: #2563EB;
    font-family: Source Han Sans SC;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 2.5rem;
    text-align: center;
    background: #FFFFFF;
    padding: 0 2rem;
    box-sizing: border-box;
    border: 0.0625rem solid #2563EB;
    border-radius: 1.25rem;
    cursor: pointer;
}

/* 第四块区域tab内容详情-右侧图片 */
.secDetailConBox .secDetailRightImg {
    width: 36.25rem;
    height: 26.5625rem;
    background: url(/static/img/homeImages/aibsbx.png);
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* 第五块区域 */
.fifth-box {
    height: 21.625rem;
    background: linear-gradient(135deg, #2563EB 0%, #4865f3 100%);
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.fifth-box::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    animation: fifthBoxFlow 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes fifthBoxFlow {

    0%,
    100% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(10%, 10%);
    }

    50% {
        transform: translate(20%, 0);
    }

    75% {
        transform: translate(10%, -10%);
    }
}

.fifth-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 70% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.fifth-box .title {
    font-size: 2.75rem;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    margin-top: 3.5rem;
}

.fifth-box .tip {
    font-size: 2rem;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    margin: 1rem auto 2.5rem;
    position: relative;
    z-index: 1;
}

.fifth-box .register-btn {
    width: 11.875rem;
    height: 3.5rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 3.5rem;
    text-align: center;
    color: #2563EB;
    background: #FFFFFF;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(19, 67, 172, 0.3);
    border-radius: 0.75rem;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
    position: relative;
    z-index: 1;
}

/* 动画效果 */
/* 滚动浮现动画核心样式 */
/* 初始状态：元素下移+透明 */
.fade-up {
    opacity: 0;
    /*初始向下偏移1.875rem*/
    transform: translateY(1.875rem) scale(0.95);
    /*过渡动画：1.2秒缓出*/
    transition: all 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    /*性能优化*/
    will-change: opacity, transform;
}

/* 激活状态：元素归位+不透明 */
.fade-up.active {
    opacity: 1;
    transform: translateY(0) scale(1.0);
}

/* 侧边悬浮区域 */
.right-side-box {
    width: 5.25rem;
    height: 25.375rem;
    border-radius: 2.75rem;
    background: #FFFFFF;
    padding: 0.6875rem 0 1.6875rem;
    box-sizing: border-box;
    border: 0.0625rem solid #EDF1FC;
    box-shadow: 0 0.25rem 0.625rem 0 rgba(73, 129, 250, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    position: fixed;
    top: 50%;
    right: 3.875rem;
    transform: translateY(-50%) translateX(6.25rem);
    z-index: 999;
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.right-side-box.side-visible {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}

.right-side-box .ai-avatar {
    width: 4rem;
    height: 4rem;
}

.right-side-box .side-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
}

.right-side-box .side-item .right-icon {
    width: 2rem;
    height: 2rem;
}

.right-side-box .side-item .right-text {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: normal;
    text-align: center;
    color: #333333;
    margin-top: 0.3125rem;
}

/* 鼠标悬浮弹窗样式 */
.right-side-box .side-item .hover-tip {
    width: 10rem;
    padding: 0.5rem 0;
    border-radius: 0.25rem;
    background: linear-gradient(270deg, #0C7DEE 0%, #42B7E2 98%);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(73, 129, 250, 0.15);
    position: absolute;
    right: 5.625rem;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    display: none;
    z-index: 10;
}

/* 给三角箭头做定位基准 */
.right-side-box .side-item .hover-tip::after {
    content: "";
    position: absolute;
    right: -0.4375rem;
    /* 箭头贴在弹窗右侧外面 */
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    /* 绘制向右的三角箭头 */
    border-width: 0.4rem 0 0.4rem 0.5rem;
    border-style: solid;
    border-color: transparent transparent transparent #007de9;
    z-index: 2;
}

/* 箭头边框（和弹窗边框一致） */
.right-side-box .side-item .hover-tip::before {
    content: "";
    position: absolute;
    right: -0.4375rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-width: 0.45rem 0 0.45rem 0.6rem;
    border-style: solid;
    border-color: transparent transparent transparent #007de9;
    z-index: 1;
}

/* 电话悬浮：文字样式 */
.right-side-box .side-item .phone-tip {
    background: linear-gradient(270deg, #0C7DEE 0%, #42B7E2 98%);
    font-size: 1.25rem;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
    margin: 0 auto;
}

/* 微信悬浮：二维码图片 */
.right-side-box .side-item .wechat-tip {
    width: 8.875rem;
    height: 8.875rem;
    background: url(/static/img/homeImages/qrCode.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 0.5rem;
    margin: 0 auto;
}

/* 悬浮时显示对应弹窗 */
.right-side-box .side-item:hover .hover-tip {
    display: block;
}

/* 底部 */
.footer {
    height: 20rem;
    display: flex;
    background-color: #161b26;
    justify-content: center;
}

.footer .footerBanner {
    /* height: 20rem; */
    box-sizing: border-box;
    padding: 1.875rem 0 1.5625rem 0;
}

.footer .footerBanner .footerTop {
    color: #ffffff;
    font-family: Source Han Sans SC;
    font-size: 1.125rem;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.0625rem solid #3a4150;
    padding-bottom: 2.75rem;
    margin-bottom: 1.5625rem;
}

.footer .footerBanner .footerTop .footerTopImg {
    width: 1.5rem;
    height: 1.5rem;
    vertical-align: middle;
    margin-right: 0.875rem;
}

.footer .footerBanner .footerBottom {
    width: 100%;
    display: flex;
}

.footer .footerBanner .footerBottom .bottomLeft {
    width: 16.5rem;
    padding-top: 1.5625rem;
    padding-bottom: 1.875rem;
    border-right: 0.0625rem solid #3a4150;
}

.footer .footerBanner .footerBottom .bottomLeft .leftTitle {
    font-family: Source Han Sans SC;
    font-size: 1.125rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 0.625rem;
}

.footer .footerBanner .footerBottom .bottomLeft .leftPhone {
    font-family: Source Han Sans SC;
    font-size: 1.75rem;
    font-weight: 500;
    color: #ffffff;
}

.footer .footerBanner .footerBottom .bottomRight {
    padding-top: 1.875rem;
    margin-left: 4rem;
}

.footer .footerBanner .footerBottom .bottomRight .bottomRightUp {
    margin-bottom: 1.625rem;
}

.footerText {
    font-family: Source Han Sans SC;
    font-size: 0.875rem;
    font-weight: normal;
    color: #9e9e9e;
    margin-right: 1.8125rem;
    cursor: pointer;
}

.copyright {
    margin-top: 1rem;
    text-align: center;
}

.copyright span {
    font-size: 0.75rem;
    font-weight: normal;
    line-height: normal;
    text-align: center;
    color: #9E9E9E;
}


.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.mask .modalContent {
    width: 61.3125rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mask .modalContentImg {
    width: 57.5625rem;
    height: 49.375rem;
}

.mask .modalClose {
    width: 2.25rem;
    height: 2.25rem;
    position: absolute;
    top: 0;
    right: 0.0625rem;
    cursor: pointer;
}

.contactCustService {
    width: 13.75rem;
    height: 15.625rem;
    border-radius: 0.5rem;
    background: #f5f8ff;
    padding: 1.5625rem 1.8125rem 1.3125rem;
    box-sizing: border-box;
    /* display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; */
    position: absolute;
    bottom: -16.875rem;
    left: 50%;
    transform: translate(-50%);
}

.contactCustService .qrCode {
    width: 10.125rem;
    height: 10.125rem;
    margin-bottom: 0.875rem;
}

.wixinIcon {
    margin-right: 0.625rem;
    width: 1.5rem;
    height: 1.5rem;
}

.serviceText {
    font-size: 1.125rem;
    font-weight: 500;
    color: #333333;
}

/* 隐藏滚动条，但仍可滚动 */
.hide-scrollbar {
    /* 1. 核心：隐藏 Webkit 滚动条 */
    scrollbar-width: none;
    /* Firefox 专用 */
    -ms-overflow-style: none;
    /* IE/Edge 旧版专用 */
}

/* Webkit 内核（Chrome/Safari/Edge 新版）滚动条伪元素 */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条本体 */
    width: 0;
    /* 宽度设为0，兼容部分场景 */
    height: 0;
    /* 高度设为0，兼容部分场景 */
}


/* ========== 动态效果核心样式 ========== */
/* 1. 通用按钮动效（主按钮/注册按钮/了解更多） */
.self-btn,
.register-btn,
.learnMoreBtn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* 按钮高光渐变层 */
.self-btn::before,
.register-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.3s ease;
    z-index: 1;
}

/* hover 光效划过 */
.self-btn:hover::before,
.register-btn:hover::before {
    left: 100%;
}

/* 按钮 hover 状态：上移+阴影强化 */
.self-btn:hover,
.register-btn:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.5rem 1.5rem 0 rgba(37, 99, 235, 0.4);
    /*确保文字清晰*/
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

/* 按钮 active 状态：回弹+阴影收缩 */
.self-btn:active,
.register-btn:active {
    transform: translateY(0);
    box-shadow: 0 0.25rem 0.625rem 0 rgba(37, 99, 235, 0.3);
    /* 确保文字清晰 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

/* 了解更多按钮改造 */
.learnMoreBtn {
    color: #2563EB;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.learnMoreBtn::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    transition: width 0.3s ease;
    z-index: -1;
}

.learnMoreBtn:hover {
    transform: translateY(-0.125rem) scale(1.02);
    box-shadow: 0 0.5rem 1rem 0 rgba(64, 103, 241, 0.2);
}

.learnMoreBtn:hover::after {
    width: 100%;
}

.learnMoreBtn:active {
    transform: translateY(0) scale(0.98);
}

/* 2. 功能卡片动效（第二、四块区域卡片/版本卡片） */
.feature-card,
.version-card {
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* 卡片 hover：上浮+阴影+亮度提升 */
.feature-card:hover,
.version-card:hover {
    transform: translateY(-0.5rem);
    box-shadow: 0 1rem 1.5rem rgba(72, 101, 243, 0.15);
    /* 暂时关闭高亮 */
    /* filter: brightness(1.0); */
}

/* Tab 切换动效（第四块区域Tab） */
.secTabItem {
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.secTabItem:hover::after {
    width: 100%;
}

.secTabActive::after {
    width: 100%;
}

/* Tab 点击波纹效果 */
.secTabItem:active::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.3);
    animation: ripple 0.6s ease-out;
}

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

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

/* 侧边悬浮栏动效 */
.right-side-box {
    backdrop-filter: blur(0.625rem);
    transition: all 0.3s ease;
}

.right-side-box:hover {
    box-shadow: 0 1rem 2rem rgba(73, 129, 250, 0.3);
}

.side-item {
    transition: all 0.2s ease;
}

.side-item:hover {
    transform: scale(1.1);
}

/* 侧边悬浮弹窗 */
.hover-tip {
    background: linear-gradient(270deg, #0C7DEE 0%, #42B7E2 98%);
    backdrop-filter: blur(0.5rem);
    transition: all 0.3s ease;
}