:root {
      --bg: #0f172a;
      --text: #e5e7eb;
      --muted: #94a3b8;
      --primary: #38bdf8;
    }

    * {
      box-sizing: border-box;
      font-family: "Inter", sans-serif;
    }

    body {
      margin: 0;
      height: 100vh;
      background: radial-gradient(circle at top, #020617, var(--bg));
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text);
      text-align: center;
    }

    .loader {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1.8rem;
    }

    /* SPIN CIRCLE */
    .circle {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      border: 3px solid rgba(56, 189, 248, 0.15);
      border-top-color: var(--primary);
      animation: spin 1.2s linear infinite;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* BRAND */
    .brand {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--primary);
      animation: pulse 2s ease-in-out infinite;
    }

    .text {
      color: var(--muted);
      font-size: 0.95rem;
      max-width: 300px;
    }

    .timer {
      font-size: 0.85rem;
      opacity: 0.6;
    }

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

    @keyframes pulse {
      0% { transform: scale(1); letter-spacing: 0.5px; }
      50% { transform: scale(1.08); letter-spacing: 1.5px; }
      100% { transform: scale(1); letter-spacing: 0.5px; }
    }