:root {
      --loading-bg: rgba(11, 23, 38, 0.9);
      --loading-ring: #ffffff;
      --loading-accent: #0b5fff;
    }

    body {
      overflow: hidden;
    }

    body.page-loaded {
      overflow: visible;
    }

    .page-loader {
      position: fixed;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;
      background: var(--loading-bg);
      backdrop-filter: blur(4px);
      z-index: 9999;
      transition: opacity 0.35s ease, visibility 0.35s ease;
    }

    .page-loader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .loader-ring {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 4px solid rgba(255, 255, 255, 0.25);
      border-top-color: var(--loading-ring);
      border-right-color: var(--loading-accent);
      animation: spin 1s linear infinite;
      box-shadow: 0 0 20px rgba(11, 95, 255, 0.35);
    }

    .page-loader span {
      color: #fff;
      font-size: 0.95rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 600;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }