/* sift-brand.css
 * 单一源 · 所有 marketing 子页共享
 * Light · Source Han Serif + SF · 纯黑 accent #0A0A0A (chip-green 仍 olive 供状态指示)
 * 抽自 sift-privacy.html 2026-05-23 · Worker C+D 同 design system
 */

:root {
  /* ---- 色板 ---- */
  --bg: #FFFFFF;
  --bg-elev: #FAFAF7;
  --bg-tint: #F6F2EA;
  --ink: #1A1A1A;
  --ink-dim: rgba(26, 26, 26, 0.62);
  --ink-dimmer: rgba(26, 26, 26, 0.42);
  --ink-faint: rgba(26, 26, 26, 0.16);
  --border: rgba(26, 26, 26, 0.08);
  --border-strong: rgba(26, 26, 26, 0.16);

  --accent: #0A0A0A;
  --accent-soft: #2A2A2A; /* 推荐档高亮 / PLUS 列描边软 ink */
  --accent-strong: #000000;

  /* ---- chip ---- */
  --chip-blue: #2C3FCE;
  --chip-blue-bg: #E8ECFF;
  --chip-orange: #C9430F;
  --chip-orange-bg: #FFE8DC;
  --chip-green: #4A6B2A;
  --chip-green-bg: #E8EDC4;
  --chip-purple: #5856D6;
  --chip-purple-bg: #ECEBFF;
  --chip-amber: #8B6A1B;
  --chip-amber-bg: #FFF1CC;
  --chip-rose: #B5525C;
  --chip-rose-bg: #FCE8EB;

  /* ---- shadow ---- */
  --shadow-card: 0 1px 2px rgba(20, 20, 20, 0.04), 0 8px 24px rgba(20, 20, 20, 0.06);
  --shadow-float: 0 2px 6px rgba(20, 20, 20, 0.06), 0 14px 40px rgba(20, 20, 20, 0.08);
  --shadow-deep: 0 4px 16px rgba(20, 20, 20, 0.08), 0 24px 60px rgba(20, 20, 20, 0.12);

  /* ---- 字体 ---- */
  --font-serif: 'Source Han Serif SC', 'Noto Serif SC', 'PingFang SC', Georgia, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'PingFang SC', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, monospace;

  /* ---- 动效 ---- */
  --t-fast: 120ms;
  --t-normal: 240ms;
  --t-slow: 480ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul, ol { list-style: none; }

/* ============ NAV ============ */
nav.top {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1320px; margin: 0 auto;
  padding: 16px 40px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none;
  font-weight: 600; font-size: 17px; letter-spacing: -0.018em;
}
.nav-links { display: flex; gap: 2px; align-items: center; flex-wrap: nowrap; }
.nav-link {
  color: var(--ink-dim); text-decoration: none; font-size: 14px;
  padding: 8px 14px; border-radius: 8px;
  transition: color var(--t-fast) var(--ease-out);
  white-space: nowrap;
}
.nav-link:hover { color: var(--ink); }
.nav-link.current { color: var(--accent); font-weight: 600; }
.nav-cta {
  background: var(--ink); color: var(--bg);
  padding: 9px 16px; border-radius: 10px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
  margin-left: 12px;
  white-space: nowrap;
}
.nav-cta:hover { opacity: 0.86; }

/* lang toggle (EN / 中) */
.lang-toggle {
  display: inline-flex;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
  margin-left: 10px;
}
.lang-toggle button {
  background: transparent;
  border: none;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.lang-toggle button.active {
  background: var(--ink);
  color: var(--bg);
}
.lang-toggle button:not(.active):hover { color: var(--ink); }

/* ============ HERO ============ */
section.hero {
  padding: 96px 40px 56px;
}
.hero-inner { max-width: 880px; margin: 0 auto; }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--accent);
  letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
h1.hero-title {
  font-family: var(--font-serif);
  font-size: clamp(48px, 6.6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.036em;
  font-weight: 400;
  margin-bottom: 22px;
}
h1.hero-title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
  background: linear-gradient(180deg, transparent 70%, var(--accent-soft) 70%, var(--accent-soft) 92%, transparent 92%);
  padding: 0 6px;
  margin: 0 -6px;
}
.hero-sub {
  font-size: 18px; color: var(--ink-dim);
  line-height: 1.6;
  max-width: 660px;
}
.hero-sub strong { color: var(--ink); font-weight: 500; }

/* ============ section title ============ */
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.08; letter-spacing: -0.024em;
  font-weight: 400;
  max-width: 880px;
  margin-bottom: 56px;
}
.section-title em { font-style: italic; color: var(--accent); font-weight: 400; }

