/* 英雄区域样式 */
   .hero-section {
       background: #21242D;
       padding: 60px 40px;
       position: relative;
       overflow: hidden;
   }

   /* 左侧内容样式 */
   .hero-content {
       /* max-width: 500px; */
   }

   .text-purple {
       color: #8D64F2;
   }

   .hero-title {
       color: #ffffff;
       font-size: 57px;
       font-weight: bold;
       display: flex;
       align-items: center;
       gap: 12px;
   }

   .emoji-icon {
       width: 58px;
   }

   .hero-desc {
       color: #BCC3D7;
       font-size: 19px;
       margin-bottom: 8px;
   }

   .hero-sub-desc {
       color: #BCC3D7;
       font-size: 19px;
       position: relative;
       display: inline-block;
       /* 让元素宽度适应内容 */
   }

   /* 确保文字在渐变背景之上 */
   .hero-sub-desc span {
       position: relative;
       z-index: 1;
   }

   .cta-button {
       position: relative;
       display: block;
       align-items: center;
       padding: 12px 38px;
       color: #ffffff;
       text-decoration: none;
       font-size: 16px;
       transition: all 0.3s ease;
       margin-top: 50px;
       width: 252px;
       height: 51px;
       background: linear-gradient(119deg, #825cf5 0%, #a478fa 100%);
       border-radius: 10px;
       text-align: center;
   }

   .cta-button img {
       position: absolute;
       right: -44px;
       top: -32px;
   }

   .cta-button:hover {
       transform: translateY(-2px);
       box-shadow: 0 4px 12px rgba(141, 100, 242, 0.3);
       color: #ffffff;
   }

   /* 世界地图样式 */
   .world-map {
       position: relative;
       width: 633px;
       height: 365px;
   }

   .map-base {
       width: 100%;
       height: 100%;
       object-fit: contain;
       opacity: 0.6;
   }

   .map-marker {
       position: absolute;
       width: 24px;
       height: 24px;
   }

   .marker-dot {
       display: block;
       width: 12px;
       height: 12px;
       background: #8D64F2;
       border-radius: 50%;
       position: relative;
       animation: pulse 2s infinite;
   }

   @keyframes pulse {
       0% {
           transform: scale(1);
           box-shadow: 0 0 0 0 rgba(141, 100, 242, 0.4);
       }

       70% {
           transform: scale(1.1);
           box-shadow: 0 0 0 10px rgba(141, 100, 242, 0);
       }

       100% {
           transform: scale(1);
           box-shadow: 0 0 0 0 rgba(141, 100, 242, 0);
       }
   }

   /* 响应式调整 */
   @media (max-width: 992px) {
       .hero-section {
           flex-direction: column;
           gap: 40px;
       }

       .world-map {
           width: 100%;
           height: 200px;
       }
   }


   /* 服务区域样式 */
   .services-section {
       padding: 80px 0;
       box-sizing: border-box;
       width: 57vw;
       margin: 0 auto;
   }


   .section-title {
       color: #ffffff;
       font-size: 24px;
       margin-bottom: 20px;
   }

   .section-desc {
       color: #BCC3D7;
       font-size: 17px;
       margin: 0 auto;
       text-align: center;
   }

   .services-grid {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       gap: 50px;
       margin-top: 40px;
   }

   /* 服务卡片样式 */
   .service-card {
       background: #16181E;
       border-radius: 12px;
       padding: 30px;
       transition: all 0.4s ease;
       position: relative;
       overflow: hidden;
       cursor: pointer;
       border: 1px solid #44424B;
   }

   /* 卡片悬停效果 */
   .service-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
   }

   /* 发光边框效果 */
   .service-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       border-radius: 12px;
       padding: 2px;
       background: linear-gradient(45deg, #8D64F2, #7550DD);
       -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       opacity: 0;
       transition: opacity 0.4s ease;
   }

   .service-card:hover::before {
       opacity: 1;
   }

   .card-icon {
       width: 48px;
       height: 48px;
       margin-bottom: 20px;
       transition: transform 0.4s ease;
   }

   .service-card:hover .card-icon {
       transform: scale(1.1) rotate(5deg);
   }

   .card-title {
       color: #ffffff;
       font-size: 18px;
       margin-bottom: 16px;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .text-purple {
       color: #8D64F2;
   }

   .card-desc {
       color: #BCC3D7;
       font-size: 14px;
       line-height: 1.6;
       margin: 0;
   }

   /* 渐入动画 */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

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

   .service-card {
       animation: fadeInUp 0.6s ease forwards;
   }

   /* 为每个卡片设置不同的动画延迟 */
   .service-card:nth-child(2) {
       animation-delay: 0.2s;
   }

   .service-card:nth-child(3) {
       animation-delay: 0.4s;
   }

   .service-card:nth-child(4) {
       animation-delay: 0.6s;
   }

   .service-card:nth-child(5) {
       animation-delay: 0.8s;
   }

   .service-card:nth-child(6) {
       animation-delay: 1s;
   }

   /* 响应式调整 */
   @media (max-width: 992px) {
       .services-grid {
           grid-template-columns: repeat(2, 1fr);
       }
   }

   @media (max-width: 576px) {
       .services-grid {
           grid-template-columns: 1fr;
       }
   }


   /* 优势展示区域样式 */
   .advantages-section-wrapper {
       background: #16181E;
   }

   .advantages-section {
       padding: 100px 0 80px 0;
       position: relative;
       overflow: hidden;
       width: 57vw;
       margin: 0 auto;
   }

   /* 头部样式 */
   .section-header {
       text-align: center;
       margin-bottom: 60px;
       position: relative;
   }

   .rating-bubble {
       border-radius: 20px;
       padding: 8px 16px;
       display: inline-block;
       margin-bottom: 20px;
       position: absolute;
       left: 0;
       top: -50px;
   }


   .section-title {
       color: #fff;
       font-size: 24px;
       margin-bottom: 20px;
   }

   .section-subtitle {
       color: #fff;
       font-size: 36px;
       margin-bottom: 30px;
   }

   .desc-wrapper {
       display: flex;
       align-items: center;
       font-size: 17px;
       gap: 20px;
       max-width: 800px;
       margin: 0 auto;
   }

   .section-desc {
       color: #BCC3D7;
       font-size: 16px;
       line-height: 1.6;
   }

   .avatar-wrapper {
       margin-left: 30px;
   }

   .avatar-wrapper img {
       width: 129px;
       object-fit: contain;
   }

   /* 装饰图形 */
   .decoration-shape {
       width: 50%;
   }

   /* 特性卡片网格 */
   .features-grid {
       display: grid;
       grid-template-columns: repeat(4, 1fr);
       gap: 30px;
   }

   /* 特性卡片样式 */
   .feature-card {
       background: #0E0C15;
       border-radius: 16px 80px 16px 16px;
       padding: 40px;
       transition: all 0.4s ease;
       cursor: pointer;
       position: relative;
       overflow: hidden;
       border: 1px solid #44424B;
       height: 293px;
   }

   /* 卡片悬停效果 */
   .feature-card:hover {
       transform: translateY(-10px);
       background: rgba(141, 100, 242, 0.1);
       border-radius: 16px 80px 16px 16px;
   }

   /* 发光边框效果 */
   .feature-card::after {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       border-radius: 16px 80px 16px 16px;
       border: 1px solid transparent;
       background: linear-gradient(45deg, #8D64F2, #8D64F2) border-box;
       -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
       mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
       -webkit-mask-composite: xor;
       mask-composite: exclude;
       opacity: 0;
       transition: opacity 0.3s ease;
   }

   .feature-card:hover::after {
       opacity: 1;
   }

   .icon-wrapper {
       width: 48px;
       height: 48px;
       margin-bottom: 20px;
   }

   .feature-icon {
       width: 100%;
       height: 100%;
       fill: #8D64F2;
       transition: transform 0.3s ease;
   }

   .feature-card:hover .feature-icon {
       transform: scale(1.1) rotate(10deg);
   }

   .feature-card h4 {
       color: #ffffff;
       font-size: 18px;
       margin-bottom: 12px;
       margin-top: 40px;
   }

   .feature-card p {
       color: #BCC3D7;
       font-size: 15px;
       line-height: 2.3;
       margin-top: 20px;
   }

   /* 响应式调整 */
   @media (max-width: 1200px) {
       .features-grid {
           grid-template-columns: repeat(2, 1fr);
           gap: 20px;
       }
   }

   @media (max-width: 768px) {
       .features-grid {
           grid-template-columns: 1fr;
       }

       .decoration-shape {
           display: none;
       }

       .desc-wrapper {
           flex-direction: column;
           text-align: center;
       }
   }


   .service-flow {
       padding: 80px 0;
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 57vw;
       margin: 0 auto;
   }

   .flow-title {
       color: #fff;
       font-size: 28px;
       margin-bottom: 60px;
       text-align: center;
   }

   .flow-container {
       display: flex;
       justify-content: center;
       align-items: center;
       max-width: 1200px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .flow-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       width: 220px;
       opacity: 0;
       transform: translateY(20px);
       animation: fadeInUp 0.6s ease forwards;
   }

   /* 为每个item设置不同的动画延迟 */
   .flow-item:nth-child(1) {
       animation-delay: 0.2s;
   }

   .flow-item:nth-child(3) {
       animation-delay: 0.4s;
   }

   .flow-item:nth-child(5) {
       animation-delay: 0.6s;
   }

   .flow-item:nth-child(7) {
       animation-delay: 0.8s;
   }

   .flow-icon {
       width: 88px;
       height: 88px;
       background: rgba(141, 100, 242, 0.1);
       border-radius: 16px;
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 20px;
       transition: all 0.3s ease;
   }

   .flow-icon img {
       width: 80%;
       margin: 0 auto;
       transition: all 0.3s ease;
   }

   .flow-item .flow-icon {
       background-color: #16181E;
       border: 1px solid #44424B;
   }

   .flow-item:hover .flow-icon {
       transform: translateY(-10px);

   }

   .flow-item:hover .flow-icon img {
       transform: scale(1.1);
   }

   .step-number {
       color: #9094A0;
       font-size: 14px;
       margin-bottom: 8px;
   }

   .flow-content h3 {
       color: #fff;
       font-size: 18px;
       margin-bottom: 12px;
   }

   .flow-content p {
       color: #BCC3D7;
       font-size: 15px;
       line-height: 1.6;
   }

   .flow-connector {
       width: 100px;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .connector-path {
       fill: none;
       stroke: #8D64F2;
       stroke-width: 2;
       stroke-dasharray: 100;
       stroke-dashoffset: 100;
       animation: drawLine 1.5s ease forwards;
       opacity: 0.3;
   }

   /* 动画定义 */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

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

   @keyframes drawLine {
       to {
           stroke-dashoffset: 0;
       }
   }

   /* 鼠标悬停效果 */
   .flow-item:hover {
       transform: translateY(-5px);
   }

   /* 响应式设计 */
   @media (max-width: 992px) {
       .flow-container {
           flex-direction: column;
       }

       .flow-connector {
           transform: rotate(90deg);
           margin: 20px 0;
       }

       .flow-item {
           width: 100%;
           max-width: 300px;
           margin: 20px 0;
       }
   }

   /* 分割线 */
   .consultation-section {
       padding: 80px 0;
       background: #16181E;
       text-align: center;
   }

   .section-title {
       color: #ffffff;
       font-size: 28px;
       margin-bottom: 16px;
   }

   .section-desc {
       color: #BCC3D7;
       font-size: 16px;
       margin-bottom: 40px;
   }

   .form-wrapper {
       max-width: 800px;
       margin: 0 auto;
       padding: 0 20px;
   }

   .consultation-form {
       background: rgba(255, 255, 255, 0.05);
       border-radius: 16px;
       padding: 30px;
       backdrop-filter: blur(10px);
   }

   .form-row {
       display: flex;
       gap: 20px;
       margin-bottom: 20px;
   }

   .form-group {
       flex: 1;
       text-align: left;
   }

   .form-group.full-width {
       width: 100%;
   }

   label {
       display: block;
       color: #BCC3D7;
       margin-bottom: 8px;
       font-size: 14px;
   }

   input,
   textarea {
       width: 100%;
       padding: 12px 16px;
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 8px;
       color: #ffffff;
       font-size: 14px;
       transition: all 0.3s ease;
   }

   input:focus,
   textarea:focus {
       outline: none;
       border-color: #8D64F2;
       box-shadow: 0 0 0 2px rgba(141, 100, 242, 0.2);
   }

   textarea {
       resize: vertical;
       min-height: 120px;
   }

   .submit-btn {
       background: #8D64F2;
       color: #ffffff;
       border: none;
       border-radius: 8px;
       padding: 14px 40px;
       font-size: 16px;
       cursor: pointer;
       transition: all 0.3s ease;
       margin-top: 20px;
   }

   .submit-btn:hover {
       background: #9D7AF2;
       transform: translateY(-2px);
   }

   /* 输入框动画效果 */
   @keyframes focusIn {
       from {
           transform: scale(0.98);
           opacity: 0.8;
       }

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

   input:focus,
   textarea:focus {
       animation: focusIn 0.2s ease;
   }

   /* 响应式调整 */
   @media (max-width: 768px) {
       .form-row {
           flex-direction: column;
           gap: 15px;
       }

       .consultation-form {
           padding: 20px;
       }

       .submit-btn {
           width: 100%;
       }
   }

   .form-wrapper input::placeholder {
       color: #ababac;
   }

   .form-wrapper textarea::placeholder {
       color: #ababac;
   }


   .form-group textarea {
       background-color: transparent;
       color: #ffffff;
   }

   .form-wrapper input {
       color: #ffffff;
   }

   .form-group textarea:focus {
       border-color: #7550DD !important;
   }

   
   @media (max-width: 576px) {
    .services-section {
        width: 92vw;
    }

    .advantages-section{
         width: 92vw;
    }

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

    .hero-title{
     font-size: 26px;
    }

    .rating-bubble img{
        display: none;
    }
}