/* ---------- editorial CTA banner (atmospheric, centered, magazine-ad style) ----------
     Same atmospheric palette as the hero (soft blue + purple radial blobs
     over a near-white base) so the banner reads as a "scene-shift" inside
     the page's universe instead of dropping in from elsewhere. Uniform 1px
     border on all four sides — no directional box-shadow so the top edge
     reads the same thickness as the sides. */
  .cta-banner {
    /* Single sky->azure axis — two radial poles over a cool off-white
       base, plus grain via ::after. Both poles come from the logo's blue
       range (light wave + primary fill) so the banner reads as a patch of
       the brand's daylight sky. */
    background:
      radial-gradient(ellipse 75% 65% at 18% 20%, rgba(136, 200, 248, 0.50), transparent 60%),
      radial-gradient(ellipse 58% 78% at 85% 50%, rgba(10, 135, 247, 0.30), transparent 60%),
      linear-gradient(180deg, #f4f8fc 0%, #eaf2fa 60%, #e4eef8 100%);
    border: 1px solid #dde8f2;
    border-radius: 28px;
    padding: 56px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    text-align: center;
    color: #0e0e10;
    position: relative;
    /* No overflow:hidden — the 「加入社群」QR popover flips upward past the
       banner's top edge. The grain ::after clips itself to the rounded
       corners via border-radius:inherit instead. */
    isolation: isolate;
  }
  /* Film-grain overlay — SVG fractalNoise tile blended with `overlay` so it
     lifts highlights / deepens shadows without graying the canvas. */
  .cta-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    opacity: 0.22;
    mix-blend-mode: overlay;
    z-index: 0;
    border-radius: inherit;
  }
  .cta-banner > * { position: relative; z-index: 1; }
  /* CTA banner — page's largest sans declaration. Apple-style:
     single Geist family, single weight, no italic, color shift only on the
     emphasis phrase. Bigger than the section title (48px vs 34px) so the
     CTA is the visual climax rather than just another sans+italic title. */
  .cta-banner-title {
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-weight: 600;
    font-size: 48px;
    line-height: 1.1;
    letter-spacing: -1.8px;
    color: #0e0e10;
    white-space: nowrap;
    font-feature-settings: "ss01", "cv11";
  }
  /* Mobile: drop nowrap and shrink so the slogan stays inside the viewport
     instead of forcing horizontal scroll. */
  @media (max-width: 768px) {
    .cta-banner-title {
      font-size: 30px;
      letter-spacing: -0.5px;
      white-space: normal;
      max-width: 22em;
    }
  }
  .cta-banner-accent {
    font-family: inherit;
    font-style: normal;
    font-weight: 500;
    letter-spacing: inherit;
    /* Matches .hero-accent so all gradient accent words share one identity. */
    background: linear-gradient(180deg, #0a6ce8 0%, #38b6f8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .cta-banner-btn {
    background: #0e0e10;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    padding: 10px 18px;
    font-family: 'Geist', sans-serif;
    font-size: 13.5px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  }
  .cta-banner-btn:hover {
    background: #1a1a1d;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -6px rgba(14,14,16,0.32);
  }
  .cta-banner-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
  }
  /* Ghost 变体 — 「加入微信社群」次按钮：浅底描边，让位于实心的发布主按钮。 */
  .cta-banner-btn.is-ghost {
    background: rgba(255,255,255,0.72);
    color: #0e0e10;
    border: 1px solid rgba(14,14,16,0.16);
  }
  .cta-banner-btn.is-ghost:hover {
    background: #ffffff;
    border-color: rgba(14,14,16,0.32);
    box-shadow: 0 8px 18px -8px rgba(14,14,16,0.22);
  }
  html.dark .cta-banner-btn.is-ghost {
    background: rgba(255,255,255,0.08);
    color: #ececf1;
    border-color: rgba(255,255,255,0.18);
  }
  html.dark .cta-banner-btn.is-ghost:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.32);
  }
  /* 「加入社群」pill 的二维码弹层 — 复用顶栏 .nav-wechat 组件；banner 贴近
     页底，弹层向上翻并相对 pill 居中（顶栏版是向下、右对齐）。hover 桥接
     ::before 相应移到弹层下缘。 */
  .cta-banner-wechat .nav-wechat-pop {
    top: auto;
    bottom: calc(100% + 12px);
    left: 50%;
    right: auto;
    transform: translate(-50%, 4px);
  }
  .cta-banner-wechat .nav-wechat-pop::before { top: auto; bottom: -12px; }
  .cta-banner-wechat:hover .nav-wechat-pop,
  .cta-banner-wechat:focus-within .nav-wechat-pop,
  .cta-banner-wechat.is-open .nav-wechat-pop { transform: translate(-50%, 0); }

  /* ---------- FAQ accordion ---------- */
  .faq-list {
    border-top: 1px solid rgba(14,14,16,0.08);
    /* Centered reading column under the centered title — full-rail rows
       read like a settings page next to a centered heading. 800px keeps
       the answers at a comfortable line length; question/answer text
       stays left-aligned inside for scannability. */
    max-width: 800px;
    margin: 0 auto;
  }
  .faq-item {
    border-bottom: 1px solid rgba(14,14,16,0.08);
  }
  .faq-q {
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 20px 4px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 15.5px;
    font-weight: 500;
    color: #0e0e10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    letter-spacing: -0.1px;
    transition: color 120ms ease;
  }
  .faq-q:hover { color: #0969da; }
  .faq-chevron {
    flex-shrink: 0;
    transition: transform 240ms ease;
    color: #5a5a62;
  }
  .faq-item.is-open .faq-chevron { transform: rotate(180deg); color: #0969da; }
  .faq-a {
    padding: 0 4px 20px;
    font-family: 'Geist', 'Noto Sans SC', sans-serif;
    font-size: 14px;
    color: #4a4a52;
    line-height: 1.7;
    max-width: 760px;
    white-space: normal;
  }
  .faq-a p { margin: 0; }
  .faq-a p + p { margin-top: 14px; }
  .faq-a a {
    color: #0969da;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
  }
  .faq-a a:hover { color: #0759b8; }
  /* FAQ 答案里的社群二维码（「有官方社群吗」条目）。 */
  .faq-a .faq-qr {
    width: 148px;
    height: 148px;
    object-fit: contain;
    border-radius: 10px;
    border: 1px solid rgba(14,14,16,0.08);
    margin-top: 2px;
  }
  html.dark .faq-a .faq-qr { border-color: rgba(255,255,255,0.12); }