:root {
  color-scheme: dark;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 28px;
  --space-xl: 52px;
  --space-2xl: 72px;
  /* Homepage / marketing section rhythm (compact but breathable) */
  --space-section-y: clamp(44px, 4.5vw, 68px);
  --space-section-bridge: clamp(28px, 3.2vw, 40px);
  --space-section-tight: clamp(20px, 2.4vw, 28px);
  --space-section-head: clamp(32px, 3vw, 44px);
  --space-3xl: var(--space-section-y);
  /* Type scale: nav/body up a step, display/section down a step */
  --text-xs: 0.875rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-lead: 1.1875rem;
  --text-title: 1.25rem;
  --text-nav: 1.0625rem;
  --text-btn: 1rem;
  --text-section: clamp(1.5rem, 1.2vw + 1rem, 2rem);
  --text-display: clamp(2rem, 2.4vw + 1rem, 2.85rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-short: 180ms;
  --container: 1360px;
  --gutter: 20px;
  --z-nav: 300;

  /* FourJaw-like dark tech · brand cyan replaces Process Purple */
  --color-brand: #0096D1;
  --color-brand-deep: #0077A8;
  --color-brand-soft: rgba(0, 150, 209, 0.16);
  --color-brand-glow: rgba(0, 150, 209, 0.35);
  --color-on-brand: #FFFFFF;
  --color-paper: #07090D;
  --color-paper-2: #0E1218;
  --color-paper-3: #161C25;
  --color-ink: #F4F7FA;
  --color-ink-2: #B7C2CE;
  --color-muted: #7F8B99;
  --color-rule: rgba(255,255,255,0.10);
  --color-accent: var(--color-brand);
  --color-accent-ink: #041018;
  --color-focus: #4FC3F0;
  --color-error: #FF6B6B;
  --color-well: #F4F7FA;
  --color-well-ink: #142433;

  --font-display: "Noto Sans SC", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --font-body: var(--font-display);
  --radius: 0;
  --clip-btn: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  --shadow: 0 30px 80px rgba(0,0,0,.45);

  /* Hero / glass overlays (overridden in light) */
  --shade-deep: rgba(7, 9, 13, 0.9);
  --shade-mid: rgba(7, 9, 13, 0.68);
  --shade-soft: rgba(7, 9, 13, 0.16);
  --shade-edge: rgba(7, 9, 13, 0.28);
  --shade-top: rgba(7, 9, 13, 0.2);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-hairline: rgba(255, 255, 255, 0.08);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-border-soft: rgba(255, 255, 255, 0.08);
  --card-fill: rgba(7, 9, 13, 0.55);
  --line-btn-stroke: rgba(255, 255, 255, 0.55);
  --line-btn-hover: rgba(255, 255, 255, 0.06);
  --footer-bg: #33383c;
  --nav-panel-bg: rgba(7, 9, 13, 0.96);
  --hero-lead: #D5DEE8;
  --hero-note: #A8B4C0;

  /* Stacked / offset surfaces (FourJaw cards & platform map) */
  --stack-face: var(--color-paper-3);
  --stack-face-sheen: color-mix(in srgb, var(--color-ink) 5%, transparent);
  --stack-offset-fill: rgba(22, 28, 37, 0.92);
  --stack-offset-brand: rgba(0, 150, 209, 0.12);
  --stack-shadow: 0 18px 40px color-mix(in srgb, var(--color-ink) 18%, transparent), 0 0 0 1px rgba(0, 150, 209, 0.04);
  --stack-shadow-hover: 0 22px 50px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0, 150, 209, 0.18), 0 0 36px rgba(0, 150, 209, 0.12);
  --panel-face: var(--color-paper-3);
  --panel-offset-fill: rgba(14, 18, 24, 0.85);
  --panel-offset-border: rgba(255, 255, 255, 0.06);
  --panel-border: rgba(255, 255, 255, 0.12);
  --accent-card-fill: linear-gradient(160deg, rgba(0, 150, 209, 0.28), rgba(0, 150, 209, 0.08));
  --accent-card-border: rgba(0, 150, 209, 0.45);
}

html[data-theme="light"] {
  color-scheme: light;
  --color-paper: #F4F7FA;
  --color-paper-2: #FFFFFF;
  --color-paper-3: #E8EEF4;
  --color-ink: #0E1520;
  --color-ink-2: #3A4654;
  --color-muted: #6B7785;
  --color-rule: rgba(14, 21, 32, 0.12);
  --color-brand-soft: rgba(0, 150, 209, 0.12);
  --color-brand-glow: rgba(0, 150, 209, 0.22);
  --color-well: #0E1520;
  --color-well-ink: #F4F7FA;
  --shadow: 0 18px 48px rgba(14, 21, 32, 0.12);

  --shade-deep: rgba(244, 247, 250, 0.94);
  --shade-mid: rgba(244, 247, 250, 0.78);
  --shade-soft: rgba(244, 247, 250, 0.28);
  --shade-edge: rgba(244, 247, 250, 0.55);
  --shade-top: rgba(244, 247, 250, 0.35);
  --glass-border: rgba(14, 21, 32, 0.10);
  --glass-hairline: rgba(14, 21, 32, 0.06);
  --card-border: rgba(14, 21, 32, 0.10);
  --card-border-soft: rgba(14, 21, 32, 0.06);
  --card-fill: rgba(255, 255, 255, 0.82);
  --line-btn-stroke: rgba(14, 21, 32, 0.35);
  --line-btn-hover: rgba(0, 150, 209, 0.08);
  --footer-bg: #E8EEF4;
  --nav-panel-bg: rgba(244, 247, 250, 0.98);
  --hero-lead: #3A4654;
  --hero-note: #6B7785;

  /* Light: flat white faces, hairline borders, soft shadow — no hard 3D slabs */
  --stack-face: #FFFFFF;
  --stack-face-sheen: transparent;
  --stack-offset-fill: transparent;
  --stack-offset-brand: transparent;
  --stack-shadow: 0 1px 2px rgba(14, 21, 32, 0.04), 0 8px 20px rgba(14, 21, 32, 0.06);
  --stack-shadow-hover: 0 2px 4px rgba(14, 21, 32, 0.05), 0 12px 28px rgba(14, 21, 32, 0.08), 0 0 0 1px rgba(0, 150, 209, 0.28);
  --panel-face: #FFFFFF;
  --panel-offset-fill: transparent;
  --panel-offset-border: transparent;
  --panel-border: rgba(14, 21, 32, 0.10);
  --accent-card-fill: #FFFFFF;
  --accent-card-border: rgba(0, 150, 209, 0.42);
  --card-fill: #FFFFFF;
  --shadow: 0 1px 2px rgba(14, 21, 32, 0.04), 0 10px 28px rgba(14, 21, 32, 0.07);
}