/* Corekey Electronics 官网自定义样式（Tailwind 补充）— 大厂风格设计系统 */

/* ---------- 字体 ---------- */
body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }
.font-sans { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif; }

/* ---------- 导航下拉：hover 显示 ---------- */
.nav-drop:hover .nav-panel,
.nav-drop:focus-within .nav-panel {
  display: block;
}

/* 导航链接：细渐变底指示条 */
.nav-link { position: relative; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0.75rem; right: 0.75rem; bottom: 0.15rem;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #0b6efd, #38bdf8);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease;
}
.nav-link:hover::after { transform: scaleX(1); }

/* ---------- 页面通用 Hero（品牌渐变） ---------- */
.page-hero {
  background: linear-gradient(135deg, #0a5fc8 0%, #0b6efd 42%, #046bd2 70%, #03498f 100%);
}

/* 原站纹理横幅（电路板底图 + 深色蒙版） */
.hero-bg {
  background-image: url('/assets/images/pages/b.jpg');
  background-size: cover;
  background-position: center;
}
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(2, 18, 42, 0.55) 0%, rgba(4, 43, 92, 0.78) 100%),
    radial-gradient(ellipse at 30% 20%, rgba(56, 189, 248, 0.16) 0%, transparent 60%);
}

/* Hero 文字阴影 */
.hero-shadow { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3); }

/* ---------- 按钮组件 ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0b6efd 0%, #046bd2 60%, #03498f 100%);
  color: #fff; font-weight: 600;
  border-radius: 9999px; padding: 0.8rem 2.2rem;
  box-shadow: 0 8px 24px rgba(4, 107, 210, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(4, 107, 210, 0.45); }
.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(255, 255, 255, 0.75); color: #fff; font-weight: 600;
  border-radius: 9999px; padding: 0.8rem 2.2rem;
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(4px);
  transition: all .25s ease;
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }

/* ---------- 图标底块（渐变） ---------- */
.icon-tile {
  background: linear-gradient(135deg, rgba(11, 110, 253, 0.12) 0%, rgba(56, 189, 248, 0.08) 100%);
  border: 1px solid rgba(11, 110, 253, 0.14);
}
.icon-tile svg { color: #0b6efd; }

/* ---------- 卡片组件（统一 hover 上浮） ---------- */
.service-card, .product-card, .news-card, .brand-cell {
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.service-card:hover, .product-card:hover, .news-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 42, 80, 0.12), 0 2px 8px rgba(15, 42, 80, 0.06);
  border-color: rgba(11, 110, 253, 0.18);
}

/* 品牌 logo 网格 */
.brand-cell { transition: opacity .2s ease, transform .2s ease, box-shadow .2s ease; }
.brand-cell:hover { opacity: 1; transform: translateY(-3px) scale(1.02); box-shadow: 0 10px 24px rgba(15, 42, 80, 0.10); }

/* ---------- 章节标题 eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: #0b6efd;
}
.eyebrow::before {
  content: ""; width: 1.6rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #0b6efd, #38bdf8);
}
.eyebrow.centered::after {
  content: ""; width: 1.6rem; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #38bdf8, #0b6efd);
}

/* ---------- FAQ 细节 ---------- */
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary { list-style: none; cursor: pointer; }
details.faq-item[open] .faq-arrow { transform: rotate(180deg); }
.faq-arrow { transition: transform .2s ease; }
details.faq-item { transition: box-shadow .25s ease, border-color .25s ease; }
details.faq-item:hover { border-color: rgba(11, 110, 253, 0.25); box-shadow: 0 8px 20px rgba(15, 42, 80, 0.08); }

/* ---------- 表单控件 ---------- */
.form-input {
  width: 100%;
  border: 1px solid #d7dee8;
  border-radius: 0.65rem;
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  outline: none;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-input:focus {
  border-color: #0b6efd;
  box-shadow: 0 0 0 4px rgba(11, 110, 253, 0.12);
}

/* ---------- 分类胶囊标签 ---------- */
.cat-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.45rem 1rem; border-radius: 9999px;
  border: 1px solid #e3e9f1; background: #fff;
  font-size: 0.85rem; font-weight: 500; color: #475569;
  transition: all .22s ease;
}
.cat-chip:hover { border-color: rgba(11, 110, 253, 0.5); color: #0b6efd; background: rgba(11, 110, 253, 0.05); }
.cat-chip.active {
  background: linear-gradient(135deg, #0b6efd, #046bd2);
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(4, 107, 210, 0.30);
}

/* ---------- 文字截断（卡片等高） ---------- */
.clamp-2, .clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-2 { -webkit-line-clamp: 2; }
.clamp-3 { -webkit-line-clamp: 3; }

/* ---------- 分区渐变分割线 ---------- */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11, 110, 253, 0.25), transparent);
}