/* ============ prose container ============ */
.prose {
  max-width: 720px;
  margin: 0 auto;
  font-size: 16.5px;
  color: var(--ink);
  line-height: 1.75;
}
.prose h2 {
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin-top: 56px;
  margin-bottom: 18px;
  line-height: 1.2;
}
.prose h2:first-child { margin-top: 0; }
.prose h2 em { font-style: italic; color: var(--accent); font-weight: 500; }
.prose h3 {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-top: 32px;
  margin-bottom: 10px;
  color: var(--ink);
}
.prose p {
  margin-bottom: 18px;
  color: var(--ink-dim);
}
.prose p strong { color: var(--ink); font-weight: 500; }
.prose ul { margin: 0 0 22px; padding: 0; list-style: none; }
.prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--ink-dim);
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 4px; top: 12px;
  width: 8px; height: 2px;
  background: var(--accent);
}
.prose a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-soft);
  transition: border-color var(--t-fast) var(--ease-out);
}
.prose a:hover { border-bottom-color: var(--accent); }
.prose code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: var(--bg-elev);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-strong);
}
.prose .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dimmer);
  letter-spacing: 0.04em;
  margin-bottom: 28px;
}

/* ============ tag chip ============ */
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 5px;
  margin-bottom: 16px;
}
.tag.blue   { background: var(--chip-blue-bg);   color: var(--chip-blue); }
.tag.orange { background: var(--chip-orange-bg); color: var(--chip-orange); }
.tag.green  { background: var(--chip-green-bg);  color: var(--chip-green); }
.tag.purple { background: var(--chip-purple-bg); color: var(--chip-purple); }
.tag.amber  { background: var(--chip-amber-bg);  color: var(--chip-amber); }
.tag.rose   { background: var(--chip-rose-bg);   color: var(--chip-rose); }

/* ============ FAQ accordion ============ */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}
details.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 22px 0;
  transition: padding var(--t-fast) var(--ease-out);
}
details.faq-item:first-child { border-top: 1px solid var(--border); }
details.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ink);
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::after {
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--accent);
  font-weight: 400;
  line-height: 1;
  transition: transform var(--t-normal) var(--ease-out);
}
details.faq-item[open] summary::after {
  content: '−';
}
details.faq-item summary:hover { color: var(--accent); }
details.faq-item .answer {
  margin-top: 16px;
  padding-right: 50px;
  font-size: 16px;
  color: var(--ink-dim);
  line-height: 1.7;
}
details.faq-item .answer p { margin-bottom: 12px; }
details.faq-item .answer p:last-child { margin-bottom: 0; }
details.faq-item .answer strong { color: var(--ink); font-weight: 500; }
details.faq-item .answer code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: var(--bg-elev);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--accent-strong);
}

/* ============ download tiles ============ */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.dl-tile {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.dl-tile .platform-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.dl-tile h3 {
  font-family: var(--font-serif);
  font-size: 24px; font-weight: 500;
  letter-spacing: -0.016em;
  margin-bottom: 0;
  line-height: 1.2;
}
.dl-tile h3 em { color: var(--accent); font-style: italic; font-weight: 500; }
.dl-tile .platform-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-dimmer);
  letter-spacing: 0.04em;
  display: flex;
  gap: 10px;
}
.dl-tile .platform-meta span { white-space: nowrap; }
.btn-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ink);
  color: var(--bg);
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity var(--t-fast) var(--ease-out);
  text-align: center;
}
.btn-download:hover { opacity: 0.86; }
.btn-download.disabled {
  background: var(--bg-elev);
  color: var(--ink-dimmer);
  border: 1px dashed var(--border-strong);
  pointer-events: none;
}
.btn-download.secondary {
  background: var(--bg);
  color: var(--ink);
  border: 1px solid var(--border-strong);
}
.dl-tile .sha {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-dimmer);
  letter-spacing: 0.02em;
  word-break: break-all;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 8px 12px;
  border-radius: 6px;
  line-height: 1.5;
}

/* ============ install steps ============ */
.install-steps {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.step {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 22px;
}
.step .num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.18em;
  font-weight: 600;
  margin-bottom: 10px;
}
.step h4 {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.012em;
}
.step p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.6;
}

/* ============ FOOTER ============ */
footer.site {
  border-top: 1px solid var(--border);
  padding: 64px 40px 32px;
  margin-top: 96px;
  background: var(--bg-elev);
}
.footer-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 48px;
}
.footer-brand .brand-name {
  display: flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 600;
  letter-spacing: -0.018em;
  margin-bottom: 14px;
}
.footer-brand p {
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.6;
  max-width: 280px;
}
.footer-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-dimmer);
  margin-bottom: 14px;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
  font-size: 14.5px;
  color: var(--ink-dim);
  text-decoration: none;
  transition: color var(--t-fast) var(--ease-out);
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  max-width: 1320px;
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--ink-dimmer);
}
.footer-bottom .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-bottom .status-pill::before {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

/* ============ lang switch utility ============ */
[data-lang-zh], [data-lang-en] { display: none; }
html[lang="zh-CN"] [data-lang-zh] { display: revert; }
html[lang="en"] [data-lang-en] { display: revert; }
/* block-level overrides */
html[lang="zh-CN"] [data-lang-zh].block,
html[lang="en"]    [data-lang-en].block { display: block; }
html[lang="zh-CN"] [data-lang-zh].inline,
html[lang="en"]    [data-lang-en].inline { display: inline; }

/* ============ responsive ============ */
/* Note: mobile + hamburger + table-stack rules live in sift-mobile.css —
   loaded by every user-facing page (shared design system). */
@media (max-width: 900px) {
  .nav-inner { padding: 14px 24px; }
  .nav-link.hide-sm { display: none; }
  section.hero { padding: 64px 24px 40px; }
  .pillars-inner, .details-inner, .thirdparty-inner { padding: 0 24px; }
  .dl-grid { grid-template-columns: 1fr; }
  .install-steps { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: 1 / -1; }
  footer.site { padding: 48px 24px 28px; }
  .prose h2 { font-size: 24px; margin-top: 44px; }
  details.faq-item summary { font-size: 17.5px; }
}
@media (max-width: 600px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 12px; }
}

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── Mobile nav (hamburger) ─── */
.nav-toggle {
  display: none;
  background: none; border: none;
  padding: 8px; cursor: pointer;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; stroke: var(--ink, #1A1A1A); }

@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: fixed; top: 64px; left: 0; right: 0;
    background: var(--bg, #FFF);
    flex-direction: column;
    padding: 20px 24px;
    border-bottom: 1px solid var(--separator, #E5E5E5);
    z-index: 100;
  }
  .nav-links.open { display: flex; }
  .nav-link { padding: 16px 0; border-bottom: 1px solid #F0F0F0; }
  .nav-link:last-child { border-bottom: none; }
}

@media (max-width: 380px) {
  .nav-inner { padding: 10px 16px; }
}