

<!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      .card-hover {
        @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
      }
      .section-padding {
        @apply py-12 md:py-16 lg:py-20;
      }
      .dropdown-hover:hover .dropdown-menu {
        @apply opacity-100 visible;
      }
      .dropdown-menu {
        @apply absolute left-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 opacity-0 invisible transition-all duration-200 z-50;
      }
    }
  </style>
  
  <!-- 自定义CSS -->
  <style>
    /* 全局样式重置与基础设置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      scroll-behavior: smooth;
      background-color: #FFF5F8; /* 超浅粉色背景 */
    }
    
    /* 渐变背景效果 */
    .gradient-bg {
      background: linear-gradient(135deg, #FF6B8B 0%, #D9214E 100%);
    }
    
    /* 滚动条样式优化 */
    ::-webkit-scrollbar {
      width: 8px;
    }
    
    ::-webkit-scrollbar-track {
      background: #FFC1D5;
    }
    
    ::-webkit-scrollbar-thumb {
      background: #D9214E;
      border-radius: 4px;
    }
    
    ::-webkit-scrollbar-thumb:hover {
      background: #8C1C33;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .animate-fade-in {
      animation: fadeIn 0.8s ease forwards;
    }
    
    /* 延迟动画效果，用于滚动时的渐显 */
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
    
    /* 导航栏样式 - 明确的浅色背景 */
    .navbar-main {
      background-color: #ffffff; /* 纯白色背景，确保可见 */
      box-shadow: 0 2px 10px rgba(217, 33, 78, 0.1); /* 淡红色阴影增强视觉效果 */
    }
    
    /* 下拉菜单项 hover 效果 */
    .dropdown-item {
      transition: all 0.2s ease;
    }
    
    .dropdown-item:hover {
      background-color: #FFF5F8;
      color: #D9214E;
      padding-left: 1.25rem; /* hover时轻微缩进，增强交互感 */
    }
    
    /* 移动端下拉菜单样式 */
    .mobile-dropdown-menu {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease-out;
    }
    
    .mobile-dropdown-open {
      max-height: 500px;
      transition: max-height 0.5s ease-in;
    }
  </style>