/* Hero Carousel Styles */
 .hero-carousel {
     position: relative;
     width: 100%;
     height: 92vh;
     min-height: 600px;
     overflow: hidden;
     position: relative;
 }

 .hero-carousel::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* background:
         linear-gradient(45deg, transparent 30%, rgba(31, 153, 104, 0.03) 50%, transparent 70%),
         linear-gradient(-45deg, transparent 30%, rgba(22, 163, 74, 0.03) 50%, transparent 70%); */
     pointer-events: none;
     z-index: 1;
 }

 /* 三角形背景装饰 */
 .hero-carousel::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image:
         url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 5 L55 45 L5 45 Z' fill='none' stroke='rgba(31, 153, 104, 0.05)' stroke-width='1'/%3E%3C/svg%3E");
     background-size: 60px 60px;
     background-position: 0 0, 30px 30px;
     opacity: 0.3;
     pointer-events: none;
     z-index: 1;
 }

 .carousel-container {
     position: relative;
     width: 100%;
     height: 100%;
 }

 .carousel-container::before {
     content: '';
     position: absolute;
     top: 50px;
     left: 50px;
     width: 30px;
     height: 30px;
     background: var(--primary-color);
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     transform: rotate(45deg);
     opacity: 0.3;
     animation: trianglePulse 4s ease-in-out infinite;
     z-index: 1;
 }

 .carousel-container::after {
     content: '';
     position: absolute;
     bottom: 50px;
     right: 50px;
     width: 25px;
     height: 25px;
     background: #16a34a;
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     transform: rotate(-45deg);
     opacity: 0.3;
     animation: trianglePulse 4s ease-in-out infinite 2s;
     z-index: 1;
 }

 .carousel-item {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     opacity: 0;
     transform: translateX(100%);
     transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     display: flex;
     align-items: center;
 }

 .carousel-item.active {
     opacity: 1;
     transform: translateX(0);
 }

 .carousel-item.prev {
     transform: translateX(-100%);
 }

 .carousel-content {
     display: flex;
     width: 100%;
     height: 100%;
     max-width: 1400px;
     margin: 0 auto;
     align-items: center;
     gap: 20px;
     position: relative;
     z-index: 2;
     padding: 0 15px;
 }

 .content-left {
     flex: 1;
     max-width: 55%;
     z-index: 2;
 }

 .content-wrapper {
     opacity: 0;
     transform: translateY(30px);
     animation: slideInLeft 1s ease-out 0.3s forwards;
 }


 .content-wrapper h1 {
     font-size: 60px;
     font-weight: 700;
     line-height: 1.1;
     margin-bottom: 30px;
     color: var(--text-color);
 }

 .content-wrapper h1>span {
     display: block;
     color: var(--primary-color);
     position: relative;
 }

 .content-wrapper h1>span::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 18%;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-color) 0%, #4ade80 100%);
     clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
     transform: scaleX(0);
     transform-origin: left;
     animation: underlineExpand 1s ease-out 0.8s forwards;
 }

 .content-wrapper>p {
     font-size: 20px;
     line-height: 1.6;
     color: var(--text-color);
     margin-bottom: 40px;
     /* opacity: 0; */
     animation: fadeInUp 1s ease-out 0.6s forwards;
 }

 .hero-actions {
     display: flex;
     gap: 24px;
     align-items: center;
     /* opacity: 0; */
     animation: fadeInUp 1s ease-out 0.9s forwards;
 }

 .carousel-button {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 30px;
     background: linear-gradient(135deg, var(--primary-color) 0%, #16a34a 100%);
     color: white;
     font-weight: 600;
     font-size: 15px;
     transition: all 0.3s ease;
     box-shadow: 0 10px 25px rgba(31, 153, 104, 0.2);
     position: relative;
     overflow: hidden;
     border: none;
     cursor: pointer;
     transform: skew(-2deg);
     border-radius: 50px;
 }

 .carousel-button i {
     font-size: 12px;
 }

 .button-glow {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
     transform: translateX(-100%);
     transition: transform 0.6s ease;
 }

 .carousel-button:hover .button-glow {
     transform: translateX(100%);
 }

 .carousel-button::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.5s ease;
 }

 .carousel-button:hover::before {
     left: 100%;
 }

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



 .link-underline {
     position: absolute;
     bottom: -2px;
     left: 0;
     width: 0;
     height: 2px;
     background: linear-gradient(90deg, var(--primary-color) 0%, #16a34a 100%);
     transition: width 0.3s ease;
 }




 .content-right {
     flex: 1;
     position: relative;
     z-index: 1;
 }

 .image-container {
     position: relative;
     width: 100%;
     height: 500px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .geometric-shapes {
     position: absolute;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 .shape {
     position: absolute;
     opacity: 0.4;
     animation: float 8s ease-in-out infinite;
     transition: all 0.3s ease;
     border-radius: 50%;
 }

 .shape-1 {
     width: 100px;
     height: 100px;
     top: 8%;
     left: 9%;
     animation-delay: 0s;
     background: linear-gradient(135deg, rgba(31, 153, 104, 0.3) 0%, rgba(22, 163, 74, 0.3) 100%);
     transform: rotate(0deg);
 }

 .shape-2 {
     width: 60px;
     height: 60px;
     top: 80%;
     right: 13%;
     animation-delay: 3s;
     background: linear-gradient(135deg, rgba(22, 163, 74, 0.3) 0%, rgba(31, 153, 104, 0.3) 100%);
     transform: rotate(120deg);
 }

 .shape-3 {
     width: 80px;
     height: 80px;
     bottom: 20%;
     left: 5%;
     animation-delay: 6s;
     background: linear-gradient(135deg, rgba(31, 153, 104, 0.2) 0%, rgba(74, 222, 128, 0.2) 100%);
     transform: rotate(240deg);
 }

 .shape-4 {
     width: 40px;
     height: 40px;
     top: 26%;
     right: 13%;
     animation-delay: 2s;
     background: transparent;
     border: 2px solid rgba(31, 153, 104, 0.3);
     transform: rotate(60deg);
 }

 .hero-image {
     position: relative;
     width: 430px;
     height: 430px;
     /* overflow: hidden; */
     /* box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15); */
     z-index: 2;
     transform: rotate(-3deg);
     transition: transform 0.3s ease;
     /* border-radius: 20px; */

     border-radius: 50%;

 }

 .hero-image:hover {
     transform: rotate(0deg) scale(1.01);
 }

 .hero-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;

     border-radius: 50%;
 }

 .hero-image:hover img {
     transform: scale(1.01);
 }

 .image-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(135deg, rgba(31, 153, 104, 0.1) 0%, rgba(22, 163, 74, 0.1) 100%);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

 .hero-image:hover .image-overlay {
     opacity: 0;
 }

 .floating-card {
     position: absolute;
     top: 20%;
     right: -20px;
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     padding: 24px;
     box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     z-index: 3;
     transform: translateX(20px);
     opacity: 0;
     animation: slideInRight 1s ease-out 1.5s forwards;
     transition: all 0.3s ease;
     transform: translateX(20px) skew(-2deg);
     border-radius: 10px;
 }

 .floating-card:hover {
     transform: translateX(0) translateY(-5px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 }

 .card-icon {
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, var(--primary-color) 0%, #16a34a 100%);
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 16px;
     color: white;
     font-size: 24px;
     border-radius: 12px;
     transform: rotate(0deg);
     transition: transform 0.3s ease;
 }

 .floating-card:hover .card-icon {
     transform: rotate(180deg);
 }

 /* .card-content h4 {
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     margin-bottom: 8px;
 }

 .card-content p {
     font-size: 14px;
     color: var(--light-text);
     margin: 0;
 } */

 /* Carousel Navigation */
 .carousel-navigation {
     position: absolute;
     bottom: 48px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 32px;
     z-index: 10;
 }

 .nav-dots {
     display: flex;
     gap: 16px;
 }

 .nav-dot {
     width: 12px;
     height: 12px;
     border: none;
     background: rgba(31, 153, 104, 0.3);
     cursor: pointer;
     transition: all 0.3s ease;
     position: relative;
     border-radius: 50%;
     transform: rotate(0deg);
 }

 .nav-dot.active {
     background: var(--primary-color);
     transform: scale(1.2);
 }

 .nav-dot:hover {
     background: var(--primary-color);
     transform: scale(1.1);
 }

 .nav-dot::before {
     content: '';
     position: absolute;
     top: -4px;
     left: -4px;
     right: -4px;
     bottom: -4px;
     border: 2px solid transparent;
     border-radius: 50%;
     transition: all 0.3s ease;
 }

 .nav-dot.active::before {
     border-color: var(--primary-color);
     animation: pulse 2s infinite;
     border-radius: 50%;
 }

 /* 增强的动画效果 */
 .carousel-item.active .hero-badge {
     animation: bounceIn 0.8s ease-out 0.2s both;
 }

 .carousel-item.active .content-wrapper>h1 {
     animation: slideInUp 1s ease-out 0.4s both;
 }

 .carousel-item.active .content-wrapper>p {
     animation: slideInUp 1s ease-out 0.6s both;
 }

 .carousel-item.active .hero-actions {
     animation: slideInUp 1s ease-out 0.8s both;
 }



 .carousel-item.active .floating-card {
     animation: slideInRight 1s ease-out 1.2s both;
 }

 /* 悬停效果增强 */
 .stat-item:hover .stat-number {
     transform: scale(1.1);
     color: #16a34a;
 }

 .stat-item {
     transition: all 0.3s ease;
 }

 .stat-item:hover {
     transform: translateY(-5px);
 }

 /* 几何形状动画增强 */
 .shape:hover {
     opacity: 0.8;
     transform: scale(1.1) rotate(90deg);
     filter: brightness(1.1);
 }



 /* Animations */
 @keyframes slideInLeft {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes slideInRight {
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }

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

 @keyframes underlineExpand {
     to {
         transform: scaleX(1);
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     33% {
         transform: translateY(-15px) rotate(120deg);
     }

     66% {
         transform: translateY(8px) rotate(240deg);
     }
 }

 @keyframes trianglePulse {
     0% {
         transform: scale(1) rotate(0deg);
         opacity: 0.6;
     }

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

     100% {
         transform: scale(1) rotate(360deg);
         opacity: 0.6;
     }
 }

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

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

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

 @keyframes bounceIn {
     0% {
         opacity: 0;
         transform: scale(0.3);
     }

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

     70% {
         transform: scale(0.9);
     }

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

 /* Responsive Design */
 @media (max-width: 1200px) {
     .carousel-content {
         padding: 0 24px;
         gap: 48px;
     }

     .content-wrapper h1 {
         font-size: 48px;
     }

     .hero-image {
         width: 350px;
         height: 350px;
     }
 }

 @media (max-width: 768px) {
     .hero-carousel {
         height: calc(100vh - 70px);
     }

     .carousel-content {
         flex-direction: column;
         text-align: center;
         padding: 32px 16px;
         gap: 32px;
     }

     .content-left {
         max-width: 100%;
         order: 2;
     }

     .content-right {
         order: 1;
     }

     .content-wrapper h1 {
         font-size: 36px;
         line-height: 1.2;
         margin-bottom: 20px;
     }

     .content-wrapper>p {
         font-size: 16px;
         line-height: 1.5;
         margin-bottom: 30px;
     }

     .hero-actions {
         flex-direction: column;
         align-items: center;
         gap: 16px;
     }

     .carousel-button {
         width: 100%;
         max-width: 280px;
         justify-content: center;
         padding: 14px 28px;
         font-size: 16px;
     }

     .hero-image {
         transform: rotate(0deg);
         width: 320px;
         height: 320px;
     }

     .floating-card {
         position: relative;
         top: auto;
         right: auto;
         margin-top: 16px;
         transform: none;
         padding: 20px;
     }

     .carousel-navigation {
         bottom: 16px;
     }

     .carousel-container::before,
     .carousel-container::after {
         display: none;
     }

     .shape-1 {
         width: 80px;
         height: 80px;
         left: 9%;
     }

     .shape-2 {
         width: 60px;
         height: 60px;
         top: 40%;
         right: -21px;
     }

     .shape-3 {
         width: 40px;
         height: 40px;
         bottom: 0;
         left: 0;
     }

     .shape-4 {
         width: 30px;
         height: 30px;
         display: none;
     }

     .content-wrapper h1>span::after {
         left: 43%;
         transform: translateX(-50%);
         width: 60px;
     }



     .carousel-content {
         padding: 24px 12px;
         gap: 24px;
     }

     .content-wrapper h1 {
         font-size: 27px;
     }

     .content-wrapper>p {
         font-size: 15px;
         line-height: 1.4;
         margin-bottom: 24px;
     }

     .carousel-button {
         padding: 5px 30px;
         font-size: 14px;
         width: auto;
     }

     .hero-image {
         width: 280px;
         height: 280px;
     }

     .floating-card {
         padding: 16px;
         margin-top: 12px;
     }

     .shape-1 {
         width: 50px;
         height: 50px;
     }

     .shape-2 {
         width: 35px;
         height: 35px;
     }

     .shape-3 {
         width: 25px;
         height: 25px;
     }
 }

 /* Business Journey Section Styles */
 .business-journey-section {
     position: relative;
     padding: 120px 0 100px;
     /* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%); */
     background: #f8f8f8;
     overflow: hidden;
 }

 .journey-bg-elements {
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     pointer-events: none;
     z-index: 1;
 }

 .bg-circle {
     position: absolute;
     border-radius: 50%;
     background: linear-gradient(135deg, rgba(31, 153, 104, 0.1), rgba(22, 163, 74, 0.05));
     animation: float 6s ease-in-out infinite;
 }

 .bg-circle-1 {
     width: 200px;
     height: 200px;
     top: 10%;
     left: 5%;
     animation-delay: 0s;
 }

 .bg-circle-2 {
     width: 150px;
     height: 150px;
     top: 60%;
     right: 10%;
     animation-delay: 2s;
 }

 .bg-circle-3 {
     width: 100px;
     height: 100px;
     bottom: 20%;
     left: 15%;
     animation-delay: 4s;
 }

 .bg-triangle {
     position: absolute;
     width: 0;
     height: 0;
     border-style: solid;
     opacity: 0.1;
     animation: rotate 8s linear infinite;
 }

 .bg-triangle-1 {
     top: 20%;
     right: 20%;
     border-width: 0 30px 52px 30px;
     border-color: transparent transparent var(--primary-color) transparent;
     animation-delay: 0s;
 }

 .bg-triangle-2 {
     bottom: 30%;
     left: 10%;
     border-width: 52px 30px 0 30px;
     border-color: var(--primary-color) transparent transparent transparent;
     animation-delay: 4s;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     50% {
         transform: translateY(-20px) rotate(180deg);
     }
 }

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

     100% {
         transform: rotate(360deg);
     }
 }

 .journey-header {
     text-align: center;
     margin-bottom: 80px;
     position: relative;
     z-index: 2;
 }

 .journey-title-wrapper {
     margin-bottom: 30px;
 }

 .journey-main-title {
     font-size: 38px;
     font-weight: 600;
     line-height: 1.2;
     margin: 0 0 20px 0;
     color: var(--text-color);
 }

 .journey-main-title span {
     display: inline-block;
     color: var(--primary-color);
     -webkit-text-fill-color: var(--primary-color);
     position: relative;
 }

 .title-decoration {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 15px;
     margin-top: 20px;
 }

 .decoration-line {
     width: 60px;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
     border-radius: 1px;
 }

 .decoration-dot {
     width: 8px;
     height: 8px;
     background: var(--primary-color);
     border-radius: 50%;
     box-shadow: 0 0 10px rgba(31, 153, 104, 0.3);
 }

 .journey-header>p {
     font-size: 20px;
     color: var(--light-text);
     max-width: 600px;
     margin: 0 auto;
     line-height: 1.6;
 }

 .journey-cards-container {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
     gap: 40px;
     margin-bottom: 80px;
     position: relative;
     z-index: 2;
 }

 .journey-card {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border-radius: 24px;
     padding: 40px 30px;
     box-shadow:
         0 20px 40px rgba(31, 153, 104, 0.1),
         0 8px 16px rgba(0, 0, 0, 0.05);
     border: 1px solid rgba(31, 153, 104, 0.1);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     position: relative;
     overflow: hidden;
     animation: fadeInUp 0.8s ease-out forwards;
     opacity: 0;
 }

 .journey-card:nth-child(1) {
     animation-delay: 0.1s;
 }

 .journey-card:nth-child(2) {
     animation-delay: 0.2s;
 }

 .journey-card:nth-child(3) {
     animation-delay: 0.3s;
 }

 @keyframes fadeInUp {
     to {
         opacity: 1;
     }
 }

 .journey-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--primary-color), #16a34a, var(--primary-color));
     border-radius: 24px 24px 0 0;
 }

 .journey-card:hover {
     box-shadow: 0 25px 50px rgba(31, 153, 104, 0.1);
     transform: translateY(-15px);
 }


 .journey-card .icon-glow.glow-active {
     opacity: 0.8;
     transform: scale(1.2);
 }

 .journey-cta:hover {
     transform: translateY(-3px) scale(1.05);
 }

 .card-header {
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     margin-bottom: 30px;
 }

 .card-icon-wrapper {
     position: relative;
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--primary-color), #16a34a);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     /* box-shadow: 0 8px 20px rgba(31, 153, 104, 0.3); */
 }

 .card-icon-box {
     width: 32px;
     height: 32px;
 }

 .card-icon-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
 }

 .icon-glow {
     position: absolute;
     top: -2px;
     left: -2px;
     right: -2px;
     bottom: -2px;
     border-radius: 18px;
     opacity: 0.3;
     filter: blur(8px);
     animation: glow 2s ease-in-out infinite alternate;
     z-index: -1;
     background: rgba(31, 153, 104, 0.7);
 }

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

     100% {
         opacity: 0.6;
         transform: scale(1.1);
     }
 }

 .card-number {
     font-size: 40px;
     font-weight: 800;
     color: rgba(31, 153, 104, 0.1);
     line-height: 1;
 }

 .card-content {
     margin-bottom: 30px;
     display: flex;
     flex-direction: column;
     height: 77%;
 }

 .card-title {
     font-size: 24px;
     font-weight: 700;
     color: var(--text-color);
     margin: 0 0 30px 0;
     position: relative;
 }

 .card-title::after {
     content: '';
     position: absolute;
     bottom: -8px;
     left: 0;
     width: 40px;
     height: 2px;
     background: var(--primary-color);
     border-radius: 1px;
 }

 .card-content>p {
     font-size: 15px;
     line-height: 1.7;
     color: var(--light-text);
     margin: 0 0 25px 0;
     flex-grow: 1;
     /* 让描述文字占据剩余空间 */
 }

 .card-features {
     display: flex;
     flex-direction: column;
     gap: 12px;
     min-height: 120px;
     /* 确保所有卡片的特性区域高度一致 */
     justify-content: flex-start;
 }

 .feature-item {
     display: flex;
     align-items: center;
     gap: 12px;
     font-size: 15px;
     color: var(--text-color);
     min-height: 24px;
     /* 确保每个特性项目高度一致 */
 }

 .feature-icon {
     width: 20px;
     height: 20px;
     background: var(--primary-color);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     position: relative;
 }

 .feature-icon svg {
     width: 12px;
     height: 12px;
     stroke: white;
     stroke-width: 2;
     fill: none;
 }

 .card-footer {
     display: flex;
     justify-content: center;
 }

 .progress-indicator {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .progress-line {
     width: 60px;
     height: 2px;
     background: linear-gradient(90deg, var(--primary-color) 0%, rgba(31, 153, 104, 0.2) 100%);
     background-size: 200% 100%;
     border-radius: 1px;
     animation: progressSlide 2s ease-in-out infinite alternate;
 }

 .journey-card:nth-child(1) .progress-line {
     animation-delay: 0s;
 }

 .journey-card:nth-child(2) .progress-line {
     animation-delay: 0.5s;
 }

 .journey-card:nth-child(3) .progress-line {
     animation-delay: 1s;
 }

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

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

 .progress-dot {
     width: 8px;
     height: 8px;
     background: rgba(31, 153, 104, 0.3);
     border-radius: 50%;
     transition: all 0.3s ease;
 }

 .progress-dot.active {
     background: var(--primary-color);
     box-shadow: 0 0 10px rgba(31, 153, 104, 0.5);
     transform: scale(1.2);
 }

 .journey-footer {
     text-align: center;
     position: relative;
     z-index: 2;
 }

 .journey-cta {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     padding: 10px 32px;
     background: linear-gradient(135deg, var(--primary-color), #16a34a);
     color: white;
     border-radius: 50px;
     font-weight: 600;
     font-size: 18px;
     text-decoration: none;
     transition: all 0.3s ease;
     box-shadow: 0 8px 20px rgba(31, 153, 104, 0.2);
     position: relative;
     overflow: hidden;
 }

 .journey-cta::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.5s ease;
 }

 .journey-cta:hover::before {
     left: 100%;
 }

 .journey-cta:hover {
     transform: translateY(-3px) scale(1.05);
 }

 .cta-arrow {
     width: 20px;
     height: 20px;
     transition: transform 0.3s ease;
 }

 .journey-cta:hover .cta-arrow {
     transform: translateX(4px);
 }

 /* Responsive Design for Business Journey */
 @media (max-width: 768px) {
     .business-journey-section {
         padding: 60px 0 40px;
     }

     .journey-main-title {
         font-size: 32px;
         line-height: 1.3;
         margin-bottom: 16px;
     }

     .journey-header>p {
         font-size: 16px;
         line-height: 1.5;
         margin-bottom: 40px;
     }

     .journey-cards-container {
         grid-template-columns: 1fr;
         gap: 24px;
         margin-bottom: 50px;
     }

     .journey-card {
         padding: 24px 20px;
         margin-bottom: 0;
     }

     .card-header {
         margin-bottom: 20px;
     }

     .card-icon-wrapper {
         width: 45px;
         height: 45px;
     }

     .card-icon-box {
         width: 24px;
         height: 24px;
     }

     .card-number {
         font-size: 28px;
     }

     .card-title {
         font-size: 18px;
         margin-bottom: 20px;
     }

     .card-content>p {
         font-size: 14px;
         line-height: 1.5;
         margin-bottom: 20px;
     }

     .card-features {
         min-height: 90px;
         gap: 10px;
     }

     .feature-item {
         font-size: 14px;
         gap: 10px;
     }

     .feature-icon {
         width: 18px;
         height: 18px;
     }

     .feature-icon svg {
         width: 10px;
         height: 10px;
     }

     .bg-circle-1,
     .bg-circle-2,
     .bg-circle-3 {
         display: none;
     }

     .journey-cta {
         padding: 12px 28px;
         font-size: 16px;
     }
 }

 @media (max-width: 480px) {
     .business-journey-section {
         padding: 50px 0 30px;
     }

     .journey-main-title {
         font-size: 22px;
         margin-bottom: 12px;
     }

     .journey-header>p {
         font-size: 15px;
         line-height: 1.4;
         margin-bottom: 30px;
     }

     .journey-cards-container {
         gap: 20px;
         margin-bottom: 40px;
     }

     .journey-header {
         margin-bottom: 20px;
     }

     .journey-card {
         padding: 20px 16px;
     }

     .card-header {
         gap: 12px;
         align-items: center;
         margin-bottom: 16px;
     }

     .card-icon-wrapper {
         width: 40px;
         height: 40px;
     }

     .card-icon-box {
         width: 22px;
         height: 22px;
     }

     .card-number {
         font-size: 24px;
     }

     .card-title {
         font-size: 18px;
         margin-bottom: 16px;
     }

     .card-content>p {
         font-size: 15px;
         line-height: 1.4;
         margin-bottom: 16px;
     }

     .card-features {
         min-height: 80px;
         gap: 8px;
     }

     .feature-item {
         font-size: 14px;
         gap: 8px;
     }

     .feature-icon {
         width: 15px;
         height: 15px;
     }

     .feature-icon svg {
         width: 10px;
         height: 10px;
     }

     .journey-cta {
         padding: 10px 24px;
         font-size: 15px;
     }
 }

 /* Featured Services Styles */
 .featured-services {
     padding: 80px 0;
     position: relative;
     overflow: hidden;
 }

 .featured-services::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image:
         radial-gradient(circle at 20% 80%, rgba(31, 153, 104, 0.03) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(22, 163, 74, 0.03) 0%, transparent 50%);
     pointer-events: none;
 }

 .featured-services-header {
     text-align: center;
     margin-bottom: 80px;
     position: relative;
     z-index: 2;
 }

 .featured-services-title {
     font-size: 43px;
     font-weight: 700;
     color: var(--primary-color);
     margin: 0 0 30px 0;
 }

 .title-decoration {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 20px;
 }

 .decoration-line {
     width: 60px;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
     border-radius: 1px;
 }

 .decoration-dot {
     width: 12px;
     height: 12px;
     background: var(--primary-color);
     border-radius: 50%;
     box-shadow: 0 0 20px rgba(31, 153, 104, 0.5);
     animation: pulse 2s ease-in-out infinite;
 }

 @keyframes pulse {

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

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

 .featured-services-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 80px;
     align-items: center;
     margin-bottom: 80px;
     position: relative;
     z-index: 2;
 }

 /* Services Visual Section */
 .services-visual {
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 500px;
 }

 .geometric-frame {
     position: relative;
     width: 430px;
     height: 430px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .white-triangle {
     position: relative;
     width: 380px;
     /* height: 350px; */
     /* background: white; */
     /* clip-path: polygon(50% 0%, 0% 100%, 100% 100%); */
     display: flex;
     align-items: center;
     justify-content: center;
     /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); */
     z-index: 2;
     animation: triangleFloat 6s ease-in-out infinite;
 }

 @keyframes triangleFloat {

     0%,
     100% {
         transform: translateY(0px) scale(1);
     }

     50% {
         transform: translateY(-8px) scale(1.02);
     }
 }

 .triangle-outline {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 2px dashed rgba(31, 153, 104, 0.4);
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
     z-index: 1;
     animation: outlinePulse 4s ease-in-out infinite;
 }

 @keyframes outlinePulse {

     0%,
     100% {
         opacity: 0.4;
         border-color: rgba(31, 153, 104, 0.4);
     }

     50% {
         opacity: 0.7;
         border-color: rgba(31, 153, 104, 0.6);
     }
 }

 .bridge-image {
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     /* clip-path: polygon(50% 0%, 0% 100%, 100% 100%); */
     position: relative;
 }

 .bridge-image::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* background: linear-gradient(135deg, rgba(31, 153, 104, 0.1), rgba(22, 163, 74, 0.1)); */
     z-index: 1;
     pointer-events: none;
 }

 .bridge-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 0;
     transition: transform 0.3s ease;
     position: relative;
     z-index: 2;
 }

 .bridge-image:hover img {
     transform: scale(1.05);
 }

 .floating-elements {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
 }

 .floating-circle {
     position: absolute;
     border-radius: 50%;
     background: linear-gradient(135deg, var(--primary-color), #16a34a);
     opacity: 0.6;
     animation: float 6s ease-in-out infinite;
 }

 .circle-1 {
     width: 20px;
     height: 20px;
     top: 10%;
     right: 15%;
     animation-delay: 0s;
 }

 .circle-2 {
     width: 15px;
     height: 15px;
     bottom: 20%;
     left: 10%;
     animation-delay: 2s;
 }

 .floating-triangle {
     position: absolute;
     width: 0;
     height: 0;
     border-left: 15px solid transparent;
     border-right: 15px solid transparent;
     border-bottom: 25px solid rgba(31, 153, 104, 0.4);
     top: 30%;
     right: 5%;
     animation: float 8s ease-in-out infinite;
     animation-delay: 4s;
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0px) rotate(0deg);
     }

     50% {
         transform: translateY(-20px) rotate(180deg);
     }
 }

 /* Services List Section */
 .services-list {
     display: flex;
     flex-direction: column;
     gap: 30px;
 }

 .service-item {
     background: rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 0;
     box-shadow: 0 10px 30px rgba(31, 153, 104, 0.01);
     border: 1px solid rgba(31, 153, 104, 0.1);
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     overflow: hidden;
     position: relative;
 }

 .service-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, var(--primary-color), #16a34a, var(--primary-color));
     transform: scaleX(0);
     transition: transform 0.4s ease;
 }

 .service-item:hover::before,
 .service-item.active::before {
     transform: scaleX(1);
 }

 .service-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 20px 40px rgba(31, 153, 104, 0.02);
 }

 .service-header {
     display: flex;
     align-items: center;
     padding: 30px;
     cursor: pointer;
     gap: 20px;
     position: relative;
 }

 .service-icon {
     width: 50px;
     height: 50px;
     background: linear-gradient(135deg, var(--primary-color), #16a34a);
     border-radius: 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     transition: all 0.3s ease;
 }

 .service-icon svg {
     width: 24px;
     height: 24px;
     color: white;
     stroke-width: 2.5;
 }

 .service-item:hover .service-icon {
     transform: scale(1.1) rotate(5deg);
     box-shadow: 0 10px 20px rgba(31, 153, 104, 0.1);
 }

 .service-icon.hover-effect {
     transform: scale(1.05) rotate(2deg);
     box-shadow: 0 8px 16px rgba(31, 153, 104, 0.1);
 }

 .service-title {
     font-size: 20px;
     font-weight: 600;
     color: var(--text-color);
     margin: 0;
     flex: 1;
     transition: color 0.3s ease;
 }

 .service-item:hover .service-title {
     color: var(--primary-color);
 }

 .service-toggle {
     width: 30px;
     height: 30px;
     background: rgba(31, 153, 104, 0.1);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
 }

 .service-item:hover .service-toggle {
     background: rgba(31, 153, 104, 0.2);
     transform: scale(1.1);
 }

 .toggle-icon {
     font-size: 18px;
     font-weight: bold;
     color: var(--primary-color);
     transition: all 0.3s ease;
 }

 .service-item.active .service-toggle {
     background: var(--primary-color);
 }

 .service-item.active .toggle-icon {
     color: #fff;
     /* transform: rotate(45deg); */
 }

 .service-item.active .service-title {
     color: var(--primary-color);
 }

 .service-content {
     max-height: 0;
     overflow: hidden;
     transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     padding: 0 30px;
     opacity: 0;
     transform: translateY(-10px);
 }

 .service-item.active .service-content {
     max-height: 300px;
     padding: 0 30px 30px 30px;
     opacity: 1;
     transform: translateY(0);
 }

 .service-content p {
     margin: 0 0 15px 0;
     color: var(--light-text);
     line-height: 1.7;
     font-size: 15px;
 }

 .service-content p:last-child {
     margin-bottom: 0;
 }

 /* 添加进入动画 */
 .service-item {
     animation: slideInUp 0.6s ease-out forwards;
     opacity: 0;
     transform: translateY(30px);
 }

 .service-item.animate-in {
     opacity: 1;
     transform: translateY(0);
 }

 @keyframes slideInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 .geometric-frame {
     animation: fadeInScale 1s ease-out forwards;
     opacity: 0;
     transform: scale(0.8);
 }

 .geometric-frame.animate-in {
     opacity: 1;
     transform: scale(1);
 }

 @keyframes fadeInScale {
     from {
         opacity: 0;
         transform: scale(0.8);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* 页面加载完成后的状态 */
 .featured-services.loaded .featured-services-title {
     animation: titleSlideIn 1s ease-out forwards;
 }

 .featured-services.loaded .title-decoration {
     animation: decorationSlideIn 1s ease-out 0.3s forwards;
     opacity: 0;
     transform: translateY(20px);
 }

 @keyframes titleSlideIn {
     from {
         opacity: 0;
         transform: translateY(-30px);
     }

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

 @keyframes decorationSlideIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 /* CTA Section */


 /* CTA Section */
 .cta-section {
    background: linear-gradient(135deg, #1f9968 0%, #408157 100%);
     padding: 100px 0;
     text-align: center;
     /* background-image: url('/assets/pic/video-bg.gif'); */
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     position: relative;
 }

 .cta-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     /* background-color: rgba(0, 0, 0, 0.5); */
     background-image: url('/assets/pic/video-3.gif');
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
     opacity: 0.15;

 }

 .cta-content {
     position: relative;
     z-index: 9;
 }

 .cta-content h3 {
     font-size: 36px;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 20px;
 }

 .cta-content p {
     font-size: 18px;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 40px;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

 .cta-buttons {
     display: flex;
     gap: 20px;
     justify-content: center;
     flex-wrap: wrap;
 }

 .cta-button {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 10px 30px;
     border-radius: 40px;
     text-decoration: none;
     font-weight: 600;
     transition: all 0.3s ease;
 }

 .cta-button .layui-icon {
     font-size: 12px;
 }

 .cta-button.primary {
     background: #ffffff;
     color: var(--primary-color);
 }

 .cta-button.primary:hover {
     background: #f8f9fa;
     transform: translateY(-2px);
 }

 .cta-button.secondary {
     background: transparent;
     color: #ffffff;
     border: 1px solid #ffffff;
 }

 .cta-button.secondary:hover {
     background: #ffffff;
     color: #1f9968;
     transform: translateY(-2px);
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     .featured-services-content {
         grid-template-columns: 1fr;
         gap: 60px;
     }

     .services-visual {
         min-height: auto;
     }

     .geometric-frame {
         width: 350px;
         height: 350px;
     }

     .white-triangle {
         width: 300px;
         height: 300px;
     }
 }

 @media (max-width: 768px) {
     .featured-services {
         padding: 60px 0;
     }

     .featured-services-title {
         font-size: 32px;
         margin-bottom: 20px;
     }

     .featured-services-content {
         grid-template-columns: 1fr;
         gap: 50px;
         margin-bottom: 50px;
     }

     .geometric-frame {
         width: 280px;
         height: 280px;
     }

     .white-triangle {
         width: 240px;
         height: 240px;
     }

     .services-list {
         gap: 20px;
     }

     .service-header {
         padding: 20px;
         gap: 15px;
     }

     .service-icon {
         width: 45px;
         height: 45px;
     }

     .service-icon svg {
         width: 22px;
         height: 22px;
     }

     .service-title {
         font-size: 18px;
     }

     .service-content {
         padding: 0 20px;
     }

     .service-item.active .service-content {
         padding: 0 20px 20px 20px;
     }

     .service-content p {
         font-size: 14px;
         line-height: 1.5;
         margin-bottom: 12px;
     }
 }

 @media (max-width: 480px) {
     .featured-services {
         padding: 50px 0 0 0;
     }

     .featured-services-title {
         font-size: 26px;
         margin-bottom: 16px;
     }

     .featured-services-content {
         gap: 40px;
         margin-bottom: 40px;
     }

     .geometric-frame {
         width: 240px;
         height: 240px;
     }

     .white-triangle {
         width: 200px;
         height: 200px;
     }

     .services-list {
         gap: 16px;
     }

     .service-header {
         padding: 16px;
         gap: 12px;
     }

     .service-icon {
         width: 40px;
         height: 40px;
     }

     .service-icon svg {
         width: 20px;
         height: 20px;
     }

     .service-title {
         font-size: 16px;
     }

     .service-content {
         padding: 0 16px;
     }

     .service-item.active .service-content {
         padding: 0 16px 16px 16px;
     }

     .service-content p {
         font-size: 13px;
         line-height: 1.4;
         margin-bottom: 10px;
     }
 }

 /* Insights Section Styles */
 .insights-section {
     padding: 100px 0;
     background: linear-gradient(135deg, rgba(31, 153, 104, 0.02) 0%, rgba(31, 153, 104, 0.05) 100%);
     position: relative;
     overflow: hidden;
 }

 .insights-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image:
         radial-gradient(circle at 20% 80%, rgba(31, 153, 104, 0.03) 0%, transparent 50%),
         radial-gradient(circle at 80% 20%, rgba(31, 153, 104, 0.03) 0%, transparent 50%);
     pointer-events: none;
 }

 .insights-section .title-header h2 {
     font-size: 43px;
 }

 /* Swiper Container */
 .insights-swiper-container {
     position: relative;
     padding: 0 30px;
 }

 .insights-swiper {
     overflow: hidden;
     position: relative;
     height: 450px;
 }

 /* Insight Cards */
 .insight-card {
     background: #fff;
     border-radius: 16px;
     overflow: hidden;
     box-shadow: var(--shadow);
     transition: all 0.3s ease;
     height: 100%;
     display: flex;
     flex-direction: column;
     border: 1px solid rgba(31, 153, 104, 0.08);
     position: relative;
     cursor: pointer;
 }

 .insight-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 4px;
     background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
     transform: scaleX(0);
     transition: transform 0.3s ease;
 }

 .insight-card:hover::before {
     transform: scaleX(1);
 }

 .insight-card:hover {
     transform: translateY(-8px);
 }

 .insight-image {
     position: relative;
     width: 100%;
     height: 220px;
     overflow: hidden;
 }

 .insight-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease;
 }

 .insight-card:hover .insight-image img {
     transform: scale(1.05);
 }

 .insight-overlay {
     position: absolute;
     top: 15px;
     left: 15px;
     z-index: 2;
 }

 .insight-category {
     background: rgba(31, 153, 104, 0.9);
     color: #fff;
     padding: 6px 12px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.5px;
 }

 .insight-content {
     padding: 25px;
     display: flex;
     flex-direction: column;
     flex: 1;
 }

 .insight-content h3 {
     font-size: 18px;
     font-weight: 600;
     color: var(--text-color);
     margin: 0 0 15px 0;
     line-height: 1.4;
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
     overflow: hidden;
 }

 .insight-content p {
     font-size: 14px;
     color: var(--light-text);
     line-height: 1.6;
     margin: 0 0 20px 0;
     display: -webkit-box;
     -webkit-line-clamp: 3;
     -webkit-box-orient: vertical;
     overflow: hidden;
     flex: 1;
 }

 .insight-meta {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-top: auto;
 }

 .insight-date {
     font-size: 12px;
     color: var(--light-text);
     font-weight: 500;
 }

 .read-more-link {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     color: var(--primary-color);
     font-size: 14px;
     font-weight: 500;
     text-decoration: none;
     transition: all 0.3s ease;
 }

 .read-more-link:hover {
     color: var(--accent-color);
     transform: translateX(3px);
 }

 .read-more-link i {
     font-size: 12px;
     transition: transform 0.3s ease;
 }

 .read-more-link:hover i {
     transform: translateX(2px);
 }

 /* Swiper Navigation */
 .insights-swiper-button-next,
 .insights-swiper-button-prev {
     width: 50px;
     height: 50px;
     background: #fff;
     border-radius: 50%;
     box-shadow: var(--shadow);
     color: var(--primary-color);
     transition: all 0.3s ease;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
 }

 .insights-swiper-button-next:hover,
 .insights-swiper-button-prev:hover {
     background: var(--primary-color);
     color: #fff;
     box-shadow: var(--shadow);
 }

 .insights-swiper-button-next::after,
 .insights-swiper-button-prev::after {
     font-size: 18px;
     font-weight: bold;
 }

 .insights-swiper-button-next {
     right: -40px;
 }

 .insights-swiper-button-prev {
     left: -40px;
 }

 /* Swiper Pagination */
 .insights-swiper-pagination {
     position: relative;
     margin-top: 40px;
     text-align: center;
 }

 .insights-swiper-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background: rgba(31, 153, 104, 0.3);
     opacity: 1;
     transition: all 0.3s ease;
     margin: 0 6px;
 }

 .insights-swiper-pagination .swiper-pagination-bullet-active {
     background: var(--primary-color);
     /* transform: scale(1.2); */
 }

 /* CTA Button */
 .insights-cta {
     text-align: center;
     margin-top: 30px;
 }

 .insights-cta-button {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     color: #fff;
     padding: 10px 32px;
     border-radius: 30px;
     text-decoration: none;
     font-weight: 500;
     font-size: 16px;
     transition: all 0.3s ease;
     box-shadow: 0 4px 20px rgba(31, 153, 104, 0.2);
     position: relative;
     overflow: hidden;
 }

 .insights-cta-button .layui-icon {
     font-size: 13px;
 }

 .insights-cta-button::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.5s ease;
 }

 .insights-cta-button:hover::before {
     left: 100%;
 }

 .insights-cta-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 30px rgba(31, 153, 104, 0.3);
 }

 .insights-cta-button i {
     transition: transform 0.3s ease;
 }

 .insights-cta-button:hover i {
     transform: translateX(3px);
 }

 /* Responsive Design */
 @media (max-width: 1024px) {
     .insights-section {
         padding: 80px 0;
     }

     .insights-title {
         font-size: 40px;
     }

     .insights-swiper-container {
         padding: 0 50px;
     }
 }

 @media (max-width: 768px) {

     .image-container {
         height: auto;
     }

     .insights-section {
         padding: 60px 0;
     }

     .insights-section .title-header h2 {
         font-size: 32px;
         margin-bottom: 16px;
     }

     .insights-header p {
         font-size: 16px;
         line-height: 1.5;
         margin-bottom: 40px;
     }

     .insights-swiper-container {
         padding: 0px;
     }

     .insights-swiper {
         height: 400px;
     }

     .insight-card {
         border-radius: 12px;
     }

     .insight-image {
         height: 200px;
     }

     .insight-content {
         padding: 20px;
     }

     .insight-content h3 {
         font-size: 16px;
         line-height: 1.4;
         margin-bottom: 12px;
         -webkit-line-clamp: 2;
     }

     .insight-content p {
         font-size: 14px;
         line-height: 1.5;
         margin-bottom: 16px;
         -webkit-line-clamp: 3;
     }

     .insights-swiper-button-next,
     .insights-swiper-button-prev {
         width: 40px;
         height: 40px;
     }

     .insights-swiper-button-next::after,
     .insights-swiper-button-prev::after {
         font-size: 16px;
     }

     .insights-cta-button {
         padding: 12px 24px;
         font-size: 15px;
     }

     .insights-cta {
         margin-top: 25px;
     }

     .insights-section {
         padding: 50px 0;
     }

     .insights-section .title-header h2 {
         font-size: 26px;
         margin-bottom: 12px;
     }

     .insights-header p {
         font-size: 14px;
         line-height: 1.4;
         margin-bottom: 30px;
     }

     .insights-swiper {
         height: auto;
     }

     .insight-image {
         height: auto;
     }

     .insight-content {
         padding: 16px;
     }

     .insight-content h3 {
         font-size: 15px;
         line-height: 1.3;
         margin-bottom: 10px;
     }

     .insight-content p {
         font-size: 13px;
         line-height: 1.4;
         margin-bottom: 12px;
     }

     .insights-swiper-button-next,
     .insights-swiper-button-prev {
         width: 35px;
         height: 35px;
     }

     .insights-swiper-button-next::after,
     .insights-swiper-button-prev::after {
         font-size: 14px;
     }

     .insights-cta-button {
         padding: 10px 20px;
         font-size: 14px;
     }

     .insights-cta {
         margin-top: 20px;
     }

     .cta-section {
         padding: 50px 0;
     }

     .cta-content h3 {
         font-size: 26px;
     }

     .cta-button {
         padding: 5px 30px;
     }

     .cta-button .layui-icon {
         font-size: 10px;
     }
 }

 /* Insights 動畫效果 */
 .insight-card {
     opacity: 0;
     transform: translateY(30px);
     transition: all 0.6s ease;
 }

 .insight-card.animate-in {
     opacity: 1;
     transform: translateY(0);
 }

 .insight-card.hover-active {
     transform: translateY(-8px) scale(1.02);
 }

 /* 滑動動畫 */
 .insight-card:nth-child(1) {
     transition-delay: 0.1s;
 }

 .insight-card:nth-child(2) {
     transition-delay: 0.2s;
 }

 .insight-card:nth-child(3) {
     transition-delay: 0.3s;
 }

 /* 移动端触摸优化 */
 @media (max-width: 768px) {

     /* 触摸区域优化 */
     .carousel-button,
     .journey-cta,
     .insights-cta-button,
     .service-item,
     .insight-card {
         min-height: 40px;
         -webkit-tap-highlight-color: transparent;
         touch-action: manipulation;
     }

     .nav-dot {
         width: 10px;
         height: 10px;
     }

     .nav-dot.active {
         transform: scale(1.05);
     }

     /* 触摸反馈效果 */
     .carousel-button:active,
     .journey-cta:active,
     .insights-cta-button:active {
         transform: scale(0.95);
     }

     .service-item:active,
     .insight-card:active {
         transform: scale(0.98);
     }

     /* 移动端图片优化 */
     img {
         max-width: 100%;
         height: auto;
         display: block;
     }

     /* 移动端滚动优化 */
     .insights-swiper,
     .services-list {
         scroll-behavior: smooth;
         -webkit-overflow-scrolling: touch;
     }

     /* 移动端性能优化 */
     .journey-card,
     .service-item,
     .insight-card {
         will-change: transform;
         backface-visibility: hidden;
     }

     /* 减少移动端不必要的悬停效果 */
     .journey-card:hover,
     .service-item:hover,
     .insight-card:hover {
         transform: none;
     }

     /* 移动端阴影优化 */
     .journey-card,
     .service-item {
         box-shadow: var(--shadow);
     }

     .insight-card {
         box-shadow: none;
     }

     /* 移动端焦点状态优化 */
     .carousel-button:focus,
     .journey-cta:focus,
     .insights-cta-button:focus,
     .service-item:focus,
     .insight-card:focus {
         outline: 2px solid var(--primary-color);
         outline-offset: 2px;
     }

     .cta-arrow {
         width: 16px;
         height: 20px;
     }

     .carousel-button i {
         margin-bottom: 2px;
     }

     .featured-services-header {
         margin-bottom: 10px;
     }
 }

 /* 移动端基础样式优化 */
 @media (max-width: 768px) {

     /* 确保移动端内容不会溢出 */
     body {
         overflow-x: hidden;
     }

     /* 移动端基础字体大小调整 */
     p {
         font-size: 16px;
         line-height: 1.6;
     }

     /* 移动端标题基础样式 */
     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
         word-wrap: break-word;
         hyphens: auto;
     }

     /* 移动端容器优化 */
     .container {
         padding: 0 15px;
     }
 }

 @media (max-width: 480px) {

     p {
         font-size: 15px;
         line-height: 1.5;
     }
 }

 /* Collaboration Section Styles */
 .collaboration-section {
     padding: 80px 0;
     /* background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); */
     position: relative;
     overflow: hidden;
 }

 .collaboration-section::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: radial-gradient(circle at 20% 80%, rgba(31, 153, 104, 0.03) 0%, transparent 50%),
     radial-gradient(circle at 80% 20%, rgba(22, 163, 74, 0.03) 0%, transparent 50%);
     background-size: 60px 60px;
     background-position: 0 0, 30px 30px;
     opacity: 0.5;
     pointer-events: none;
     z-index: 1;
 }


 .collaboration-section .title-header h2{
    font-size: 43px;
    color: var(--text-color);
 }

 .collaboration-section .title-header h2 span{
    color: var(--primary-color);
 }

 .collaboration-swiper-container {
     position: relative;
     z-index: 2;
     padding: 0 30px;
 }

 .collaboration-swiper {
     overflow: hidden;
     position: relative;
    padding: 20px 0;
    cursor: grab;
 }

 .partners-row {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 20px;
     height: 100%;
 }

 .parter-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    height: 100%;
 }

 .parter-item {
    max-width: 15%;
    height: auto;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    border-radius: 16px;
    overflow: hidden;
 }

 .parter-item:hover {
    border-color: rgba(31, 153, 104, 0.3);
 }

 .parter-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.3s ease;
 }

 .parter-item:hover img {
    transform: scale(1.05);
 }

 @media (max-width: 1028px) {
    .parter-item{
        max-width: 20%;
    }
 }
 @media (max-width: 768px) {
    .parter-item{
        max-width: 21%;
    }
 }

 .partner-item {
    user-select: none;
     flex: 1;
     text-align: center;
     padding: 20px 10px;
     background: rgba(255, 255, 255, 0.8);
     border-radius: 16px;
     box-shadow: var(--shadow);
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden;
     opacity: 0;
     transform: translateY(20px);
     animation: fadeInUp 0.6s ease-out forwards;

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

 .partner-item.animate-in {
     opacity: 1;
     transform: translateY(0);
 }

 /* 为每个合作伙伴项目添加延迟动画 */
 .partner-item:nth-child(1) {
     animation-delay: 0.1s;
 }

 .partner-item:nth-child(2) {
     animation-delay: 0.2s;
 }

 .partner-item:nth-child(3) {
     animation-delay: 0.3s;
 }

 .partner-item:nth-child(4) {
     animation-delay: 0.4s;
 }

 .partner-item:nth-child(5) {
     animation-delay: 0.5s;
 }

 .partner-item:nth-child(6) {
     animation-delay: 0.6s;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 .partner-item::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     /* background: linear-gradient(90deg, transparent, rgba(31, 153, 104, 0.1), transparent); */
     transition: left 0.5s ease;
 }

 .partner-item:hover::before {
     left: 100%;
 }

 .partner-item:hover {
     transform: translateY(-8px);
     border-color: rgba(31, 153, 104, 0.3);
 }

 .partner-logo {
     width: 150px;
     height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(255, 255, 255, 0.9);
     border-radius: 12px;
     transition: all 0.3s ease;
 }

 .partner-logo img {
     max-width: 100%;
     max-height: 100%;
     object-fit: contain;
     filter: grayscale(100%);
     transition: all 0.3s ease;
 }

 .partner-item:hover .partner-logo img {
     filter: grayscale(0%);
     transform: scale(1.1);
 }

 .partner-name {
     font-size: 14px;
     font-weight: 600;
     color: var(--text-color);
     margin-top: 10px;
     line-height: 1.3;
 }

 /* Swiper Navigation */
 .collaboration-swiper-button-next,
 .collaboration-swiper-button-prev {
     width: 50px;
     height: 50px;
     background: #fff;
     border-radius: 50%;
     box-shadow: var(--shadow);
     color: var(--primary-color);
     transition: all 0.3s ease;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
 }

 .collaboration-swiper-button-next:hover,
 .collaboration-swiper-button-prev:hover {
     background: var(--primary-color);
     color: #fff;
     box-shadow: var(--shadow);
 }

 .collaboration-swiper-button-next::after,
 .collaboration-swiper-button-prev::after {
     font-size: 18px;
     font-weight: bold;
 }

 .collaboration-swiper-button-next {
     right: -40px;
 }

 .collaboration-swiper-button-prev {
     left: -40px;
 }

 /* Swiper Pagination */
 .collaboration-swiper-pagination {
     position: relative;
     margin-top: 40px;
     text-align: center;
 }

 .collaboration-swiper-pagination .swiper-pagination-bullet {
     width: 12px;
     height: 12px;
     background: rgba(31, 153, 104, 0.3);
     opacity: 1;
     transition: all 0.3s ease;
     margin: 0 6px;
 }

 .collaboration-swiper-pagination .swiper-pagination-bullet-active {
     background: var(--primary-color);
 }

 /* 响应式设计 */
 @media (max-width: 1200px) {
     .collaboration-title {
         font-size: 42px;
     }

     .partner-group {
         gap: 30px;
     }

     .partner-item {
         padding: 15px;
     }

 }

 @media (max-width: 768px) {
     .collaboration-section {
         padding: 40px 0;
     }

     .collaboration-section .title-header h2{
        font-size: 28px;
     }

     .partners-row {
         flex-direction: column;
         gap: 20px;
         justify-content: flex-start;
     }

     .partner-item {
         flex: none;
         width: 100%;
         max-width: 100%;
         margin: 0 auto;
     }

     .partner-logo img{
        filter: grayscale(0%);
     }


     .collaboration-swiper-pagination {
         margin-top: 20px;
     }

     .collaboration-swiper-pagination .swiper-pagination-bullet {
         width: 10px;
         height: 10px;
     }

     /* 移动端隐藏导航按钮 */
     .collaboration-swiper-button-next,
     .collaboration-swiper-button-prev {
         display: none;
     }
 }