/* ══════════════════════════════════════════════════
   RESPONSIVE — DigiShop
   ══════════════════════════════════════════════════ */

/* ─── Tablet ────────────────────────────────────── */
@media (max-width: 992px) {
  :root { --section-gap: 5rem; }

  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Mobile ────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-gap: 4rem; }

  /* Nav */
  .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: 75%;
    max-width: 320px;
    height: 100vh;
    flex-direction: column;
    justify-content: center;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-glass);
    padding: 2rem;
    gap: 2rem;
    transition: right .4s var(--ease);
    z-index: 999;
  }
  .nav-links.open { right: 0; }
  .nav-links a { font-size: 1.15rem; }
  .hamburger { display: flex; z-index: 1000; }
  .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Overlay */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    backdrop-filter: blur(4px);
    z-index: 998;
  }
  .nav-overlay.show { display: block; }

  /* Hero */
  .hero { min-height: 90vh; padding: 7rem 1rem 3rem; }
  .hero-content h1 { letter-spacing: -1px; }

  .orb-1 { width: 300px; height: 300px; }
  .orb-2 { width: 200px; height: 200px; }
  .orb-3 { width: 150px; height: 150px; }

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

  /* Products */
  .products-grid { grid-template-columns: 1fr; }
  .product-card .card-image { height: 180px; }

  /* Support */
  .support-section .support-box { padding: 3rem 1.5rem; }
}

/* ─── Small mobile ──────────────────────────────── */
@media (max-width: 420px) {
  .nav-brand { font-size: 1.25rem; }
  .card-footer { flex-direction: column; gap: 1rem; align-items: flex-start; }
  .btn-buy { width: 100%; justify-content: center; }
}