:root {
  color-scheme: dark;
  --tlo: #0b0c0d;
  --panel: #15171b;
  --panel-jasny: #1b1e25;
  --tekst: #f6f6f4;
  --drugorzedny: #bec1ca;
  --linia: #30333b;
  --fiolet: #5865f2;
  --fiolet-jasny: #aeb4ff;
  --czerwony: #ff4854;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--menu-offset, 92px); }
body { margin: 0; background: var(--tlo); color: var(--tekst); font: 16px/1.65 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; text-rendering: optimizeLegibility; }
body::before { content: ""; position: absolute; inset: 0 0 auto; height: 760px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 80% 18%, #5865f224, transparent 44%), radial-gradient(ellipse at 4% 35%, #e5091417, transparent 43%); }
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--fiolet-jasny); outline-offset: 4px; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.13; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.65rem); letter-spacing: -.04em; }
h3 { font-size: 1.18rem; letter-spacing: -.02em; }
.kontener { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.pomin { position: fixed; left: 18px; top: -100px; z-index: 100; padding: 12px 18px; background: #fff; color: #111; border-radius: 8px; }
.pomin:focus { top: 12px; color: #111; }
.nadtytul { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; color: var(--fiolet-jasny); font-size: .69rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.znacznik { width: 8px; height: 8px; border-radius: 50%; background: var(--czerwony); box-shadow: 0 0 14px #e5091477; }
.przycisk { display: inline-flex; justify-content: center; align-items: center; gap: 18px; min-height: 56px; padding: 14px 24px; border: 1px solid transparent; border-radius: 10px; color: #fff; font: 850 .95rem/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; text-align: center; text-decoration: none; cursor: pointer; transition: transform .18s ease, background-color .18s ease; }
.przycisk span { font-size: 1.3rem; line-height: 1; }
.przycisk-discord { border-color: #8790ff; background: var(--fiolet); box-shadow: 0 12px 34px #5865f22c; }
.przycisk-discord:hover { background: #4754df; transform: translateY(-2px); }
.przycisk-glowny { min-height: 64px; padding-inline: 30px; font-size: 1.03rem; }

.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: 64px; align-items: center; min-height: 610px; padding: 70px 0; }
h1 { max-width: 650px; font-size: clamp(3rem, 5.8vw, 5.2rem); font-weight: 920; letter-spacing: -.07em; }
h1 span { display: block; color: var(--fiolet-jasny); }
.haslo { margin-top: 24px; font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 800; }
.wstep { max-width: 610px; margin-top: 13px; color: var(--drugorzedny); font-size: 1.04rem; }
.hero .przycisk { margin-top: 29px; }
.podpis-przycisku { margin-top: 11px; color: #9ca1ad; font-size: .76rem; }
.pigulka { padding: 30px; border: 1px solid #444969; border-radius: 16px; background: linear-gradient(145deg, #21243a, #14161d 72%); box-shadow: 0 22px 70px #0006; }
.pigulka-etykieta { margin-bottom: 8px; color: var(--fiolet-jasny); font-size: .65rem; font-weight: 850; letter-spacing: .15em; }
.pigulka h2 { font-size: 1.7rem; }
.pigulka ul { display: grid; gap: 0; list-style: none; padding: 18px 0 0; margin: 0; }
.pigulka li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 16px 0; border-top: 1px solid #35394a; }
.pigulka li > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #5865f228; color: #c5caff; font-weight: 900; }
.pigulka strong, .pigulka small { display: block; }
.pigulka strong { font-size: .98rem; }
.pigulka small { margin-top: 2px; color: #aeb2c0; font-size: .77rem; }

.instrukcja { padding: 72px 0; border-block: 1px solid var(--linia); scroll-margin-top: 20px; }
.naglowek-sekcji { max-width: 720px; }
.naglowek-sekcji > p:not(.nadtytul) { margin-top: 12px; color: var(--drugorzedny); }
.kroki { display: grid; gap: 16px; list-style: none; padding: 0; margin: 34px 0 0; }
.kroki li { display: grid; grid-template-columns: 54px 1fr; gap: 20px; padding: 24px; border: 1px solid var(--linia); border-radius: 13px; background: var(--panel); }
.krok-numer { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid #626bed; border-radius: 11px; background: #5865f21f; color: #c5caff; font-size: 1.1rem; font-weight: 900; }
.kroki p { max-width: 780px; margin-top: 9px; color: var(--drugorzedny); font-size: .94rem; }
.kroki .przycisk { min-height: 48px; margin-top: 18px; padding-block: 10px; }

.pomoc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 28px; align-items: center; margin: 48px 0; padding: 28px; border: 1px solid #4c5060; border-radius: 13px; background: var(--panel-jasny); }
.pomoc h2 { font-size: clamp(1.35rem, 2.5vw, 1.9rem); }
.link-zaproszenia { margin-top: 10px; color: #c5caff; font: 700 .9rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; overflow-wrap: anywhere; }
.przycisk-kopiuj { min-width: 170px; background: transparent; border-color: #70758b; }
.przycisk-kopiuj:hover { background: #ffffff0b; }
.komunikat-kopiowania { grid-column: 1/-1; min-height: 1.3em; color: #b9ffc6; font-size: .82rem; font-weight: 700; }

.faq { padding: 65px 0; border-top: 1px solid var(--linia); }
.faq-lista { margin-top: 28px; border-top: 1px solid var(--linia); }
.faq details { padding: 0 4px; border-bottom: 1px solid var(--linia); }
.faq summary { position: relative; list-style: none; padding: 20px 36px 20px 0; cursor: pointer; font-weight: 750; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 17px; color: var(--fiolet-jasny); font-size: 1.25rem; }
.faq details[open] summary::after { content: "-"; }
.faq p { max-width: 850px; padding: 0 0 22px; color: var(--drugorzedny); font-size: .94rem; }
.faq a { color: #c2c7ff; }

.finalne-zaproszenie { display: flex; justify-content: space-between; align-items: center; gap: 34px; margin: 0 0 55px; padding: 34px; border: 1px solid #4b506f; border-radius: 14px; background: linear-gradient(110deg, #20243e, #111318); }
.finalne-zaproszenie .nadtytul { margin-bottom: 9px; }
.finalne-zaproszenie h2 { font-size: 1.8rem; }
.finalne-zaproszenie p:not(.nadtytul) { margin-top: 8px; color: var(--drugorzedny); font-size: .88rem; }
.finalne-zaproszenie .przycisk { flex-shrink: 0; }
.mobilny-cta { display: none; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 32px; min-height: 0; padding: 55px 0; }
  .hero-tresc, .pigulka { max-width: 700px; }
}

@media (max-width: 760px) {
  body { padding-bottom: 78px; }
  .kontener { width: calc(100% - 32px); }
  .hero { padding: 38px 0 42px; }
  h1 { font-size: clamp(2.7rem, 13vw, 4.3rem); }
  .wstep { font-size: .97rem; }
  .hero .przycisk { width: 100%; }
  .pigulka { padding: 23px; }
  .instrukcja, .faq { padding: 46px 0; }
  .kroki li { grid-template-columns: 44px 1fr; gap: 14px; padding: 19px; }
  .krok-numer { width: 42px; height: 42px; }
  .kroki .przycisk { width: 100%; font-size: .85rem; }
  .pomoc { grid-template-columns: 1fr; padding: 22px; }
  .przycisk-kopiuj { width: 100%; }
  .komunikat-kopiowania { grid-column: 1; }
  .finalne-zaproszenie { flex-direction: column; align-items: stretch; padding: 25px; margin-bottom: 36px; }
  .finalne-zaproszenie .przycisk { width: 100%; }
  .mobilny-cta { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: 10px; display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 58px; padding: 12px 18px; border: 1px solid #9299ff; border-radius: 11px; background: #5865f2; color: #fff; box-shadow: 0 10px 35px #000b; font-size: .91rem; font-weight: 900; text-decoration: none; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(14px); transition: opacity .18s ease, transform .18s ease, visibility .18s; }
  .mobilny-cta.widoczny { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); }
}

@media (max-width: 390px) {
  .kroki li { grid-template-columns: 1fr; }
  .krok-numer { width: 38px; height: 38px; }
  .przycisk-glowny { padding-inline: 15px; font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .przycisk { transition: none; }
  .przycisk:hover { transform: none; }
}

@media print {
  body { background: #fff; color: #111; padding: 0; }
  body::before, .pomin, .site-header, .site-lang, .mobilny-cta { display: none; }
  a, p, .wstep, .nadtytul, h1 span, .pigulka small, .kroki p, .faq p { color: #111 !important; }
  .hero { display: block; min-height: 0; padding: 20px 0; }
  .pigulka, .kroki li, .pomoc, .finalne-zaproszenie { margin-block: 18px; background: none; border-color: #777; box-shadow: none; }
  .przycisk { background: none; color: #111; border-color: #777; }
}