* { -webkit-font-smoothing: antialiased; }
body { font-family: 'Inter', sans-serif; }

/* Glassmorphism */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.glass-dark {
    background: rgba(22, 64, 150, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Banner transitions */
.banner-slide {
    /* opacity: 0; */
    transition: opacity 1s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.banner-slide.active {
    opacity: 1;
    z-index: 1;
}

/* Card hover */
.feature-card {
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(22, 64, 150, 0.2);
}

/* Cloud animation */
.cloud-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    opacity: 0.15;
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #164096 0%, #28A77C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #F5F7FA; }
::-webkit-scrollbar-thumb { background: #164096; border-radius: 4px; }

/* Banner dots */
.banner-dot {
    transition: all 0.3s ease;
}
.banner-dot.active {
    width: 32px;
    background: #28A77C;
}

/* Comparison toggle */
.compare-tab {
    transition: all 0.3s ease;
}
.compare-tab.active {
    background: #164096;
    color: white;
}

/* Module node */
.module-node {
    transition: all 0.3s ease;
    cursor: pointer;
}
.module-node:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(22, 64, 150, 0.3);
}

/* Floating toolbar */
.float-btn {
    transition: all 0.3s ease;
}
.float-btn:hover {
    transform: translateX(-4px);
    background: #164096;
}

/* Mobile bottom bar */
@media (max-width: 768px) {
    .mobile-bottom-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 50;
    }
}

/* Pulse ring */
.pulse-ring {
    animation: pulseRing 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}
@keyframes pulseRing {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

/* Number counter */
.counter {
    font-variant-numeric: tabular-nums;
}

/* Watermark preview */
.watermark-text {
    position: absolute;
    color: rgba(22, 64, 150, 0.15);
    font-size: 14px;
    transform: rotate(-30deg);
    pointer-events: none;
    user-select: none;
}
.text-sm {
    font-size: 1rem!important;
    line-height: 1.5rem!important;
}
.text-xs {
    font-size: 1rem!important;
    line-height: 1.5rem!important;
}
#cases .p-8 {
    padding: 2rem 0.25rem!important;
}
.mySwiper5 .swiper-slide{height:343px!important;}
.mySwiper6 .swiper-slide{height:196px!important;}
.mySwiper1 .swiper-slide{height:418px!important;}
.mySwiper7{height: 100%;}
.aaff{position: relative!important;}
.anbb{display: flex!important;align-items: center!important;}
.banner1 .space-x-3 > :not([hidden]) ~ :not([hidden]) {
    margin-right: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
}
.banner4  .mb-3 {
    margin-bottom: 0rem!important;
}
.sasda1{display: flex;}
.sasda1 .text-sm{display: flex;align-items: center;margin-left:0.5rem;}
.sj{display: none!important;}
.mySwiper1 .swiper-slide {
    background: #f6f8fe;
}
#cost-calculator{
    /* background: #f0f2f8; */
background: #fff;}
#employeeCount{
    background-color: #ced5ea;
}
.mySwiper5 .swiper-slide {
    background: #f6f8fe;
}
.mySwiper6 .swiper-slide {
    /* background: #f6f8fe; */
/* border: solid 1px #ddd; */}
#service{
    /* background: #fff; */
}
.from-brand-light {
    --tw-gradient-from: #e0ebfc var(--tw-gradient-from-position)!important;
}

@media screen and (min-width:968px) and (max-width:1300px){
    .lg\:text-5xl {
        font-size: 2rem!important;
        line-height: 1!important;
    }
    .banner1 .flex-wrap>.px-4 {
        padding-left: 0.6rem!important;
        padding-right: 0.6rem!important;
    }
    .banner2 .text-xs {
        font-size: 1rem!important;
        line-height: 1.25rem!important;
    }
    .banner2 .text-sm{
        font-size: 1rem!important;
        line-height: 1.25rem!important;
    }
    .banner2 .p-6 {
        padding: 0.5rem 1.5rem!important;
    }
    /* .banner2 .space-y-6 > :not([hidden]) ~ :not([hidden]) {
        margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)))!important;
        margin-bottom: calc(0.5rem * var(--tw-space-y-reverse))!important;
    } */
    .banner2 .p-5 {
        padding: 0.5rem 1.25rem!important;
    }
    .mySwiper7 .swiper-slide{padding-top:64px;}
    .banner3 .space-y-3 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .banner3 .p-3 {
        padding: 0.5rem 0.75rem;
    }
    .mySwiper7 .py-4 {
        padding-top: 0.5rem!important;
        padding-bottom: 0.5rem!important;
    }
    .lban{
        padding-top: 0.5rem!important;
        margin-top: 0.5rem!important;
    }
    .banner3 .bottom-0 {
        bottom: 50px!important;
    }
    .banner3 .top-0 {
        top: 50px!important;
    }
    .banner3 .p-6 {
        padding: 1.5rem 0.5rem;
    }
    .banner3 .w-72 {
        width: auto!important;
    }
    .banner4 .p-5 {
        padding: 0.25rem 1.25rem!important;
    }

    .banner4 .gap-4 {
        gap: 0.5rem 1rem!important;
    }
}

