:root{
  --bg:#0b0f14; --fg:#e5e7eb; --muted:#9ca3af;
  --accent:#60a5fa; --ring:rgba(96,165,250,.45); --focus:#93c5fd;
  --border:#2a3750cc; --card-grad-start:#0b1222cc; --card-grad-end:#0a0f1acc;
  --glass:rgba(11,18,34,.45); --glass-strong:rgba(11,18,34,.6);

  /* social brand kolory */
  --yt:#ff2d2d;          /* czerwony */
  --tt:#8b5cf6;          /* fiolet na życzenie */
  --dc:#3346c8;          /* ciemny granat */
  --rbx:#ffffff;         /* biały glow */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color-scheme:dark; color:var(--fg);
  background:linear-gradient(160deg,var(--bg) 0%,#0a101a 100%);
  display:grid; place-items:center; padding:24px; overflow-x:hidden; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* Skip */
.skip-link{position:absolute;left:12px;top:-40px;z-index:10;padding:8px 12px;border-radius:8px;background:#111827;color:#fff;border:1px solid var(--border);transition:top .2s ease}
.skip-link:focus{top:12px}

/* Tło + veil */
.bg{position:fixed;inset:0;pointer-events:none;z-index:-3}
.bg.bg-stars{
  background-image:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9) 99%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(255,255,255,.8) 99%, transparent 100%),
    radial-gradient(1.8px 1.8px at 60% 70%, rgba(255,255,255,.8) 99%, transparent 100%),
    radial-gradient(1.2px 1.2px at 35% 80%, rgba(255,255,255,.8) 99%, transparent 100%),
    radial-gradient(1.6px 1.6px at 75% 55%, rgba(255,255,255,.85) 99%, transparent 100%);
  animation:twinkle 3.5s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.55}50%{opacity:.95}}
.fx-orbs{position:fixed;inset:0;pointer-events:none;z-index:-2;overflow:hidden}
.fx-orbs::before,.fx-orbs::after{
  content:"";position:absolute;width:70vmax;height:70vmax;border-radius:50%;
  filter:blur(60px);opacity:.22;animation:float 18s ease-in-out infinite;
}
.fx-orbs::before{background:radial-gradient(circle at 30% 30%,#60a5fa 0%,transparent 60%);left:-20vmax;top:-20vmax}
.fx-orbs::after{background:radial-gradient(circle at 70% 60%,#0ea5e9 0%,transparent 60%);right:-25vmax;bottom:-25vmax;animation-delay:-9s}
@keyframes float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(2vmax,-2vmax,0)}}
.bg-veil{z-index:-1;background:radial-gradient(80% 60% at 50% 40%, rgba(3,6,12,0) 0%, rgba(3,6,12,.3) 60%, rgba(3,6,12,.6) 100%), linear-gradient(180deg, rgba(2,6,12,.35), rgba(2,6,12,.55));backdrop-filter: blur(2px)}

/* Karta */
.card{
  width:100%;max-width:760px;padding:28px;
  border:1px solid var(--border); border-radius:26px;
  background:linear-gradient(180deg,var(--card-grad-start),var(--card-grad-end)), radial-gradient(120% 120% at 80% 0%, rgba(96,165,250,.10), transparent 70%);
  backdrop-filter:blur(12px) saturate(120%); box-shadow:0 10px 35px rgba(0,0,0,.35);
  contain:content;
}
.reveal{transform:translateY(8px) scale(.98);opacity:0;transition:transform .5s ease, opacity .5s ease}
.reveal.in{transform:translateY(0) scale(1);opacity:1}

/* Lang */
.topbar{display:flex;justify-content:flex-end;margin-bottom:6px}
.lang-switch{display:inline-flex;background:#0b1222cc;border:1px solid var(--border);border-radius:999px;overflow:hidden;box-shadow:0 0 12px rgba(0,0,0,.4)}
.lang-btn{background:transparent;color:#cbd5e1;border:none;padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer;transition:background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease}
.lang-btn:hover{background:rgba(96,165,250,.15)}
.lang-btn.active{background:#3b82f6;color:#fff;box-shadow:inset 0 0 6px rgba(255,255,255,.3)}
.lang-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus),0 0 0 6px var(--ring);transform:translateY(-1px)}

/* Brand */
.brand{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.logo img{width:64px;height:64px;border-radius:16px;object-fit:cover;box-shadow:0 8px 24px rgba(96,165,250,.35)}
.title{font-size:clamp(30px,6vw,40px);font-weight:800;margin:0;letter-spacing:.2px}
.subtitle{margin:4px 0 0;color:#9ca3af;font-size:14px}

/* Nagłówki */
.section-title{margin:18px 0 10px;font-size:13px;color:#cbd5e1;letter-spacing:.4px;text-transform:uppercase}

/* Ikony */
.sprite{position:absolute}
.ico,.ico-sm{display:inline-grid;place-items:center}
.ico svg{width:24px;height:24px;transition:filter .25s ease, transform .25s ease, color .25s ease}
.ico-sm svg{width:18px;height:18px}

/* Glass */
.glass{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--glass);
  border:1px solid rgba(255,255,255,.14);
  outline:1px solid rgba(94,164,255,.08);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}

/* Przyciski */
.links{display:grid;gap:14px;margin-top:8px}
.btn{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; width:100%; text-decoration:none; color:var(--fg);
  border-radius:18px; outline:none;
  background:linear-gradient(180deg, rgba(10,18,34,.55), rgba(9,15,28,.45));
  border:1px solid rgba(139,170,255,.14);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease, filter .2s ease;
}
.btn-left{display:flex;align-items:center;gap:12px}
.row{display:flex;flex-direction:column}
.hint{color:var(--muted);font-size:12px}

/* Błysk */
.btn::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform:translateX(-140%);transition:transform .65s cubic-bezier(.22,.7,.26,1); mix-blend-mode:screen;
}
.btn:hover::before{transform:translateX(140%)}

.btn:hover{transform:translateY(-1px);box-shadow:0 0 0 6px var(--ring);background:linear-gradient(180deg, rgba(12,22,40,.62), rgba(10,18,34,.52));border-color:rgba(139,170,255,.26)}
.btn:focus-visible{transform:translateY(-1px);box-shadow:0 0 0 3px var(--focus),0 0 0 6px var(--ring)}

/* Współprace — gwiazdki + światło z prawej */
.collab-links .btn.star-fill .badge-star svg{width:18px;height:18px;color:#fde68a;filter:drop-shadow(0 0 10px rgba(253,230,138,.55))}
.collab-links .btn.star-fill::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;z-index:0;
  background:
    radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,255,255,.95) 98%, transparent 100%),
    radial-gradient(1.3px 1.3px at 70% 50%, rgba(255,255,255,.8) 98%, transparent 100%),
    radial-gradient(1.1px 1.1px at 40% 80%, rgba(255,255,255,.85) 98%, transparent 100%),
    radial-gradient(1.4px 1.4px at 85% 20%, rgba(255,255,255,.8) 98%, transparent 100%),
    linear-gradient(180deg, rgba(96,165,250,.18), rgba(14,165,233,.10));
  opacity:.0; transform:scaleX(0); transform-origin:left;
  transition:transform .45s cubic-bezier(.22,.7,.26,1), opacity .3s ease; mix-blend-mode:screen;
}
.collab-links .btn.star-fill:hover::after{opacity:.9; transform:scaleX(1)}
.collab-links .btn.star-fill .badge-star{position:relative}
.collab-links .btn.star-fill .badge-star::after{
  content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%);
  width:180px; height:180px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(253,230,138,.40), rgba(253,230,138,.18) 40%, transparent 70%);
  opacity:0; filter:blur(6px); transition: opacity .35s ease, transform .35s ease; pointer-events:none;
}
.collab-links .btn.star-fill:hover .badge-star::after{opacity:1; transform:translateY(-50%) scale(1.02)}

