@media (max-width: 860px) {
  body { padding-bottom: 0; }
  .container { width: 92%; }
  section { padding: 48px 0; }

  /* header */
  .site-header { position: sticky; }
  .header-inner { gap: 10px; }
  .brand-logo { height: 34px; }
  .main-nav, .search-wrap { display: none; }
  .hamburger { display: inline-flex; }
  .header-actions { margin-left: auto; gap: 8px; }
  .theme-toggle { width: 38px; height: 38px; }

  /* hero */
  .hero { min-height: auto; padding: 40px 0 90px; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 32px; }
  .hero p.lead { font-size: 15px; }
  .hero-cta { gap: 10px; }
  .hero-cta .btn { flex: 1; }
  .hero-visual { max-width: 340px; margin: 0 auto; width: 100%; }
  .orbit-chip.o3 { display: none; }
  .orbit-chip.o1 { top: -14px; right: -4px; }
  .orbit-chip.o2 { bottom: -14px; left: -8px; }

  /* stats */
  .stats-strip { grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: -24px; padding: 28px 18px; border-radius: 18px; }
  .stat .num { font-size: 26px; }

  /* grids */
  .product-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .category-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .steps-grid, .feature-grid, .tst-grid { grid-template-columns: 1fr; gap: 14px; }
  .pc-body { padding: 14px; }
  .pc-name { font-size: 14px; }
  .pc-desc { display: none; }
  .pc-price .now { font-size: 17px; }
  .pc-price .old { font-size: 12px; }
  .pc-foot .btn { padding: 9px 6px; font-size: 12px; }
  .pc-featured { width: 30px; height: 30px; font-size: 13px; }
  .category-card { height: 150px; padding: 14px; }
  .category-card h3 { font-size: 15px; }

  /* footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }
  .site-footer { padding-bottom: 96px; }
  .newsletter-form { flex-direction: column; }

  /* product detail */
  .product-detail { grid-template-columns: 1fr; gap: 26px; }
  .gallery-thumbs button { width: 62px; height: 52px; }
  .plan-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tabs button { white-space: nowrap; }

  /* filter bar */
  .filter-bar { padding: 12px; gap: 10px; }
  .filter-bar .spacer { flex-basis: 100%; height: 0; }
  .filter-bar .result-count { margin-left: auto; }

  /* verify */
  .verify-box { padding: 24px 18px; }
  .verify-box .key-input { font-size: 14px; letter-spacing: 1px; }
  .vr-row { font-size: 13px; }
  .vr-row b { max-width: 55%; }

  /* docs */
  .docs-layout { grid-template-columns: 1fr; gap: 20px; }
  .docs-nav { position: static; display: flex; overflow-x: auto; gap: 6px; padding-bottom: 8px; }
  .docs-nav a { white-space: nowrap; padding: 8px 14px; }

  /* contact */
  .contact-grid { grid-template-columns: 1fr; }

  /* APP-LIKE: bottom navigation bar */
  .mobile-nav {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
    background: var(--card); border-top: 1px solid var(--border);
    padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 30px rgba(2, 8, 20, .12);
    justify-content: space-around;
  }
  .mobile-nav a {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-size: 10px; font-weight: 600; color: var(--text-muted); padding: 4px 10px;
    border-radius: 12px; min-width: 56px;
  }
  .mobile-nav a svg { width: 21px; height: 21px; }
  .mobile-nav a.active { color: var(--primary-2); background: var(--accent-soft); }
  .mobile-nav a.active svg { filter: drop-shadow(0 3px 6px rgba(14,165,233,.4)); }

  .go-top { bottom: 92px; right: 14px; width: 42px; height: 42px; }

  #toastWrap { top: 70px; right: 12px; left: 12px; }
  .toast { max-width: none; font-size: 13px; }

  .cta-banner { padding: 38px 22px; }
  .cta-banner .btn { width: 100%; }

  .pagination a, .pagination span { min-width: 38px; height: 38px; font-size: 13px; }

  .section-head { margin-bottom: 30px; }

  .pd-actions .btn { flex: 1; }
  .price-box .pb-current { font-size: 26px; }
  .endpoint-card { padding: 18px; }
  .ep-url { font-size: 12px; }
  .param-table { display: block; overflow-x: auto; white-space: nowrap; }
  .code-card pre { font-size: 12px; padding: 14px; }
  .hero-card { padding: 16px; }
  .key-chip { font-size: 11px !important; padding: 7px 10px !important; letter-spacing: 0 !important; overflow-x: auto; white-space: nowrap; }
  .vr-head { padding: 16px; }
  .order-panel { padding: 20px 16px; }
  .profile-grid { grid-template-columns: 1fr !important; }
}