/* ════════════════════════════════════════════════════════════════
   BASE STYLES - 基础样式
   包含：CSS重置、变量定义、排版、布局工具类
   这是所有页面的基础，每个页面都需要引入
════════════════════════════════════════════════════════════════ */

/* ─── RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: #F8FAFC;
  color: #1E293B;
  line-height: 1.6;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
a { text-decoration: none; color: inherit; }

/* ─── CSS VARIABLES / TOKENS ──────────────────────────────── */
:root {
  /* 颜色系统 */
  --bg:        #F8FAFC;    /* 背景色 - 浅灰蓝 */
  --fg:        #1E293B;    /* 前景色/文字 - 深蓝灰 */
  --primary:   #1565C0;    /* 主色 - 深绿色，实验室安全/环保主题 */
  --primary-fg:#FFFFFF;    /* 主色上的文字 - 白 */
  --cyan:      #E0F2FE;    /* 辅助色 - 淡蓝 */
  --muted:     #64748B;    /* 次要文字 - 灰 */
  --border:    #E2E8F0;    /* 边框色 - 浅灰 */
  --card:      #FFFFFF;    /* 卡片背景 - 纯白 */
  
  /* 尺寸系统 */
  --radius:    12px;       /* 圆角 */
  --max-w:     1440px;     /* 最大宽度 */
  --px:        clamp(1rem, 4vw, 3.75rem); /* 响应式内边距 */
}

/* ─── TYPOGRAPHY ──────────────────────────────────────────── */
h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; line-height: 1.1; }
.mono { font-family: 'IBM Plex Mono', monospace; }
.label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--primary);
}

/* ─── LAYOUT UTILITIES ────────────────────────────────────── */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--px); }
.section { padding: 5rem 0; }
.section--dark { background: var(--fg); }
.section--card { background: var(--card); }
.section--border { border-bottom: .5px solid var(--border); }
.grid { display: grid; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-4 { gap: 1rem; }

/* ─── GRID OVERLAY ────────────────────────────────────────── */
/* 细网格遮罩效果，用于深色背景区域 */
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.5) .5px, transparent .5px),
    linear-gradient(90deg, rgba(255,255,255,.5) .5px, transparent .5px);
  background-size: 60px 60px;
  opacity: .03;
  z-index: 1;
}
/* v202604211532 */
/* updated-154632 */