/* =============================================================
   CellCoating Design System — Foundations
   动力电芯 UV 绝缘喷涂 · 冷峻工业德式视觉基础
   ============================================================= */

@font-face {
  font-family: "Noto Sans SC";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/static/fonts/noto-sans-sc-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("/static/fonts/noto-sans-sc-500.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans SC";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("/static/fonts/noto-sans-sc-700.woff2") format("woff2");
}

:root {
  /* -----------------------------------------------------------
     COLOR — 只用蓝 + 中性灰。禁止引入紫/绿/橙做点缀。
     ----------------------------------------------------------- */

  /* Signal Blue —— 唯一强调色，来自 logo #1d4ed8 */
  --blue-50:  #eff4ff;
  --blue-100: #dbe6fe;
  --blue-200: #bfd1fd;
  --blue-300: #93b3fb;
  --blue-400: #6089f7;
  --blue-500: #3b63ef;
  --blue-600: #1d4ed8;   /* PRIMARY */
  --blue-700: #1e40af;
  --blue-800: #1e3a8a;
  --blue-900: #172554;

  /* Neutral —— 冷偏蓝的中性灰，工业德式必备 */
  --neutral-0:   #ffffff;
  --neutral-25:  #fafbfc;
  --neutral-50:  #f5f6f8;
  --neutral-100: #eceef2;
  --neutral-150: #dfe3ea;
  --neutral-200: #cdd3dd;
  --neutral-300: #a9b1bf;
  --neutral-400: #7c8595;
  --neutral-500: #5b6472;
  --neutral-600: #414954;
  --neutral-700: #2c3239;
  --neutral-800: #1a1e24;
  --neutral-900: #0e1013;

  /* Semantic — 前景 / 背景 / 边框 */
  --bg-canvas:      var(--neutral-0);
  --bg-subtle:      var(--neutral-25);
  --bg-muted:       var(--neutral-50);
  --bg-strong:      var(--neutral-100);
  --bg-inverse:     var(--neutral-900);
  --bg-inverse-2:   var(--neutral-800);

  --fg-1:           var(--neutral-900);
  --fg-2:           var(--neutral-700);
  --fg-3:           var(--neutral-500);
  --fg-4:           var(--neutral-400);
  --fg-on-inverse:  var(--neutral-0);
  --fg-on-inverse-muted: var(--neutral-300);

  --border-hair:    var(--neutral-100);
  --border-subtle:  var(--neutral-150);
  --border-strong:  var(--neutral-200);
  --border-inverse: var(--neutral-700);

  --accent:         var(--blue-600);
  --accent-hover:   var(--blue-700);
  --accent-press:   var(--blue-800);
  --accent-soft:    var(--blue-50);
  --accent-fg:      var(--neutral-0);

  --state-focus-ring: rgba(29, 78, 216, 0.4);

  /* -----------------------------------------------------------
     TYPE
     ----------------------------------------------------------- */
  --font-sans: "IBM Plex Sans", "Alibaba PuHuiTi 3.0", "AlibabaPuHuiTi-3-55-Regular",
               "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-cn:   "Alibaba PuHuiTi 3.0", "AlibabaPuHuiTi-3-55-Regular",
               "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-display-1: clamp(56px, 6.4vw, 96px);
  --fs-display-2: clamp(44px, 4.8vw, 72px);
  --fs-h1: clamp(36px, 3.4vw, 52px);
  --fs-h2: clamp(28px, 2.4vw, 38px);
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 13px;
  --fs-label:   12px;
  --fs-eyebrow: 11px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;

  /* -----------------------------------------------------------
     SPACING — 4px 基线
     ----------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  --gutter:      var(--s-6);
  --section-y:   var(--s-24);
  --container:   1360px;

  /* -----------------------------------------------------------
     RADIUS — 极小
     ----------------------------------------------------------- */
  --r-1:  2px;
  --r-2:  4px;
  --r-3:  6px;
  --r-4:  8px;
  --r-pill: 999px;

  /* -----------------------------------------------------------
     SHADOW
     ----------------------------------------------------------- */
  --shadow-hair:  0 0 0 1px var(--border-hair);
  --shadow-1:     0 1px 2px rgba(14,16,19,0.04), 0 0 0 1px var(--border-hair);
  --shadow-2:     0 6px 20px -8px rgba(14,16,19,0.10), 0 0 0 1px var(--border-subtle);
  --shadow-3:     0 24px 60px -20px rgba(14,16,19,0.16), 0 0 0 1px var(--border-subtle);
  --shadow-focus: 0 0 0 3px var(--state-focus-ring);

  /* -----------------------------------------------------------
     MOTION
     ----------------------------------------------------------- */
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   320ms;
  --ease-out:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in:    cubic-bezier(0.5, 0, 0.8, 0.4);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  --z-nav: 40;
  --z-drop: 50;
  --z-modal: 100;
}

/* =============================================================
   Base reset
   ============================================================= */
* { box-sizing: border-box; }
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-2);
  background: var(--bg-canvas);
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* =============================================================
   Layout primitives
   ============================================================= */
