/* Wspólny wygląd strony Pełnia (strona główna i „Dla organizacji”).
Po każdej zmianie tego pliku podbij wersję w nazwie (site.v2.css → site.v3.css) i w obu stron,
bo plik ma w _headers długą pamięć podręczną. */
/* ===== Podstawa (dawniej w 1. linii każdej strony) ===== */
:root{color-scheme:light}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
/* ===== Fonty ===== */
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-ext-wght-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-wght-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-ext-wght-italic.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url(fonts/figtree-latin-wght-italic.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/space-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-ext-700-normal.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-mono-latin-700-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
/* ===== Główny wygląd ===== */
*{ box-sizing:border-box; }
html[data-theme="dark"]{ color-scheme:dark; }
:root{
--accent:#B4512A;
--fs-nav: clamp(15px, calc(14.4px + 0.11vw), 16.5px);
--gap-nav: clamp(14px, calc(3.3px + 1.91vw), 40px);
--fs-h1: clamp(34px, calc(13.4px + 3.68vw), 84px);
--fs-h2: clamp(27px, calc(21.65px + 0.96vw), 40px);
--fs-h2-lg: clamp(31px, calc(24.9px + 1.1vw), 46px);
--space-section: clamp(64px, calc(40.9px + 4.12vw), 120px);
--font-display:'Figtree', system-ui, sans-serif;
--font-label:'Space Mono', 'Figtree', monospace;
}
body{ margin:0; background:#FAF7EE; color:#2A2019; font-family:'Figtree', system-ui, -apple-system, sans-serif; -webkit-font-smoothing:antialiased; }
h1,h2{ font-family:var(--font-display); font-weight:600; margin:0; line-height:1.08; }
h3{ font-family:'Figtree', system-ui, sans-serif; font-weight:800; margin:0; line-height:1.08; }
p{ margin:0; }
a{ color:#B4512A; text-decoration:none; }
a:hover{ color:#9C441F; }
a:focus-visible, button:focus-visible, input:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible{ outline:2px solid #C1592B; outline-offset:3px; border-radius:4px; }
.wrap{ width:100%; max-width:1280px; margin:0 auto; padding:0 40px; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; border-radius:999px; font-weight:600; font-size:15px; cursor:pointer; border:none; font-family:'Figtree',sans-serif; transition:transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease; }
.btn-primary{ background:var(--accent); color:#FBF4EA; }
.btn-primary:hover{ filter:brightness(0.94); transform:translateY(-1px); box-shadow:0 10px 22px -10px color-mix(in oklch, var(--accent) 65%, black); }
.btn-outline{ background:transparent; border:1.5px solid #2A2019; color:#2A2019; }
.btn-outline:hover{ background:#2A2019; color:#FBF4EA; transform:translateY(-1px); }
section{ padding:var(--space-section) 0; }
.mission-card{ background:#FFFFFF; border:0; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:none; transition:transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s cubic-bezier(0.22,1,0.36,1), border-color 0.5s ease; }
.mission-card:hover{ transform:translateY(-4px); box-shadow:0 22px 38px -24px rgba(42,32,25,0.28); }
.mission-card-img{ position:relative; aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; content-visibility:auto; transition:transform 0.5s cubic-bezier(0.22,1,0.36,1); }
.mission-card:hover .mission-card-img{ transform:scale(1.03); }
.mission-card-img{ overflow:hidden; background:#E9DECB; }
.mission-card-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.mission-card-badge{ z-index:1; position:absolute; right:8px; bottom:8px; width:56px; height:56px; padding:6px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
/* Układ misji jak na dużych platformach: szersza siatka, stałe 3 kolumny na komputerze */
#misje .wrap{ max-width:1344px; }
.mission-grid{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; gap:24px !important; }
@media (max-width:1023px){ .mission-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:640px){ .mission-grid{ grid-template-columns:1fr !important; } }
.mission-card-body{ flex:1; padding:20px; display:flex; flex-direction:column; justify-content:space-between; }
.mission-status{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:#1A1611; }
.mission-status .dot{ width:7px; height:7px; border-radius:999px; background:var(--accent); flex:0 0 auto; }
/* Stan "Komplet!" — gotowy do użycia, gdy prawdziwa misja się zapełni: dodaj do karty class="is-full" i Komplet! w .mission-card-img */
.mission-stamp{ position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%) rotate(-2deg); padding:4px 18px 6px;
background:#EF7E54; color:#403E42; font-family:'Figtree',sans-serif; font-weight:900; font-size:clamp(30px,3.2vw,42px); line-height:1.1; letter-spacing:-0.01em;
box-shadow:0 10px 24px -10px rgba(0,0,0,0.45); white-space:nowrap; pointer-events:none; }
.mission-card.is-full .mission-card-photo{ filter:saturate(0.85) brightness(0.92); }
.mission-card.is-full .mission-status .dot{ background:#9A8C7D; }
.mission-card.is-full .mission-btn{ opacity:0.75; }
.mission-card h3{ font-size:20px; font-weight:700; font-family:'Figtree',sans-serif; color:#2A2019; margin:12px 0 0; line-height:1.25; overflow-wrap:break-word; hyphens:auto; }
/* Kategoria "zamalowana" pociągnięciem pędzla: kolorowa plama PNG jako tło za tekstem,
tekst zawsze w pełni czytelny na wierzchu (kolor dobrany pod kontrast dla każdej plamy). */
.mission-meta{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:500; color:#2A2019; margin-top:12px; }
.mission-meta svg{ flex:0 0 auto; color:#1A1611; }
.mission-btn{ margin-top:16px; align-self:flex-start; border-color:rgba(42,32,25,0.45); color:#2A2019; }
/* Zablokowany przycisk: do czasu, aż misja ma konkretny termin i miejsce */
.mission-btn.is-locked, html[data-theme="dark"] .mission-btn.is-locked, html[data-theme="dark"] .mission-btn.is-locked:hover{ opacity:0.4; cursor:not-allowed; pointer-events:none; transform:none !important; box-shadow:none !important; background:transparent !important; }
/* FAQ: dwie kolumny — po lewej nagłówek, po prawej jasne karty z pytaniami (akordeon) */
#faq{ background:#FEFBF2; padding-bottom:clamp(40px, 3.5vw, 56px); }
.faq-layout{ display:grid; grid-template-columns:minmax(300px, 1fr) 1.3fr; gap:clamp(32px, 5vw, 80px); align-items:start; max-width:1200px; }
/* Hasło pod nagłówkiem hero */
.hero-lead{ margin:0; max-width:34ch; font-size:clamp(16px, 1.5vw, 19px); line-height:1.5; font-weight:500; color:#F6EDE2; text-wrap:balance; text-shadow:0 1px 3px rgba(15,10,8,0.7), 0 2px 18px rgba(15,10,8,0.65); }
/* Karty misji: krój i grubości tekstu */
.mission-card, .mission-card h3, .mission-status, .mission-meta, .mission-btn{ font-family:'Figtree', system-ui, sans-serif; }
.mission-card h3{ font-weight:600; font-size:20px; line-height:1.3; letter-spacing:-0.005em; color:#262626; margin-top:16px; margin-bottom:10px; }
.mission-status, .mission-meta{ font-size:16px !important; font-weight:500 !important; color:#2B2B2B; }
.mission-meta{ margin-top:6px; }
.mission-meta svg{ color:inherit; }
.mission-btn{ font-weight:500; font-size:15px; }
/* Ciemny motyw: jaśniejszy akcent dla małych napisów (kontrast WCAG AA na ciemnym tle) */
html[data-theme="dark"] .faq-eyebrow, html[data-theme="dark"] .faq-sub a, html[data-theme="dark"] .faq-title em{ color:#F3E9DC !important; }
html[data-theme="dark"] .faq-dot{ background:#F3E9DC; }
.faq-eyebrow{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:0.04em; color:#16130F; margin-bottom:12px; }
.faq-dot{ width:6px; height:6px; border-radius:999px; background:#16130F; }
.faq-title{ font-family:var(--font-display); font-weight:500; font-size:var(--fs-h2-lg); line-height:1.08; color:#16130F; margin:0 0 18px; }
.faq-sub{ color:#7a6c60; font-size:16px; line-height:1.6; max-width:360px; margin:0; }
.faq-sub a{ color:#16130F; font-weight:700; text-decoration:none; transition:opacity 0.18s ease; }
.faq-sub a:hover{ opacity:0.7; }
.faq-list{ display:flex; flex-direction:column; gap:14px; }
.faq-item{
background:#FFFFFF; border:1px solid #EADFD0; border-radius:14px;
box-shadow:0 1px 2px rgba(42,32,25,0.05), 0 8px 20px -14px rgba(42,32,25,0.25);
opacity:0; transform:translateY(16px);
transition:opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.faq-item:hover{ border-color:#DCCBB3; box-shadow:0 1px 2px rgba(42,32,25,0.06), 0 14px 28px -16px rgba(42,32,25,0.32); }
.faq-list.is-visible .faq-item{ opacity:1; transform:none; }
.faq-list.is-visible .faq-item:nth-child(2){ transition-delay:0.07s; }
.faq-list.is-visible .faq-item:nth-child(3){ transition-delay:0.14s; }
.faq-list.is-visible .faq-item:nth-child(4){ transition-delay:0.21s; }
.faq-list.is-visible .faq-item:nth-child(5){ transition-delay:0.28s; }
.faq-question{ width:100%; display:flex; align-items:center; gap:16px; padding:20px 22px; background:none; border:0; border-radius:14px; cursor:pointer; text-align:left;
font-family:'Figtree',sans-serif; font-size:17px; font-weight:700; line-height:1.35; color:#16130F; }
.faq-question:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.faq-bubble{ flex:0 0 auto; color:#8a7d6e; }
.faq-question[aria-expanded="true"] .faq-bubble{ color:var(--accent); }
.faq-h{ margin:0; font:inherit; line-height:inherit; }
.faq-icon{ flex:0 0 auto; margin-left:auto; color:#a89a8a; transition:transform 0.2s ease; }
html[data-theme="dark"] .faq-icon{ color:#8a7d6e; }
.faq-list.is-visible .faq-item:nth-child(6){ transition-delay:0.35s; }
.faq-list.is-visible .faq-item:nth-child(7){ transition-delay:0.42s; }
.faq-answer[hidden]{ padding:0 !important; }
.faq-answer{ padding:0 24px 20px 58px; color:#6b5d52; font-size:15px; line-height:1.65; }
@media (max-width:860px){
.faq-layout{ grid-template-columns:1fr; gap:28px; }
.faq-sub{ max-width:none; }
.faq-question{ padding:18px; gap:14px; font-size:16px; }
.faq-answer{ padding:0 18px 18px 52px; }
}
@keyframes chevron-bounce{ 0%,100%{ transform:translateY(0); opacity:0.9;} 50%{ transform:translateY(-4px); opacity:0.5;} }
/* Efekt "wyskakiwania" elementów przy scrollowaniu: jednorazowy pop z lekkim przestrzeleniem
(skala/pozycja przechodzą odrobinę ponad cel i się ustalają), z odstępami czasowymi między
kolejnymi elementami w tej samej grupie (JS ustawia --pop-i = kolejność w kontenerze). */
.pop-item{ opacity:0; }
/* Bezpiecznik: bez działającego site.js (brak klasy .reveal-ready na ) nic nie jest ukryte. */
html:not(.reveal-ready) .pop-item, html:not(.reveal-ready) .faq-item{ opacity:1 !important; transform:none !important; animation:none !important; }
@keyframes pop-in{
0%{ opacity:0; transform:translateY(28px) scale(0.95); }
100%{ opacity:1; transform:translateY(0) scale(1); }
}
.pop-item.is-visible{
animation:pop-in 0.7s cubic-bezier(0.16,1,0.3,1) both;
animation-delay: calc(var(--pop-i, 0) * 90ms);
}
.hero-navlinks{ display:flex; gap:var(--gap-nav); }
.hero-navlinks a{ position:relative; color:rgba(251,244,234,0.85); font-family:var(--font-label); font-size:calc(var(--fs-nav) - 3px); font-weight:400; text-transform:uppercase; letter-spacing:0.08em; white-space:nowrap; padding-bottom:12px; transition:color 0.18s ease; text-shadow:0 1px 8px rgba(15,10,8,0.5); }
.hero-navlinks a::after{ content:""; position:absolute; left:50%; bottom:0; width:5px; height:5px; border-radius:999px; background:#FBF4EA; opacity:0; transform:translate(-50%,-2px) scale(0.4); transition:opacity 0.18s ease, transform 0.18s ease; }
.hero-navlinks a:hover{ color:#FBF4EA; }
.hero-navlinks a:hover::after, .hero-navlinks a:focus-visible::after{ opacity:1; transform:translate(-50%,-2px) scale(1); }
/* Szklany przycisk CTA w stylu z przesłanego nagrania: półprzezroczysta, rozmyta "szybka"
(backdrop-filter blur) zamiast płaskiego wypełnienia, jaśniejąca obwódka i delikatne
uniesienie na hover, strzałka odjeżdżająca w stronę ruchu kursora. */
.hero-cta{
position:relative; display:inline-flex; align-items:center; gap:9px;
white-space:nowrap; padding:11px 22px; border-radius:999px;
font-size:14px; font-weight:600; color:#FBF4EA;
background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.09));
border:1px solid rgba(255,255,255,0.38);
backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
box-shadow:0 6px 20px -9px rgba(15,10,8,0.5), inset 0 1px 0 rgba(255,255,255,0.28);
transition:transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.hero-cta:hover{
color:#FBF4EA;
transform:translateY(-1px);
background:linear-gradient(180deg, rgba(255,255,255,0.3), rgba(255,255,255,0.13));
border-color:rgba(255,255,255,0.58);
box-shadow:0 10px 26px -9px rgba(15,10,8,0.55), inset 0 1px 0 rgba(255,255,255,0.36);
}
/* Napis w przycisku "rusza się" na hover: dwie kopie tekstu ułożone jedna nad drugą w masce
(overflow:hidden), różniące się kolorem/grubością — górna (spoczynkowa) zjeżdża w górę i
znika, dolna (akcentowa, cieplejszy odcień + grubszy krój) wjeżdża z dołu na jej miejsce.
W przeciwieństwie do wcześniejszej próby z dwoma IDENTYCZNYMI kopiami (niewidoczny no-op),
tutaj kolor/waga się zmieniają, więc ruch jest naprawdę widoczny. */
.hero-cta-label-wrap{ position:relative; display:inline-block; overflow:hidden; clip-path:inset(0 -30px 0 -4px); overflow:visible; height:20px; line-height:20px; vertical-align:top; }
.hero-cta-label{ display:block; transition:transform 0.38s cubic-bezier(0.65,0,0.35,1); }
.hero-cta-label-alt{ position:absolute; left:0; top:0; width:auto; white-space:nowrap; transform:translateY(100%); color:#FFDCAA; font-weight:700; transition:transform 0.38s cubic-bezier(0.65,0,0.35,1); }
.hero-cta:hover .hero-cta-label{ transform:translateY(-100%); }
.hero-cta:hover .hero-cta-label-alt{ transform:translateY(0); }
.hero-cta-arrow{ flex:0 0 auto; transition:transform 0.3s cubic-bezier(0.65,0,0.35,1); }
.hero-cta:hover .hero-cta-arrow{ transform:translateX(4px) rotate(45deg); }
@media (prefers-reduced-motion: reduce){
.hero-cta-label, .hero-cta-label-alt, .hero-cta-arrow{ transition:none !important; }
.hero-cta:hover .hero-cta-arrow{ transform:none !important; }
.hero-cta-label-alt{ display:none !important; }
}
/* Plakietka "Start / Kraków" w tej samej szklanej stylistyce co przycisk .hero-cta ("Zapisz się") —
półprzezroczysta "szybka" (backdrop-filter) zamiast ciemnego, płaskiego tła, żeby wyglądały
spójnie. (Wcześniejsza wersja z kolorowym gradientem na hover wyglądała obco na tle reszty
hero, więc wracamy do tego samego szkła co reszta przycisków.) */
#startPill{
background:linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.09));
border:1px solid rgba(255,255,255,0.38);
border-radius:999px;
backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
box-shadow:0 6px 20px -9px rgba(15,10,8,0.5), inset 0 1px 0 rgba(255,255,255,0.28);
transition:transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
/* Dekoracyjny obrót igły kompasu na hover/focus — niezależny od prawdziwego namierzania
kierunku (które działa tylko na telefonie z czujnikami). Na desktopie czujników nie ma,
więc to jedyna informacja zwrotna, że przycisk w ogóle coś robi. CSS-owa animacja na
:hover ma pierwszeństwo nad inline transform ustawianym przez JS z realnego odczytu
kompasu, więc nie koliduje z nim — po zakończeniu obrotu igła wraca do aktualnego
kierunku, jaki akurat trzyma JS. */
@keyframes compass-hover-spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
#compassBtn:hover #compassNeedle, #compassBtn:focus-visible #compassNeedle{
animation:compass-hover-spin 0.7s cubic-bezier(0.45,0,0.2,1);
}
@media (prefers-reduced-motion: reduce){
#compassBtn:hover #compassNeedle, #compassBtn:focus-visible #compassNeedle{ animation:none !important; }
}
.cursor-light{ position:absolute; top:0; left:0; width:640px; height:640px; border-radius:50%; --lc1:rgba(255,247,235,0.09); --lc2:rgba(255,247,235,0.035); background:radial-gradient(circle, var(--lc1) 0%, var(--lc2) 32%, rgba(255,247,235,0) 68%); pointer-events:none; z-index:1; opacity:0; transition:opacity 0.5s ease; will-change:transform, opacity, background; }
.cursor-light.is-active{ opacity:0.8; } /* 20% słabsze światło przy kursorze */
/* Nagłówek hero: litery jaśnieją pod światłem kursora, tak jak reszta hero pod cursor-light. */
.hero-title{
position:relative;
color:#FBF4EA;
background-image: radial-gradient(circle 240px at var(--lx,-9999px) var(--ly,-9999px), #FFFFFF 0%, #FFE9C7 35%, #FBF4EA 65%, #FBF4EA 100%);
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
/* text-shadow maluje się NAD tłem przyciętym do liter (kolejność malowania w CSS), więc
przy przezroczystym wypełnieniu robi z liter szary/mętny bajzel. filter:drop-shadow
działa na już złożony (przezroczysty) element, więc cień trzyma się kształtu liter. */
filter: drop-shadow(0 2px 14px rgba(15,10,8,0.55)) drop-shadow(0 1px 3px rgba(15,10,8,0.5));
}
@supports not (background-clip:text){ .hero-title{ color:#FBF4EA; background:none; filter:none; text-shadow:0 2px 20px rgba(15,10,8,0.55), 0 1px 4px rgba(15,10,8,0.4); } }
@media (max-width:720px){ .cursor-light{ display:none; } }
/* Nagłówek i podtytuł hero to grafika, nie tekst do kopiowania — bez zaznaczania jak w Wordzie. */
#heroContent, .hero-brand, #startPill, #scrollHint, #compassBtn, .hero-actions, .hero-navlinks, .sticky-nav { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.hero-title::selection, .hero-title *::selection{ background:transparent; }
@keyframes heroDrift{ 0%{ transform:scale(1) rotate(0deg); } 100%{ transform:scale(1.07) rotate(0.8deg); } }
/* Bez animacji obrotu/skali: ciągłe przeliczanie obrazu rozmywało ostre kontury chmur */
@keyframes heroDriftAlt{ 0%{ transform:scale(1.015) rotate(0.15deg); } 100%{ transform:scale(1) rotate(-0.15deg); } }
/* Przyciemnienie i winieta: zdjęcie hero „odsuwa się” w tło, jak tapeta pod treścią */
.hero-vignette{ position:absolute; inset:0; pointer-events:none; z-index:1;
background:
radial-gradient(ellipse 85% 75% at 50% 46%, rgba(12,9,8,0) 0%, rgba(12,9,8,0.16) 55%, rgba(12,9,8,0.55) 100%),
linear-gradient(180deg, rgba(12,9,8,0.22) 0%, rgba(12,9,8,0.10) 35%, rgba(12,9,8,0.12) 70%, rgba(12,9,8,0.38) 100%); }
html[data-theme="dark"] .hero-vignette{ background:radial-gradient(ellipse 85% 75% at 50% 46%, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0.4) 100%); }
/* Box na dole hero (jak widżety w Brave): Kraków, tryb nocny i kompas w jednym ciemnym, szklanym panelu */
.hero-dock-wrap{ position:relative; z-index:2; display:flex; justify-content:center; max-width:1760px; }
.hero-dock{ display:flex; align-items:center; gap:6px; padding:10px 12px; border-radius:16px;
background:linear-gradient(100deg, rgba(26,24,23,0.78) 0%, rgba(62,58,56,0.62) 55%, rgba(30,28,27,0.76) 100%);
backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);
border:1px solid rgba(255,255,255,0.07); box-shadow:0 18px 40px -22px rgba(0,0,0,0.65); }
.hero-dock .dock-item{ display:flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:11px; color:#FBF4EA; text-decoration:none; cursor:pointer; transition:background 0.2s ease; }
.hero-dock .dock-item:hover, .hero-dock .dock-item:focus-visible{ background:rgba(255,255,255,0.08); }
.hero-dock #startPill, .hero-dock #startPill:hover, .hero-dock #startPill:focus-visible{ background:transparent; border:0; border-radius:11px; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; transform:none; padding:6px 14px 6px 8px; }
.hero-dock #startPill, .hero-dock #startPill:hover{ cursor:default; background:transparent; }
.dock-sep{ width:1px; height:30px; background:rgba(255,255,255,0.12); flex:0 0 auto; }
/* Zdjęcie hero: na pionowym telefonie mniejszy, wycięty środek (ten sam kadr), gdzie indziej pełne zdjęcie.
Media query musi być identyczne jak w w . */
.hero-bg-boat{ background-image:url(images/hero-wawel-blekit-2.webp); }
@media (max-width:720px) and (max-aspect-ratio:5/8){ .hero-bg-boat{ background-image:url(images/hero-wawel-blekit-m-2.webp); } }
.dock-ic{ width:40px; height:40px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:transparent; flex:0 0 auto; }
.dock-ic .scroll-chevron{ width:22px; height:22px; }
.dock-txt{ display:flex; flex-direction:column; gap:1px; line-height:1.2; }
.dock-label{ font-family:'Space Mono',monospace; font-size:10px; color:rgba(255,246,233,0.65); text-transform:uppercase; letter-spacing:0.1em; }
.dock-value{ font-size:14px; font-weight:700; color:#FBF4EA; white-space:nowrap; }
.compass-dial{ position:relative; width:40px; height:40px; border-radius:999px; border:1px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.compass-n{ position:absolute; top:2px; font-family:'Space Mono',monospace; font-size:10px; line-height:1; font-weight:700; color:#FBF4EA; }
@media (max-width:720px){
.hero-dock{ width:100%; justify-content:space-between; gap:2px; padding:8px; }
.hero-dock .dock-item, .hero-dock #startPill, .hero-dock #startPill:hover{ padding:6px 8px 6px 6px; gap:8px; }
.dock-ic, .compass-dial{ width:36px; height:36px; }
.dock-sep{ height:26px; }
}
@media (max-width:400px){ #compassBtn .dock-label{ display:none; } .dock-value{ font-size:13px; } }
/* Kompas tylko na telefonie/tablecie (urządzenia dotykowe) — na laptopie nie ma czujników */
@media (hover:hover) and (pointer:fine){ #compassBtn, .dock-sep--compass{ display:none !important; } }
/* Logo: ciemna wersja na jasnych tłach, biała na ciemnych */
.logo-on-dark{ display:none !important; }
html[data-theme="dark"] .logo-on-light{ display:none !important; }
html[data-theme="dark"] .logo-on-dark{ display:block !important; }
/* Zapis w trybie ciemnym: granat zamiast jasnego błękitu */
html[data-theme="dark"] #o-nas .zapis-text-inner, html[data-theme="dark"] .zapis-badge{ background:#1A1713 !important; border:1px solid rgba(255,246,233,0.08) !important; }
html[data-theme="dark"] #o-nas .zapis-text-inner h2, html[data-theme="dark"] .zapis-badge-title{ color:#F3E9DC !important; }
html[data-theme="dark"] #o-nas .zapis-text-inner > p, html[data-theme="dark"] #o-nas p, html[data-theme="dark"] .zapis-badge-loc, html[data-theme="dark"] #o-nas label[for="signupConsent"]{ color:#B3A694 !important; }
html[data-theme="dark"] #o-nas label[for="signupConsent"] a, html[data-theme="dark"] #o-nas #signupMsg{ color:#F3E9DC !important; }
html[data-theme="dark"] #o-nas #signupEmail{ background:rgba(255,246,233,0.05) !important; border-color:rgba(255,246,233,0.28) !important; color:#F3E9DC !important; }
html[data-theme="dark"] #o-nas #signupEmail::placeholder{ color:#A0937F !important; }
/* Krój: Figtree w całej stronie; nagłówki pogrubione i lekko ściśnięte */
h1, h2, .hero-title, .faq-title, .sub-hero-content h1, .zapis-badge-title{ font-weight:800 !important; letter-spacing:-0.02em; }
.faq-title em{ font-weight:800 !important; font-variation-settings:normal !important; }
.hero-title{ letter-spacing:-0.025em !important; }
/* Kroki dla organizacji w stylu Benenovej: bez kart, duża ikona na miękkiej plamie światła, tytuł i opis pod spodem */
.org-steps-title{ margin:0 0 clamp(24px, 3vw, 40px); font-size:clamp(28px, 3.2vw, 44px); line-height:1.1; color:#FFFFFF; text-shadow:0 2px 20px rgba(0,0,0,0.6); }
#dla-organizacji .org-steps{ position:relative; isolation:isolate; gap:clamp(24px, 3vw, 48px); margin-bottom:56px; }
/* Miękkie przyciemnienie za krokami, żeby tekst był czytelny na ziarnistym tle (bez widocznych kart) */
#dla-organizacji .org-steps::before{ content:""; position:absolute; inset:-48px -64px; z-index:-1; pointer-events:none;
background:radial-gradient(ellipse 70% 75% at 50% 50%, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0) 100%); }
#dla-organizacji .org-step{ position:relative; z-index:1; }
#dla-organizacji .org-step.rc-card, html[data-theme="dark"] #dla-organizacji .org-step.rc-card,
#dla-organizacji .org-step.rc-card:hover, html[data-theme="dark"] #dla-organizacji .org-step.rc-card:hover{
background:none; border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0; gap:12px; }
#dla-organizacji .org-step .rc-head{ flex-direction:column; align-items:flex-start; gap:18px; }
#dla-organizacji .org-step .rc-meta{ display:none; }
#dla-organizacji .org-step .rc-ic{ position:relative; width:64px; height:64px; align-items:center; justify-content:center; }
#dla-organizacji .org-step .rc-ic::before{ content:""; position:absolute; inset:-6px; border-radius:50%; z-index:0;
background:radial-gradient(circle, var(--glow, rgba(232,195,106,0.55)) 0%, rgba(232,195,106,0) 68%); }
#dla-organizacji .org-step .rc-ic svg{ position:relative; z-index:1; width:40px; height:40px; stroke-width:1.6; }
#dla-organizacji .org-step .rc-head h3{ font-size:22px; font-weight:700; text-shadow:0 1px 12px rgba(0,0,0,0.75); }
html body #dla-organizacji .org-step p{ color:#F1F1F1 !important; font-size:16px !important; line-height:1.65; max-width:34ch; text-shadow:0 1px 2px rgba(0,0,0,0.9), 0 1px 14px rgba(0,0,0,0.9); }
#dla-organizacji .org-step .rc-link{ text-shadow:0 1px 10px rgba(0,0,0,0.8); }
#dla-organizacji .org-cta small{ font-size:15px; padding:12px 18px; }
/* Strona dla organizacji: jasne tło z piaskiem (tryb jasny) — ciemne napisy, białe panele */
html:not([data-theme="dark"]) body .org-page .sub-hero::before{ background:none !important; }
html:not([data-theme="dark"]) body .org-page .sub-hero-content h1, html:not([data-theme="dark"]) body .org-page .sub-hero-content p{ color:#1A1611 !important; text-shadow:none !important; }
html:not([data-theme="dark"]) body .org-page .hero-brand, html:not([data-theme="dark"]) body .org-page .hero-brand *, html:not([data-theme="dark"]) body .org-page .hero-navlinks a, html:not([data-theme="dark"]) body .org-page .lang-btn{ color:#1A1611 !important; text-shadow:none !important; }
html:not([data-theme="dark"]) body .org-page .hero-brand img{ filter:invert(1) brightness(0.15) !important; }
html:not([data-theme="dark"]) body .org-page .hero-navlinks a::after{ background:#1A1611 !important; }
/* Strona dla organizacji: przyciski "Zapisz się" i "Zgłoś potrzebę" jako prostokątny czarny box
(cienka obwódka, małe pogrubione wersaliki z rozstrzeleniem) — bez strzałki i animacji napisu */
html body .org-page .hero-cta, html body:has(.org-page) .sticky-cta{
border-radius:3px !important; background:#111111 !important; border:1px solid #111111 !important; color:#FFFFFF !important;
backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important;
font-family:var(--font-display) !important; font-size:13px !important; font-weight:700 !important;
text-transform:uppercase; letter-spacing:0.08em; padding:12px 20px !important; gap:0 !important; transform:none !important;
transition:background 0.18s ease, border-color 0.18s ease !important; }
html body:has(.org-page) .sticky-cta{ height:auto !important; padding:10px 16px !important; }
html body .org-page .hero-cta *, html body:has(.org-page) .sticky-cta *{ color:#FFFFFF !important; }
html body .org-page .hero-cta:hover, html body:has(.org-page) .sticky-cta:hover{ background:#2E2E2E !important; border-color:#2E2E2E !important; }
html body .org-page .hero-cta-arrow, html body .org-page .hero-cta-label-alt, html body:has(.org-page) .sticky-cta svg{ display:none !important; }
html body .org-page .hero-cta:hover .hero-cta-label{ transform:none !important; }
html body .org-page .hero-cta-label-wrap{ clip-path:none !important; }
html[data-theme="dark"] body .org-page .hero-cta, html[data-theme="dark"] body:has(.org-page) .sticky-cta{ border-color:rgba(255,255,255,0.35) !important; }
html[data-theme="dark"] body .org-page .hero-cta:hover, html[data-theme="dark"] body:has(.org-page) .sticky-cta:hover{ border-color:rgba(255,255,255,0.6) !important; }
html:not([data-theme="dark"]) body #dla-organizacji .org-info{ background:rgba(255,255,255,0.8) !important; border:1px solid rgba(26,22,17,0.08) !important; box-shadow:0 10px 30px -22px rgba(26,22,17,0.35) !important; backdrop-filter:blur(8px) !important; }
html:not([data-theme="dark"]) body #dla-organizacji .org-info p{ color:#1A1611 !important; text-shadow:none !important; }
html:not([data-theme="dark"]) body #dla-organizacji .org-info h3{ color:#8A7D6E !important; }
html:not([data-theme="dark"]) body #dla-organizacji .org-cta small{ background:rgba(255,255,255,0.85) !important; color:#5E5249 !important; border-color:rgba(26,22,17,0.08) !important; text-shadow:none !important; }
html:not([data-theme="dark"]) body #dla-organizacji .org-cta small a, html:not([data-theme="dark"]) body #dla-organizacji .copy-mail{ color:#1A1611 !important; border-color:rgba(26,22,17,0.3) !important; }
html:not([data-theme="dark"]) body #dla-organizacji .org-steps::before{ display:none !important; }
html:not([data-theme="dark"]) body .org-page #dla-organizacji ol.org-steps .org-step p{ color:#3E352E !important; text-shadow:none !important; }
html:not([data-theme="dark"]) body #dla-organizacji .org-step .rc-head h3, html:not([data-theme="dark"]) body #dla-organizacji .org-step .rc-link{ color:#1A1611 !important; text-shadow:none !important; }
html:not([data-theme="dark"]) body .org-steps-title{ color:#1A1611 !important; text-shadow:none !important; }
html:not([data-theme="dark"]) body #dla-organizacji .org-step .rc-ic--1{ color:#B4512A !important; --glow:rgba(255,255,255,0.8); }
html:not([data-theme="dark"]) body #dla-organizacji .org-step .rc-ic--2{ color:#A4761F !important; --glow:rgba(255,255,255,0.8); }
html:not([data-theme="dark"]) body #dla-organizacji .org-step .rc-ic--3{ color:#4F7A55 !important; --glow:rgba(255,255,255,0.8); }
/* Tryb ciemny na piasku: tło jest już przyciemnione, więc bez dodatkowych pasów przyciemnienia */
html[data-theme="dark"] body .org-page .sub-hero::before{ background:none !important; }
html[data-theme="dark"] body #dla-organizacji .org-steps::before{ display:none !important; }
/* Ręcznie rysowane ikony kroków (dla organizacji) */
#dla-organizacji .org-step .rc-ic{ width:76px; height:76px; }
#dla-organizacji .org-step .rc-ic::before{ inset:-8px; }
#dla-organizacji .org-step .rc-ic-img{ position:relative; z-index:1; width:74px; height:74px; display:block; }
/* Żółtawa poświata pod ikonami (ten sam promień co wcześniej) */
html body #dla-organizacji .org-step .rc-ic--1, html body #dla-organizacji .org-step .rc-ic--2, html body #dla-organizacji .org-step .rc-ic--3{ --glow:rgba(222,236,110,0.8) !important; }
html[data-theme="dark"] body #dla-organizacji .org-step .rc-ic--1, html[data-theme="dark"] body #dla-organizacji .org-step .rc-ic--2, html[data-theme="dark"] body #dla-organizacji .org-step .rc-ic--3{ --glow:rgba(200,220,90,0.48) !important; }
html[data-theme="dark"] #dla-organizacji .org-step .rc-ic-img{ filter:drop-shadow(0 0 1px rgba(255,255,255,0.6)); }
.hero-grain{ position:absolute; inset:0; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27220%27%20height%3D%27220%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.85%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27%2F%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27%2F%3E%3CfeComponentTransfer%3E%3CfeFuncR%20type%3D%27linear%27%20slope%3D%270.55%27%20intercept%3D%270%27%2F%3E%3CfeFuncG%20type%3D%27linear%27%20slope%3D%270.55%27%20intercept%3D%270%27%2F%3E%3CfeFuncB%20type%3D%27linear%27%20slope%3D%270.55%27%20intercept%3D%270%27%2F%3E%3C%2FfeComponentTransfer%3E%3C%2Ffilter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%2F%3E%3C%2Fsvg%3E"); background-size:220px 220px; opacity:0.16; mix-blend-mode:screen; }
@media (max-width:480px){ .hero-grain{ background-size:160px 160px; } }
/* Tło hero (zdjęcie Wawelu, klasa .hero-bg-boat) siedzi w osobnym wrapperze .hero-parallax-bg,
który przesuwa JS przy przewijaniu (efekt głębi). */
.hero-parallax-bg{ position:absolute; inset:0; will-change:transform; }
#heroContent{ will-change:transform, opacity; }
.menu-btn{ display:none; width:38px; height:38px; border-radius:999px; border:1px solid rgba(255,255,255,0.25); background:transparent; align-items:center; justify-content:center; color:#FBF4EA; cursor:pointer; flex:0 0 auto; padding:0; }
@keyframes menu-in{ from{ opacity:0; transform:translateY(-6px);} to{ opacity:1; transform:translateY(0);} }
.mobile-menu{
position:absolute; top:calc(var(--hero-pad, 20px) + 12px); left:20px; right:20px; z-index:5; display:flex;
flex-direction:column; gap:2px; background:#16130F; border:1px solid rgba(255,255,255,0.12);
border-radius:16px; padding:8px; animation:menu-in 0.22s ease both;
}
.mobile-menu[hidden]{ display:none; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; font-family:sans-serif !important; }
#compassBtn{ background:none; border:0; font:inherit; margin:0; -webkit-appearance:none; appearance:none; }
.mobile-menu.is-closing{ animation:menu-out 0.16s ease both; }
@keyframes menu-out{ to{ opacity:0; transform:translateY(-4px); } }
.mobile-menu a{ color:rgba(251,244,234,0.85); font-size:15px; font-weight:500; padding:12px 14px; border-radius:10px; }
.mobile-menu a:hover{ background:rgba(255,255,255,0.06); color:#FBF4EA; }
.hero-brand{ grid-column:1; }
.hero-navlinks{ grid-column:2; }
.hero-actions{ grid-column:3; }
@media (max-width:560px){
.hero-navlinks{ display:none; }
.menu-btn{ display:flex; }
}
@media (max-width:720px){
.wrap{ padding:0 20px; }
}
@media (prefers-reduced-motion: reduce){
.scroll-chevron, .pop-item, .faq-item { animation:none !important; transition:none !important; opacity:1 !important; transform:none !important; }
.hero-bg-boat { animation:none !important; transform:none !important; }
}
/* Zabezpieczenie: treść ukryta do momentu przewinięcia (.pop-item, .faq-item) ma zawsze być
widoczna przy druku/zapisie do PDF i gdy JS się nie uruchomi — niezależnie od pozycji scrolla. */
@media print{
.pop-item, .faq-item{ opacity:1 !important; transform:none !important; transition:none !important; animation:none !important; }
}
@keyframes sky-drift{
0%, 100%{ opacity:0.45; transform:translateX(-2.5%) translateY(-1%); }
50%{ opacity:0.75; transform:translateX(2.5%) translateY(1%); }
}
.sky-drift{
position:absolute; inset:-15% -25%; pointer-events:none; z-index:1;
background:radial-gradient(ellipse at 32% 22%, rgba(255,255,255,0.06), transparent 55%);
animation:sky-drift 24s ease-in-out infinite;
}
/* Sekcja zapisu — dwie kolumny (forma + karta z logotypem) */
.zapis-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
.zapis-text{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; order:2; }
.zapis-text-inner{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:inherit; gap:16px; width:100%; }
.zapis-art{ order:1; display:flex; justify-content:center; }
.zapis-badge{ position:relative; width:100%; aspect-ratio:1/1; max-width:128px; margin:0 auto; background:#FFFFFF; border-radius:3px; display:flex; flex-direction:column; justify-content:center; padding:18px; box-sizing:border-box; box-shadow:0 10px 24px -14px rgba(23,19,16,0.4); }
/* Formularz zapisu jako ciemna karta, w stylu czarnego kwadratu obok */
#o-nas .zapis-text-inner{ background:#FFFFFF; border-radius:3px; padding:clamp(24px, 3vw, 36px); box-sizing:border-box; max-width:540px;
box-shadow:0 18px 40px -22px rgba(23,19,16,0.55); }
#o-nas .zapis-text-inner h2{ color:#1A1611 !important; margin:0; }
#o-nas .zapis-text-inner > p{ color:#5E5249 !important; margin:0; }
#o-nas #signupEmail{ background:#FAF7EE !important; border-color:#CBBDA6 !important; color:#1A1611 !important; }
#o-nas #signupEmail::placeholder{ color:#7A6D60; }
#o-nas .signup-label{ flex:1 1 100%; text-align:left; font-size:13px; font-weight:600; color:#3D332B; margin-bottom:-4px; }
html[data-theme="dark"] #o-nas .signup-label{ color:#E6DACB !important; }
#o-nas #signupMsg a{ color:inherit; text-decoration:underline; }
#o-nas #signupMsg[data-err]{ color:#B3452C !important; }
html[data-theme="dark"] #signupDoneTitle, html[data-theme="dark"] #signupAgain, html[data-theme="dark"] #signupDoneEmail{ color:#F3E9DC !important; }
html[data-theme="dark"] #o-nas #signupMsg[data-err]{ color:#F08A6A !important; }
@media (max-width:859px){ #o-nas .zapis-art{ display:none; } #signupDone svg{ margin-left:auto !important; margin-right:auto !important; } }
#o-nas #signupEmail:focus{ border-color:#B4512A !important; outline:2px solid #C1592B; outline-offset:2px; }
html[data-theme="dark"] #o-nas #signupEmail:focus{ border-color:#E07A4F !important; outline-color:#E07A4F; }
#o-nas label[for="signupConsent"]{ color:#6B5D52 !important; }
#o-nas label[for="signupConsent"] a{ color:#1A1611 !important; }
#o-nas #signupConsent{ accent-color:#C1592B !important; }
#o-nas #signupMsg{ color:#1A1611 !important; min-height:0 !important; }
#o-nas #signupMsg:empty{ display:none; }
html[data-theme="dark"] #o-nas .zapis-text-inner{ border:1px solid rgba(255,246,233,0.14); box-shadow:none; }
.zapis-badge-title{ font-family:var(--font-display); font-weight:600; font-size:15px; line-height:1.12; color:#1A1611; }
.zapis-badge-loc{ font-family:'Figtree',sans-serif; font-size:10px; font-weight:400; letter-spacing:0.01em; color:#6B5D52; margin-top:8px; }
@media (min-width:860px){
.zapis-grid{ grid-template-columns:1fr 1fr; gap:64px; }
.zapis-text{ align-items:flex-start; text-align:left; order:1; }
.zapis-text-inner form{ justify-content:flex-start !important; }
.zapis-art{ order:2; }
.zapis-badge{ max-width:210px; padding:26px; }
.zapis-badge-title{ font-size:23px; }
.zapis-badge-loc{ font-size:12px; margin-top:12px; }
}
/* ===== Ciemny motyw ===== */
/* Ciemny motyw (przełącznik „Motyw” w pasku na dole hero, element #scrollHint) */
body, #misje, #faq, .mission-card, .mission-card-badge, #signupEmail, #privacyModal > div[role="dialog"], #privacyClose, #hero::before{
transition:background-color 0.45s ease, color 0.45s ease, border-color 0.45s ease, opacity 0.45s ease;
}
#hero::before{
content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
background:rgba(6,5,4,0.6); opacity:0;
}
html[data-theme="dark"] #hero::before{ opacity:1 !important; }
html[data-theme="dark"] body{ background:#0D0B09 !important; color:#EDE3D6 !important; }
html[data-theme="dark"] #misje{ background:#12100D !important; border-color:#2C2620 !important; }
html[data-theme="dark"] #faq{ background:#12100D !important; }
html[data-theme="dark"] .faq-item{ background:#1A1713 !important; border-color:#2C2620 !important; }
html[data-theme="dark"] .faq-question, html[data-theme="dark"] .faq-title{ color:#F3E9DC !important; }
html[data-theme="dark"] .faq-answer, html[data-theme="dark"] .faq-sub{ color:#C9BBA8 !important; }
html[data-theme="dark"] .faq-bubble{ color:#9c8f80 !important; }
html[data-theme="dark"] #o-nas{ background:#0D0B09 !important; }
html[data-theme="dark"] #misje p,
html[data-theme="dark"] #faq p,
html[data-theme="dark"] #o-nas p{ color:#C9BBA8 !important; }
html[data-theme="dark"] .mission-card{ background:#1A1713 !important; border:0 !important; }
html[data-theme="dark"] .mission-status{ color:#B8A996 !important; }
html[data-theme="dark"] .mission-card h3{ color:#F3E9DC !important; }
html[data-theme="dark"] .mission-meta{ color:#F3E9DC !important; }
html[data-theme="dark"] .mission-meta svg{ color:#9c8f80 !important; }
html[data-theme="dark"] .mission-btn{ color:#F3E9DC !important; border-color:rgba(243,233,220,0.35) !important; }
html[data-theme="dark"] .mission-btn:hover{ background:#F3E9DC !important; color:#161310 !important; }
html[data-theme="dark"] .zapis-badge{ border:1px solid rgba(255,246,233,0.14); box-shadow:none; }
html[data-theme="dark"] #privacyModal > div[role="dialog"]{ background:#12100D !important; }
html[data-theme="dark"] #privacyModal div[role="dialog"] > div{ color:#C9BBA8 !important; }
#privacyModal a{ color:inherit; text-decoration:underline; }
html[data-theme="dark"] #privacyTitle{ color:#F3E9DC !important; }
html[data-theme="dark"] #privacyClose{ background:#12100D !important; border-color:#2C2620 !important; color:#F3E9DC !important; }
/* Stopka — kompaktowa, jeden rząd */
.site-footer{ background:#000; color:#EFE6D8; padding:22px 0; border-top:1px solid rgba(255,255,255,0.07); }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px 24px; }
.footer-brand{ display:flex; align-items:center; gap:9px; }
.footer-brand img{ display:block; flex:0 0 auto; filter:drop-shadow(0 1px 3px rgba(0,0,0,0.4)); }
.footer-name{ font-family:'Figtree',sans-serif; font-weight:800; font-size:18px; color:#D9703F; }
.footer-copy{ font-size:13px; color:#9c8f80; margin-left:6px; }
.footer-links{ display:flex; gap:16px; flex-wrap:wrap; font-size:13px; color:#9c8f80; }
.footer-links a{ color:#9c8f80; }
.footer-links a:hover{ color:#EFE6D8; }
/* Autorzy zdjęć: rozwijana linijka pod stopką (wymóg licencji CC BY-SA) */
.footer-credits{ flex-basis:100%; font-size:12px; color:#9c8f80; }
.footer-credits summary{ cursor:pointer; list-style:none; display:inline-block; }
.footer-credits summary::-webkit-details-marker{ display:none; }
.footer-credits summary::after{ content:" ▾"; font-size:10px; }
.footer-credits[open] summary::after{ content:" ▴"; }
.footer-credits summary:hover{ color:#EFE6D8; }
.footer-credits p{ margin:6px 0 0; line-height:1.5; }
.footer-credits a{ color:#9c8f80; text-decoration:underline; }
.footer-credits a:hover{ color:#EFE6D8; }
@media (max-width:720px){ .site-footer{ padding:18px 0; } .footer-row{ gap:10px; } }
/* Sekcja "Dla organizacji" */
/* "Dla organizacji" — karty w stylu "glass": jasne w jasnym motywie, ciemne w ciemnym */
/* Tło sekcji (na stronie i tak przykrywa je tło .org-page z piaskiem) */
#dla-organizacji{ position:relative; background:#070806; color:#FBF4EA; border-bottom:1px solid #1A1D14; }
.org-steps{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:20px; margin:0 0 48px; padding:0; list-style:none; }
.rc-card{ display:flex; flex-direction:column; gap:14px; padding:22px 24px 24px; border-radius:12px;
background:linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.55));
border:1px solid rgba(42,32,25,0.10); box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), 0 18px 36px -26px rgba(42,32,25,0.35);
backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);
transition:border-color 0.25s ease, background 0.25s ease; }
.rc-head{ display:flex; align-items:center; gap:12px; }
.rc-head h3{ flex:1; margin:0; font-family:'Figtree',sans-serif; font-size:20px; font-weight:700; letter-spacing:-0.01em; color:#2A2019; }
.rc-ic{ display:flex; flex:0 0 auto; }
.rc-meta{ font-family:var(--font-label); font-size:13px; letter-spacing:0.02em; color:#9A8C7D; white-space:nowrap; }
.rc-card p{ margin:0; flex:1; color:#6b5d52; font-size:15px; line-height:1.6; }
.rc-link{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; color:#2A2019; font-size:15px; font-weight:700; text-decoration:none; }
.rc-link .rc-arr{ transition:transform 0.2s ease; }
.rc-link:hover .rc-arr{ transform:translateX(3px); }
.rc-link:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.org-info{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:20px 40px; margin-bottom:36px; padding-top:32px; border-top:1px solid rgba(42,32,25,0.1); }
.org-info h3{ font-family:var(--font-label); font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:0.12em; color:#8a7d6e; margin:0 0 10px; }
.org-info p{ margin:0; color:#2A2019; font-size:16px; line-height:1.6; }
/* Przycisk "Kopiuj adres" obok maila (strona dla organizacji) */
.copy-mail{ margin-left:8px; padding:3px 11px; border-radius:999px; border:1px solid rgba(251,244,234,0.35); background:transparent; color:#FBF4EA; font:600 12.5px/1.4 'Figtree',sans-serif; cursor:pointer; transition:background 0.18s ease, border-color 0.18s ease; vertical-align:baseline; }
.copy-mail:hover{ background:rgba(251,244,234,0.12); border-color:rgba(251,244,234,0.6); }
.copy-mail.is-done{ border-color:#7FB58A; color:#BFE3C6; }
.org-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }
.org-cta small a{ color:#2A2019; font-weight:600; text-decoration:none; transition:color 0.18s ease; }
html[data-theme="dark"] #dla-organizacji{ background:#0F0C0A !important; color:#F3E9DC; border-color:#2A221C !important; }
/* Tekst poza kartami na ciemnym, ziarnistym tle — jasny i z cieniem dla czytelności */
#dla-organizacji .org-info{ padding:26px 28px; border:1px solid rgba(255,255,255,0.1); border-radius:12px; background:rgba(8,9,7,0.66);
backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
#dla-organizacji .org-cta small{ padding:8px 14px; border-radius:999px; background:rgba(8,9,7,0.66); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
/* Podstrona „Dla organizacji”: tło z piaskiem pod nagłówkiem i sekcją (jasna i ciemna wersja) */
.org-page{ background:#E9DDCB url(images/org-tlo-piasek.webp) center top / cover no-repeat; }
html[data-theme="dark"] .org-page{ background:#0F0C0A url(images/org-tlo-piasek-ciemny.webp) center top / cover no-repeat; }
.org-page .sub-hero{ background:transparent; }
.org-page .sub-hero-content p{ color:#FBF4EA; text-shadow:0 1px 3px rgba(0,0,0,0.95), 0 2px 18px rgba(0,0,0,0.85); }
.org-page .sub-hero-content h1{ text-shadow:0 2px 24px rgba(0,0,0,0.7); }
.org-page #dla-organizacji, html[data-theme="dark"] body .org-page #dla-organizacji{ background:transparent !important; border-bottom:0 !important; }
.org-page #dla-organizacji{ padding-top:clamp(8px, 1.5vw, 24px); }
/* Karty w stylu Raycast: ciemne szkło w obu motywach (tło sekcji jest zawsze ciemne) */
#dla-organizacji .rc-head h3, html[data-theme="dark"] #dla-organizacji .rc-head h3{ color:#FFFFFF; font-weight:600; font-size:20px; }
#dla-organizacji .rc-meta, html[data-theme="dark"] #dla-organizacji .rc-meta{ color:#8E8E8E; font-size:13px; }
#dla-organizacji .rc-link, html[data-theme="dark"] #dla-organizacji .rc-link{ color:#FFFFFF; font-weight:600; }
#dla-organizacji .rc-link:hover, html[data-theme="dark"] #dla-organizacji .rc-link:hover{ color:#F2A882; }
/* Panel "Dla kogo / Przykładowe akcje" i pigułka z mailem w tym samym stylu */
#dla-organizacji .org-info, html[data-theme="dark"] #dla-organizacji .org-info{
background:linear-gradient(180deg, rgba(22,22,22,0.62), rgba(12,12,12,0.58)); border:1px solid rgba(255,255,255,0.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05); backdrop-filter:blur(26px); -webkit-backdrop-filter:blur(26px); }
#dla-organizacji .org-info h3, html[data-theme="dark"] #dla-organizacji .org-info h3{ color:#8E8E8E !important; text-shadow:none; }
#dla-organizacji .org-info p, html[data-theme="dark"] #dla-organizacji .org-info p{ color:#EDEDED !important; text-shadow:none; }
#dla-organizacji .org-cta small{ background:rgba(16,16,16,0.62); border:1px solid rgba(255,255,255,0.09); color:#A3A3A3; text-shadow:none;
backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); }
html[data-theme="dark"] .org-cta small{ color:#9C8F80 !important; }
html[data-theme="dark"] .org-cta small a{ color:#F3E9DC !important; }
html[data-theme="dark"] .org-cta small a:hover{ color:#F2A882 !important; }
/* Przełącznik języka PL / EN */
.lang-switch{ position:relative; }
.lang-btn{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:4px 6px; cursor:pointer;
background:none; border:0; border-radius:8px; color:rgba(251,244,234,0.85);
font-family:var(--font-label); font-size:11px; line-height:1; letter-spacing:0.1em; text-shadow:0 1px 8px rgba(15,10,8,0.5);
transition:color 0.18s ease; }
.lang-btn:hover, .lang-btn[aria-expanded="true"]{ color:#FBF4EA; }
.lang-btn svg{ transition:transform 0.2s ease; filter:drop-shadow(0 1px 4px rgba(15,10,8,0.5)); }
.lang-btn:hover svg{ transform:translateY(1px); }
.lang-btn[aria-expanded="true"] svg{ transform:rotate(180deg); }
/* Menu języka: pod PL pojawia się tylko skrót drugiego języka, bez tła */
.lang-menu{ position:absolute; top:100%; left:50%; transform:translateX(-50%); z-index:20; margin:0; padding:2px 0 0; list-style:none; animation:lang-in 0.16s ease both; }
@keyframes lang-in{ from{ opacity:0; transform:translate(-50%, -3px); } to{ opacity:1; transform:translate(-50%, 0); } }
.lang-menu[hidden]{ display:none; }
.lang-menu button{ display:block; padding:4px 6px; border:0; border-radius:6px; background:transparent; cursor:pointer;
font-family:var(--font-label); font-size:11px; line-height:1; letter-spacing:0.1em; color:rgba(251,244,234,0.7); text-shadow:0 1px 8px rgba(15,10,8,0.5); transition:color 0.18s ease; }
.lang-menu button:hover, .lang-menu button:focus-visible{ color:#FBF4EA; }
.lang-menu button:focus-visible{ outline:1px solid rgba(251,244,234,0.6); outline-offset:1px; }
.lang-menu button[aria-checked="true"]{ display:none; }
.lang-menu .lang-name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .lang-menu{ animation:none; } }
@media (max-width:560px){
.hero-cta{ padding:11px 16px; }
}
@media (max-width:380px){
.hero-brand span{ display:none; }
}
/* Pas z tłem (ściana + drewniana podłoga) za nagłówkiem "Misje" */
#misje{ padding-top:0 !important; border-top:0 !important; }
.misje-band{ position:relative; margin-bottom:8px; padding:clamp(48px, 5vw, 76px) 0 clamp(20px, 2.5vw, 32px); }
/* Sekcja Misje wypełnia cały ekran: po przejściu do niej nie widać krawędzi kolejnej sekcji */
#misje{ min-height:calc(100vh + 1px); min-height:calc(100svh + 1px); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; }
/* Podstrona "Dla organizacji": nagłówek na zdjęciu z hero + ten sam szklany przycisk */
.sub-hero{ --hero-pad:clamp(20px, 2.4vw, 36px); position:relative; overflow:hidden; color:#FBF4EA;
padding:var(--hero-pad) 0 clamp(72px, 9vw, 128px);
background:#5d5560 url(images/img-15c2112516.webp) center 62% / cover no-repeat; }
.sub-hero::before{ content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(180deg, rgba(15,10,8,0.30) 0%, rgba(15,10,8,0.42) 55%, rgba(15,10,8,0.62) 100%); }
.sub-hero-content{ position:relative; z-index:2; margin-top:clamp(56px, 9vw, 128px); display:flex; flex-direction:column; align-items:flex-start; gap:18px; }
.sub-hero-content h1{ font-family:var(--font-display); font-weight:600; font-size:clamp(40px, 5.2vw, 76px); line-height:1.02; letter-spacing:-0.01em; color:#FBF4EA; margin:0; text-shadow:0 2px 18px rgba(15,10,8,0.45); }
.sub-hero-content p{ max-width:620px; margin:0 0 8px; font-size:18px; line-height:1.6; color:rgba(251,244,234,0.9); text-shadow:0 1px 10px rgba(15,10,8,0.5); }
@media (max-width:720px){ .sub-hero{ background-position:0% 62%; } }
/* Ten sam przycisk co w hero, w pełnym kolorze na jasne tło */
.hero-navlinks a[aria-current="page"]{ color:#FBF4EA; }
.hero-navlinks a[aria-current="page"]::after{ opacity:1; transform:translate(-50%,-2px) scale(1); }
/* Pływający pasek nawigacji (po zjechaniu poniżej hero) */
.sticky-nav{ position:fixed; top:14px; left:0; right:0; z-index:40; display:flex; flex-direction:column; align-items:center; pointer-events:none;
opacity:0; transform:translateY(-14px); transition:opacity 0.28s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1); }
.sticky-nav.is-shown{ opacity:1; transform:none; }
.sticky-nav.is-shown .sticky-bar, .sticky-nav.is-shown .sticky-menu{ pointer-events:auto; }
.sticky-bar{ display:flex; align-items:center; gap:22px; height:52px; padding:0 8px 0 16px; border-radius:14px;
background:rgba(255,253,249,0.45); border:1px solid rgba(234,223,208,0.6); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%);
box-shadow:0 8px 24px -18px rgba(42,32,25,0.3); }
.sticky-burger{ display:none; flex-direction:column; justify-content:center; gap:5px; width:30px; height:30px; padding:0 4px; border:0; background:none; cursor:pointer; }
.sticky-burger span{ display:block; height:1.6px; width:100%; background:#2A2019; border-radius:2px; transition:transform 0.2s ease; }
.sticky-burger[aria-expanded="true"] span:first-child{ transform:translateY(3.3px) rotate(45deg); }
.sticky-burger[aria-expanded="true"] span:last-child{ transform:translateY(-3.3px) rotate(-45deg); }
.sticky-brand{ display:flex; align-items:center; gap:8px; font-family:'Figtree',sans-serif; font-weight:800; font-size:19px; letter-spacing:-0.01em; color:#16130F; text-decoration:none; }
.sticky-brand img{ filter:none !important; }
html[data-theme="dark"] .sticky-brand img{ filter:none !important; }
.sticky-links{ display:flex; gap:20px; margin-left:18px; }
.sticky-links a{ font-family:var(--font-label); font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color:#5b4e44; text-decoration:none; transition:color 0.18s ease; }
.sticky-links a:hover, .sticky-links a[aria-current="page"]{ color:var(--accent); }
.sticky-lang{ margin-left:6px; border:0; background:none; cursor:pointer; font-family:var(--font-label); font-size:11px; letter-spacing:0.1em; color:#5b4e44; padding:6px; border-radius:8px; }
.sticky-lang:hover{ color:var(--accent); }
.sticky-cta{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:10px; background:#2A2019; color:#FBF4EA; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; transition:background 0.18s ease; }
.sticky-cta:hover{ background:var(--accent); color:#FBF4EA; }
.sticky-cta svg{ transition:transform 0.25s ease; }
.sticky-cta:hover svg{ transform:translateX(3px); }
.sticky-menu{ margin-top:8px; min-width:240px; display:flex; flex-direction:column; padding:6px; border-radius:14px;
background:rgba(255,253,249,0.97); border:1px solid #EADFD0; box-shadow:0 16px 34px -18px rgba(42,32,25,0.4); animation:menu-in 0.18s ease both; }
.sticky-menu[hidden]{ display:none; }
.sticky-menu a{ padding:11px 14px; border-radius:9px; color:#2A2019; font-size:15px; font-weight:600; text-decoration:none; }
.sticky-menu a:hover{ background:#F6ECDC; }
.sticky-nav a:focus-visible, .sticky-nav button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
html[data-theme="dark"] .sticky-bar{ background:rgba(18,16,13,0.45) !important; border-color:rgba(255,246,233,0.1) !important; }
html[data-theme="dark"] .sticky-menu{ background:rgba(27,23,18,0.9) !important; border-color:#2C2620 !important; }
html[data-theme="dark"] .sticky-brand, html[data-theme="dark"] .sticky-menu a{ color:#F3E9DC !important; }
html[data-theme="dark"] .sticky-burger span{ background:#F3E9DC !important; }
html[data-theme="dark"] .sticky-links a, html[data-theme="dark"] .sticky-lang{ color:#C9BBA8 !important; }
html[data-theme="dark"] .sticky-menu a:hover{ background:#1A1713 !important; }
html[data-theme="dark"] .sticky-cta{ background:#F3E9DC; color:#161310; }
@media (max-width:720px){
.sticky-burger{ display:flex; }
.sticky-nav{ top:10px; left:12px; right:12px; }
.sticky-bar{ width:100%; gap:12px; height:50px; }
.sticky-links{ display:none; }
.sticky-lang{ margin-left:auto; }
.sticky-cta{ padding:0 12px; }
.sticky-menu{ width:100%; }
}
@media (prefers-reduced-motion: reduce){ .sticky-nav{ transition:none; } }
/* Znaczek pocztowy "Zgłoś akcję" pod siatką misji (prawy dolny róg) */
.stamp{ display:block; width:84px; height:100px; padding:7px; flex:0 0 auto; transform:rotate(-4deg);
background:radial-gradient(circle at 7px 7px, #FAF7EE 4.2px, transparent 4.7px) -7px -7px / 14px 14px, #FFFDF8;
filter:drop-shadow(0 8px 12px rgba(42,32,25,0.18)); transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), filter 0.3s ease; }
@media (max-width:720px){ .stamp{ width:80px; height:96px; } }
html[data-theme="dark"] .stamp{ background:radial-gradient(circle at 7px 7px, #12100D 4.2px, transparent 4.7px) -7px -7px / 14px 14px, #F3E9DC; }
@media (prefers-reduced-motion: reduce){ .stamp { transition:none; } }
/* Kompas: pulsujący pierścień na iPhonie (trzeba stuknąć, żeby dać zgodę na czujnik) */
@keyframes compass-pulse{ 0%{ box-shadow:0 0 0 0 rgba(251,244,234,0.45); } 70%{ box-shadow:0 0 0 12px rgba(251,244,234,0); } 100%{ box-shadow:0 0 0 0 rgba(251,244,234,0); } }
#compassBtn.needs-tap .compass-dial{ animation:compass-pulse 2s ease-out infinite; }
#compassBtn.is-live .compass-dial{ border-color:rgba(251,244,234,0.55) !important; }
#compassBtn.is-live #compassNeedle{ transition:transform 0.25s linear !important; animation:none !important; }
@media (prefers-reduced-motion: reduce){ #compassBtn.needs-tap .compass-dial{ animation:none; } }
/* ===== Zapisy na misję: okno z formularzem (#missionModal) ===== */
.mm{ position:fixed; inset:0; z-index:45; display:none; align-items:center; justify-content:center; padding:24px; }
.mm.is-open{ display:flex; }
html.mm-lock{ overflow:hidden; }
.mm-overlay{ position:absolute; inset:0; background:rgba(22,19,15,0.55); }
.mm-dialog{ position:relative; background:#FFFFFF; color:#2A2019; border-radius:16px; width:100%; max-width:540px; max-height:min(92vh, 940px); overflow-y:auto; overscroll-behavior:contain;
padding:32px; box-sizing:border-box; box-shadow:0 20px 60px rgba(0,0,0,0.25); font-family:'Figtree', system-ui, sans-serif; }
.mm-close{ position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:999px; border:1px solid #E5DED1; background:#FFFFFF; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#2A2019; }
.mm-eyebrow{ font-size:12px; font-weight:800; letter-spacing:0.06em; text-transform:uppercase; color:#B4512A; margin:0 40px 6px 0; }
.mm-title{ font-size:22px; font-weight:700; line-height:1.25; margin:0 40px 8px 0; color:#2A2019; outline:none; }
.mm-meta{ font-size:14px; font-weight:600; line-height:1.5; color:#3D332B; margin:0 0 10px; }
.mm-desc{ font-size:14.5px; line-height:1.6; color:#5E5249; margin:0 0 10px; }
.mm-form{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; margin-top:18px; }
.mm-field{ display:flex; flex-direction:column; gap:6px; min-width:0; margin:0; padding:0; border:0; }
.mm-full{ grid-column:1 / -1; }
.mm-field > label, .mm-legend{ font-size:13px; font-weight:600; color:#3D332B; padding:0; }
.mm-legend{ margin-bottom:6px; }
.mm-input{ width:100%; box-sizing:border-box; padding:12px 14px; border-radius:10px; border:1.5px solid #CBBDA6; background:#FAF7EE; color:#1A1611; font:inherit; font-size:15px; }
select.mm-input{ cursor:pointer; }
.mm-input:focus{ border-color:#B4512A; outline:2px solid #C1592B; outline-offset:2px; }
.mm-input[aria-invalid="true"]{ border-color:#B3452C; }
.mm-hours{ display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:10px; }
.mm-dash{ padding-bottom:13px; color:#7A6D60; }
.mm-hint{ font-size:13px; line-height:1.5; color:#6B5D52; margin:6px 0 0; }
.mm-hint strong{ color:#1A1611; font-variant-numeric:tabular-nums; }
.mm-radio, .mm-check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.45; color:#3D332B; cursor:pointer; padding:4px 0; }
.mm-radio input, .mm-check input{ width:20px; height:20px; margin:0; flex:0 0 auto; accent-color:#C1592B; }
.mm-check{ font-size:12.5px; color:#6B5D52; }
.mm-check a, .mm-hint a{ color:#1A1611; text-decoration:underline; }
.mm-msg{ font-size:13px; line-height:1.5; color:#B3452C; }
.mm-msg:empty{ display:none; }
.mm-msg a{ color:inherit; text-decoration:underline; }
.mm-submit{ grid-column:1 / -1; justify-self:start; }
.mm-done-icon{ display:block; margin-bottom:14px; }
.mm-done-close{ margin-top:10px; }
.mm-offscreen{ position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:560px){
.mm{ padding:12px; align-items:flex-end; }
.mm-dialog{ padding:24px 18px; border-radius:16px; max-height:94vh; }
.mm-form{ grid-template-columns:1fr; }
}
html[data-theme="dark"] .mm-dialog{ background:#12100D; color:#EDE3D6; }
html[data-theme="dark"] .mm-close{ background:#12100D; border-color:#2C2620; color:#F3E9DC; }
html[data-theme="dark"] .mm-title, html[data-theme="dark"] .mm-hint strong, html[data-theme="dark"] .mm-check a, html[data-theme="dark"] .mm-hint a{ color:#F3E9DC; }
html[data-theme="dark"] .mm-eyebrow{ color:#F08A6A; }
html[data-theme="dark"] .mm-meta, html[data-theme="dark"] .mm-field > label, html[data-theme="dark"] .mm-legend, html[data-theme="dark"] .mm-radio{ color:#E6DACB; }
html[data-theme="dark"] .mm-desc, html[data-theme="dark"] .mm-hint, html[data-theme="dark"] .mm-check{ color:#C9BBA8; }
html[data-theme="dark"] .mm-input{ background:rgba(255,246,233,0.05); border-color:rgba(255,246,233,0.28); color:#F3E9DC; }
html[data-theme="dark"] .mm-input option{ background:#12100D; color:#F3E9DC; }
html[data-theme="dark"] .mm-input:focus{ border-color:#E07A4F; outline-color:#E07A4F; }
html[data-theme="dark"] .mm-msg{ color:#F08A6A; }
html[data-theme="dark"] .mm-dialog .btn-outline{ color:#F3E9DC; border-color:rgba(243,233,220,0.35); }
/* ===== Moje zapisy (/moje-zapisy/) ===== */
#moje-zapisy{ padding-top:clamp(8px, 1.5vw, 24px); }
.org-page #moje-zapisy{ background:transparent; }
.mz{ display:flex; flex-direction:column; gap:16px; }
.mz > *{ width:100%; max-width:760px; box-sizing:border-box; }
.org-page .sub-hero:has(+ #moje-zapisy){ padding-bottom:clamp(28px, 4vw, 56px); }
#moje-zapisy{ padding-bottom:clamp(56px, 7vw, 96px); min-height:55vh; box-sizing:border-box; }
.mz-card{ background:#FFFFFF; color:#2A2019; border-radius:16px; padding:clamp(20px, 3vw, 32px); box-shadow:0 10px 30px -18px rgba(23,19,16,0.35); margin:0; }
.mz-title{ font-family:'Figtree',sans-serif; font-weight:800; font-size:clamp(20px, 2vw, 24px); margin:22px 0 0; color:#1A1611; }
.mz-card > .mz-title:first-child{ margin-top:0; }
.mz-text{ font-size:15px; line-height:1.6; color:#4a3f35; margin:10px 0 16px; }
.mz-muted{ font-size:14px; color:#6b5d52; margin:12px 0 0; }
.mz-muted a, .mz-text a{ color:inherit; text-decoration:underline; }
.mz-login{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:10px; }
.mz-login .mm-field{ flex:1 1 260px; }
.mz-small{ padding:10px 18px; font-size:14px; }
.mz-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mz-who{ margin:0; font-size:14px; color:#4a3f35; overflow-wrap:anywhere; }
.mz-list{ display:flex; flex-direction:column; gap:14px; }
.mz-signup-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mz-signup-title{ font-family:'Figtree',sans-serif; font-size:18px; font-weight:700; margin:0; color:#1A1611; }
.mz-badge{ flex:0 0 auto; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; background:#E7F1E4; color:#2F5A2A; }
.mz-badge.is-off{ background:#EFE7DD; color:#6b5d52; }
.mz-signup.is-cancelled{ opacity:0.75; }
.mz-line{ margin:6px 0 0; font-size:15px; line-height:1.5; color:#3D332B; }
.mz-line:first-letter{ text-transform:uppercase; }
.mz-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
.mz-warn{ border-color:#B3452C; color:#B3452C; }
.mz-editor{ margin-top:14px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.mz-editor .mm-hours{ width:100%; max-width:360px; }
.mz-signup .mm-msg{ margin-top:10px; }
.mm-msg.is-ok{ color:#2F5A2A; }
#mzProfile{ margin-top:0; }
#mzProfile .mz-small{ justify-self:start; }
.mz-danger summary{ cursor:pointer; font-weight:600; color:#B3452C; }
.mz-danger .mz-text{ margin-bottom:12px; }
html[data-theme="dark"] .mz-card{ background:#12100D; color:#EDE3D6; box-shadow:none; border:1px solid #2C2620; }
html[data-theme="dark"] .mz-title, html[data-theme="dark"] .mz-signup-title{ color:#F3E9DC; }
html[data-theme="dark"] .mz-text, html[data-theme="dark"] .mz-who, html[data-theme="dark"] .mz-line{ color:#E6DACB; }
html[data-theme="dark"] .mz-muted{ color:#C9BBA8; }
html[data-theme="dark"] .mz .btn-outline{ color:#F3E9DC; border-color:rgba(243,233,220,0.35); }
html[data-theme="dark"] .mz .mz-warn, html[data-theme="dark"] .mz-danger summary{ color:#F08A6A; border-color:#F08A6A; }
html[data-theme="dark"] .mz-badge{ background:#1E2A1C; color:#A9D19E; }
html[data-theme="dark"] .mz-badge.is-off{ background:#2A231D; color:#C9BBA8; }
html[data-theme="dark"] .mm-msg.is-ok{ color:#A9D19E; }
#mzApp:not([hidden]){ display:flex; flex-direction:column; gap:16px; }
#mzApp > *{ margin-top:0; margin-bottom:0; }
#mzApp > .mz-title{ margin-top:14px; }
#mzApp > .mz-sub{ margin:-8px 0 0; font-size:14px; color:#5A4E44; }
.mz-foot{ margin-top:8px; }
.mz-link{ background:none; border:0; padding:4px 0; font:inherit; font-size:13px; color:#6b5d52; text-decoration:underline; cursor:pointer; }
.mz-link:hover{ color:#B3452C; }
html[data-theme="dark"] #mzApp > .mz-sub, html[data-theme="dark"] .mz-link{ color:#C9BBA8; }
/* Znaczek „Wkrótce” w kolorze jasnego nieba z hero (Komplet! zostaje pomarańczowy) */
.mission-card.is-soon .mission-stamp{ background:#9ECFFE; color:#1E3550; }
/* Blok „O nas” (zamiast zapisu na maile) */
#o-nas .zapis-text{ align-items:stretch; text-align:left; }
#o-nas .zapis-text-inner{ align-items:flex-start; text-align:left; max-width:600px; }
#o-nas .zapis-text-inner > p{ font-size:16px; line-height:1.65; }
#o-nas .zapis-text-inner > p.o-nas-eyebrow{ font-family:var(--font-label); font-size:12px; letter-spacing:0.12em; text-transform:uppercase; color:#B4512A !important; margin:0 0 -6px; }
#o-nas .o-nas-cta{ margin-top:6px; }
html[data-theme="dark"] #o-nas .zapis-text-inner > p.o-nas-eyebrow{ color:#F08A6A !important; }
.mz-news{ flex:1 1 100%; font-size:13px; color:#6b5d52; margin-top:2px; }
.mz-news a{ color:inherit; text-decoration:underline; }
.mz-notify .mm-check{ font-size:14px; }
.mz-notify .mm-msg{ margin-top:8px; }
html[data-theme="dark"] .mz-news, html[data-theme="dark"] .mz-notify .mm-check{ color:#C9BBA8; }
html[data-theme="dark"] .mz-notify strong{ color:#F3E9DC; }
/* Znaczki na kartach misji o 20% większe (tekst i tło razem) */
.mission-stamp{ padding:5px 22px 7px; font-size:clamp(36px, 3.84vw, 50px); }
/* Wkrótce/Komplet: wielkość liczona od szerokości zdjęcia (ok. 70% szerokości, jak na Benenovej) */
.mission-card-img{ container-type:inline-size; }
@supports (font-size:1cqw){ .mission-stamp{ font-size:13.5cqw; padding:0.14em 0.42em 0.18em; } }
/* Szczegóły na kartach misji (miejsce, termin, godziny) o 20% mniejsze */
.mission-card .mission-meta{ font-size:12.8px !important; gap:7px; }
.mission-meta svg{ width:12px; height:12px; }
/* ===== Moje zapisy: logowanie hasłem, zakładanie konta, zmiana hasła ===== */
.mz-tabs{ display:flex; gap:4px; padding:4px; margin:0 0 22px; background:#F3ECDF; border-radius:999px; width:max-content; max-width:100%; }
.mz-tab{ border:0; background:transparent; font:inherit; font-family:'Figtree',sans-serif; font-weight:700; font-size:15px; color:#6b5d52; padding:10px 20px; border-radius:999px; cursor:pointer; }
.mz-tab[aria-selected="true"]{ background:#FFFFFF; color:#1A1611; box-shadow:0 2px 8px -3px rgba(23,19,16,0.3); }
.mz-tab:focus-visible{ outline:2px solid #C1592B; outline-offset:2px; }
.mz-auth{ display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; align-items:start; margin-bottom:10px; }
.mz-auth .btn{ justify-self:start; grid-column:1 / -1; }
.mz-auth .mz-news{ grid-column:1 / -1; }
.mz-pass{ position:relative; }
.mz-pass .mm-input{ padding-right:76px; cursor:text; }
.mz-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; font:inherit; font-size:13px; font-weight:600; color:#6b5d52; padding:6px 10px; border-radius:8px; cursor:pointer; }
.mz-eye:hover{ color:#B3452C; }
.mz-eye:focus-visible{ outline:2px solid #C1592B; outline-offset:1px; }
.mz-hint{ font-size:12.5px; color:#6b5d52; }
.mz-nosign{ border-top:1px solid #EFE7DD; padding-top:14px; margin-top:18px; }
#mzApp > #mzAppMsg:not(:empty){ margin:-4px 0 0; font-size:14px; }
/* ===== Moje zapisy: panel konta (nagłówek, zakładki, wiersze z „Edytuj”) ===== */
.mz-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.mz-person{ display:flex; align-items:center; gap:14px; min-width:0; }
.mz-av{ flex:0 0 auto; width:48px; height:48px; border-radius:50%; background:#B4512A; color:#FFFFFF; display:flex; align-items:center; justify-content:center; font-family:'Figtree',sans-serif; font-weight:700; font-size:18px; }
.mz-person-txt{ min-width:0; }
.mz-name{ margin:0; font-family:'Figtree',sans-serif; font-weight:700; font-size:18px; color:#1A1611; overflow-wrap:anywhere; }
.mz-mail{ margin:2px 0 0; font-size:14px; color:#5A4E44; overflow-wrap:anywhere; }
#mzAppMsg:empty{ display:none; }
#mzAppMsg{ font-size:14px; margin:0; }
.mz-apptabs{ display:flex; gap:28px; border-bottom:1px solid rgba(26,22,17,0.18); margin-top:6px; }
.mz-apptab{ border:0; background:none; font:inherit; font-family:'Figtree',sans-serif; font-weight:700; font-size:15px; color:#5A4E44; padding:10px 0 12px; margin-bottom:-1px; border-bottom:2.5px solid transparent; cursor:pointer; }
.mz-apptab[aria-selected="true"]{ color:#1A1611; border-bottom-color:#B4512A; }
.mz-apptab:hover{ color:#1A1611; }
.mz-apptab:focus-visible{ outline:2px solid #C1592B; outline-offset:2px; border-radius:4px; }
#mzViewSignups, #mzViewAccount{ display:flex; flex-direction:column; gap:16px; }
#mzViewSignups[hidden], #mzViewAccount[hidden]{ display:none; }
#mzNotify{ display:flex; flex-direction:column; gap:16px; }
#mzNotify[hidden]{ display:none; }
.mz-sec{ margin:10px 0 -6px 2px; font-family:'Figtree',sans-serif; font-weight:700; font-size:16px; color:#1A1611; }
.mz-sec:first-child{ margin-top:0; }
.mz-note{ margin:-8px 0 0 2px; font-size:13px; color:#5A4E44; }
.mz-rows{ padding:0; overflow:hidden; }
.mz-row{ display:grid; grid-template-columns:190px minmax(0,1fr) auto; align-items:center; gap:4px 16px; padding:18px 24px; border-top:1px solid #EFE7DD; }
.mz-row:first-child{ border-top:0; }
.mz-row.is-editing{ background:#FCFAF5; }
.mz-row-lab{ font-weight:600; font-size:15px; color:#1A1611; }
.mz-row-val{ font-size:15px; color:#3D332B; overflow-wrap:anywhere; }
.mz-row-val.is-empty{ color:#8A7D6E; }
.mz-row-desc{ font-size:14px; color:#5A4E44; }
.mz-row-act{ justify-self:end; border:0; background:none; font:inherit; font-weight:600; font-size:14px; color:#B4512A; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:4px 0; }
.mz-row-act:hover{ color:#8E3A1C; }
.mz-row-act:focus-visible{ outline:2px solid #C1592B; outline-offset:2px; border-radius:4px; }
.mz-row-edit{ grid-column:1 / -1; display:flex; flex-direction:column; gap:14px; margin-top:12px; }
.mz-row-edit[hidden]{ display:none; }
.mz-row.is-editing .mz-row-val{ display:none; }
.mz-row-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; border:0; }
.mz-row-fields.mz-one{ grid-template-columns:1fr; max-width:420px; }
.mz-row-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.mz-row-msg{ grid-column:1 / -1; }
.mz-row-msg:empty{ display:none; }
.mz-switch{ justify-self:end; appearance:none; -webkit-appearance:none; width:44px; height:26px; margin:0; border-radius:999px; background:#CBBDA6; position:relative; cursor:pointer; transition:background .2s; flex:0 0 auto; }
.mz-switch::after{ content:""; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:#FFFFFF; box-shadow:0 1px 3px rgba(0,0,0,0.25); transition:transform .2s; }
.mz-switch:checked{ background:#B4512A; }
.mz-switch:checked::after{ transform:translateX(18px); }
.mz-switch:focus-visible{ outline:2px solid #C1592B; outline-offset:3px; }
.mz-switch:disabled{ opacity:0.6; cursor:default; }
.mz-foot{ margin-top:6px; }
.mz-delbox{ border:1px solid #EBC7BA; }
.mz-del-title{ margin:0; font-family:'Figtree',sans-serif; font-size:17px; font-weight:700; color:#B3452C; }
.mz-delbox .mz-text{ margin:8px 0 14px; }
.mz-delbtn{ background:#B3452C; color:#FFFFFF; border-color:#B3452C; }
.mz-delbtn:hover{ background:#963721; border-color:#963721; color:#FFFFFF; }
@media (max-width:640px){
.mz-row{ grid-template-columns:minmax(0,1fr) auto; padding:16px 18px; }
.mz-row > .mz-row-val{ grid-column:1; grid-row:2; }
.mz-row > .mz-row-act, .mz-row > .mz-switch{ grid-column:2; grid-row:1 / span 2; }
.mz-row-fields{ grid-template-columns:1fr; }
.mz-apptabs{ gap:22px; }
}
html[data-theme="dark"] .mz-name, html[data-theme="dark"] .mz-sec, html[data-theme="dark"] .mz-row-lab, html[data-theme="dark"] .mz-apptab[aria-selected="true"]{ color:#F3E9DC; }
html[data-theme="dark"] .mz-mail, html[data-theme="dark"] .mz-note, html[data-theme="dark"] .mz-apptab, html[data-theme="dark"] .mz-row-desc, html[data-theme="dark"] .mz-row-val.is-empty{ color:#C9BBA8; }
html[data-theme="dark"] .mz-row-val{ color:#E6DACB; }
html[data-theme="dark"] .mz-apptabs{ border-bottom-color:rgba(243,233,220,0.18); }
html[data-theme="dark"] .mz-row{ border-top-color:#2C2620; }
html[data-theme="dark"] .mz-row.is-editing{ background:#171410; }
html[data-theme="dark"] .mz-row-act{ color:#F08A6A; }
html[data-theme="dark"] .mz-switch{ background:#4A4038; }
html[data-theme="dark"] .mz-switch:checked{ background:#C1592B; }
html[data-theme="dark"] .mz-delbox{ border-color:#5A2C20; }
html[data-theme="dark"] .mz-del-title{ color:#F08A6A; }
@media (max-width:640px){ .mz-auth{ grid-template-columns:1fr; } .mz-tabs{ width:100%; } .mz-tab{ flex:1 1 0; padding:10px 8px; } }
html[data-theme="dark"] .mz-tabs{ background:#1E1A16; }
html[data-theme="dark"] .mz-tab{ color:#C9BBA8; }
html[data-theme="dark"] .mz-tab[aria-selected="true"]{ background:#2C2620; color:#F3E9DC; box-shadow:none; }
html[data-theme="dark"] .mz-eye, html[data-theme="dark"] .mz-hint{ color:#C9BBA8; }
html[data-theme="dark"] .mz-nosign{ border-top-color:#2C2620; }
/* Zdjęcie w sekcji FAQ (pod „Nie ma tu Twojego pytania?”) – tylko w układzie dwukolumnowym */
.faq-photo{ margin:clamp(28px, 4vw, 48px) 0 0; max-width:470px; border-radius:0; overflow:hidden; box-shadow:none; aspect-ratio:4 / 3; }
.faq-photo img{ display:block; width:100%; height:100%; object-fit:cover; object-position:50% 52%; }
@media (max-width:860px){ .faq-photo{ display:none; } }
/* FAQ: płaskie, beżowe boxy ze skośnymi bokami (skos 6 px, taki sam dla wszystkich) */
.faq-list{ gap:10px; max-width:540px; }
.faq-item{ background:#F0DBC3; border:0; border-radius:0; box-shadow:none;
clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
transition:opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1), background-color 0.2s ease; }
.faq-item:hover, .faq-item:has(.faq-question[aria-expanded="true"]){ background:#E6CAAC; box-shadow:none; }
.faq-question{ border-radius:0; }
.faq-question:focus-visible{ outline-offset:-4px; }
.faq-bubble, .faq-icon{ color:rgba(26,22,17,0.55); }
.faq-question[aria-expanded="true"] .faq-bubble{ color:#1A1611; }
.faq-answer{ color:#3D332B; }
@media (max-width:860px){ .faq-list{ max-width:none; } }
/* Tytuł „Pytania? Odpowiedzi.” w jednej linijce na szerokich ekranach */
@media (min-width:1200px){ .faq-title{ white-space:nowrap; } }
/* O nas: karta „Pełnia Wolontariat” niebieska z białym tekstem (także w trybie ciemnym) */
#o-nas .zapis-badge{ background:#0294C4 !important; border:0 !important; }
#o-nas .zapis-badge-title{ color:#FFFFFF !important; }
#o-nas .zapis-badge-loc{ color:rgba(255,255,255,0.9) !important; }
/* ===== Moje zapisy: logowanie (karta + beżowy panel „Po co konto?”) ===== */
.mz-authwrap{ display:grid; grid-template-columns:minmax(0,440px) minmax(0,1fr); max-width:900px !important; border-radius:16px; overflow:hidden; box-shadow:0 10px 30px -18px rgba(23,19,16,0.35); background:#FFFFFF; }
.mz-authwrap[hidden]{ display:none; }
.mz-authwrap > .mz-authcard{ border-radius:0; box-shadow:none; padding:36px; }
.mz-authh{ font-family:'Figtree',sans-serif; font-weight:800; font-size:26px; letter-spacing:-0.02em; margin:0; color:#1A1611; }
.mz-authh:focus{ outline:none; }
.mz-authsub{ margin:6px 0 22px; font-size:15px; line-height:1.5; color:#6b5d52; }
.mz-authcard .mz-auth{ grid-template-columns:1fr; gap:16px; }
.mz-wide{ width:100%; justify-self:stretch !important; padding-top:14px; padding-bottom:14px; font-size:16px; }
.mz-labrow{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.mz-forgot, .mz-switchbtn{ border:0; background:none; padding:0; font:inherit; font-size:13px; font-weight:600; color:#B4512A; cursor:pointer; }
.mz-switchbtn{ font-size:14px; font-weight:700; }
.mz-forgot:hover, .mz-switchbtn:hover{ text-decoration:underline; }
.mz-forgot:focus-visible, .mz-switchbtn:focus-visible{ outline:2px solid #C1592B; outline-offset:2px; border-radius:4px; }
.mz-swap{ text-align:center; margin:18px 0 0; font-size:14px; color:#5A4E44; }
.mz-nosign{ text-align:center; margin:12px 0 0; font-size:13px; color:#6b5d52; }
.mz-nosign a{ color:inherit; text-decoration:underline; }
.mz-why{ background:#F0DBC3; color:#1A1611; padding:40px 36px; display:flex; flex-direction:column; justify-content:center; gap:18px; }
.mz-why-h{ margin:0; font-family:'Figtree',sans-serif; font-weight:800; font-size:24px; letter-spacing:-0.02em; color:#1A1611; }
.mz-why-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; font-size:15px; line-height:1.5; color:#2A2019; }
.mz-why-list li{ display:flex; gap:10px; }
.mz-why-list li::before{ content:"✓"; font-weight:800; color:#B4512A; flex:0 0 auto; }
.mz-why-note{ margin:4px 0 0; font-size:13px; line-height:1.5; color:#5A4E44; }
@media (max-width:760px){
.mz-authwrap{ grid-template-columns:1fr; }
.mz-authwrap > .mz-authcard{ padding:28px 22px; }
.mz-why{ padding:28px 22px; }
}
html[data-theme="dark"] .mz-authwrap{ background:#12100D; box-shadow:none; border:1px solid #2C2620; }
html[data-theme="dark"] .mz-authh{ color:#F3E9DC; }
html[data-theme="dark"] .mz-authsub, html[data-theme="dark"] .mz-swap, html[data-theme="dark"] .mz-nosign{ color:#C9BBA8; }
html[data-theme="dark"] .mz-forgot, html[data-theme="dark"] .mz-switchbtn{ color:#F08A6A; }
html[data-theme="dark"] .mz-why{ background:#2A2219; color:#F3E9DC; }
html[data-theme="dark"] .mz-why-h{ color:#F3E9DC; }
html[data-theme="dark"] .mz-why-list{ color:#E6DACB; }
html[data-theme="dark"] .mz-why-list li::before{ color:#F08A6A; }
html[data-theme="dark"] .mz-why-note{ color:#C9BBA8; }
/* Flaga języka w kółku obok „PL / EN” (zmienia się razem z językiem strony) */
.lang-flag{ display:inline-block; flex:0 0 auto; width:16px; height:16px; border-radius:50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='5' fill='%23fff'/%3E%3Crect y='5' width='16' height='5' fill='%23DC143C'/%3E%3C/svg%3E") center/cover no-repeat; box-shadow:0 0 0 1px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.25); vertical-align:-3px; margin-right:6px; }
html[lang="en"] .lang-flag:not(.lang-flag-pl), .lang-flag.lang-flag-en{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3CclipPath id='t'%3E%3Cpath d='M30,15h30v15zv15h-30zh-30v-15zv-15h30z'/%3E%3C/clipPath%3E%3Cpath d='M0,0v30h60v-30z' fill='%23012169'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0,0L60,30M60,0L0,30' clip-path='url%28%23t%29' stroke='%23C8102E' stroke-width='4'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30,0v30M0,15h60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E"); }
.lang-flag.lang-flag-pl{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Crect width='16' height='5' fill='%23fff'/%3E%3Crect y='5' width='16' height='5' fill='%23DC143C'/%3E%3C/svg%3E"); }
.lang-btn{ position:relative; }
.lang-btn .lang-flag{ position:absolute; right:calc(100% - 4px); top:5px; margin:0; }
.lang-menu button{ position:relative; }
.lang-menu button .lang-flag{ position:absolute; right:calc(100% - 4px); top:5px; width:15px; height:15px; margin:0; }
.sticky-lang{ display:inline-flex; align-items:center; }
.sticky-lang .lang-flag{ width:14px; height:14px; margin-right:5px; vertical-align:-2px; }
/* === v33: „O nas” w docku, przełącznik motywu i social media w stopce === */
.lang-btn .lang-flag{ right:calc(100% - 2.4px); }
.lang-menu button .lang-flag{ right:calc(100% - 2.5px); }
.sticky-lang .lang-flag{ margin-right:6.4px; }
#aboutLink{ color:#FBF4EA; }
.footer-social{ display:inline-flex; align-items:center; gap:12px; }
.footer-social a{ display:inline-flex; color:#9c8f80; transition:color 0.2s ease; }
.footer-social a:hover, .footer-social a:focus-visible{ color:#EF7E54; }
.footer-theme{ display:inline-flex; align-items:center; gap:6px; padding:4px 11px; border:1px solid rgba(255,255,255,0.18); border-radius:999px; color:#C9BBA8; cursor:pointer; font-size:12.5px; line-height:1.4; -webkit-user-select:none; user-select:none; transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.footer-theme:hover, .footer-theme:focus-visible{ color:#FBF4EA; border-color:rgba(255,255,255,0.4); }
.footer-theme[aria-pressed="true"]{ background:rgba(255,255,255,0.08); color:#FBF4EA; }
.footer-links{ align-items:center; }
/* Tytuły misji odrobinę grubsze */
.mission-card h3{ font-weight:700; }
/* Obramowanie przycisków „Zapisuję się” / „Dołączam” o 10% grubsze (1,5 → 1,65 px) */
.mission-btn{ border-width:1.65px; }
/* Misje w rzędach według miesięcy (jak dni w Benenovie) */
.mission-months{ display:flex; flex-direction:column; gap:clamp(32px, 4vw, 48px); }
.month-label{ display:flex; align-items:baseline; gap:8px; margin:0 0 16px; font-family:'Figtree',sans-serif; font-weight:800; font-size:22px; letter-spacing:-0.01em; color:#2A2019; }
.month-label::after{ content:""; flex:1 1 auto; align-self:center; height:1px; margin-left:8px; background:#E5DED1; }
.month-year{ font-family:'Space Mono',monospace; font-weight:400; font-size:13px; letter-spacing:0.08em; color:#8a7d6e; }
.mission-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:24px; }
html[data-theme="dark"] .month-label{ color:#F3E9DC; }
html[data-theme="dark"] .month-label::after{ background:#2C2620; }
html[data-theme="dark"] .month-year{ color:#9c8f80; }
#missionModal [hidden]{ display:none !important; }
/* Polityka prywatności: bez zaznaczania i kopiowania tekstu */
#privacyModal [role="dialog"]{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
/* === v34: niebieskie „Wkrótce”, przełącznik motywu jako suwak === */
.mission-card.is-soon .mission-stamp{ background:#5CC2FF; color:#0E2A44; }
.theme-switch{ position:relative; display:inline-block; flex:0 0 auto; width:62px; height:30px; border-radius:999px; cursor:pointer;
background:#1A1512; border:2px solid transparent;
background-image:linear-gradient(#1A1512,#1A1512), linear-gradient(90deg,#F2A65A,#D9703F 55%,#B4512A);
background-origin:border-box; background-clip:padding-box, border-box;
-webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; transition:filter 0.2s ease; }
.theme-switch:hover{ filter:brightness(1.12); }
.theme-switch:focus-visible{ outline:2px solid #EFE6D8; outline-offset:3px; }
.ts-knob{ position:absolute; top:50%; left:-2px; width:32px; height:32px; margin-top:-16px; border-radius:50%;
display:flex; align-items:center; justify-content:center; color:#2A140A;
background:radial-gradient(circle at 35% 30%, #FFC277 0%, #EF7E54 55%, #C1592B 100%);
box-shadow:0 2px 8px rgba(0,0,0,0.45); transition:transform 0.35s cubic-bezier(.4,1.3,.5,1), background 0.35s ease, color 0.35s ease; }
.ts-knob svg{ position:absolute; transition:opacity 0.25s ease, transform 0.35s ease; }
.ts-moon{ opacity:0; transform:rotate(-40deg) scale(0.6); }
.theme-switch[aria-pressed="true"]{ background-image:linear-gradient(#1A1512,#1A1512), linear-gradient(90deg,#3E6FA0,#527394 45%,#33B2FF); }
.theme-switch[aria-pressed="true"] .ts-knob{ transform:translateX(30px); color:#EAF6FF; background:radial-gradient(circle at 35% 30%, #7FD0FF 0%, #3C8FD6 50%, #2B5C8F 100%); }
.theme-switch[aria-pressed="true"] .ts-sun{ opacity:0; transform:rotate(40deg) scale(0.6); }
.theme-switch[aria-pressed="true"] .ts-moon{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .ts-knob, .ts-knob svg{ transition:none; } }
/* === v34b: mniejszy suwak motywu, biały napis „Wkrótce”, ikonki FB/IG przy prawej krawędzi i większe === */
.theme-switch{ width:46px; height:24px; }
.ts-knob{ width:26px; height:26px; margin-top:-13px; }
.ts-knob svg{ width:13px; height:13px; }
.theme-switch[aria-pressed="true"] .ts-knob{ transform:translateX(22px); }
/* === v36: suwak motywu o 20% mniejszy, ikonki FB/IG w kółkach === */
.theme-switch{ width:37px; height:19px; }
.ts-knob{ width:21px; height:21px; margin-top:-10.5px; }
.ts-knob svg{ width:11px; height:11px; }
.theme-switch[aria-pressed="true"] .ts-knob{ transform:translateX(18px); }
.footer-social{ gap:12px; margin-left:8px; }
.footer-social a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(239,230,216,0.55); color:#EFE6D8; align-items:center; justify-content:center; transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease; }
.footer-social a:hover, .footer-social a:focus-visible{ color:#EF7E54; border-color:#EF7E54; }
.footer-social svg{ width:20px; height:20px; }
/* Na szerokich ekranach ikonki stoją przy prawej krawędzi czarnego paska (reszta stopki bez zmian) */
@media (min-width:1500px){
.site-footer{ position:relative; }
.footer-social{ position:absolute; right:40px; top:14px; margin:0; }
}
/* === v37: kółka FB i IG w kolorach marek, białe ikonki === */
.footer-social a{ border:0; color:#FFFFFF; transition:filter 0.2s ease, transform 0.2s ease; }
.footer-social a[href*="facebook"]{ background:#1877F2; }
.footer-social a[href*="instagram"]{ background:radial-gradient(circle at 30% 107%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
.footer-social a:hover, .footer-social a:focus-visible{ color:#FFFFFF; filter:brightness(1.12); transform:translateY(-1px); }
/* === v39: flaga jeszcze o 10% wielkości ikony w lewo === */
.lang-btn .lang-flag{ right:calc(100% - 0.8px); }
.lang-menu button .lang-flag{ right:calc(100% - 1px); }
.sticky-lang .lang-flag{ margin-right:8px; }
/* === v41: „Napiszcie do nas” w tym samym boxie co „Dla kogo” i „Przykładowe akcje” === */
#dla-organizacji .org-info .org-contact{ grid-column:1 / -1; margin:0; padding-top:16px; border-top:1px solid rgba(26,22,17,0.1); font-size:15px; color:#5E5249; display:flex; flex-wrap:wrap; align-items:center; gap:6px 4px; }
#dla-organizacji .org-info .org-contact a{ color:#1A1611; font-weight:600; text-decoration:none; }
#dla-organizacji .org-info .org-contact a:hover{ color:#B4512A; }
html body #dla-organizacji .org-info .org-contact .copy-mail{ color:#1A1611 !important; border-color:rgba(26,22,17,0.3) !important; }
html[data-theme="dark"] #dla-organizacji .org-info .org-contact{ color:#A3A3A3; border-top-color:rgba(255,255,255,0.1); }
html[data-theme="dark"] #dla-organizacji .org-info .org-contact a, html[data-theme="dark"] body #dla-organizacji .org-info .org-contact .copy-mail{ color:#EDEDED !important; border-color:rgba(255,255,255,0.3) !important; }
#dla-organizacji .org-info{ grid-template-columns:1fr 1fr; }
@media (max-width:640px){ #dla-organizacji .org-info{ grid-template-columns:1fr; } #dla-organizacji .org-info .org-contact .copy-mail{ margin-left:0; } }