/* Iskry tylko dla współprac */
.spark{position:absolute;width:8px;height:8px;pointer-events:none;background:radial-gradient(circle, #fff 40%, rgba(255,255,255,0) 41%);filter:drop-shadow(0 0 6px rgba(255,255,255,.7));animation:spark .9s ease-out forwards}
@keyframes spark{from{transform:translate(-50%,-10%) scale(.6) rotate(0);opacity:0}50%{opacity:1}to{transform:translate(-50%,-120%) scale(1) rotate(35deg);opacity:0}}

/* SOCIAL — kolory i poświata ikon */
.platform-youtube:hover .ico svg{color:var(--yt); filter: drop-shadow(0 0 10px rgba(255,45,45,.7)) drop-shadow(0 0 18px rgba(255,45,45,.35)); transform: translateY(-1px)}
.platform-tiktok:hover .ico svg{color:var(--tt); filter: drop-shadow(0 0 10px rgba(139,92,246,.7)) drop-shadow(0 0 18px rgba(139,92,246,.35)); transform: translateY(-1px)}
.platform-discord:hover .ico svg{color:var(--dc); filter: drop-shadow(0 0 10px rgba(51,70,200,.7)) drop-shadow(0 0 18px rgba(51,70,200,.35)); transform: translateY(-1px)}
.platform-roblox:hover .ico svg{color:var(--rbx); filter: drop-shadow(0 0 12px rgba(255,255,255,.9)) drop-shadow(0 0 20px rgba(255,255,255,.45)); transform: translateY(-1px)}

/* Kontakt */
.contact{border-top:1px dashed #263044;margin-top:20px;padding-top:12px}
.email-center{display:flex;justify-content:center;margin:8px 0 14px}
.center-email{font-size:15px}
.center-email strong{letter-spacing:.2px}

/* Statystyki */
.collab-block .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:6px}
.stat{border:1px solid var(--border);border-radius:16px;padding:12px;background:#0b1222cc;text-align:center}
.stat-hd{font-weight:800;font-size:14px;margin-bottom:6px}
.stat-number{font-size:20px;font-weight:800}

/* Akcje — wyślij/udostępnij wycentrowane na dole sekcji */
.center-actions{display:flex;justify-content:center;gap:12px;margin-top:18px}
.cta{
  display:inline-block;cursor:pointer;user-select:none;
  background:linear-gradient(180deg,#0d2644,#0a1a2e);
  border:1px solid #204d7a;border-radius:14px;padding:14px 18px;color:#fff;text-decoration:none;font-weight:700;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease
}
.cta.glass{background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), var(--glass);border:1px solid rgba(255,255,255,.14);outline:1px solid rgba(94,164,255,.08)}
.cta:hover{box-shadow:0 0 0 6px rgba(96,165,250,.25);transform:translateY(-1px);border-color:rgba(139,170,255,.26)}
.cta:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus),0 0 0 6px var(--ring)}
.cta.outline{background:transparent;border-color:#335a84}

/* Mobile */
@media (max-width:560px){
  .card{padding:24px}
  .logo img{width:56px;height:56px}
  .collab-block .stats{grid-template-columns:1fr}
  .lang-btn{padding:6px 10px;font-size:12px}
  .center-actions{flex-direction:column}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
  .reveal{transform:none;opacity:1}
}