/* ============================================
   液态玻璃 (Liquid Glass) 设计系统
   灵感来源：Apple WWDC 2025 Liquid Glass
   ============================================ */

/* ---------- 基础液态玻璃面板 ---------- */
.liquid-glass {
  position: relative;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 24px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px 1px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.liquid-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.1) 25%,
    rgba(255, 255, 255, 0.02) 50%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

.liquid-glass::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid transparent;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.15) 15%,
    transparent 40%
  ) 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;
  pointer-events: none;
  z-index: 2;
}

/* 悬停效果 */
.liquid-glass:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    inset 0 -1px 1px rgba(0, 0, 0, 0.1);
  transform: translateY(-3px);
}

/* ---------- 液态玻璃卡片 ---------- */
.liquid-glass-card {
  position: relative;
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.15),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.liquid-glass-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.08) 30%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

.liquid-glass-card:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.2),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px) scale(1.01);
}

/* ---------- 液态玻璃按钮 ---------- */
.liquid-glass-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 32px;
  font-size: 16px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.2),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  text-decoration: none;
}

.liquid-glass-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 50%
  );
  pointer-events: none;
  z-index: 1;
}

.liquid-glass-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow:
    0 6px 24px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.liquid-glass-btn:active {
  transform: translateY(0) scale(0.98);
}

/* 主按钮 - 强调色 */
.liquid-glass-btn-primary {
  background: rgba(108, 99, 255, 0.35);
  border-color: rgba(108, 99, 255, 0.5);
}

.liquid-glass-btn-primary:hover {
  background: rgba(108, 99, 255, 0.5);
  border-color: rgba(108, 99, 255, 0.65);
}

/* ---------- 液态玻璃导航 ---------- */
.liquid-glass-nav {
  background: rgba(5, 10, 20, 0.5);
  backdrop-filter: blur(50px) saturate(200%);
  -webkit-backdrop-filter: blur(50px) saturate(200%);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

/* ---------- 液态玻璃输入框 ---------- */
.liquid-glass-input,
.form-input,
.form-textarea {
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
  outline: none;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.liquid-glass-input::placeholder,
.form-input::placeholder,
.form-textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.liquid-glass-input:focus,
.form-input:focus,
.form-textarea:focus {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(108, 99, 255, 0.6) !important;
  box-shadow:
    0 0 0 3px rgba(108, 99, 255, 0.15),
    inset 0 1px 2px rgba(255, 255, 255, 0.1),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05);
}

/* ---------- 液态玻璃标签/徽章 ---------- */
.liquid-glass-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ---------- 液态玻璃分隔线 ---------- */
.liquid-glass-divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  margin: 24px 0;
}

/* ---------- 光晕效果 ---------- */
.liquid-glass-glow {
  position: relative;
}

.liquid-glass-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(108, 99, 255, 0.4),
    rgba(6, 182, 212, 0.4),
    rgba(139, 92, 246, 0.4)
  );
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.liquid-glass-glow:hover::before {
  opacity: 0.6;
}

/* ---------- 深色主题适配 ---------- */
@media (prefers-color-scheme: dark) {
  .liquid-glass,
  .liquid-glass-card,
  .liquid-glass-btn,
  .liquid-glass-input,
  .liquid-glass-badge {
    background: rgba(255, 255, 255, 0.05);
  }
}

/* ---------- 移动端优化 ---------- */
@media (max-width: 768px) {
  .liquid-glass {
    border-radius: 20px;
    backdrop-filter: blur(30px) saturate(150%);
    -webkit-backdrop-filter: blur(30px) saturate(150%);
  }
  
  .liquid-glass-card {
    border-radius: 16px;
  }
  
  .liquid-glass-btn {
    padding: 12px 24px;
    border-radius: 14px;
  }
}

/* ---------- 动画 ---------- */
@keyframes liquidGlassShine {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.liquid-glass-shine {
  position: relative;
  overflow: hidden;
}

.liquid-glass-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 50%,
    transparent 100%
  );
  animation: liquidGlassShine 3s ease-in-out infinite;
  pointer-events: none;
}

/* ============================================
   扩展液态玻璃组件 - 完整网站覆盖
   ============================================ */

/* ---------- 液态玻璃页脚 ---------- */
.liquid-glass-footer {
  background: rgba(5, 10, 20, 0.35);
  backdrop-filter: blur(60px) saturate(200%);
  -webkit-backdrop-filter: blur(60px) saturate(200%);
  border-top: 1.5px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.2);
}

.liquid-glass-footer-grid {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: var(--space-xl);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.liquid-glass-footer-brand {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 24px;
  padding: var(--space-2xl);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.liquid-glass-footer-links {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: var(--space-lg);
  box-shadow:
    0 2px 12px rgba(0, 0, 0, 0.1),
    inset 0 1px 1px rgba(255, 255, 255, 0.06);
}

/* ---------- 液态玻璃勾选图标 ---------- */
.liquid-glass-check {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(255, 255, 255, 0.1) inset;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.liquid-glass-check:hover {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(255, 255, 255, 0.15) inset;
  transform: scale(1.05);
}

.liquid-glass-check::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    transparent 50%
  );
  pointer-events: none;
}

/* ---------- 液态玻璃技术栈卡片 ---------- */
.liquid-glass-tech-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(255, 255, 255, 0.08) inset;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.liquid-glass-tech-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.12) 0%,
    rgba(255, 255, 255, 0.03) 30%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 1;
}