@media screen and (max-width: 968px) {
    .dn{display:none!important;}
    .sj{display: block!important;}
    .mySwiper2 .flex {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mySwiper2 .a3{text-align: center;margin-bottom:10px;}
    .mySwiper2 .flex h3{margin:20px 0 5px;}
    #cost-calculator .text-3xl {
        font-size: 1.1rem!important;
        line-height: 1.65rem!important;
    }
    .px-4 {
        padding-left: 0.5rem!important;
        padding-right: 0.5rem!important;
    }
    .p-8 {
        padding: 2rem 0.5rem!important;
    }
    #saas-advantage{
        padding: 2rem 1rem!important;
    }
    .p-6 {
        padding: 1.5rem 0.5rem!important;
    }
    .text-xs {
        font-size: 1rem!important;
        line-height: 1.5rem!important;
    }
    .text-sm {
        font-size: 1rem!important;
        line-height: 1.5rem!important;
    }
    .gap-6 {
        gap: 1.5rem 0.5rem!important;
    }
    .gap-4 {
        gap: 1rem 0.75rem!important;
    }
    .mySwiper4 .flex {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .mySwiper4 .a3{text-align: center;margin-bottom:10px;margin-left: 0!important;}
    .mySwiper7 .text-4xl {
        font-size: 1.6rem!important;
        line-height: 2.25rem!important;
    }
    .mySwiper7 .text-xl {
        font-size: 1rem!important;
        line-height: 1.5rem!important;
    }
    .mySwiper4 .flex h3{margin:20px 0 5px;}
    .mySwiper4 .space-x-3 {
        flex-direction: row;
    }
    .mySwiper4 .bg-brand-light .flex{flex-direction: row;}
    .mySwiper5 .swiper-slide{height:auto!important;}
    .mySwiper6 .swiper-slide{height:auto!important;}
    .mySwiper1 .swiper-slide{height:auto!important;}
    .mobile-bottom-bar button{margin:0 5px;}
    .bg-brand-blue .pt-8 {
        padding-bottom: 2rem;
    }
    .mySwiper7 .swiper-button-prev,.mySwiper7 .swiper-button-next{display: none!important;}
    .a131313{display: flex;justify-content: space-between;margin-bottom: 0.1rem!important;}
    .footer1 .gap-8 {
        gap: 1rem 2rem!important;
    }
    .ada131 .p-5 {
        padding: 1.25rem 0.25rem!important;
    }
    .ada131{
        gap: 1rem 0.5rem!important;
    }
    .ada131 .text-xs {
        font-size: 0.8rem!important;
        line-height: 1.5rem!important;
    }
    .d11>.flex{
        display: flex!important;
         /* 空间不足自动换行，必加 */
    flex-direction: row;}
    .d11>.flex span{
        flex: 0 0 calc(33.33% - 0.35rem);
    text-align: center;}
    .d33>.flex{
        display: flex!important;
         /* 空间不足自动换行，必加 */
    flex-direction: row;}
    .d33>.flex span,.d44>.flex span{
        flex: 0 0 calc(50% - 6px);
    text-align: center;}
    .d44>.flex{
        display: flex!important;
        flex-wrap: wrap; /* 空间不足自动换行，必加 */
    }
    .d11 .dn,.d22 .dn,.d33 .dn,.d44 .dn {
        display: none!important;
    }
    .d11 .gap-3,.d22 .gap-3,.d33 .gap-3,.d44 .gap-3 {
        gap: 0.75rem 0.35rem;
    }
    .d11 .flex .px-4,.d22 .flex .px-4,.d33 .flex .px-4,.d44 .flex .px-4 {
        padding-left: 0!important;
        padding-right: 0!important;
    }
    .h-screen {
        height: 100vh!important;
    }
    .mySwiper2 .ml-6 {
        margin-left: 0rem;
    }
    .border-brand-orange\/20 {
        border: none!important;
    }
    #cost-comparison .ad131{background: #fff;}
}

@media screen and (max-width: 767px) {
  .yingying{
    box-shadow: 0 5px 12px rgb(0 0 0 / 20%);
  border-radius: 1.5rem;
  }
}