:root {
      --primary: #1aa7c8;
      --secondary: #36BFFA;
      --accent: #0FC6C2;
      --neutral: #1D2939;
      --neutral-light: #667085;
      --bg-light: #F9FAFB;
      --white: #FFFFFF;
      --gray-300: #D1D5DB;
      --gray-800: #1F2937;
      --gray-400: #9CA3AF;
      --gray-500: #6B7280;
      --amber-500: #F59E0B;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--white);
      color: var(--neutral);
      line-height: 1.6;
    }
    
    .container {
      width: 100%;
      max-width: 1560px;
      margin: 0 auto;
      padding: 0 20px;
    }
    
    /* 排版样式 */
    h1, h2, h3, h4, h5, h6 {
      font-weight: 700;
      line-height: 1.2;
    }
    
    h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
    }
    
    h2 {
      font-size: clamp(1.5rem, 3vw, 2.5rem);
    }
    
    h3 {
      font-size: 1.5rem;
    }
    
    h4 {
      font-size: 1.25rem;
    }
    
    p {
      color: var(--neutral-light);
    }
    
    a {
      text-decoration: none;
      color: inherit;
      transition: all 0.3s ease;
    }
    
    /* 通用间距类 */
    .mb-1 { margin-bottom: 0.5rem; }
    .mb-2 { margin-bottom: 1rem; }
    .mb-3 { margin-bottom: 1.5rem; }
    .mb-4 { margin-bottom: 2rem; }
    .mb-5 { margin-bottom: 2.5rem; }
    .mb-6 { margin-bottom: 3rem; }
    
    .mt-1 { margin-top: 0.5rem; }
    .mt-2 { margin-top: 1rem; }
    .mt-3 { margin-top: 1.5rem; }
    .mt-4 { margin-top: 2rem; }
    .mt-5 { margin-top: 2.5rem; }
    .mt-6 { margin-top: 3rem; }
    
    .py-1 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .py-2 { padding-top: 1rem; padding-bottom: 1rem; }
    .py-3 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .py-4 { padding-top: 2rem; padding-bottom: 2rem; }
    .py-5 { padding-top: 3rem; padding-bottom: 3rem; }
    .py-6 { padding-top: 4rem; padding-bottom: 4rem; }
    .py-7 { padding-top: 5rem; padding-bottom: 5rem; }
    
    .px-1 { padding-left: 0.5rem; padding-right: 0.5rem; }
    .px-2 { padding-left: 1rem; padding-right: 1rem; }
    .px-3 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .px-4 { padding-left: 2rem; padding-right: 2rem; }
    
    /* 布局工具类 */
    .text-center { text-align: center; }
    .text-primary { color: var(--primary); }
    .text-white { color: var(--white); }
    .text-neutral { color: var(--neutral); }
    .text-neutral-light { color: var(--neutral-light); }
    
    .bg-primary { background-color: var(--primary); }
    .bg-secondary { background-color: var(--secondary); }
    .bg-accent { background-color: var(--accent); }
    .bg-white { background-color: var(--white); }
    .bg-neutral { background-color: var(--neutral); }
    .bg-bg-light { background-color: var(--bg-light); }
    .bg-gradient-primary-secondary { background: linear-gradient(to right, var(--primary), var(--secondary)); }
    .bg-gradient-br { background: linear-gradient(to bottom right, rgba(22, 93, 255, 0.05), rgba(54, 191, 250, 0.05)); }
    
    .rounded { border-radius: 8px; }
    .rounded-full { border-radius: 9999px; }
    
    .shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
    .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
    .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }
    .shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
    .shadow-primary-20 { box-shadow: 0 10px 15px -3px rgba(22, 93, 255, 0.2); }
    
    .border { border: 1px solid var(--gray-300); }
    .border-primary { border-color: var(--primary); }
    
    .max-w-3xl { max-width: 48rem; }
    .mx-auto { margin-left: auto; margin-right: auto; }
    
    .flex { display: flex; }
    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .justify-center { justify-content: center; }
    .justify-between { justify-content: space-between; }
    .gap-2 { gap: 0.5rem; }
    .gap-3 { gap: 0.75rem; }
    .gap-4 { gap: 1rem; }
    .gap-5 { gap: 1.5rem; }
    .gap-6 { gap: 2rem; }
    
    .w-full { width: 100%; }
    .h-full { height: 100%; }
    
    .relative { position: relative; }
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    
    .overflow-hidden { overflow: hidden; }
    .object-cover { object-fit: cover; }
    
    .z-10 { z-index: 10; }
    .z-50 { z-index: 50; }
    .-z-10 { z-index: -10; }
    
    /* 交互样式 */
    .transition-all { transition: all 0.3s ease; }
    .transition-transform { transition: transform 0.3s ease; }
    .transition-colors { transition: color 0.3s ease, background-color 0.3s ease; }
    
    .hover\:scale-105:hover { transform: scale(1.05); }
    .hover\:scale-110:hover { transform: scale(1.1); }
    .hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
    .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
    .hover\:bg-primary-90:hover { background-color: rgba(22, 93, 255, 0.9); }
    .hover\:bg-primary-5:hover { background-color: rgba(22, 93, 255, 0.05); }
    .hover\:text-primary:hover { color: var(--primary); }
    
    /* 动画效果 */
    .animate-pulse {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    .filter-blur-3xl {
      filter: blur(48px);
    }
    
    /* 滚动动画类 */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    .fade-in.active {
      opacity: 1;
      transform: translateY(0);
    }
    
    .scale-in {
      opacity: 0;
      transform: scale(0.95);
      transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }
    
    .scale-in.active {
      opacity: 1;
      transform: scale(1);
    }
    
    .slide-in-left {
      opacity: 0;
      transform: translateX(-30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    .slide-in-left.active {
      opacity: 1;
      transform: translateX(0);
    }
    
    .slide-in-right {
      opacity: 0;
      transform: translateX(30px);
      transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    
    .slide-in-right.active {
      opacity: 1;
      transform: translateX(0);
    }
    
    /* 响应式样式 */
    @media (min-width: 768px) {
      .md\:flex-row { flex-direction: row; }
      .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
      .md\:w-1/2 { width: 50%; }
    }
    
    @media (min-width: 1024px) {
      .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
      .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
      .lg\:w-1/2 { width: 50%; }
      .lg\:w-1/3 { width: 33.333%; }
      .lg\:w-1/4 { width: 25%; }
    }
    
    /* 组件样式 */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.25rem 0.5rem;
      font-weight: 500;
      border-radius: 8px;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: var(--white);
      border: none;
    }
    
    .btn-primary:hover {
      background-color: rgba(22, 93, 255, 0.9);
      transform: translateY(-2px);
      box-shadow: 0 10px 15px -3px rgba(22, 93, 255, 0.2);
    }
    
    .btn-outline {
      background-color: transparent;
      color: #1aa7c8;
    border: 1px solid #1aa7c8;
      font-size: small;
    }
    
    .btn-outline:hover {
      background-color: rgba(22, 93, 255, 0.05);
      transform: translateY(-2px);
    }
    
    .card {
      background-color: var(--white);
      border-radius: 3px;
      padding: 2rem;
      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);
    }
    
    .badge {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 500;
      background-color: rgba(22, 93, 255, 0.1);
      color: var(--primary);
    }
    
    .grid {
      display: grid;
      gap: 2rem;
    }
    
    /* 导航栏样式 */
    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      background-color: #ffffff;
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      z-index: 50;
      transition: all 0.3s ease;
          border-bottom: 18px solid rgb(26 167 200);
    }
    
    .nav-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-weight: 700;
      font-size: 1.25rem;
      color: var(--primary);
    }
    
    .logo-icon {
      width: 2.5rem;
      height: 2.5rem;
      background-color: var(--primary);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .nav-links {
      display: none;
      gap: 2rem;
      text-transform: uppercase;
    }
    
    .nav-links a {
      color: var(--neutral-light);
      font-weight: 500;
    }
    
    .nav-links a:hover {
      color: var(--primary);
      font-weight: 600;
    }
    
    .mobile-menu-btn {
      display: block;
      font-size: 1.5rem;
      color: var(--neutral);
      background: none;
      border: none;
      cursor: pointer;
    }
    
    .mobile-menu {
      display: none;
      padding: 1rem 0;
      border-top: 1px solid var(--gray-300);
    }
    
    .mobile-menu a {
      display: block;
      padding: 0.75rem 0;
      color: var(--neutral-light);
    }
    
    .mobile-menu a:hover {
      color: var(--primary);
    }
    
    .mobile-menu a:last-child {
      background-color: var(--primary);
      color: var(--white);
      text-align: center;
      border-radius: 8px;
      margin-top: 0.5rem;
    }
    
    @media (min-width: 768px) {
      .nav-links {
        display: flex;
      }
      
      .mobile-menu-btn {
        display: none;
      }
      
      .mobile-menu {
        display: none !important;
      }
    }
    
/* 移动端滑出菜单样式 */
.slide-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.3s, opacity 0.3s;
}

