/* 哲联科技 RUISPHERE — 官网样式
   基于 Modernist 设计系统的 tokens 与组件规则实现 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;800&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap');

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --font-heading: "Archivo", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Archivo", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Archivo', 'Noto Sans SC', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, ul, ol, li, figure, dl, dd, dt { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--color-text); text-decoration: none; }
::selection { background: var(--color-accent-300); color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* — hover utilities (mirrors design's per-element hover states) — */
.hv-accent:hover { background: var(--color-accent-600) !important; color: #ffffff !important; }
.hv-invert:hover { background: var(--color-text) !important; color: var(--color-bg) !important; }
.hv-darkbg:hover { background: var(--color-text) !important; }
.hv-darkbg-white:hover { background: var(--color-text) !important; color: #ffffff !important; }
.hv-surface:hover { background: var(--color-surface) !important; }
.hv-accent4:hover { color: var(--color-accent-400) !important; }
a:hover { color: var(--color-accent); }
.hv-invert:hover, .hv-darkbg:hover, .hv-darkbg-white:hover { color: var(--color-bg); }
.hv-invert:hover *, .hv-darkbg-white:hover * { color: inherit; }

/* — nav active state — */
.nav a.active { color: var(--color-accent) !important; }

/* — reveal-on-scroll (matches original IntersectionObserver behavior) — */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* — pages — */
.page[hidden] { display: none; }