/* ==========================================================================
   Tablet (max 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .navbar-links { gap: 1.5rem; }
  .changelog { gap: 2rem; padding: 2rem; }
  section { padding: 5rem 0; }
  .navbar-logo-text { display: none; }
  h1 { letter-spacing: 4px; }
}

/* ==========================================================================
   Mobile (max 768px)
   ========================================================================== */
@media (max-width: 768px) {
  .navbar { padding: 0.65rem 0; }
  .navbar-hamburger { display: flex; order: 3; }

  .navbar-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem 1.75rem;
    background: rgba(9, 9, 11, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    transform: translateY(-20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }

  .navbar-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .navbar-links a { font-size: 1rem; padding: 0.75rem 0; text-align: center; }
  .navbar-links a::after { display: none; }

  .features-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .stats-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .philosophy-grid { grid-template-columns: 1fr; }

  .changelog { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem; }

  /* Timeline collapses to single column */
  .timeline::before { left: 24px; }
  .timeline-item {
    width: 100%;
    left: 0 !important;
    text-align: left !important;
    padding: 1rem 0 1rem 3.5rem;
  }
  .timeline-item::before {
    left: 15px !important;
    right: auto !important;
  }

  .footer-inner { flex-direction: column; }
  .footer-links { flex-wrap: wrap; gap: 1.75rem 2.5rem; }

  section { padding: 4rem 0; }
  .hero { padding-top: 7rem; }
  .hero-logo { width: 150px; height: 150px; }
  .page-hero { padding: 8rem 1.5rem 4rem; min-height: 40vh; }

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

/* ==========================================================================
   Small mobile (max 480px)
   ========================================================================== */
@media (max-width: 480px) {
  .container { padding: 0 1rem; }
  .discord-widget { display: none; }
  .team-grid { grid-template-columns: 1fr; }
  .stats-grid-4 { grid-template-columns: 1fr; }

  .card { padding: 1.5rem; }
  .philosophy-card { padding: 1.75rem; }
  .stat-card { padding: 1.75rem 1.25rem; }

  .btn { padding: 0.8rem 1.5rem; font-size: 0.9rem; letter-spacing: 2px; }
  .hero-cta-group { flex-direction: column; width: 100%; }
  .hero-cta-group .btn { width: 100%; }

  section { padding: 3.5rem 0; }
  .hero-logo { width: 130px; height: 130px; }

  .changelog-header { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .changelog-date { margin-left: 0; }
}