@layer utilities {
     .content-auto {
         content-visibility: auto;
     }

     /* 渐变文字 */
     .text-gradient {
         background: linear-gradient(90deg, #165DFF, #0FC6C2);
         background-clip: text;
         -webkit-text-fill-color: transparent;
     }

     /* 一级菜单hover底部渐变线条 */
     .nav-line {
         position: relative;
     }

     .nav-line::after {
         content: '';
         position: absolute;
         bottom: -2px;
         left: 0;
         width: 0;
         height: 2px;
         background: linear-gradient(90deg, #165DFF, #0FC6C2);
         transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
         border-radius: 1px;
     }

     .nav-line:hover::after {
         width: 100%;
     }

     /* 一级菜单hover上浮+文字渐变 */
     .nav-item {
         transition: all 0.3s ease;
     }

     .nav-item:hover {
         transform: translateY(-2px);
         color: #165DFF;
     }

     /* 二级菜单项hover渐变背景（强制单行） */
     .submenu-item {
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         white-space: nowrap;
         /* 核心：强制文字单行显示 */
     }

     .submenu-item::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, rgba(22, 93, 255, 0.05), rgba(15, 198, 194, 0.05));
         opacity: 0;
         transition: opacity 0.3s ease;
         z-index: 0;
     }

     .submenu-item:hover::before {
         opacity: 1;
     }

     /* 桌面端二级菜单横向展开动画 */
     .submenu-wrapper {
         opacity: 0;
         visibility: hidden;
         transform: translateY(5px);
         transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }

     .nav-parent:hover .submenu-wrapper {
         opacity: 1;
         visibility: visible;
         transform: translateY(0);
     }

     /* 移动端菜单滑出动画 */
     .mobile-menu {
         transform: translateX(100%);
         transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     }

     .mobile-menu.active {
         transform: translateX(0);
     }

     /* 移动端遮罩 */
     .mobile-overlay {
         opacity: 0;
         visibility: hidden;
         transition: opacity 0.3s ease, visibility 0.3s ease, backdrop-filter 0.3s ease;
         backdrop-filter: blur(0);
     }

     .mobile-overlay.active {
         opacity: 1;
         visibility: visible;
         backdrop-filter: blur(5px);
     }

     /* 新增：轮播组件样式 */
     .carousel-container {
         position: relative;
         width: 100%;
         overflow: hidden;
     
         /* 核心修改1：固定banner整体高度为500px */
     }

     .carousel-slides {
         display: flex;
         transition: transform 0.5s ease-in-out;
         width: 100%;
         height: 100%;
         /* 让轮播容器继承父级500px高度 */
     }

     .carousel-slide {
         flex: 0 0 100%;
         width: 100%;
         height: 100%;
         /* 让单张轮播图容器继承高度 */

     }

     .carousel-slide img {
         width: 100%;
         /* 宽度100%显示 */
         height: 100%;
         /* 高度继承容器的500px */
         object-fit: cover;
         min-height: 300px;
         /* 核心：按比例缩放，填满容器且不变形 */
         object-position: center;
         /* 可选：控制图片显示区域（居中/顶部/底部等） */
     }

     .carousel-control {
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
         width: 48px;
         height: 48px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.8);
         color: #165DFF;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: all 0.3s ease;
         z-index: 10;
     }

     .carousel-control:hover {
         background: #165DFF;
         color: white;
     }

     .carousel-control.prev {
         left: 20px;
     }

     .carousel-control.next {
         right: 20px;
     }

     .carousel-indicators {
         position: absolute;
         bottom: 20px;
         left: 50%;
         transform: translateX(-50%);
         display: flex;
         gap: 8px;
         z-index: 10;
     }

     .carousel-indicator {
         width: 12px;
         height: 12px;
         border-radius: 50%;
         background: rgba(255, 255, 255, 0.6);
         cursor: pointer;
         transition: all 0.3s ease;
     }

     .carousel-indicator.active {
         background: #165DFF;
         width: 24px;
         border-radius: 6px;
     }

     /* 响应式适配：移动端调整控件大小和位置 */
     @media (max-width: 768px) {
         .carousel-container {
             height:300px;
             /* 移动端banner高度适配，可根据需求调整 */
         }

         .carousel-control {
             width: 36px;
             height: 36px;
         }

          .carousel-slide img {
            min-height: 300px;
          }
         .carousel-control.prev {
             left: 10px;
         }

         .carousel-control.next {
             right: 10px;
         }
     }

     /* ========== 新增：渐变按钮样式 ========== */
     .btn-gradient {
         background: linear-gradient(90deg, #165DFF, #0FC6C2);
         transition: all 0.3s ease;
     }

     .btn-gradient:hover {
         /* hover时渐变略深，轻微上浮，添加阴影 */
         background: linear-gradient(90deg, #0F4ED8, #0DA8A5);
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
     }

     .btn-gradient:active {
         /* 点击时轻微缩放，恢复位置，减小阴影 */
         transform: translateY(0) scale(0.98);
         box-shadow: 0 2px 6px rgba(22, 93, 255, 0.15);
     }
 }
    .target-element5,
    .target-element2,
     .target-element3,
      .target-element4,
      .target-element1{
        display: grid;
        place-items: center;
        /* 替代flex的justify-center */
        grid-template-columns: repeat(1, minmax(0, 1fr));
        
        /* sm:grid-cols-1 */
        /* gap-1 */
    }


    /* lg 大屏（≥1024px）3列 */
    @media (min-width: 1024px) {
        .target-element5 {
            grid-template-columns: repeat(5, minmax(0, 1fr));
            /* lg:grid-cols-3 */
        }

        .target-element2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            /* lg:grid-cols-3 */
        }
          .target-element3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            /* lg:grid-cols-3 */
        }
           .target-element4 {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            /* lg:grid-cols-3 */
        }
    
    }