.hero-section {
    background: url(../images/xt/bg.jpg) no-repeat center center;
    background-size: cover;
    color: #055bb1;
    height: calc(100vh - 4rem);
  }

    /* 卡片样式 */
    .icon-circle {
      width: 3.5rem;
      height: 3.5rem;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      background: #055bb1;
      color: #fff;
    }
    .card {
      border-radius: 8px !important;
    }

    .feature-icon {
      width: 4rem;
      height: 4rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

  .card-hover {
      transition: all 0.3s ease;
  }
  
  .card-hover:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
  }
  
    /* 卡片悬停效果 */
    .hover-effect {
      transition: all 0.3s ease;
      border-radius: 0.5rem;
    }
    .hover-effect:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15) !important;
    }
            
        /* 卡片样式优化 */
        .feature-card {
            border: none !important;
            overflow: hidden;
            height: 100%;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            background: white;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
        }
        
        
        .card-content {
            padding: 1.4rem;
            position: relative;
            z-index: 2;
        }
        /* 图标容器优化 */
        .icon-container {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 25px;
            transition: all 0.3s ease;
        }
        
        /* 颜色主题 */
        .bg-primary-light {
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.15) 0%, rgba(41, 128, 185, 0.15) 100%);
            color: #2980b9;
        }
        
        .bg-success-light {
            background: linear-gradient(135deg, rgba(46, 204, 113, 0.15) 0%, rgba(39, 174, 96, 0.15) 100%);
            color: #27ae60;
        }
        
        .bg-warning-light {
            background: linear-gradient(135deg, rgba(241, 196, 15, 0.15) 0%, rgba(243, 156, 18, 0.15) 100%);
            color: #f39c12;
        }
        
        .bg-danger-light {
            background: linear-gradient(135deg, rgba(231, 76, 60, 0.15) 0%, rgba(192, 57, 43, 0.15) 100%);
            color: #c0392b;
        }
        
        .bg-info-light {
            background: linear-gradient(135deg, rgba(52, 152, 219, 0.15) 0%, rgba(155, 89, 182, 0.15) 100%);
            color: #9b59b6;
        }
        
        .bg-purple-light {
            background: linear-gradient(135deg, rgba(155, 89, 182, 0.15) 0%, rgba(142, 68, 173, 0.15) 100%);
            color: #8e44ad;
        }

        /* 便捷服务 */
        .convenient-service {
            background: url('../images/suse/sj.png') no-repeat center center;
            height: 35rem;
            /* background-size: auto 100%; */
        }
  
        .dashboard-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 6px 15px rgba(0,0,0,0.08);
            transition: all 0.3s ease;
            height: 100%;
            overflow: hidden;
            border: none;
        }
        
        .dashboard-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
        }
        
        .card-header {
            background: linear-gradient(120deg, #4b6cb7 0%, #182848 100%);
            color: white;
            border: none;
            padding: 1.2rem 1.5rem;
            font-weight: 600;
        }
        
        .card-icon {
            font-size: 2.5rem;
            margin-right: 15px;
            color: rgba(255,255,255,0.8);
        }
        
        .stats-container {
            padding: 1.5rem;
        }
        
        .stat-card {
            background: white;
            border-radius: 10px;
            padding: 1.5rem;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }
        
        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.1);
        }
        
        .stat-icon {
            font-size: 2.5rem;
            margin-bottom: 15px;
            color: var(--primary);
        }
        
        .stat-number {
            font-size: 2.2rem;
            font-weight: 700;
            margin: 10px 0;
            color: var(--primary);
        }
        
        .progress {
            height: 12px;
            border-radius: 10px;
            margin: 15px 0;
        }
        
        .system-img {
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            margin-bottom: 20px;
        }
        
        .system-img:hover {
            transform: scale(1.02);
            box-shadow: 0 8px 20px rgba(0,0,0,0.15);
        }
        
        .integration-badge {
            font-size: 0.85rem;
            padding: 0.5em 0.8em;
            margin-right: 0.5rem;
            margin-bottom: 0.5rem;
            background: linear-gradient(120deg, #3498db, #2c3e50);
            color: white;
        }
        
        .feature-list li {
            padding: 0.5rem 0;
            border-bottom: 1px dashed #eee;
        }
        
        .feature-list li:last-child {
            border-bottom: none;
        }
        
        .feature-list i {
            color: var(--success);
            margin-right: 10px;
        }
        
        .table th {
            background: linear-gradient(120deg, #4b6cb7 0%, #182848 100%);
            color: white;
        }

        .system-diagram {
            background: white;
            border-radius: 12px;
            /* padding: 20px; */
            /* box-shadow: 0 6px 15px rgba(0,0,0,0.08); */
        }
        
        .diagram-title {
            text-align: center;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--primary);
            border-bottom: 2px solid var(--primary);
            padding-bottom: 10px;
        }
        
        .integration-node {
            text-align: center;
            padding: 15px;
            background: linear-gradient(120deg, #3498db, #2c3e50);
            color: white;
            border-radius: 8px;
            margin-bottom: 10px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .integration-node i {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .connector {
            height: 30px;
            width: 4px;
            background: #3498db;
            margin: 0 auto 20px;
        }