/* === RESPONSIVE — Mobile First === */

/* 768px+ (Tablet / Desktop) */
@media (min-width: 768px) {
  .nav-links { display: flex; align-items: center; gap: var(--space-8); }
  .menu-toggle { display: none; }
  .mobile-menu, .mobile-overlay { display: none; }

  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }

  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .usecase-grid { grid-template-columns: repeat(2, 1fr); }
  .product-card { flex: 0 0 300px; }
  .newsletter-form { flex-direction: row; }
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr 1fr; }
}

/* 1024px+ (Desktop) */
@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
  .blog-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 1440px+ (Large Desktop) */
@media (min-width: 1440px) {
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
  .usecase-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Small mobile: stack newsletter form */
@media (max-width: 480px) {
  .newsletter-form { flex-direction: column; }
  .trust-items { gap: var(--space-6); }
  .trust-item { flex: 0 0 45%; }
}

/* Touch Devices */
@media (hover: none) and (pointer: coarse) {
  .product-card:hover { transform: none; box-shadow: none; }
  .usecase-card:hover img { transform: none; }
  .nav-link::after { display: none; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-group > * { opacity: 1; transform: none; }
}

/* Print */
@media print {
  .nav, .menu-toggle, .mobile-menu, .mobile-overlay, .footer, .topbar, .cart-btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  h1, h2, h3 { color: #000; page-break-after: avoid; }
  a { color: #000; text-decoration: underline; }
  .section { padding: 1rem 0; }
}