.cc-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.cc-section {
  padding: var(--section-y) 0;
}
.cc-section--tight { padding: 64px 0; }
.cc-section--muted { background: var(--bg-muted); }
.cc-section--dark { background: var(--bg-inverse); color: #fff; }

/* =============================================================
   Semantic type utilities
   ============================================================= */
.cc-eyebrow {
  font: 500 var(--fs-eyebrow)/1 var(--font-sans);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
}
.cc-eyebrow--muted { color: var(--fg-3); }
.cc-eyebrow--dark { color: var(--neutral-200); }

.cc-display-1 { font: 600 var(--fs-display-1)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.cc-display-2 { font: 600 var(--fs-display-2)/var(--lh-tight) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.cc-h1 { font: 600 var(--fs-h1)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.cc-h2 { font: 600 var(--fs-h2)/var(--lh-snug) var(--font-sans); letter-spacing: var(--tracking-tight); color: var(--fg-1); }
.cc-h3 { font: 600 var(--fs-h3)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }
.cc-h4 { font: 600 var(--fs-h4)/var(--lh-snug) var(--font-sans); color: var(--fg-1); }

.cc-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-2); }
.cc-body    { font-size: var(--fs-body);    line-height: var(--lh-normal);  color: var(--fg-2); }
.cc-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-normal);  color: var(--fg-3); }
.cc-caption { font-size: var(--fs-caption); line-height: var(--lh-normal);  color: var(--fg-3); }

.cc-mono    { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.cc-cn      { font-family: var(--font-cn); }

.cc-bilingual { display: flex; flex-direction: column; gap: 4px; }
.cc-bilingual > .en { color: var(--fg-1); }
.cc-bilingual > .cn { color: var(--fg-3); font-family: var(--font-cn); font-size: 0.78em; letter-spacing: 0; }

.cc-readout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
  letter-spacing: -0.01em;
}

/* =============================================================
   Bilingual heading block (with optional left blue rule)
   ============================================================= */