/* 遮罩层 */
.slide-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background 0.3s;
}

/* 菜单内容 */
.slide-menu-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background: #fff;
  transform: translateX(-100%);
  transition: transform 0.3s ease-in-out;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}

/* 菜单头部 */
.slide-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.slide-menu-title {
  font-size: 1.2rem;
  font-weight: 600;
  color: #2c3e50;
}

.slide-menu-close {
  background: transparent;
  border: none;
  color: #2c3e50;
  cursor: pointer;
  padding: 0.5rem;
  transition: color 0.3s;
}

.slide-menu-close:hover {
  color: #e67e22;
}

/* 菜单链接 */
.slide-menu-links {
  padding: 1rem 0;
}

.slide-menu-links li {
  border-bottom: 1px solid #f8f9fa;
}

.slide-menu-links a {
  display: block;
  padding: 1.2rem 1.5rem;
  color: #2c3e50;
  font-size: 1rem;
  transition: all 0.3s;
}

.slide-menu-links a:hover {
  background: #f8f9fa;
  color: #e67e22;
  padding-left: 1.8rem;
}

/* 菜单激活状态 */
.slide-menu.active {
  visibility: visible;
  opacity: 1;
}

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

/* 隐藏原有移动端菜单样式 */
.mobile-menu {
  display: none !important;
}

/* 适配小屏幕 */
@media (max-width: 375px) {
  .slide-menu-content {
    width: 90%;
  }
}