/* ============================================
   responsive.css — All breakpoints live here
   ============================================ */

/* ── Tablet (≤1024px) ── */
@media (max-width: 1024px) {
  .section { padding: 80px 32px; }

  /* Header */
  .site-nav       { display: none; }
  .nav-hashtag    { display: none; }
  .btn-nav-login  { display: none; }
  .hamburger      { display: flex; }

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    padding: 110px 32px 64px;
  }
  .hero-title { font-size: clamp(36px, 7vw, 56px); }
  .hero-3d { order: -1; }
  #hero-canvas-main { height: 360px; }

  /* Pillars */
  .pillars-head { flex-direction: column; align-items: flex-start; }
  .pillars-sub  { text-align: left; max-width: 100%; }
  .pillars-grid { grid-template-columns: 1fr 1fr; }
  .pillar-card.wide { grid-column: span 2; }
  .pillar-card { min-height: 360px; }

  /* Revenue */
  .revenue-grid { grid-template-columns: 1fr; gap: 48px; }
  #revenue-canvas { height: 320px; }

  /* Earning */
  .earning-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* CTA */
  .cta-inner { padding: 56px 36px; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  .section { padding: 64px 20px; }

  /* Header */
  .header-inner { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; }
  #site-header.scrolled .header-inner { padding: 12px 20px; }
  .site-nav { display: none !important; }
  .nav-actions { display: none !important; }
  .hamburger { display: flex !important; }
  .btn-nav-join { padding: 10px 18px; font-size: 11px; }
  .mobile-nav-inner { padding: 0; }

  /* Hero */
  .hero-inner {
    grid-template-columns: 1fr;
    padding: 100px 20px 60px;
    gap: 40px;
  }
  .hero-title { font-size: clamp(32px, 9vw, 48px); }
  .hero-sub   { font-size: 14px; }
  .hero-badge { font-size: 9px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width: 100%; justify-content: center; }
  .hero-3d { order: -1; }
  #hero-canvas-main { height: 280px; }
  .hero-stats { gap: 8px; }
  .stat-chip { padding: 10px 14px; }
  .stat-chip .val { font-size: 18px; }

  /* Marquee */
  .marquee-wrap { padding: 24px 0; }

  /* Pillars */
  .pillars-grid {
    grid-template-columns: 1fr;
  }
  .pillar-card.wide { grid-column: span 1; }
  .pillar-card { min-height: 320px; }
  .p-body { padding: 24px; }
  .p-name { font-size: 22px; }

  /* Revenue */
  .revenue-items { grid-template-columns: 1fr; }
  #revenue-canvas { height: 260px; }

  /* Earning */
  .earning-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fee-val { font-size: 30px; }
  .earn-val { font-size: 16px; }
  .earn-name { font-size: 10px; }

  /* CTA */
  .cta-section { padding: 60px 20px; }
  .cta-inner { padding: 44px 24px; }
  .cta-title { font-size: clamp(26px, 7vw, 38px); }
  .cta-sub   { font-size: 14px; }
  .btn-cta   { padding: 17px 32px; font-size: 14px; width: 100%; justify-content: center; }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .site-footer { padding: 52px 20px 28px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── Small mobile (≤480px) ── */
@media (max-width: 480px) {
  .hero-title { font-size: clamp(28px, 10vw, 40px); }
  .earning-grid { grid-template-columns: 1fr; }
  .earn-card.highlight { grid-column: span 1; }
  .pillars-head .s-title { font-size: clamp(28px, 8vw, 40px); }
  .s-title { font-size: clamp(26px, 8vw, 38px); }
}