/* ====================================================================
   CESIPC base.css — 全局 reset + CSS 变量 + 基础排版
==================================================================== */

:root {
  /* ---------- 配色（科拉德 LOGO 色 #3375af 体系） ---------- */
  --c-primary:      #3375af;   /* LOGO 主色，栏目背景、页脚 */
  --c-primary-2:    #2a629a;   /* hover 深一档 */
  --c-primary-3:    #4a8cc5;   /* 浅一档（次级强调） */
  --c-primary-soft: #e7eff7;   /* 主色 8% 浅底 */
  --c-accent:       #e60012;   /* 红色 CTA，与 #3375af 互补 + 通过 WCAG AA */
  --c-accent-2:     #b8000f;
  --c-text:         #1a1a1a;
  --c-text-2:       #4a4a4a;
  --c-muted:        #6e7682;
  --c-bg:           #ffffff;   /* 主背景=白 */
  --c-bg-alt:       #f0f5fa;   /* 区块交替灰（你指定） */
  --c-bg-dark:      #3375af;   /* 深色区/页脚（你指定，用主色） */
  --c-bg-deep:      #1e4a72;   /* 主色的更深一档，做对比层 */
  --c-border:       #e1e5eb;
  --c-border-2:     #c8d0da;
  --c-success:      #008a5c;
  --c-warning:      #d97a00;

  --font-sans:      "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  14px;
  --fs-md:    15px;
  --fs-lg:    16px;
  --fs-xl:    18px;
  --fs-h4:    20px;
  --fs-h3:    24px;
  --fs-h2:    32px;
  --fs-h1:    40px;
  --fs-hero:  52px;

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  --container-max: 1280px;       /* 桌面默认 */
  --container-max-2k: 1600px;    /* 2K 屏（1440p+） */
  --container-max-4k: 1920px;    /* 4K 屏 */

  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 32px rgba(0,0,0,.10);

  --radius-sm: 3px;
  --radius:    6px;
  --radius-lg: 10px;

  --t-fast: 150ms ease;
  --t:      250ms ease;
  --t-slow: 400ms ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* 文字可复制（显式声明） */
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* 全站可复制文字（除按钮 / 导航交互元素） */
main, p, h1, h2, h3, h4, h5, h6, li, td, th, span, strong, em, a, label,
.product-desc, .product-note, .highlight-list, .spec-table, .ot-table,
.footer-tagline, .footer-contact, .footer-copy, .platform-card__desc,
.tech-card__desc {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--c-accent); }

button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

ul, ol { list-style: none; }

table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  color: var(--c-primary);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin: 0 0 var(--sp-3); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

::selection { background: var(--c-primary); color: #fff; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--sp-6);
  padding-right: var(--sp-6);
}

/* ============ 大屏自适应（2K / 4K） ============ */
/* 2K 屏：1440p 及更宽，容器扩到 1600px */
@media (min-width: 1600px) {
  .container { max-width: var(--container-max-2k); padding-left: var(--sp-8); padding-right: var(--sp-8); }
  :root { --fs-base: 15px; --fs-md: 16px; --fs-lg: 17px; --fs-xl: 20px; --fs-h2: 36px; --fs-h1: 44px; --fs-hero: 60px; }
}
/* 4K 屏：1920px+ 容器扩到 1920px，字号再放一档 */
@media (min-width: 1920px) {
  .container { max-width: var(--container-max-4k); padding-left: var(--sp-10); padding-right: var(--sp-10); }
  :root { --fs-base: 16px; --fs-md: 17px; --fs-lg: 18px; --fs-xl: 22px; --fs-h2: 40px; --fs-h1: 52px; --fs-hero: 68px; }
}
/* 真 4K（2560+） */
@media (min-width: 2560px) {
  :root { --container-max-4k: 2200px; --fs-base: 18px; --fs-md: 19px; --fs-lg: 20px; --fs-xl: 24px; --fs-h2: 48px; --fs-h1: 60px; --fs-hero: 80px; }
}

.section {
  padding: var(--sp-16) 0;
}
.section--alt { background: var(--c-bg-alt); }
.section--dark { background: var(--c-bg-dark); color: #fff; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

.grid { display: grid; gap: var(--sp-6); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--5 { grid-template-columns: repeat(5, 1fr); }

@media (max-width: 960px) {
  .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid--2, .grid--3, .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .section { padding: var(--sp-10) 0; }
  .container { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}