.liquid-glass-tech-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(255, 255, 255, 0.12) inset;
  transform: translateY(-5px);
}

/* 液态玻璃技术项 */
.liquid-glass-tech-item {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: var(--space-md) var(--space-lg);
  box-shadow: 
    0 2px 12px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(255, 255, 255, 0.05) inset;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.liquid-glass-tech-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(255, 255, 255, 0.1) inset;
  transform: translateY(-2px) scale(1.02);
}

/* ---------- 液态玻璃案例卡片 ---------- */
.liquid-glass-case-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(40px) saturate(150%);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 1px 3px rgba(255, 255, 255, 0.08) inset;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, border-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease, opacity 0.4s ease;
}

.liquid-glass-case-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

.liquid-glass-case-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(255, 255, 255, 0.12) inset;
  transform: translateY(-5px);
}

/* ---------- 液态玻璃CTA区域 ---------- */
.liquid-glass-cta {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(50px) saturate(180%);
  -webkit-backdrop-filter: blur(50px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 32px;
  padding: var(--space-4xl);
  box-shadow: 
    0 8px 48px rgba(0, 0, 0, 0.15),
    0 1px 3px rgba(255, 255, 255, 0.05) inset;
}

.liquid-glass-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(108, 99, 255, 0.08) 0%,
    rgba(255, 255, 255, 0.05) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 1;
}

/* ---------- 液态玻璃标签 ---------- */
.liquid-glass-tag {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 1px 2px rgba(255, 255, 255, 0.05) inset;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.liquid-glass-tag:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.2);
}

/* ---------- 液态玻璃分隔线 ---------- */
.liquid-glass-divider-vertical {
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  height: 40px;
}

/* ============================================
   批量覆盖 - 为已有卡片类自动添加液态玻璃
   ============================================ */

/* 服务卡片 */
.service-card,
.service-detail-card {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(60px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(220%) !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

.service-card::before,
.service-detail-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 55% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.15) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.service-card::after,
.service-detail-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 2px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.4) 10%,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0.25) 100%
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.service-card:hover,
.service-detail-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 0 20px rgba(255, 255, 255, 0.1) inset !important;
  transform: translateY(-5px);
}

/* 案例卡片 */
.case-card {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(60px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(220%) !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

.case-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 45% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.12) 30%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.case-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 2px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.4) 10%,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0.25) 100%
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.case-card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 0 20px rgba(255, 255, 255, 0.1) inset !important;
  transform: translateY(-5px);
}

/* 通用卡片 */
.about-section .card {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(60px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(220%) !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

.about-section .card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 55% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.15) 25%,
    rgba(255, 255, 255, 0.05) 50%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.about-section .card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 2px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.4) 10%,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0.25) 100%
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.about-section .card:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 -1px 0 rgba(0, 0, 0, 0.25) inset,
    0 0 20px rgba(255, 255, 255, 0.1) inset !important;
  transform: translateY(-5px);
}

/* 时间线项目 */
.timeline-item {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(60px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(220%) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 20px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.45) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
}

.timeline-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 2px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0.35) 12%,
    rgba(255, 255, 255, 0.18) 28%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0.06) 75%,
    rgba(255, 255, 255, 0.2) 100%
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* 折叠面板 */
.accordion-item {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(50px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
  border: 2px solid rgba(255, 255, 255, 0.38) !important;
  border-radius: 16px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.3),
    0 1px 0 rgba(255, 255, 255, 0.4) inset !important;
}

.accordion-item::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 2px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.3) 15%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.08) 55%,
    rgba(255, 255, 255, 0.06) 78%,
    rgba(255, 255, 255, 0.18) 100%
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

.accordion-item.active {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.accordion-header:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* 标签 - 全局覆盖 */
.tag {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(30px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(180%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
  position: relative !important;
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.25),
    0 1px 0 rgba(255, 255, 255, 0.35) inset !important;
}

.tag-dark {
  background: rgba(0, 0, 0, 0.25) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

/* 联系页面表单卡片 */
.contact-form-card,
.contact-info-card {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(60px) saturate(220%) !important;
  -webkit-backdrop-filter: blur(60px) saturate(220%) !important;
  border: 2px solid rgba(255, 255, 255, 0.45) !important;
  border-radius: 24px !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 -1px 0 rgba(0, 0, 0, 0.2) inset,
    0 0 0 1px rgba(255, 255, 255, 0.1) inset !important;
}

.contact-form-card::before,
.contact-info-card::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 45% !important;
  border-radius: inherit !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.12) 30%,
    rgba(255, 255, 255, 0.04) 55%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.contact-form-card::after,
.contact-info-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  padding: 2px !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.4) 10%,
    rgba(255, 255, 255, 0.2) 25%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0.25) 100%
  ) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

/* CTA区域 */
.cta-layout {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(50px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(50px) saturate(200%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  border-radius: 32px !important;
  box-shadow:
    0 8px 48px rgba(0, 0, 0, 0.2),
    inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
}