/* grubość pasków i ustawienia przycisku */
:root { --pasek-grubosc:4px; }
html { margin:0; padding:0; width:100%; overflow-y:scroll; /* zapobiega pojawianiu się paska przewijania podczas animacji; rezerwuje miejsce na pasek */ }
body { font-family:tinosregular; font-style:italic; margin:0; padding:0; width:100%; line-height:1.6; background-color:rgb(250, 250, 250); color:rgb(90, 90, 90); }
body.splash-active { overflow:hidden; height:100vh; }
header { padding-top:20px; padding-bottom:0; }
h1, h2, h3 { color:rgb(170, 170, 170); font-size:20px; letter-spacing:20px; font-style:italic; font-weight:400; line-height:20px; text-shadow:4px 4px 8px rgb(190, 190, 190); margin-bottom:30px; }
ul { margin-top:0; margin-bottom:0; }
a { font-weight:normal; text-decoration:none; }
a:link, a:active, a:visited { color:rgb(44, 206, 113); outline:none; }
a:hover { color:rgb(90, 90, 90); }
sup { line-height:0; }

/* kontener nadrzędny (animowany) */
#content-wrapper { position:fixed; top:0; left:0; width:100%; height:200vh; /* 2x wysokość ekranu */ transform:translateY(0); transition:transform 1.5s ease-in-out; z-index:10000; }
/* stan początkowy - ukryty nad ekranem */
#content-wrapper.initial { transform:translateY(-100vh); }
/* stan widoczny - splash screen na ekranie */
#content-wrapper.show-splash { transform:translateY(0); }
/* przesunięcie w górę - główna treść na ekranie */
#content-wrapper.hide-splash { transform:translateY(-100vh); }
/* splash screen (górna część kontenera - pierwsze 100vh) */
#splash-screen { position:absolute; top:0; left:0; height:100vh; width:100%; background-color:rgb(0, 161, 59); color:white; display:flex; justify-content:center; align-items:center; flex-direction:column; text-align:center; }
#splash-screen h1 { color:white; font-size:32px; letter-spacing:2px; text-shadow:2px 2px 4px rgba(0,0,0,0.3); margin-bottom:20px; font-weight:400; }
#splash-screen p { font-size:16px; max-width:600px; padding:0 20px; line-height:1.5; }
/* główna treść (dolna część kontenera - drugie 100vh) */
#main-content { position:absolute; top:100vh; /* zaczyna się dokładnie pod splash screen */ left:0; width:100%; min-height:100vh; background-color:rgb(250, 250, 250); }
/* ukrywanie formularza podczas wyświetlania splash screen */
body.splash-active #obszar_formularza { display:none !important; visibility:hidden !important; opacity:0 !important; }
/* blokowanie przycisków podczas wyświetlania splash screen */
body.splash-active #przycisk_rejestracji, body.splash-active #przycisk_instrukcji { pointer-events:none !important; opacity:0.3; }
#przycisk-wejscia { padding:15px 40px; margin-top:30px; cursor:pointer; border:2px solid white; background-color:transparent; color:white; border-radius:5px; font-size:16px; transition:background-color 0.3s; }
#przycisk-wejscia:hover { background-color:rgba(255, 255, 255, 0.1); }

