/* ============================================
   FKSB - Responsive
   ============================================ */

@media (max-width: 1024px) {
  :root {
    --header-h: 68px;
    --container-px: 1.25rem;
  }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero-grid, .about-grid, .product-detail, .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-visual { max-width: 420px; width: min(100%, 420px); margin-block: var(--space-6); }
  .product-gallery { position: static; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root {
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;
  }
  .nav, .header-actions .desktop-only { display: none; }
  .menu-toggle { display: inline-flex; }
  .header-actions .theme-toggle { display: inline-flex; }

  .hero { min-height: 90vh; padding-bottom: var(--space-7); }
  .hero-stats { grid-template-columns: 1fr; gap: var(--space-4); }
  .hero-stat { flex-direction: row; align-items: baseline; gap: var(--space-3); }
  .hero-stat .num { font-size: var(--text-2xl); }

  .footer-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }

  .gallery { grid-auto-rows: 140px; }

  .article-row { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .article-row-meta { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
}

@media (max-width: 480px) {
  :root { --container-px: 1rem; }
  .btn { padding: 0.75rem 1.25rem; font-size: var(--text-sm); }
  .hero { min-height: auto; padding-block: calc(var(--header-h) + var(--space-5)) var(--space-7); }
  .hero-title { font-size: clamp(2rem, 12vw, 2.5rem); letter-spacing: 0; overflow-wrap: anywhere; }
  .hero-subtitle { max-width: 100%; }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { flex: 1 1 100%; }
  .hero-stats { margin-top: var(--space-5); }
  .hero-visual { max-width: min(78vw, 320px); margin-block: var(--space-5) 0; }
  .hero-shape-1 { right: -4%; }
  .hero-shape-2 { left: -4%; }
  .hero-shape-badge { right: 0; max-width: calc(100% - 1rem); }
  .marquee { padding-block: var(--space-3); }
  .marquee-track { gap: var(--space-5); animation-duration: 24s; }
  .marquee-item { font-size: var(--text-base); }
  .gallery { grid-template-columns: 1fr; }
  .gallery-item.wide, .gallery-item.tall { grid-column: auto; grid-row: auto; }
}

/* === Touch devices: hide custom cursor === */
@media (hover: none) {
  .cursor-dot { display: none; }
}