.scroll-top-btn {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1000;
  
    width: 48px;
    height: 48px;
    border: 1px solid rgba(120, 230, 255, 0.45);
    border-radius: 18px;
  
    color: #ffffff;
    background:
      linear-gradient(135deg, rgba(94, 220, 95, 0.95), rgba(0, 195, 255, 0.95), rgba(0, 94, 255, 0.95));
  
    box-shadow:
      0 12px 34px rgba(0, 120, 255, 0.32),
      0 0 18px rgba(64, 220, 255, 0.28);
  
    display: flex;
    align-items: center;
    justify-content: center;
  
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.96);
  
    cursor: pointer;
    transition:
      opacity 0.25s ease,
      visibility 0.25s ease,
      transform 0.25s ease,
      box-shadow 0.25s ease;
  }
  
  .scroll-top-btn.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }
  
  .scroll-top-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow:
      0 16px 42px rgba(0, 120, 255, 0.42),
      0 0 24px rgba(64, 220, 255, 0.38);
  }
  
  .scroll-top-btn:active {
    transform: translateY(0) scale(0.97);
  }
  
  .scroll-top-btn:focus-visible {
    outline: 3px solid rgba(120, 230, 255, 0.55);
    outline-offset: 4px;
  }
  
  @media (max-width: 640px) {
    .scroll-top-btn {
      width: 44px;
      height: 44px;
      right: 16px;
      bottom: 18px;
      border-radius: 16px;
    }
  }
  
  @media (prefers-reduced-motion: reduce) {
    .scroll-top-btn {
      transition: none;
    }
  }