/* ============================================================
   三顺软件官网 - IE11/Edge44 完全兼容 CSS
   不使用 CSS 变量、CSS Grid、gap、aspect-ratio、backdrop-filter
   ============================================================ */

/* === Reset === */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'SimSun', 'STSong', serif;
  background: #0a0a0f;
  color: #cbd5e1;
  min-height: 100vh;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }

/* === 颜色工具类 (直接写值,不用 var()) === */
.bg-ink-950 { background-color: #0a0a0f; }
.bg-ink-950\/80 { background-color: rgba(10,10,15,0.8); }
.bg-ink-900\/40 { background-color: rgba(18,18,26,0.4); }
.bg-ink-900\/60 { background-color: rgba(18,18,26,0.6); }
.bg-ink-800\/40 { background-color: rgba(26,26,38,0.4); }
.bg-ink-800\/60 { background-color: rgba(26,26,38,0.6); }
.bg-electric-500\/5 { background-color: rgba(36,128,255,0.05); }
.bg-electric-500\/10 { background-color: rgba(36,128,255,0.1); }
.bg-electric-600\/5 { background-color: rgba(0,102,255,0.05); }
.bg-electric-400 { background-color: #4d9fff; }
.bg-neon-500\/5 { background-color: rgba(0,221,181,0.05); }
.bg-neon-500\/10 { background-color: rgba(0,221,181,0.1); }
.bg-neon-400 { background-color: #00ffcc; }
.bg-neon-500 { background-color: #00ddb5; }
.text-white { color: #fff; }
.text-slate-200 { color: #cbd5e1; }
.text-slate-300 { color: #cbd5e1; }
.text-slate-400 { color: #94a3b8; }
.text-slate-500 { color: #64748b; }
.text-slate-600 { color: #475569; }
.text-electric-400 { color: #4d9fff; }
.text-neon-400 { color: #00ffcc; }
.text-violet-400 { color: #a78bfa; }
.text-ink-950 { color: #0a0a0f; }

/* === 边框 === */
.border { border-width: 1px; border-style: solid; border-color: #252533; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgba(37,37,51,0.5); }
.border-t { border-top-width: 1px; border-top-style: solid; border-top-color: rgba(37,37,51,0.3); }
.border-dashed { border-style: dashed; }
.border-ink-600 { border-color: #333344; }
.border-ink-700 { border-color: #252533; }
.border-ink-700\/30 { border-color: rgba(37,37,51,0.3); }
.border-ink-700\/50 { border-color: rgba(37,37,51,0.5); }
.border-electric-500\/20 { border-color: rgba(36,128,255,0.2); }
.border-electric-500\/30 { border-color: rgba(36,128,255,0.3); }
.border-neon-500\/20 { border-color: rgba(0,221,181,0.2); }
.border-neon-500\/30 { border-color: rgba(0,221,181,0.3); }
.border-violet-500\/30 { border-color: rgba(139,92,246,0.3); }

/* === 布局 === */
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.left-1\/2 { left: 50%; }
.top-20 { top: 5rem; }
.left-20 { left: 5rem; }
.right-20 { right: 5rem; }
.z-50 { z-index: 50; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-4 { margin-left: 1rem; margin-right: 1rem; }
.overflow-hidden { overflow: hidden; }
.min-h-screen { min-height: 100vh; }

/* === flex (IE11 需要 -ms- 前缀) === */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.inline-flex {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}
.hidden { display: none; }
.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; }
.flex-shrink { -ms-flex-negative: 1; flex-shrink: 1; }
.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.justify-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

/* === grid → 用 flex 代替 (IE11 grid 兼容性太差) === */
.grid {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.grid-cols-2 > *,
.grid-cols-3 > * {
  -ms-flex-preferred-size: 0;
  -ms-flex-negative: 0;
  flex-basis: 0;
}

/* 2列: 每项 50% */
.grid-cols-2 > * {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 50%;
  max-width: 50%;
}

/* 3列: 每项 33.33% */
.grid-cols-3 > * {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  width: 33.33%;
  max-width: 33.33%;
}

/* 响应式: md(768px+) */
@media (min-width: 768px) {
  .md\:flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .md\:grid-cols-2 > * {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 50%;
    max-width: 50%;
  }
  .md\:grid-cols-3 > * {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 33.33%;
    max-width: 33.33%;
  }
  .md\:grid-cols-4 > * {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 25%;
    max-width: 25%;
  }
  .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
  .md\:text-5xl { font-size: 3rem; line-height: 1.1; }
}

/* lg(1024px+) */
@media (min-width: 1024px) {
  .lg\:grid-cols-4 > * {
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    width: 25%;
    max-width: 25%;
  }
}

/* === gap → 用 margin 代替 (IE11 不支持 gap) === */
/* 父元素加负 margin 抵消子元素的 margin */
.gap-2 { margin-left: -0.5rem; margin-right: -0.5rem; }
.gap-2 > * { margin-left: 0.5rem; margin-right: 0.5rem; }

.gap-2\.5 { margin-left: -0.625rem; margin-right: -0.625rem; margin-top: -0.625rem; }
.gap-2\.5 > * { margin-left: 0.625rem; margin-right: 0.625rem; margin-top: 0.625rem; }

.gap-3 { margin-left: -0.75rem; margin-right: -0.75rem; }
.gap-3 > * { margin-left: 0.75rem; margin-right: 0.75rem; }

.gap-4 { margin-left: -1rem; margin-right: -1rem; }
.gap-4 > * { margin-left: 1rem; margin-right: 1rem; }

.gap-6 { margin-left: -1.5rem; margin-right: -1.5rem; }
.gap-6 > * { margin-left: 1.5rem; margin-right: 1.5rem; }

.gap-8 { margin-left: -2rem; margin-right: -2rem; }
.gap-8 > * { margin-left: 2rem; margin-right: 2rem; }

.gap-1\.5 { margin-left: -0.375rem; margin-right: -0.375rem; }
.gap-1\.5 > * { margin-left: 0.375rem; margin-right: 0.375rem; }

/* === 尺寸 === */
.w-2 { width: 0.5rem; }
.w-4 { width: 1rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-8 { width: 2rem; }
.w-9 { width: 2.25rem; }
.w-10 { width: 2.5rem; }
.w-12 { width: 3rem; }
.h-2 { height: 0.5rem; }
.h-4 { height: 1rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-10 { height: 2.5rem; }
.h-12 { height: 3rem; }
.h-\[500px\] { height: 500px; }
.h-\[600px\] { height: 600px; }
.w-\[500px\] { width: 500px; }
.w-\[600px\] { width: 600px; }

.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-6xl { max-width: 72rem; }

/* === 间距 === */
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.pt-16 { padding-top: 4rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-10 { margin-bottom: 2.5rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-12 { margin-top: 3rem; }

/* === 圆角 === */
.rounded { border-radius: 0.25rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-xl { border-radius: 0.75rem; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }

/* === 字体 === */
.font-display { font-family: 'Inter', system-ui, sans-serif; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-widest { letter-spacing: 0.1em; }
.leading-relaxed { line-height: 1.625; }
.leading-tight { line-height: 1.25; }
.text-left { text-align: left; }
.text-center { text-align: center; }

/* === 渐变 (独立类名,不用 CSS 变量) === */
/* Logo 渐变: electric → neon */
.grad-logo {
  background-color: #2480ff;
  background-image: -webkit-linear-gradient(315deg, #2480ff, #00ddb5);
  background-image: linear-gradient(135deg, #2480ff, #00ddb5);
}
/* 按钮渐变: electric */
.grad-btn-electric {
  background-color: #2480ff;
  background-image: -webkit-linear-gradient(left, #2480ff, #0066ff);
  background-image: linear-gradient(to right, #2480ff, #0066ff);
}
/* 按钮渐变: neon */
.grad-btn-neon {
  background-color: #00ddb5;
  background-image: -webkit-linear-gradient(left, #00ddb5, #00b894);
  background-image: linear-gradient(to right, #00ddb5, #00b894);
}
/* 产品图标背景: electric 半透明 */
.grad-icon-electric {
  background-color: rgba(36,128,255,0.15);
  background-image: -webkit-linear-gradient(315deg, rgba(36,128,255,0.2), rgba(0,102,255,0.2));
  background-image: linear-gradient(135deg, rgba(36,128,255,0.2), rgba(0,102,255,0.2));
}
/* 产品图标背景: neon 半透明 */
.grad-icon-neon {
  background-color: rgba(0,221,181,0.15);
  background-image: -webkit-linear-gradient(315deg, rgba(0,221,181,0.2), rgba(0,184,148,0.2));
  background-image: linear-gradient(135deg, rgba(0,221,181,0.2), rgba(0,184,148,0.2));
}
/* 产品图标背景: violet 半透明 */
.grad-icon-violet {
  background-color: rgba(139,92,246,0.15);
  background-image: -webkit-linear-gradient(315deg, rgba(139,92,246,0.2), rgba(124,58,237,0.2));
  background-image: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(124,58,237,0.2));
}
/* 联系卡片图标: electric → neon 半透明 */
.grad-icon-contact {
  background-color: rgba(36,128,255,0.15);
  background-image: -webkit-linear-gradient(315deg, rgba(36,128,255,0.2), rgba(0,221,181,0.2));
  background-image: linear-gradient(135deg, rgba(36,128,255,0.2), rgba(0,221,181,0.2));
}

/* === transform (不用 var()) === */
.-translate-x-1\/2 {
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

/* === 模糊背景 → IE11 降级为纯色 === */
/* backdrop-blur-md 在 IE11 中无效, bg-ink-950/80 已提供半透明背景 */

/* === blur-3xl → IE11 不支持, 隐藏装饰元素 === */
.blur-3xl { display: none; }

/* === aspect-video → 固定高度代替 === */
.aspect-video {
  height: 180px; /* 16:9 近似比例的固定高度 */
}

/* === 过渡 === */
.transition-colors {
  -webkit-transition: color 0.15s, background-color 0.15s, border-color 0.15s;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}
.transition-opacity {
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}
.transition {
  -webkit-transition: all 0.15s;
  transition: all 0.15s;
}

/* === hover === */
.hover\:border-electric-400:hover { border-color: #4d9fff; }
.hover\:border-electric-400\/40:hover { border-color: rgba(77,159,255,0.4); }
.hover\:border-electric-400\/50:hover { border-color: rgba(77,159,255,0.5); }
.hover\:border-neon-400\/40:hover { border-color: rgba(0,255,204,0.4); }
.hover\:border-neon-400\/50:hover { border-color: rgba(0,255,204,0.5); }
.hover\:border-violet-400\/50:hover { border-color: rgba(167,139,250,0.5); }
.hover\:text-white:hover { color: #fff; }
.hover\:text-slate-400:hover { color: #94a3b8; }
.hover\:text-electric-300:hover { color: #7ab8ff; }
.hover\:text-neon-300:hover { color: #33ffdd; }
.hover\:text-violet-300:hover { color: #c4b5fd; }
.hover\:opacity-90:hover { opacity: 0.9; }

/* === 动画 === */
@-webkit-keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse {
  -webkit-animation: pulse 2s ease-in-out infinite;
  animation: pulse 2s ease-in-out infinite;
}

/* === 自定义样式 === */
.gradient-text {
  background: -webkit-linear-gradient(135deg, #4d9fff, #00ffcc);
  background: linear-gradient(135deg, #4d9fff, #00ffcc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: #4d9fff; /* IE11 降级 */
}

.glow {
  -webkit-box-shadow: 0 0 30px rgba(36,128,255,0.15);
  box-shadow: 0 0 30px rgba(36,128,255,0.15);
}

/* === Banner 轮播 === */
.banner-slides {
  position: relative;
  height: 480px;
  overflow: hidden;
}
.banner-slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.banner-slide.active { opacity: 1; }

.banner-dots {
  position: absolute;
  bottom: 24px;
  left: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  z-index: 10;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}
.banner-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin: 0 4px;
  display: inline-block; /* IE11 flex 子元素需要 */
}
.banner-dot.active {
  background: #4d9fff;
  width: 30px;
  border-radius: 5px;
}

/* === 案例滚动 === */
.case-scroll {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-animation: scrollLeft 30s linear infinite;
  animation: scrollLeft 30s linear infinite;
  /* IE11 flex 子元素不会自动换行, 这里不需要换行 */
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
}
.case-scroll:hover {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
@-webkit-keyframes scrollLeft {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
@keyframes scrollLeft {
  0% { -webkit-transform: translateX(0); transform: translateX(0); }
  100% { -webkit-transform: translateX(-50%); transform: translateX(-50%); }
}
.case-item {
  min-width: 320px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin: 0 8px;
}

/* === 导航栏: 移动端隐藏菜单 === */
/* md:flex 在 768px+ 显示, 默认 hidden */