/* ==========================================================================
   SHENYZ — Responsive overrides
   Desktop-first base lives in style.css; breakpoints below adjust layout.
   ========================================================================== */

/* ---------- ≤ 1024px : tablet ---------- */
@media (max-width: 1024px) {
  .steps-grid,
  .exchange-grid { grid-template-columns: 1fr 1fr; }

  .social-grid { grid-template-columns: 1fr 1fr; }

  .steps-connector { display: none; }
}

/* ---------- ≤ 900px : nav collapses to hamburger ---------- */
@media (max-width: 900px) {
  .main-nav,
  .header-cta { display: none; }

  .mobile-menu-toggle { display: flex; }
  .mobile-nav,
  .mobile-nav-backdrop { display: flex; }
}

/* ---------- ≤ 768px : mobile layout ---------- */
@media (max-width: 768px) {
  section { padding: 4.5rem 1.25rem; }

  .section-header { margin-bottom: 2.5rem; }

  .token-info-grid,
  .stats-grid,
  .steps-grid,
  .social-grid,
  .exchange-grid { grid-template-columns: 1fr; }

  .burn-card { flex-direction: column; text-align: center; }

  .contract-card-inner { align-items: stretch; }
  .contract-actions { width: 100%; }
  .contract-actions a,
  .contract-actions button { flex: 1; }

  .hero-badge-ring { top: 5.5rem; right: 1rem; }
  .hero-badge-ring .ring-svg { width: 5.5rem; height: 5.5rem; }

  .hero-ctas { flex-direction: column; width: 100%; max-width: 20rem; }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary { width: 100%; }

  .chart-frame-wrap { height: 360px; }

  .final-cta { padding: 2.5rem 1.5rem; }

  .footer-inner { gap: 1.25rem; }
}

/* ---------- ≤ 480px : small phones ---------- */
@media (max-width: 480px) {
  .brand-name { font-size: 1.0625rem; }

  .hero-kicker span.label { font-size: .625rem; letter-spacing: .3em; }

  .price-ticker-inner { flex-wrap: wrap; justify-content: center; gap: .5rem .75rem; padding: .75rem 1.25rem; }

  .contract-pill { flex-direction: column; }

  .chart-frame-wrap { height: 300px; }

  .chart-header { flex-direction: column; align-items: flex-start; gap: .5rem; }

  .modal-panel { padding: 2.5rem 1.5rem 2rem; }

  .footer-socials { gap: 1rem; }
}

/* ---------- fine pointers only: keep hover affordances subtle on touch ---------- */
@media (hover: none) {
  .btn-primary:hover,
  .btn-secondary:hover { transform: none; }
}