/* 亿星网站公共样式 */

/* ========== 全局设置 ========== */
/* 全局样式 */
*, *::before, *::after {
  border-width: 0;
  border-style: solid;
  border-color: currentColor;
}

.i_linkbg{
  margin-top: 0px !important;
}

html {
  scroll-behavior: smooth;
}

/* ========== CSS 变量 ========== */
:root {
  --gradient-primary: linear-gradient(135deg, #0067FC 0%, #03B8FF 100%);
  --gradient-vertical: linear-gradient(180deg, #0067FC 0%, #03B8FF 100%);
  --color-primary: #0067FC;
  --color-secondary: #03B8FF;
  --shadow-hover: 0 8px 30px rgba(0, 103, 252, 0.2);  /* 品牌蓝投影 */
}

/* ========== 渐变文字 ========== */
.gradient-text {
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========== 渐变装饰条 ========== */
.gradient-bar {            /* 横向/斜向渐变：卡片底部条 */
  background: var(--gradient-primary);
}

.gradient-bar-vertical {  /* 纵向渐变：卡片左侧竖条 */
  background: var(--gradient-vertical);
}

/* ========== 标题左侧强调竖条（默认科技蓝，hover 天空蓝） ========== */
.title-accent {
  border-color: var(--color-primary);      /* #0067FC */
}

.group:hover .title-accent {
  border-color: var(--color-secondary);    /* #03B8FF */
}

/* ========== 标题前小竖条（天空蓝，对齐参考页 .int-group h3::before） ========== */
.title-bar {
  background: var(--color-secondary);      /* #03B8FF */
}

/* ========== 标题 hover 变主色（卡片悬停时标题变品牌蓝） ========== */
.group:hover .title-hover {
  color: var(--color-primary);             /* #0067FC */
}

/* ========== 图片悬浮：上浮 + 品牌蓝投影（对齐参考页 .image-placeholder-frame:hover） ========== */
.img-hover {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.img-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

/* ========== 集成模块标签按钮（对齐参考页 .int-tag） ========== */
.module-tag {                              /* 主色标签：样品管理等 8 个 */
  background-color: #EFF6FF;               /* 浅蓝底 */
  color: var(--color-primary);             /* #0067FC 文字 */
  border-color: rgba(0, 103, 252, 0.2);    /* 品牌蓝淡边 */
}

.module-tag:hover {
  background-color: var(--color-primary);  /* #0067FC 实心 */
  color: #ffffff;
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 103, 252, 0.3);
}

.terminal-tag:hover {                      /* 中性标签：PC端/移动端，hover 变主色 */
  border-color: var(--color-primary);      /* #0067FC */
  color: var(--color-primary);
}

/* ========== 卡片悬浮投影：品牌蓝（替代 Tailwind 黑色 shadow-2xl） ========== */
.card-shadow:hover {
  box-shadow: var(--shadow-hover);         /* 0 8px 30px rgba(0,103,252,0.2) */
}

/* ========== 区块背景图（以图找图 深度集成节） ========== */
.integration-bg {
  background-image: url('/uploadfile/icon/ytzt/BJT.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ========== 卡片样式 ========== */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 103, 252, 0.15);
}

/* ========== 按钮样式 ========== */
.btn-primary {
  background: var(--gradient-primary);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 103, 252, 0.35);
}

.btn-secondary {
  border: 2px solid var(--color-primary);
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(0, 103, 252, 0.08);
}

/* ========== 图标容器 ========== */
.icon-gradient {
  background: var(--gradient-primary);
}

.icon-container {
  background: linear-gradient(135deg, rgba(0, 103, 252, 0.1) 0%, rgba(3, 184, 255, 0.1) 100%);
}

/* ========== 分隔线 ========== */
.section-divider {
  background: linear-gradient(90deg, transparent 0%, rgba(0, 103, 252, 0.2) 50%, transparent 100%);
  height: 1px;
}

/* ========== 动画 ========== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes flowGradient {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

.animate-fade-in {
  animation: fadeInUp 0.6s ease-out forwards;
}

.flow-line {
  background: linear-gradient(90deg, #0067FC 0%, #03B8FF 50%, #0067FC 100%);
  background-size: 200% 100%;
  animation: flowGradient 3s linear infinite;
}

/* ========== 延迟动画 ========== */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }