/* ==========================================================================
   河南超野科技有限公司 —— 浅色（白）主题层
   叠加在 css/styles.css（Bootstrap 5.2.3）之上，只覆写配色与质感，不动布局。
   主题色：#0E87E4。改色只需改下方 :root 变量。
   （如需深色，把 :root 里的变量替换为深色一套即可，无需改其他代码。）
   ========================================================================== */

:root {
  --ctms-bg:          #FFFFFF;
  --ctms-band:        #F1F5F9; /* 交替色带 */
  --ctms-surface:     #F6F9FD;
  --ctms-surface-2:   #FFFFFF;
  --ctms-border:      rgba(14, 135, 228, 0.20);
  --ctms-accent:      #0E87E4; /* 主题色（填充：按钮/图标底） */
  --ctms-accent-soft: #0B6FBE; /* 浅底上的文字/描边/悬停（比主题色深一档） */
  --ctms-text:        #0F172A;
  --ctms-muted:       #5B6B80;
  --ctms-nav-bg:      rgba(255, 255, 255, 0.9);
  --ctms-grid:        rgba(14, 135, 228, 0.05);
  --ctms-glow:        rgba(14, 135, 228, 0.30);
  --ctms-hero-grad:   radial-gradient(1100px 460px at 50% -10%, rgba(14, 135, 228, 0.14), transparent 62%), #F6FAFF;
  --ctms-aside-grad:  linear-gradient(120deg, #0E87E4, #2B9BF0);
  --ctms-toggler:     url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2815, 23, 42, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");

  /* 覆写 Bootstrap 基础变量 */
  --bs-body-bg: #FFFFFF;
  --bs-body-color: #0F172A;
  --bs-border-color: rgba(14, 135, 228, 0.20);
  --bs-link-color: #0B6FBE;
  --bs-link-hover-color: #0E87E4;
  --bs-body-font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC",
    "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: var(--ctms-bg);
  color: var(--ctms-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* 背景网格 + 顶部辉光（纯装饰，不拦截点击） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--ctms-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ctms-grid) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}

main,
footer {
  position: relative;
  z-index: 1;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0.2px;
  color: var(--ctms-text);
}

/* ---------- 导航 ---------- */
.navbar.bg-dark {
  background-color: var(--ctms-nav-bg) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ctms-border);
}
.navbar-dark .navbar-brand {
  color: var(--ctms-text);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.navbar-dark .navbar-nav .nav-link {
  color: var(--ctms-muted);
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
  color: var(--ctms-accent-soft);
}
.navbar-dark .navbar-toggler {
  border-color: var(--ctms-border);
}
.navbar-dark .navbar-toggler-icon {
  background-image: var(--ctms-toggler);
}

/* ---------- Hero ---------- */
header.bg-dark {
  background: var(--ctms-hero-grad) !important;
  border-bottom: 1px solid var(--ctms-border);
}
header.bg-dark h1 {
  line-height: 1.2;
}

/* 徽标 */
.hero-badge {
  display: inline-block;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ctms-accent-soft);
  background: rgba(14, 135, 228, 0.10);
  border: 1px solid var(--ctms-border);
}

/* ---------- 按钮 ---------- */
.btn-primary {
  --bs-btn-bg: var(--ctms-accent);
  --bs-btn-border-color: var(--ctms-accent);
  --bs-btn-hover-bg: #2B9BF0;
  --bs-btn-hover-border-color: #2B9BF0;
  --bs-btn-active-bg: #2B9BF0;
  --bs-btn-active-border-color: #2B9BF0;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  font-weight: 600;
  box-shadow: 0 10px 26px -12px var(--ctms-glow);
}
.btn-outline-light {
  --bs-btn-color: var(--ctms-text);
  --bs-btn-border-color: var(--ctms-border);
  --bs-btn-hover-bg: rgba(14, 135, 228, 0.12);
  --bs-btn-hover-border-color: var(--ctms-accent-soft);
  --bs-btn-hover-color: var(--ctms-accent-soft);
}

/* ---------- 通用色覆盖 ---------- */
.text-muted { color: var(--ctms-muted) !important; }
.link-dark { color: var(--ctms-text) !important; }
.text-primary { color: var(--ctms-accent-soft) !important; }
.bg-light { background-color: var(--ctms-band) !important; }
.bg-primary { background-color: var(--ctms-accent) !important; }

/* ---------- 特色图标 ---------- */
.feature {
  background: linear-gradient(135deg, var(--ctms-accent), var(--ctms-accent-soft)) !important;
  color: #ffffff !important;
  border-radius: 0.75rem;
  box-shadow: 0 10px 26px -12px var(--ctms-glow);
}

/* ---------- 卡片 ---------- */
.card {
  --bs-card-bg: var(--ctms-surface);
  --bs-card-border-color: var(--ctms-border);
  --bs-card-color: var(--ctms-text);
  border: 1px solid var(--ctms-border) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--ctms-accent-soft) !important;
  box-shadow: 0 18px 44px -20px var(--ctms-glow);
}

/* ---------- 底部强调块（蓝底，文字保持浅色） ---------- */
aside.bg-primary {
  background: var(--ctms-aside-grad) !important;
  border: 1px solid var(--ctms-border);
}

/* ---------- 页脚 ---------- */
footer.bg-dark {
  background-color: var(--ctms-band) !important;
  border-top: 1px solid var(--ctms-border);
}
footer a.link-dark:hover {
  color: var(--ctms-accent-soft) !important;
}

/* ---------- 表单 ---------- */
.form-control {
  background-color: var(--ctms-surface-2);
  border-color: var(--ctms-border);
  color: var(--ctms-text);
}
.form-control:focus {
  background-color: var(--ctms-surface-2);
  color: var(--ctms-text);
  border-color: var(--ctms-accent);
  box-shadow: 0 0 0 0.2rem rgba(14, 135, 228, 0.25);
}
.form-control::placeholder { color: var(--ctms-muted); }

/* ---------- 联系信息块 ---------- */
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}
.contact-item i {
  font-size: 1.35rem;
  color: var(--ctms-accent-soft);
  line-height: 1.4;
}
.contact-item .label {
  font-size: 0.8rem;
  color: var(--ctms-muted);
}
/* 强调块内的联系项（蓝底）保持浅色 */
aside .contact-item i { color: #ffffff; }
aside .contact-item .label { color: rgba(255, 255, 255, 0.75); }

/* ---------- 关于我们的数据项 ---------- */
.stat i {
  font-size: 1.6rem;
  color: var(--ctms-accent-soft);
}