/* ─────────────────────────────────────────────────────────────
   Zxiaohan — shared design system (Industrial cool / cold tech)
   ───────────────────────────────────────────────────────────── */

:root {
  /* surface — pearl white, soft and luminous */
  --bg:        #f4f3f1;
  --bg-2:      #eae8e4;
  --panel:     #ffffff;
  --fg:        #1d1d1f;   /* Apple ink — softer than pure black */
  --fg-2:      #38383c;
  --fg-muted:  #6e6e73;
  --sub:       #9a9aa0;
  --line:      rgba(0, 0, 0, 0.09);
  --line-2:    rgba(0, 0, 0, 0.045);
  --line-3:    rgba(0, 0, 0, 0.15);

  /* accents — cool, restrained. Names kept for back-compat; values reworked.
     --orange is now the primary azure; --gold is graphite; --royal a deep blue. */
  --gold:      #44474d;   /* graphite (RBTX) */
  --gold-deep: #2a2d31;
  --orange:    #0a84ff;   /* azure (Research / primary accent) */
  --orange-deep:#0060df;
  --royal:     #2a52d6;   /* deep blue (Psi) */
  --royal-deep:#173ba9;
  --accent:    #0a84ff;   /* site default accent */

  /* type — Apple / system stack, no webfont "template" look */
  --f-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-body:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono:    ui-monospace, "SF Mono", "Cascadia Code", "Segoe UI Mono", Menlo, Consolas, monospace;
  --f-italic:  -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* spring */
  --ease:      cubic-bezier(.16, 1, .3, 1);

  --container: 1280px;
  --container-narrow: 1080px;

  /* radii — soft, Apple-like */
  --r-card:    18px;
  --r-pill:    999px;
  --r-chip:    8px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--f-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 400;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;   /* subtle Apple-style optical tightening */
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; background: none; border: none; color: inherit; cursor: pointer; }

/* ── Type primitives ──────────────────────────────────────── */

.eyebrow {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 590;
  letter-spacing: 0.005em;
  text-transform: none;
  color: var(--fg-muted);
}
.eyebrow .dot { color: var(--sub); }

.display {
  font-family: var(--f-display);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--fg);
}

.editorial {
  font-family: var(--f-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.18;
  color: var(--fg-2);
}

.cn {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.42em;
  color: var(--fg-muted);
  text-transform: none;
}

.mono { font-family: var(--f-mono); }

.lead {
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  color: var(--fg-2);
  max-width: 60ch;
}

.muted { color: var(--fg-muted); }

/* ── Top nav ──────────────────────────────────────────────── */

.topnav {
  position: sticky; top: 0; z-index: 100;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(244, 243, 241, 0.78);
  border-bottom: 1px solid var(--line-2);
}
.topnav-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 12px 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.topnav-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--f-body); font-size: 14px; font-weight: 600;
  letter-spacing: -0.01em; text-transform: none;
  color: var(--fg);
}
.topnav-brand .mark { width: 22px; height: 22px; }
.topnav-brand .slash { color: var(--sub); margin: 0 4px; font-weight: 400; }
.topnav-links {
  display: flex; gap: 30px;
  font-family: var(--f-body); font-size: 13px; font-weight: 450;
  letter-spacing: 0; text-transform: none;
  color: var(--fg-muted);
}
.topnav-links a { transition: color 240ms var(--ease); }
.topnav-links a:hover { color: var(--fg); }
.topnav-back {
  font-family: var(--f-body); font-size: 13px; font-weight: 450;
  letter-spacing: 0; text-transform: none;
  color: var(--fg-muted);
  transition: color 240ms var(--ease);
}
.topnav-back:hover { color: var(--fg); }

/* ── Industrial chrome: status bar / system row ──────────── */

.sys-bar {
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
  padding: 11px 32px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--sub);
  background: rgba(255, 255, 255, 0.55);
}
.sys-bar .grp { display: flex; gap: 22px; }
.sys-bar .grp span { display: inline-flex; align-items: center; gap: 8px; }
.sys-bar .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-muted);
}
.sys-bar .dot.live {
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(10, 132, 255, 0.4);
  animation: pulse-dot 2.2s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* ── Layout containers ────────────────────────────────────── */

.container { max-width: var(--container); margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 32px; }

section { padding: clamp(64px, 9vw, 128px) 0; }
section + section { border-top: 1px solid var(--line-2); }

.section-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
  margin-bottom: 64px;
}
.section-head .eyebrow { padding-top: 14px; }
.section-head h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(30px, 4vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1.08;
  max-width: 36ch;
  text-wrap: balance;       /* never orphan the last word */
}
.section-head h2 em {
  font-style: italic;
  font-weight: 600;
  color: var(--fg-muted);
}
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
  .section-head .eyebrow { padding-top: 0; }
}

/* ── Pill button ──────────────────────────────────────────── */

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px;
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--r-pill);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: gap 320ms var(--ease), background 320ms var(--ease), transform 320ms var(--ease);
}
.pill .arrow { display: inline-block; transition: transform 320ms var(--ease); }
.pill:hover { gap: 14px; transform: scale(1.03); }
.pill:hover .arrow { transform: translateX(3px); }

.pill.ghost {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--line);
}
.pill.ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ── Reveal-on-scroll · Apple-style focus-in ──────────────── */

.reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(8px);
  transition:
    opacity 1100ms var(--ease),
    transform 1100ms var(--ease),
    filter 1100ms var(--ease);
  will-change: opacity, transform, filter;
}
.reveal.in {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
  /* Stop scroll-triggered reveals from moving — they're large translates. */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  /* Ambient decorative animations (orange beam sweep, watermark breath,
     status dot pulse, scroll cue) are continuous and gentle — leave running. */
}

/* ── Footer ───────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line-2);
  padding: 40px 0 56px;
}
.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  font-family: var(--f-body); font-size: 12px;
  letter-spacing: 0; text-transform: none;
  color: var(--fg-muted);
}
.footer-inner a:hover { color: var(--fg); }

/* ── Common card ──────────────────────────────────────────── */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease), border-color 420ms var(--ease);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-3);
  box-shadow:
    0 2px 4px rgba(10, 11, 13, 0.03),
    0 28px 54px -22px rgba(10, 11, 13, 0.16);
}

::selection { background: var(--fg); color: var(--bg); }

/* ── Crosshair corners (industrial detail) ───────────────── */

.xcorner {
  position: absolute;
  width: 10px; height: 10px;
  border-color: var(--line-3);
  border-style: solid;
}
.xcorner.tl { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
.xcorner.tr { top: -1px; right: -1px; border-width: 1px 1px 0 0; }
.xcorner.bl { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; }
.xcorner.br { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }