/* 拼豆集官网 — 页面外壳：品牌标识、顶栏、页脚 */

/* —— 三颗豆的品牌标识 —— */
.brand { display: flex; align-items: center; gap: 10px; color: var(--c-ink); flex: none; white-space: nowrap; }
.brand:hover { color: var(--c-ink); }
.brand__name { font-size: 18px; font-weight: 900; letter-spacing: .02em; }

.bead-mark {
  display: grid;
  grid-template-columns: 14px 9px;
  gap: 3px;
  align-items: center;
}
.bead {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bead::after {
  content: '';
  border-radius: 50%;
  background: var(--c-bg);
  width: 3px;
  height: 3px;
}
.bead--lg { width: 14px; height: 14px; background: var(--c-accent); grid-row: span 2; }
.bead--lg::after { width: 5px; height: 5px; }
.bead--sm { width: 9px; height: 9px; }
.bead--yellow { background: var(--c-bead-yellow); }
.bead--blue { background: var(--c-bead-blue); }

/* —— 顶栏 —— */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--c-bg) 92%, transparent);
  border-bottom: 1px solid var(--c-border);
}
@supports (backdrop-filter: blur(12px)) {
  .site-header { backdrop-filter: blur(12px); }
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: 14px 24px;
  flex-wrap: wrap;
  padding-block: 14px;
}

.site-nav {
  display: flex;
  gap: 22px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.site-nav a {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-muted);
  transition: color var(--dur-fast) ease;
}
.site-nav a:hover { color: var(--c-accent); }

.site-header__cta { flex: none; }

/* 阅读进度条 */
.scroll-progress { height: 2px; background: transparent; }
.scroll-progress__bar {
  height: 100%;
  width: 0;
  background: var(--c-accent);
  transition: width .12s linear;
}

/* —— 页脚 —— */
.site-footer { background: var(--c-bg); border-top: 1px solid var(--c-border); }

.site-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  padding: 52px 0 40px;
}

.site-footer__brand { display: flex; align-items: center; gap: 10px; }
.site-footer__brand img { width: 44px; height: 44px; border-radius: var(--r-sm); }
.site-footer__brand span { font-size: 17px; font-weight: 900; }

.site-footer__tagline {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--c-muted);
  margin-top: 14px;
  max-width: 22em;
}

.site-footer__heading {
  font-size: 12px;
  font-weight: 700;
  color: var(--c-faint);
  letter-spacing: .08em;
  margin-bottom: 12px;
}

.site-footer__links { display: flex; flex-direction: column; gap: 9px; }
.site-footer__links a,
.site-footer__links span { font-size: 14px; color: var(--c-muted); }
.site-footer__links a:hover { color: var(--c-accent); }
.site-footer__links .site-footer__hint { font-size: 13.5px; color: var(--c-faint); line-height: 1.7; }

.site-footer__legal { padding-bottom: 44px; }
.site-footer__rule { height: 1px; background: var(--c-border); margin-bottom: 22px; }
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--c-faint);
}
.site-footer__meta a { color: var(--c-faint); }
.site-footer__meta a:hover { color: var(--c-muted); }

/* 窄屏：品牌与下载按钮同一行，导航单独一行横向滚动，
   避免吸顶栏在小屏上占掉三行高度。 */
@media (max-width: 719px) {
  .site-header__bar { gap: 10px 12px; }
  .site-header__cta { margin-left: auto; order: 2; }
  .site-nav {
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 18px;
    padding-bottom: 2px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { white-space: nowrap; }
}