:root{
      --text: #f2f2f2;
      --muted: rgba(242,242,242,.72);
      --panel: rgba(0,0,0,.45);
      --border: rgba(255,255,255,.14);
    }

    *{ box-sizing:border-box; }
    html,body{ height:100%; }
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
      color:var(--text);
      overflow:hidden;

      /* ✅ PODMIEŃ to na swój plik: np. "old-animations.gif" albo "bg.mp4" (wtedy użyj <video>) */
      background-image: url("background.jpg");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

    /* przyciemniająca nakładka, żeby tekst był czytelny */
    .overlay{
      position:fixed; inset:0;
      background: rgba(0,0,0,.55);
    }

    .center{
      position:fixed; inset:0;
      display:grid;
      place-items:center;
      padding: 24px;
    }

    .box{
      text-align:center;
      padding: 22px 24px;
      border-radius: 18px;
      background: rgba(0,0,0,.22);
      border: 1px solid var(--border);
      backdrop-filter: blur(6px);
      box-shadow: 0 18px 70px rgba(0,0,0,.45);
      max-width: 520px;
      width: min(520px, 100%);
    }

    h1{
      margin: 0 0 10px 0;
      letter-spacing: .18em;
      text-transform: uppercase;
      font-weight: 700;
      font-size: clamp(22px, 4vw, 34px);
    }

    p{
      margin: 0;
      color: var(--muted);
      font-size: 14px;
      line-height: 1.5;
    }

    /* kręcące się kółko */
    .spinner{
      width: 34px;
      height: 34px;
      margin: 14px auto 10px;
      border-radius: 999px;
      border: 3px solid rgba(255,255,255,.18);
      border-top-color: rgba(255,255,255,.95);
      animation: spin 0.9s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* kontakt: prawy dolny róg */
    .contact{
      position:fixed;
      right: 18px;
      bottom: 18px;
      padding: 12px 14px;
      border-radius: 14px;
      background: var(--panel);
      border: 1px solid var(--border);
      backdrop-filter: blur(6px);
      max-width: min(360px, 92vw);
      font-size: 13px;
      line-height: 1.45;
    }
    .contact strong{
      display:block;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
      font-weight: 600;
    }
    .contact a{
      color: var(--text);
      text-decoration: none;
      opacity: .92;
    }
    .contact a:hover{ text-decoration: underline; opacity: 1; }