/* ==========================================================================
   mobile.css — 窄屏（小于 810px）版式
   参考网页在手机上也是拼贴排布，这里改为上下交错排列，保证图片看得清。
   ========================================================================== */
.mobile-cta { display: none; }

@media (max-width: 809px) {
  .top-logo { left: 16px; top: 22px; width: 120px; }
  .top-logo img { width: 120px; }
  .pillnav { top: 64px; }
  .top-links { right: 16px; top: 28px; gap: 16px; }

  .hero-content { width: 92vw; }
  .hero-tags { transform: scale(.72); transform-origin: 50% 0; margin-bottom: -26px; }

  .sec-title { font-size: 48px; line-height: 44px; letter-spacing: -1.2px; }
  .index, .index-bg { display: none; }

  .sec { padding-top: 40px; margin-bottom: 20px; }
  .sec-items {
    width: auto !important; height: auto !important; left: 0 !important;
    display: flex; flex-direction: column; gap: 10px; padding: 0 16px;
  }
  .it { position: relative; left: auto !important; top: auto !important; width: 70% !important; height: auto !important; }
  .it img { height: auto; }
  .sec-items > .it:nth-of-type(odd) { align-self: flex-end; }
  .sec-items > .it:nth-of-type(3n) { width: 86% !important; }
  .fig { position: static; margin-top: 18px; }
  .sec-items > .fig:nth-of-type(odd) { align-self: flex-end; }
  .frame { aspect-ratio: 4 / 3; }
  .frame .view img { width: 100%; }

  .mobile-cta:not([hidden]) {
    display: flex; position: fixed; z-index: 30; left: 50%; bottom: 20px; transform: translateX(-50%);
    width: 292px; height: 42px; border-radius: 40px; align-items: center; justify-content: center; gap: 8px; color: #fff;
  }
  .mobile-cta svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.6; }

  .ring.r1 { width: 220vw; height: 220vw; }
  .ring.r2 { width: 160vw; height: 160vw; }
  .ring.r3 { width: 120vw; height: 120vw; }
  .ring.r4 { width: 86vw; height: 86vw; }
  .ring.r5 { width: 58vw; height: 58vw; }
  .thanks { width: 86vw; }

  .foot-bar { flex-direction: column-reverse; align-items: flex-start; gap: 12px; height: auto; padding: 0 16px 24px; }
  .foot-links { flex-wrap: wrap; gap: 8px 16px; }

  .p-head { padding-top: 130px; }
  .p-title { font-size: 48px; line-height: 44px; letter-spacing: -1.2px; }
  .p-lead { font-size: 34px; line-height: 32px; letter-spacing: -1px; }
  body.proj-nushu .p-lead { font-size: 24px; line-height: 28px; letter-spacing: -0.6px; }
  .p-icon { margin-top: 10px; }
  .p-body { max-width: calc(100% - 32px); margin-top: 48px; gap: 20px; }
  .p-half, .p-grid, .p-step, .p-step .txt { grid-template-columns: 1fr; gap: 20px; }
  .p-phones { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .p-next { margin-top: 90px; }
  .p-foot { height: 150px; }

  .ab-stage { transform: translateX(80px); }
  .ab-orbit { transform: scale(0.58); }
  .ab-stack { width: min(520px, 84vw); }
  .ab-hero { height: 400vh; }
  .ab-body { padding-top: 60px; }
  .ab-body .s27 { font-size: 22px; line-height: 27px; }
  .ab-body .s30 { font-size: 24px; line-height: 29px; margin: 60px 0; }
  .ab-list { padding-top: 110px; }
  .ab-list li { font-size: 22px; line-height: 26px; }

  .ct { grid-template-columns: 1fr; gap: 56px; padding: 140px 16px 120px; }
  .ct .t18.nowrap { white-space: normal; }
  .ct .mail { font-size: 30px; line-height: 38px; word-break: break-all; }
  .lb-top, .lb-foot { padding: 16px; }
  .lb-foot { flex-direction: column; align-items: stretch; }
  .lb-stage { padding: 0 16px; }
  .lb-stage.duo { flex-direction: column; }
  .lb-stage.duo img { max-width: 100% !important; max-height: 45%; }
  .app-frame { margin: 0 16px 16px; }
}
@media (max-width: 809px) {
  .cursor-tag, .pen { display: none; }
}