/* formularz kontaktowy */
body.contact-active { overflow:hidden; }
body.contact-active > *:not(#obszar_kontaktu) { transform:translateY(-100vh); transition:transform 0.8s ease-in-out; }
body.contact-active #obszar_kontaktu { transform:translateY(-100vh); }
#obszar_kontaktu { position:fixed; top:100vh; left:0; width:100%; height:100vh; background-color:rgb(0, 161, 59); display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:999999; transition:transform 0.8s ease-in-out; }
#formularz_kontaktu { width:700px; max-width:90%; }
#formularz_kontaktu label { display:block; color:white; font-family:tinosregular; font-style:italic; margin-bottom:5px; }
#formularz_kontaktu input, #formularz_kontaktu textarea { width:100%; padding:10px; border-radius:8px; border:none; outline:1px solid rgb(170, 170, 170); margin-bottom:20px; box-sizing:border-box; resize:none; font-family:inherit; }
#formularz_kontaktu textarea { min-height:200px; }
#formularz_kontaktu button { background:transparent; color:white; border:1px solid white; border-radius:10px; padding:10px 40px; cursor:pointer; font-family:inherit; font-size:16px; transition:background 0.2s; }
#formularz_kontaktu button:hover { background:rgba(255, 255, 255, 0.1); }
#komunikat_kontaktu { color:white; text-align:center; font-size:1.3em; height:1.3em; line-height:1.3em; margin-bottom:10px; width:700px; max-width:95%; }
.przyciski_kontaktu { display:flex; justify-content:center; gap:20px; }
.przyciski_kontaktu button { font-family:tinosregular; font-style:italic; letter-spacing:4px; }
.logo_kontakt { position:absolute; top:40px; left:50%; transform:translateX(-350px); width:auto; height:auto; pointer-events:none; z-index:1000; }

/* responsywne pozycjonowanie logo na małych ekranach */
@media (max-width: 780px) {
 .logo_kontakt { left:5%; transform:translateX(0); }
}

.logo { max-width:200px; height:auto; }
.odnosniki { display:block; width:100%; text-align:right; margin-bottom:65px; color:rgb(180, 180, 180); box-sizing:border-box; }
.strona { max-width:800px; margin:0 auto; padding:20px; }
.akapit { position:relative; padding-left:calc(var(--pasek-grubosc) + 20px); margin-bottom:60px; }
.pasek { position:absolute; left:0; top:0; width:var(--pasek-grubosc); height:100%; }
.pasek.czerwony { background-color:rgb(231, 76, 60); }
.pasek.pomaranczowy { background-color:rgb(255, 165, 0); }
.pasek.niebieski { background-color:rgb(52, 152, 219); }
.pasek.zielony { background-color:rgb(46, 204, 113); }
.pasek.zolty { background-color:rgb(241, 196, 15); }
.pasek.fioletowy { background-color:rgb(222, 20, 130); }
.pasek.szary { background-color:rgb(180, 180, 180); }

#forum { font-size:12px; font-style:italic; margin-top:40px; margin-bottom:40px; }
#rozwoj { color:rgb(200, 200, 200); font-style:italic; }

#przycisk_forum { position:fixed; bottom:160px; right:20px; width:56px; height:56px; background-color:rgb(231, 76, 60); border-radius:50%; border:none; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,0.2); z-index:1001; padding:0; display:flex; justify-content:center; align-items:center; transition:background-color 0.3s ease; -webkit-tap-highlight-color:transparent; }
#przycisk_forum:hover { background-color:rgb(210, 65, 50); }
#przycisk_forum img { width:32px; height:32px; display:block; pointer-events:none; }

#przycisk_instrukcji { position:fixed; bottom:90px; right:20px; width:56px; height:56px; background-color:rgb(0, 161, 59); border-radius:50%; border:none; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,0.2); z-index:1001; padding:0; display:flex; justify-content:center; align-items:center; transition:background-color 0.3s ease; -webkit-tap-highlight-color:transparent; }
#przycisk_instrukcji:hover { background-color:rgb(0, 136, 34); }
#przycisk_instrukcji img { width:32px; height:32px; display:block; pointer-events:none; }

#przycisk_rejestracji { position:fixed; bottom:20px; right:20px; width:56px; height:56px; background-color:rgb(255, 165, 0); border-radius:50%; border:none; cursor:pointer; box-shadow:0 4px 8px rgba(0,0,0,0.2); z-index:1001; padding:0; display:flex; justify-content:center; align-items:center; transition:background-color 0.3s ease; -webkit-tap-highlight-color:transparent; }
#przycisk_rejestracji:hover { background-color:rgb(255, 140, 0); }
#przycisk_rejestracji img { width:32px; height:32px; display:block; pointer-events:none; }

#obszar_formularza { position:fixed; bottom:-200px; left:0; right:0; z-index:1000; padding:10px; box-sizing:border-box; transition:bottom 0.6s ease-in-out; }
#obszar_formularza.active { bottom:100px; }
#formularz_rejestracji { background-color:rgb(18, 168, 73); color:rgb(255, 255, 255); border:1px solid rgb(190, 190, 190); border-radius:10px; box-shadow:0 -2px 10px rgba(0,0,0,0.1); width:85%; max-width:760px; box-sizing:border-box; margin:0 auto; padding:10px; padding-top:2px; }
#formularz_rejestracji label, #formularz_rejestracji input { display:block; margin-bottom:5px; }
#formularz_rejestracji input[type="email"] { width:100%; padding:8px; border:1px solid rgb(190, 190, 190); border-radius:8px; outline:1px solid rgb(170, 170, 170); box-sizing:border-box; margin-bottom:5px; }

.faq-ikona { width:15px;  height:15px; min-width:15px; margin-right:10px; transition:transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; display:flex; justify-content:center; align-items:center; font-size:14px; line-height:1; font-weight:bold; color:rgb(255, 255, 255); background-color:rgb(255, 165, 0); border-radius:4px; transform:translateY(5px); }
.faq-pytanie { display:flex; align-items:flex-start; cursor:pointer; margin-bottom:5px; font-weight:bold; user-select:none; padding-right:5px; }
.faq-pytanie-tekst { font-weight:normal; color:rgb(60, 60, 60); }
.faq-odpowiedz { max-height:0; overflow:hidden; transition:max-height 0.6s ease-in-out; color:rgb(140, 140, 140); font-style:italic; padding-left:calc(var(--pasek-grubosc) + 20px + 15px + 10px); margin-top:0; margin-bottom:8px; font-weight:normal; }
.faq-odpowiedz-content { padding-top:3px; }
.faq-pytanie.rozwiniete .faq-ikona { background-color:rgb(46, 204, 113); transform:translateY(5px); }