/* ============================================================
   dark-base.css — 子页深色科技风基底
   与首页 home63.css 设计语言统一：深空黑底 + 青色辉光 + 扫描线氛围
   仅用于 product / news / career / about 四页（首页 home63.css 不依赖此文件）。
   覆盖 layout.css 中浅色的 section 文字 / 表单为深色风，并提供 fixed 氛围层样式。
   依赖：base.css（颜色变量）、layout.css（被覆盖）。
   ============================================================ */

/* ========== 全局深色背景 ========== */
body {
  background: var(--deep);
  color: rgba(255, 255, 255, 0.82);
}

/* 神经矩阵粒子画布（与首页 #particleCanvas 同语言，ql-particle.js 驱动） */
#particleCanvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* ========== 氛围层（与首页同语言：径向光晕 + 扫描线，纯 CSS 零 JS） ========== */
.overlay {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 60% at 18% 82%, rgba(12, 161, 184, 0.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 82% 18%, rgba(93, 194, 210, 0.11) 0%, transparent 50%),
    radial-gradient(ellipse 70% 70% at 50% 100%, rgba(8, 116, 138, 0.09) 0%, transparent 60%);
}
.scanlines {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: 0.03;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(255, 255, 255, 0.05) 2px, rgba(255, 255, 255, 0.05) 4px);
}

/* ========== 内容浮于氛围层之上 ========== */
.footer { position: relative; z-index: 20; }
.page-hero { position: relative; z-index: 10; }
.section { position: relative; z-index: 5; }

/* ========== 通用 section（覆盖 layout.css 的浅色文字） ========== */
.section { background: transparent !important; }
/* 各页 CSS 里可能给具体 section 设了白底，这里统一清掉 */
.products, .foundation, .perks, .jobs, .apply, .intro,
.stats-bar, .timeline-section, .team-section,
.contact-section, .message-section { background: transparent !important; }

.section-title { color: var(--white); }
.section-title .accent {
  background: linear-gradient(135deg, var(--lake), var(--lake-light));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.section-desc { color: rgba(255, 255, 255, 0.62); }

/* ========== 通用表单深色化（覆盖 layout.css） ========== */
.form-group label { color: rgba(255, 255, 255, 0.75); }
.form-control {
  background: rgba(12, 161, 184, 0.05);
  border: 1px solid rgba(12, 161, 184, 0.18);
  color: var(--white);
}
.form-control::placeholder { color: rgba(255, 255, 255, 0.32); }
.form-control:focus {
  outline: none;
  border-color: var(--lake);
  box-shadow: 0 0 0 3px rgba(12, 161, 184, 0.18);
  background: rgba(12, 161, 184, 0.08);
}
.form-note { color: rgba(255, 255, 255, 0.5); }

/* ========== 公共卡片签名 .ql-cell-card（与首页 .adv-cell-card 同源，四页卡片 DOM 复用）
   各页卡片根元素挂此类即可获得统一的 155° 渐变底 + 四角角标 + 双层阴影 + hover。
   各页 CSS 只保留布局/专属字段，不再重复签名声明。 ============================ */
.ql-cell-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(12, 161, 184, 0.18);
  background: linear-gradient(155deg, rgba(12, 161, 184, 0.07) 0%, rgba(10, 22, 40, 0.5) 60%, rgba(5, 13, 26, 0.55) 100%);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(93, 194, 210, 0.08);
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.ql-cell-card::before,
.ql-cell-card::after {
  content: ''; position: absolute; width: 12px; height: 12px;
  border-color: rgba(93, 194, 210, 0.45); border-style: solid;
  transition: border-color 0.4s var(--ease); z-index: 1;
}
.ql-cell-card::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.ql-cell-card::after { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }
.ql-cell-card:hover {
  transform: translateY(-5px);
  border-color: rgba(93, 194, 210, 0.45);
  box-shadow: 0 18px 44px rgba(12, 161, 184, 0.2), inset 0 2px 0 rgba(93, 194, 210, 0.32);
}
.ql-cell-card:hover::before,
.ql-cell-card:hover::after { border-color: var(--lake-light); }
/* 数据卡强化变体（核心产品 / 核心数据 stat-box 用） */
.ql-cell-card--data {
  border-color: rgba(12, 161, 184, 0.34);
  background: linear-gradient(155deg, rgba(12, 161, 184, 0.17) 0%, rgba(10, 22, 40, 0.55) 55%, rgba(5, 13, 26, 0.6) 100%);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(93, 194, 210, 0.16), inset 0 0 40px rgba(12, 161, 184, 0.06);
}
.ql-cell-card--data::before,
.ql-cell-card--data::after { border-color: rgba(93, 194, 210, 0.6); }

/* ========== HUD 章节锚（与首页 .section-hud 同语言：渐变线 + 端点光点 + 菱形刻度） ========== */
.section-hud {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 40px;
}
.section-hud-line {
  position: relative; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(93, 194, 210, 0.5), rgba(12, 161, 184, 0.1));
}
.section-hud-line::before,
.section-hud-line::after {
  content: ''; position: absolute; top: 50%;
  width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
  background: var(--lake); box-shadow: 0 0 8px var(--lake);
}
.section-hud-line::before { left: 0; }
.section-hud-line::after { right: 0; opacity: 0.5; }
.section-hud-tick {
  width: 8px; height: 8px; flex-shrink: 0;
  border: 1px solid var(--lake-light); border-radius: 2px;
  transform: rotate(45deg); opacity: 0.7;
}
.section-head-center .section-hud { justify-content: center; }
.section-head-center .section-hud-line { max-width: 120px; }

/* ========== section-label 升级（前置圆点 + 辉光，接近首页 eyebrow 观感） ========== */
.section-label {
  position: relative;
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--lake-light);
  text-shadow: 0 0 8px rgba(93, 194, 210, 0.3);
}
.section-label::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--lake-light); box-shadow: 0 0 8px var(--lake-light);
}