@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor,
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [role="button"],
  body.has-custom-cursor .btn-main,
  body.has-custom-cursor .btn-outline,
  body.has-custom-cursor .btn-ghost,
  body.has-custom-cursor .icon-btn,
  body.has-custom-cursor .work-card,
  body.has-custom-cursor .svc-card,
  body.has-custom-cursor .svc-head {
    cursor: none !important;
  }

  body.has-custom-cursor input,
  body.has-custom-cursor textarea,
  body.has-custom-cursor select {
    cursor: text !important;
  }

  .cursor-ring,
  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    z-index: 12000;
    transition: opacity 0.1s ease, transform 0.1s ease, width 0.14s ease, height 0.14s ease, border-color 0.14s ease, background-color 0.14s ease;
  }

  .cursor-ring {
    width: 34px;
    height: 34px;
    margin-left: -17px;
    margin-top: -17px;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 50%;
    background: rgba(255,255,255,.03);
    box-shadow: 0 0 24px rgba(255,255,255,.08);
    backdrop-filter: blur(2px);
  }

  .cursor-dot {
    width: 6px;
    height: 6px;
    margin-left: -3px;
    margin-top: -3px;
    border-radius: 50%;
    background: rgba(255,255,255,.95);
    box-shadow: 0 0 12px rgba(255,255,255,.35);
  }

  .cursor-ring.is-visible,
  .cursor-dot.is-visible {
    opacity: 1;
  }

  .cursor-ring.is-hover {
    width: 52px;
    height: 52px;
    margin-left: -26px;
    margin-top: -26px;
    border-color: rgba(255,255,255,.92);
    background: rgba(255,255,255,.06);
  }

  .cursor-ring.is-pressed {
    transform: scale(.88);
    background: rgba(255,255,255,.14);
  }

  .cursor-dot.is-hover {
    transform: scale(1.15);
  }
}