/* ============================================================
   即刻智能官网 · 体验优化样式层（experience-enhance.css）
   原则：不侵入编译产物样式，仅做增量覆盖；可整体摘除。
   品牌色 #0071E3 / #4DA3FF，与现有暗色科技风一致。
   ============================================================ */

/* ---------- 1. 无障碍：键盘焦点可见（WCAG 2.4.7） ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #4DA3FF;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- 2. 键盘跳转链接（Tab 第一项出现） ---------- */
.jk-skip-link {
  position: fixed;
  top: -60px;
  left: 16px;
  z-index: 100000;
  padding: 10px 18px;
  border-radius: 8px;
  background: #0071E3;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s ease;
}
.jk-skip-link:focus,
.jk-skip-link:focus-visible { top: 12px; }

/* ---------- 3. 动效降级：尊重系统"减弱动态效果" ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 4. 触控目标 ≥ 44px（WCAG 2.5.8 / Apple HIG） ---------- */
footer a,
header a,
nav a,
header button,
nav button {
  min-height: 44px;
}
header a,
nav a,
footer a {
  display: inline-flex;
  align-items: center;
}
header button,
nav button {
  min-width: 44px;
  align-items: center;
  justify-content: center;
}

/* ---------- 5. CTA 区次按钮对比度提升（WCAG 1.4.3） ---------- */
/* 主按钮带内联渐变背景；无渐变的次按钮原文字过暗（内联样式 rgba(255,255,255,.6)），用 !important 提升到纯白 + 可辨识描边 */
#contact .magnetic-btn:not([style*="gradient"]) {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(4px);
}
#contact .magnetic-btn:not([style*="gradient"]):hover {
  background: rgba(255, 255, 255, 0.18) !important;
  border-color: rgba(255, 255, 255, 0.65) !important;
}

/* ---------- 6. 滚动进度条（GPU 合成，仅 transform） ---------- */
#jk-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 99998;
  background: linear-gradient(90deg, #0071E3, #4DA3FF);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
  will-change: transform;
}

/* ---------- 7. 返回顶部按钮 ---------- */
#jk-backtop {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 99997;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(16, 24, 40, 0.78);
  backdrop-filter: blur(8px);
  color: #cfe4ff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s,
              background 0.2s ease;
}
#jk-backtop.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
#jk-backtop:hover { background: #0071E3; color: #fff; }
#jk-backtop:active { transform: scale(0.94); }

/* ---------- 8. 移动端吸底转化条（仅 <768px） ---------- */
#jk-cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: none;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 14, 22, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateY(110%);
  transition: transform 0.3s ease;
}
#jk-cta-bar.is-show { transform: translateY(0); }
#jk-cta-bar .jk-cta-btn {
  flex: 1;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0;
  text-decoration: none;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
#jk-cta-bar .jk-cta-call { flex: 1.15; }
#jk-cta-bar .jk-cta-btn:active { transform: scale(0.96); opacity: 0.9; }
#jk-cta-bar .jk-cta-call {
  background: linear-gradient(135deg, #0071E3 0%, #0066CC 100%);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0, 113, 227, 0.35);
}
#jk-cta-bar .jk-cta-consult {
  color: #e8f1ff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}
@media (max-width: 767px) {
  #jk-cta-bar { display: flex; }
  /* 吸底条出现时，返回顶部按钮上移避让 */
  #jk-backtop { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.jk-has-cta { padding-bottom: 0; }
}

/* ---------- 9. 产品卡片"查看详情"角标（链接注入于 experience-enhance.js） ---------- */
.product-card { cursor: pointer; }
.jk-card-more {
  position: absolute;
  right: 22px;
  bottom: 16px;
  font-size: 12px;
  font-weight: 600;
  color: #4DA3FF;
  opacity: 0.75;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.product-card:hover .jk-card-more,
.product-card:focus-visible .jk-card-more {
  opacity: 1;
  transform: translateX(3px);
}

/* ---------- 8. 细节打磨 ---------- */
/* 中文正文行高与字距微调，提升长文案可读性 */
#root p { text-rendering: optimizeLegibility; }
/* 移动端去除点击高亮闪烁，统一按压反馈由组件自身承接 */
html { -webkit-tap-highlight-color: transparent; }
/* 图片平滑解码，避免加载抖动 */
#root img { decoding: async; }

/* ---------- 9. 首页客户案例（后台数据驱动注入） ---------- */
/* 注入的整卡为 <a>，补充悬浮态（原 React 版由 JS 事件实现） */
a.jk-case-card { display: block; cursor: pointer; will-change: transform; }
a.jk-case-card:hover,
a.jk-case-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(0, 113, 227, 0.25) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}
/* 网格下方「更多案例」入口 */
.jk-cases-more { text-align: center; margin-top: 44px; }
.jk-cases-more a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 12px 30px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.05);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.jk-cases-more a:hover,
.jk-cases-more a:focus-visible {
  background: linear-gradient(135deg, #0071E3 0%, #0066CC 100%);
  border-color: transparent;
  box-shadow: 0 8px 26px rgba(0, 113, 227, 0.4);
  transform: translateY(-2px);
}