@charset "UTF-8";
/* ==========================================================================
   blocks.css —— 页面区块
   站头导航 / Hero / 数据条 / 详述 / 下载卡 / 联系卡 / 页头 / 页脚 / 各页局部
   ========================================================================== */

/* ---------------------------------------------------------------- 站头 */
.site-header {
  position: relative;
  background: var(--bg);
  border-block-end: 1px solid var(--line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  min-height: 72px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
}

.brand:hover { text-decoration: none; }

.brand__logo {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
}

.brand__name {
  font-size: 18px;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav__list a {
  font-size: var(--fs-body);
  color: var(--text-muted);
}

.nav__list a:hover { color: var(--text); text-decoration: none; }

.nav__list a[aria-current="page"] {
  color: var(--text);
  font-weight: var(--fw-medium);
}

.site-header__end {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--bg-neutral);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  position: relative;
}

.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after  { top: 6px; }

@media (max-width: 1000px) {
  .nav-toggle { display: inline-flex; }

  .nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: 20;
    background: var(--bg);
    border-block-end: 1px solid var(--line);
    padding: var(--sp-3) var(--gutter) var(--sp-5);
  }

  .site-header.is-open .nav { display: block; }

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__list a {
    display: block;
    padding-block: var(--sp-3);
    font-size: var(--fs-lead);
    border-block-end: 1px solid var(--line);
  }
}

/* ---------------------------------------------------------------- Hero */
/* 左右结构：左列文案（左对齐）+ 右列竖图墙，整体垂直居中。
   图墙吃固定宽度，左列吃掉剩余空间；容器不足一屏宽时回落成竖排居中（见下方断点）。 */
.hero {
  background: var(--bg-soft);
  padding-block: 84px 76px;
}

.hero__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-7);            /* 左右列间距 */
}

.hero__body {
  flex: 1 1 auto;
  min-width: 0;                /* 允许左列被压缩，不让长文案顶开图墙 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;     /* 默认 stretch 会把 .pill 拉成长条 */
  gap: var(--sp-4);
}

.hero__lead {
  font-size: var(--fs-card);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* 右列图墙：定宽（3×168 + 间距），两侧下移形成拱形韵律，避免一排平齐显得呆。
   不设 flex-wrap —— 换行交给 .shot-wall 自己按可用宽度决定。 */
.hero__wall {
  flex: 0 0 auto;
  gap: var(--sp-4);
}

.hero__wall .media:nth-child(1),
.hero__wall .media:nth-child(3) { margin-block-start: var(--sp-6); }

.hero__alt { font-size: var(--fs-cap); color: var(--text-muted); }

/* 左右分栏需要完整的 1200px 容器才舒展。视口一旦窄于它，容器就被压缩，
   左列会被图墙挤到 380px 出头 —— 52px 的标题几乎贴着列边。
   所以门槛直接对齐 --w-container，不到这个宽度就回落成竖排。 */
@media (max-width: 1200px) {
  .hero__inner {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-6);
  }

  .hero__body { align-items: center; }
  .hero__title, .hero__lead { text-align: center; }

  /* 竖排后不再需要错落，图墙回到一行居中 */
  .hero__wall .media:nth-child(1),
  .hero__wall .media:nth-child(3) { margin-block-start: 0; }
}

/* ---------------------------------------------------------------- 数据条 */
.data-section { background: var(--bg); }

.data-bar { min-height: 124px; }

/* ---------------------------------------------------------------- 核心功能 */
.features {
  display: flex;
  flex-direction: column;
  gap: 34px;
}

.features .section-head { gap: var(--sp-3); }

/* ---------------------------------------------------------------- 详述（左文右图 / 左图右文） */
.detail { background: var(--bg); padding-block: 96px; }
.detail--soft { background: var(--bg-soft); }

.detail__title { font-size: var(--fs-h3); }

.detail .bullet-list { padding-block-start: var(--sp-1); }

/* ---------------------------------------------------------------- 下载转化卡 */
.download-cta { padding-block: var(--sp-9); }

.download-card {
  background: linear-gradient(225deg, var(--brand-grad-from), var(--brand-grad-to));
  border-radius: var(--r-xl);
  padding: 58px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 70px;
}

.download-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.download-card__title {
  font-size: var(--fs-cta);
  font-weight: var(--fw-black);
  color: var(--text-on-brand);
}

.download-card__lead {
  font-size: var(--fs-lead);
  color: var(--text-on-brand);
}

.download-card__meta {
  font-size: var(--fs-cap);
  color: var(--text-on-brand);
}

.download-card__actions { padding-block-start: var(--sp-1); }

.download-card .qr-plate { width: 164px; height: 164px; }

@media (max-width: 860px) {
  .download-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-6);
    padding: 40px var(--sp-5);
  }

  .download-card .btn-row { width: 100%; }
  .download-card .btn-row .btn { flex: 1 1 auto; }
  .download-card .qr-zone { align-self: center; }
}

/* ---------------------------------------------------------------- 首页 FAQ 速览 */
.faq-teaser {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.faq-teaser__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-block-start: var(--sp-4);
}

