/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   MAGNETIC CURSOR
════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
  /* Hide native cursor only on pointer devices */
  *, *::before, *::after { cursor: none !important; }
}

#mag-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.90);
  mix-blend-mode: exclusion;
  pointer-events: none;
  z-index: 99999;
  opacity: 1;
  will-change: transform, width, height, border-radius;
  backdrop-filter: contrast(1.4);
  -webkit-backdrop-filter: contrast(1.4);
  transition: width 0.18s var(--ease-spring), height 0.18s var(--ease-spring),
              border-radius 0.18s var(--ease-spring);
}

@media (max-width: 740px) {
  nav { padding: 0 16px; }

  .scroll-section { grid-template-columns: 1fr; gap: var(--space-11); padding: 72px 20px; }
  .blog-wrap { padding: 80px 20px 100px; }
}