.cc-bl {
  border-left: 3px solid var(--accent);
  padding-left: 18px;
}
.cc-bl--no-rule { border-left: none; padding-left: 0; }
.cc-bl__en {
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg-1);
}
.cc-bl__cn {
  font-family: var(--font-cn);
  font-weight: 500;
  color: var(--fg-3);
  margin-top: 8px;
}
.cc-bl--dark .cc-bl__en { color: #fff; }
.cc-bl--dark .cc-bl__cn { color: var(--neutral-200); }

.cc-bl--display .cc-bl__en { font-size: clamp(48px, 5vw, 72px); }
.cc-bl--display .cc-bl__cn { font-size: 22px; margin-top: 10px; }
.cc-bl--h1 .cc-bl__en { font-size: clamp(36px, 3.4vw, 52px); }
.cc-bl--h1 .cc-bl__cn { font-size: 18px; margin-top: 8px; }
.cc-bl--h2 .cc-bl__en { font-size: clamp(26px, 2.2vw, 36px); letter-spacing: -0.015em; }
.cc-bl--h2 .cc-bl__cn { font-size: 15px; margin-top: 6px; }
.cc-bl--h3 .cc-bl__en { font-size: 22px; letter-spacing: -0.01em; }
.cc-bl--h3 .cc-bl__cn { font-size: 13px; margin-top: 4px; }

/* =============================================================
   Buttons
   ============================================================= */
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 4px;
  padding: 12px 18px;
  font: 500 13px/1 var(--font-sans);
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.cc-btn--small { padding: 9px 14px; font-size: 12px; }
.cc-btn--primary { background: var(--accent); color: #fff; }
.cc-btn--primary:hover { background: var(--accent-hover); }
.cc-btn--primary:active { background: var(--accent-press); }
.cc-btn--outline { background: #fff; color: var(--fg-1); box-shadow: inset 0 0 0 1px var(--border-strong); }
.cc-btn--outline:hover { background: var(--bg-muted); box-shadow: inset 0 0 0 1px var(--fg-1); }
.cc-btn--outline-on-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.4); }
.cc-btn--outline-on-dark:hover { background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px #fff; }
.cc-btn--ghost { background: transparent; color: var(--accent); padding: 12px 4px; }
.cc-btn--ghost.cc-btn--small { padding: 9px 4px; }
.cc-btn--ghost:hover { color: var(--accent-hover); }
.cc-btn--dark { background: var(--neutral-800); color: #fff; }
.cc-btn--dark:hover { background: var(--neutral-700); }
.cc-btn:focus-visible { box-shadow: var(--shadow-focus); outline: none; }

/* =============================================================
   Stat
   ============================================================= */
.cc-stat__num {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.cc-stat__n {
  font: 600 clamp(40px,4vw,56px)/1 var(--font-sans);
  letter-spacing: -0.03em;
  color: var(--fg-1);
}
.cc-stat__unit {
  font: 500 13px/1 var(--font-mono);
  color: var(--fg-3);
}
.cc-stat__label {
  font: 400 13px/1.4 var(--font-cn);
  color: var(--fg-3);
  margin-top: 8px;
}
.cc-stat--dark .cc-stat__n { color: #fff; }
.cc-stat--dark .cc-stat__unit,
.cc-stat--dark .cc-stat__label { color: var(--neutral-200); }

/* =============================================================
   Photo card
   ============================================================= */
.cc-photocard {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 0 0 1px var(--border-hair);
  overflow: hidden;
  transition: box-shadow var(--dur-slow) var(--ease-out);
}
.cc-photocard:hover { box-shadow: 0 0 0 1px var(--border-strong); }
.cc-photocard__img {
  aspect-ratio: 16 / 10;
  background-color: var(--bg-muted);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(0.92);
}
.cc-photocard__img--tall { aspect-ratio: 4 / 5; }
.cc-photocard__body { padding: 18px 20px 22px; }
.cc-photocard__title {
  font: 600 18px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--fg-1);
  margin-top: 10px;
}
.cc-photocard__cn {
  font: 500 13px/1.4 var(--font-cn);
  color: var(--fg-3);
  margin-top: 4px;
}
.cc-photocard__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-hair);
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-4);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* =============================================================
   Spec row
   ============================================================= */
.cc-specrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-hair);
  gap: 12px;
}
.cc-specrow__k {
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
}
.cc-specrow__v {
  font: 500 15px/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}
.cc-specrow__u { margin-left: 4px; color: var(--fg-3); font-size: 12px; }

/* =============================================================
   Photo label tag (dark mono overlay)
   ============================================================= */
.cc-phototag {
  position: absolute;
  background: rgba(14,16,19,0.82);
  color: #fff;
  padding: 6px 10px;
  border-radius: 2px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =============================================================
   Form fields
   ============================================================= */
.cc-field__label {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin-bottom: 8px;
  display: block;
}
.cc-field__input,
.cc-field__textarea,
.cc-field__select {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 4px;
  padding: 12px 12px;
  font: 400 14px/1.4 var(--font-sans);
  color: var(--fg-1);
  background: #fff;
  outline: 0;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}
.cc-field__input:focus,
.cc-field__textarea:focus,
.cc-field__select:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cc-field__input--mono { font-family: var(--font-mono); }
.cc-field__textarea { resize: vertical; min-height: 96px; }
.cc-field__select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6472' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

/* =============================================================
   Icons
   ============================================================= */
.cc-icon { flex-shrink: 0; }

/* =============================================================
   Nav
   ============================================================= */
.cc-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  box-shadow: 0 1px 0 var(--border-hair);
  transition: background var(--dur-base) var(--ease-out);
}
.cc-nav.is-scrolled {
  background: rgba(255,255,255,0.86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.cc-nav__inner {
  display: flex;
  align-items: center;
  height: 68px;
  gap: 40px;
}
.cc-nav__logo { display: flex; align-items: center; text-decoration: none; }
.cc-nav__logo img { height: 26px; }
.cc-nav__links { display: flex; gap: 28px; flex: 1; }
.cc-nav__link {
  position: relative;
  text-decoration: none;
  font: 500 13px/1 var(--font-sans);
  color: var(--fg-2);
  padding: 24px 0;
  transition: color var(--dur-fast) var(--ease-out);
  display: inline-block;
}
.cc-nav__link:hover { color: var(--fg-1); }
.cc-nav__link.is-active { color: var(--fg-1); }
.cc-nav__link .cn {
  margin-left: 8px;
  font: 400 12px/1 var(--font-cn);
  color: var(--fg-4);
}
.cc-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--accent);
}
.cc-nav__lang {
  font: 500 11px/1 var(--font-mono);
  color: var(--fg-4);
  letter-spacing: 0.08em;
}

/* Mobile burger toggle (hidden on desktop) */
.cc-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}
.cc-nav__burger span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--fg-1);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.cc-nav__burger.is-open span:nth-child(1) { transform: translateY(3.25px) rotate(45deg); }
.cc-nav__burger.is-open span:nth-child(2) { transform: translateY(-3.25px) rotate(-45deg); }

.cc-mobile-menu {
  display: none;
  background: #fff;
  border-top: 1px solid var(--border-hair);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-base) var(--ease-out);
}
.cc-mobile-menu.is-open { max-height: 320px; }
.cc-mobile-menu__links { display: flex; flex-direction: column; padding: 8px 0 16px; }
.cc-mobile-menu__link {
  text-decoration: none;
  font: 500 15px/1 var(--font-sans);
  color: var(--fg-2);
  padding: 14px 0;
  border-bottom: 1px solid var(--border-hair);
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cc-mobile-menu__link.is-active { color: var(--accent); }
.cc-mobile-menu__link .cn { font: 400 12px/1 var(--font-cn); color: var(--fg-4); }

/* =============================================================
   Footer
   ============================================================= */
.cc-footer { background: var(--bg-inverse); color: var(--border-strong); }
.cc-footer__inner { padding: 64px 24px 32px; }
.cc-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--neutral-700);
}
.cc-footer__brand img { height: 28px; margin-bottom: 20px; }
.cc-footer__brand-copy {
  font: 400 14px/1.7 var(--font-sans);
  color: var(--border-strong);
  max-width: 360px;
}
.cc-footer__brand-copy .cn { font-family: var(--font-cn); color: var(--neutral-300); }
.cc-footer__col-title {
  font: 500 11px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--neutral-400);
  margin-bottom: 16px;
}
.cc-footer__col-links { display: flex; flex-direction: column; gap: 10px; }
.cc-footer__col-links a {
  font: 400 13px/1 var(--font-sans);
  color: var(--neutral-150);
  text-decoration: none;
}
.cc-footer__col-links a:hover { color: #fff; }
.cc-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 24px;
  font: 500 11px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--neutral-400);
}

/* =============================================================
   Fade-in-up on scroll
   ============================================================= */
.cc-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out);
}
.cc-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* =============================================================
   Responsive
   ============================================================= */
@media (max-width: 1024px) {
  .cc-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }
  .cc-grid-3 { grid-template-columns: repeat(2, 1fr) !important; }
  .cc-grid-5 { grid-template-columns: repeat(2, 1fr) !important; }
  .cc-grid-2 { grid-template-columns: 1fr !important; }
  .cc-footer__grid { grid-template-columns: 1fr 1fr !important; gap: 32px; }
  .cc-nav__links { display: none !important; }
  .cc-nav__lang { display: none !important; }
  .cc-nav__burger { display: flex !important; }
  .cc-mobile-menu { display: block; }
}
@media (max-width: 640px) {
  .cc-grid-4, .cc-grid-3, .cc-grid-5, .cc-grid-6 { grid-template-columns: 1fr !important; }
  .cc-footer__grid { grid-template-columns: 1fr !important; }
  .cc-section { padding: 64px 0 !important; }
  .cc-section--tight { padding: 48px 0 !important; }
}