.faq-row {
  background: var(--bg);
  border-radius: var(--r-btn);
}

.faq-row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 22px var(--sp-5);
  cursor: pointer;
  list-style: none;
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.faq-row > summary::-webkit-details-marker { display: none; }
.faq-row > summary::marker { content: ""; }

.faq-row__icon {
  flex: 0 0 auto;
  color: var(--text-muted);
  transition: transform var(--dur) ease;
}

.faq-row[open] .faq-row__icon { transform: rotate(45deg); }

.faq-row__body {
  padding: 0 var(--sp-5) 22px;
  font-size: var(--fs-body);
  line-height: var(--lh-read);
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- 页头（内页） */
.page-head {
  background: var(--bg-soft);
  padding-block: 56px 52px;
}

.page-head__inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---------------------------------------------------------------- 下载中心 */
/* 三张平台卡横排一行。原来三张竖排 + 右侧 300px 侧栏，整块高度到 1400px；
   现在压到一张卡的高度 —— 卡内只留「平台 + 版本 + 一行元信息 + 按钮」，
   字段细节交给卡下提示与安装指南页。 */
/* 横排三卡直接用站里已有的 .grid--3（它的 860 折行规则在 layout.css）。
   这里不另造栅格：中间档不加两列，否则会变成「2 + 1」，
   第三张孤零零挂在左下角，比稍微紧一点更难看。 */

.download-tips { margin-block-start: var(--sp-5); }

.version-card {
  background: var(--bg-soft);
  border-radius: var(--r-card);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  scroll-margin-block-start: var(--sp-5);   /* #android / #windows / #ios 锚点跳转后不贴顶 */
}

/* 卡头：平台名 + 状态标签 */
.version-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
}

.version-card__platform {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.version-card__version {
  font-size: var(--fs-h4);   /* 横排三卡不需要 30px 大字压场，降一档 */
  font-weight: var(--fw-black);
  color: var(--text);
}

.version-card__note {
  font-size: var(--fs-cap);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* 按钮贴住卡底：三张卡的元信息长短不一，按钮仍要在同一水平线上 */
.version-card > .btn { margin-block-start: auto; }

/* 次卡（Windows / iOS 等非主推平台）：白底描边 + 版本号降一档灰度，弱于 Android 主卡 */
.version-card--alt {
  background: var(--bg);
  border: 1px solid var(--line);
}

.version-card--alt .version-card__version { color: var(--text-body); }

.tip-card {
  background: var(--bg-soft);
  border-radius: var(--r-card);
  padding: 22px var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.tip-card__title { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text); }

.tip-card__text { font-size: var(--fs-cap); line-height: var(--lh-body); color: var(--text-muted); }

/* ---------------------------------------------------------------- 安装指南 */
/* 每个平台一块：标题 + 步骤卡 + 注意事项，块内统一节奏 */
.guide-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

.guide-notes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-block-start: var(--sp-2);
}

/* ---------------------------------------------------------------- 常见问题 */
.faq-groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ---------------------------------------------------------------- 关于我们 */
.about-content {
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

.about-intro {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.contact-card {
  background: var(--brand-surface);
  border-radius: var(--r-card);
  padding: 26px var(--sp-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.contact-card__label { font-size: var(--fs-micro); color: var(--brand); }

.contact-card__mail {
  display: inline-block;
  margin-block-start: var(--sp-1);
  font-size: 18px;
  font-weight: var(--fw-bold);
  color: var(--brand-ink);
}

.copy-btn {
  padding: 12px 22px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--brand-ink);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  cursor: pointer;
}

.copy-btn:hover { background: var(--bg-soft); }

.contact-card__action {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}

.contact-card__status {
  font-size: var(--fs-micro);
  color: var(--brand-ink);
}

/* ---------------------------------------------------------------- 页脚 */
.site-footer {
  background: var(--bg-invert);
  color: var(--text-invert);
  padding-block: var(--sp-8) 40px;
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.site-footer__top {
  display: flex;
  justify-content: space-between;
  gap: 72px;
  flex-wrap: wrap;
}

.site-footer__brand {
  width: 320px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.site-footer__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--r-xs);
}

.site-footer__name {
  font-size: var(--fs-card);
  font-weight: var(--fw-bold);
  color: var(--text-invert);
}

.site-footer__desc {
  font-size: var(--fs-cap);
  line-height: var(--lh-body);
  color: var(--text-invert-mute);
}

.site-footer__cols {
  display: flex;
  gap: 72px;
  flex-wrap: wrap;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-footer__col-title {
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--text-invert-mute);
}

.site-footer__col a {
  font-size: var(--fs-cap);
  color: var(--text-invert-link);
}

.site-footer__col a:hover { color: var(--text-invert); text-decoration: none; }

.site-footer__rule {
  height: 1px;
  background: var(--line-invert);
}

.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  color: var(--text-invert-mute);
}

@media (max-width: 860px) {
  .site-footer__top { gap: var(--sp-7); }
  .site-footer__cols { gap: var(--sp-7); }

  /* Hero 上下留白在窄屏收一半，首屏别被留白吃掉 */
  .hero { padding-block: 48px 40px; }
}