/* ===================================================
   DESIGN TOKENS — BOSS直聘风格 × 牛匠蓝色主题
   =================================================== */
:root {
  /* 主题色阶 — 牛匠品牌 (#154ed1) */
  --blue-50:  #ecf2fe;
  --blue-100: #c7d9fb;
  --blue-200: #8caef7;
  --blue-300: #5284f2;
  --blue-400: #235ceb;
  --blue-500: #1b54e0;
  --blue-600: #154ed1;
  --blue-700: #1141b0;
  --blue-800: #0e3490;
  --blue-900: #0b276e;
  --blue-950: #081a4d;

  /* 点缀色 */
  --accent-orange: #f97316;
  --accent-green:  #10b981;
  --accent-gold:   #f59e0b;

  /* 中性色 */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* 字体 */
  --font: 'Inter', 'Noto Sans SC', system-ui, -apple-system, sans-serif;

  /* 尺寸 */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  /* 间距 */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;

  /* 圆角 */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-full: 9999px;

  /* 阴影 */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.10);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.12);
  --shadow-blue: 0 4px 20px rgba(21,78,209,.25);

  /* 动效 */
  --ease-out-expo:  cubic-bezier(0.16,1,0.3,1);
  --ease-out-quart: cubic-bezier(0.25,1,0.5,1);
  --dur-fast: 150ms; --dur-norm: 280ms; --dur-slow: 500ms;
}

/* ===================================================
   RESET & BASE
   =================================================== */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-font-smoothing:antialiased }
body { font-family:var(--font); color:var(--gray-800); background:#fff; overflow-x:hidden; line-height:1.65 }
a { color:inherit; text-decoration:none }
button { font-family:inherit; cursor:pointer; border:none; outline:none }
:focus-visible { outline:2px solid var(--blue-500); outline-offset:2px }

.container { width:100%; max-width:1200px; margin:0 auto; padding:0 var(--sp-8) }

/* ===================================================
   SCROLL REVEAL & UTILITIES
   =================================================== */
.sr { opacity:0; transform:translateY(28px); transition:opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo) }
.sr.visible { opacity:1; transform:translateY(0) }
.sr-left { opacity:0; transform:translateX(-40px); transition:opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo) }
.sr-left.visible { opacity:1; transform:translateX(0) }
.sr-right { opacity:0; transform:translateX(40px); transition:opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo) }
.sr-right.visible { opacity:1; transform:translateX(0) }
.sr-scale { opacity:0; transform:scale(0.94); transition:opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo) }
.sr-scale.visible { opacity:1; transform:scale(1) }

/* ── ICON SYSTEM ── */
.icon { width:1em; height:1em; display:inline-flex; vertical-align:-0.125em; flex-shrink:0 }
.icon--xs { width:.9em; height:.9em }
.icon--pain { width:2.2rem; height:2.2rem; color:var(--blue-500) }
.icon--reason { width:2.5rem; height:2.5rem; color:var(--blue-600) }
.about__char-glyph .icon { width:2rem; height:2rem }
.fail .icon, .pass .icon { width:1em; height:1em; vertical-align:-0.18em }
.fail .icon { color:#ef4444 }
.pass .icon { color:var(--accent-green) }

/* ===================================================
   NAVIGATION — BOSS直聘风：透明+白底滚动切换
   =================================================== */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:1000;
  height:64px;
  background:transparent;
  transition:background var(--dur-norm) var(--ease-out-expo), box-shadow var(--dur-norm) var(--ease-out-expo);
}
.nav.scrolled {
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(12px) saturate(180%);
  box-shadow:0 1px 0 rgba(0,0,0,.08);
}
.nav__inner {
  display:flex; align-items:center; justify-content:space-between;
  height:100%; padding:0 var(--sp-8);
  max-width:1200px; margin:0 auto;
}
.nav__logo { display:flex; align-items:center }
.nav__links { display:flex; align-items:center; gap:var(--sp-8) }
.nav__link {
  font-size:var(--text-sm); font-weight:500; color:var(--gray-600);
  transition:color var(--dur-fast); position:relative;
}
.nav__link::after {
  content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px;
  background:linear-gradient(90deg, #154ed1, #0e3490); border-radius:var(--r-full);
  transform:scaleX(0); transform-origin:center;
  transition:transform var(--dur-norm) var(--ease-out-expo);
}
.nav__link:hover { color:var(--blue-600) }
.nav__link:hover::after { transform:scaleX(1) }
.nav__actions { display:flex; align-items:center; gap:var(--sp-3) }
.nav__btn-ghost, .nav__btn-outline {
  padding:var(--sp-2) var(--sp-5); border:1.5px solid var(--blue-600);
  border-radius:var(--r-full); font-size:var(--text-sm); font-weight:600;
  color:var(--blue-600); background:transparent;
  transition:all var(--dur-fast);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.nav__btn-ghost:hover, .nav__btn-outline:hover { background:var(--blue-600); color:#fff }

.nav__btn-solid {
  padding:var(--sp-2) var(--sp-5);
  background:linear-gradient(135deg, var(--blue-600), var(--blue-500)); border-radius:var(--r-full);
  font-size:var(--text-sm); font-weight:600; color:#fff;
  transition:all var(--dur-fast); box-shadow:0 4px 16px rgba(21,78,209,.3);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.nav__btn-solid:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(21,78,209,.45) }

.nav__mobile-btn { display:none; background:none; padding:var(--sp-2); border:none; cursor:pointer }
.nav__mobile-icon { width:22px; height:2px; background:var(--gray-700); display:block; position:relative }
.nav__mobile-icon::before,.nav__mobile-icon::after { content:''; position:absolute; width:100%; height:2px; background:var(--gray-700); left:0; transition:transform var(--dur-norm) var(--ease-out-expo) }
.nav__mobile-icon::before { top:-7px } .nav__mobile-icon::after { top:7px }

/* Mobile drawer */
.nav__drawer { display:none; position:fixed; inset:0; z-index:999; background:rgba(0,0,0,.4) }
.nav__drawer-panel {
  position:absolute; top:0; right:0; bottom:0; width:300px;
  background:#fff; padding:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-4);
  transform:translateX(100%); transition:transform var(--dur-slow) var(--ease-out-expo);
}
.nav__drawer.open { display:block }
.nav__drawer.open .nav__drawer-panel { transform:translateX(0) }
.nav__drawer-link { font-size:var(--text-lg); font-weight:500; color:var(--gray-800); padding:var(--sp-3) 0; border-bottom:1px solid var(--gray-100); text-decoration:none }
.nav__drawer-link:last-of-type { border:none }

/* ===================================================
   BACKGROUND DECORATION FOR SUBPAGES
   =================================================== */
.subpage-bg::before {
  content: '';
  position: fixed;
  top: -200px; right: -200px;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,78,209,.08) 0%, transparent 70%);
  pointer-events: none;
}
.subpage-bg::after {
  content: '';
  position: fixed;
  bottom: -150px; left: -150px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(21,78,209,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ===================================================
   RESPONSIVE NAVIGATION
   =================================================== */
@media (max-width: 768px) {
  .nav__links,.nav__actions { display:none }
  .nav__mobile-btn { display:block }
  .nav__drawer-panel { width:280px }
  .nav__inner { padding:0 var(--sp-5) }
}