:root {
  --color-page: #F4F7FB;
  --color-surface: #FFFFFF;
  --color-surface-soft: #EEF4FB;
  --color-hero-navy: #062A5D;
  --color-hero-blue: #074B9A;
  --color-text-primary: #0A2A4F;
  --color-text-secondary: #526780;
  --color-text-muted: #8FA0B5;
  --color-text-inverse: #FFFFFF;
  --color-accent-orange: #F2A23A;
  --color-accent-orange-dark: #D98418;
  --color-accent-blue: #0C57A8;
  --color-accent-blue-light: #2E7DD7;
  --color-line: #D8E2EF;
  --site-hero-background: linear-gradient(115deg, rgba(6, 42, 93, 0.98) 0%, rgba(7, 75, 154, 0.95) 58%, rgba(2, 34, 82, 0.98) 100%);
  --site-hero-grid-background: radial-gradient(circle at 12px 12px, rgba(46, 125, 215, 0.55) 0 3px, transparent 4px), linear-gradient(90deg, transparent 0 16px, rgba(46, 125, 215, 0.32) 17px 18px, transparent 19px 100%), linear-gradient(0deg, transparent 0 26px, rgba(46, 125, 215, 0.24) 27px 28px, transparent 29px 100%);
  --site-hero-grid-size: 68px 68px;
  --site-hero-grid-inset: 76px -12% -12px 32%;
  --site-hero-grid-opacity: 0.72;
  --site-hero-grid-transform: perspective(520px) rotateX(58deg) rotateZ(-9deg);
  --site-hero-overlay-inset: 0 0 0 42%;
  --site-hero-overlay-opacity: 0.3;
  --site-hero-overlay-background: radial-gradient(circle at 30% 36%, rgba(255, 255, 255, 0.18) 0 2px, transparent 3px), radial-gradient(circle at 72% 66%, rgba(46, 125, 215, 0.62) 0 3px, transparent 4px), linear-gradient(135deg, transparent 0 36%, rgba(46, 125, 215, 0.24) 37% 38%, transparent 39% 100%);
  --site-hero-circuit-glass-background: linear-gradient(130deg, rgba(255, 255, 255, 0.08), transparent 26%), linear-gradient(90deg, transparent, rgba(46, 125, 215, 0.18), transparent);
  --site-hero-circuit-texture: url("/04_assets/alpha/asset_10_decorative_effects_alpha_sheet.png");
  --site-hero-circuit-texture-inset: 70px -4% auto 38%;
  --site-hero-circuit-texture-height: 258px;
  --site-hero-circuit-texture-size: 920px 575px;
  --site-hero-circuit-texture-position: 4px -36px;
  --site-hero-circuit-texture-opacity: 0.5;
  --site-hero-bottom-radius: 18px;
  --font-sans: Inter, "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-xxl: 64px;
  --space-page-x: 112px;
  --radius-button: 4px;
  --radius-card: 8px;
  --radius-panel: 10px;
  --shadow-floating-strip: 0 18px 48px rgba(7, 41, 88, 0.14);
  --shadow-card: 0 10px 26px rgba(7, 41, 88, 0.08);
  --shadow-hero-product: 0 28px 70px rgba(0, 20, 48, 0.36);
  --motion-base: 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}