:root { color-scheme:dark; --bg:#09111d; --surface:#0d1828; --text:#edf0f4; --muted:#aeb8c7; --line:#2e3b4e; --accent:#c89b60; --accent-hover:#d5ad77; --max:1120px; --page-gutter:clamp(1.25rem,3vw,2rem); --content-gap:clamp(2rem,6vw,6rem); --section-space:clamp(3.5rem,7vw,5.75rem); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-color:var(--line) var(--bg); }
body { margin:0; background:var(--bg); color:var(--text); font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.65; }
::selection { background:var(--accent); color:var(--bg); }
a { color:inherit; text-underline-offset:.25em; }
img { max-width:100%; display:block; height:auto; }
:focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.skip-link { position:absolute; left:1rem; top:-5rem; z-index:20; padding:.75rem 1rem; background:var(--text); color:var(--bg); }
.skip-link:focus { top:1rem; }
.shell { width:min(calc(100% - 2 * var(--page-gutter)),var(--max)); margin-inline:auto; }
.narrow { max-width:820px; }
.hero { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr); gap:clamp(2rem,5vw,4rem); align-items:center; padding-block:var(--section-space); }
.hero-content { min-width:0; }
.hero-image { width:100%; max-width:470px; justify-self:end; }
h1,h2 { margin:0; line-height:1.1; letter-spacing:-.03em; text-wrap:balance; }
h1 { font-size:clamp(2.6rem,4.8vw,4.1rem); font-weight:740; }
h1 span { color:var(--accent); }
h2 { font-size:clamp(1.75rem,3vw,2.45rem); font-weight:680; max-width:26ch; }
.location { color:var(--muted); margin:.9rem 0 1.9rem; font-size:.95rem; }
.hero-lead { font-size:clamp(1.15rem,1.7vw,1.35rem); line-height:1.5; max-width:36ch; margin:0; }
.hero-kicker { margin:1.15rem 0 0; color:var(--muted); font-size:.98rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; margin-top:2rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:.7rem 1.15rem; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-weight:680; transition:background .18s ease; text-align:center; }
.button-primary { background:var(--accent); color:#171006; border-color:var(--accent); }
.button-primary:hover { background:var(--accent-hover); }
.button-ghost:hover { background:var(--surface); }
.hero-note,.small,.footer-meta { color:var(--muted); font-size:.9375rem; }
.hero-note { margin:.65rem 0 0; max-width:48ch; }
.section { padding-block:var(--section-space); }
.section-alt { background:#0b1626; }
.intro { font-size:1.15rem; margin:1.65rem 0 2.25rem; }
.narrow > p,.body-copy p,.join-copy p { max-width:70ch; color:#c5cfdb; }
#o-nas .intro + p { margin-bottom:.85rem; }
#o-nas p + p { margin-top:.85rem; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
.join-card { display:grid; grid-template-columns:minmax(0,1fr) 200px; gap:3rem; align-items:center; padding:clamp(1.5rem,4vw,3rem); border-radius:14px; background:#0c1726; }
.join-copy .button { margin-top:0; }
.qr-wrap { text-align:center; align-self:center; }
.qr-wrap img { width:200px; padding:.75rem; border-radius:12px; background:#fff; }
.qr-wrap p { margin:.75rem 0 0; font-size:.875rem; color:var(--muted); }
.faq { margin-top:0; }
.faq-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:var(--content-gap); }
.faq-layout h2 { font-size:clamp(2.25rem,4vw,3.4rem); max-width:12ch; }
details { border-top:1px solid var(--line); }
details:last-child { border-bottom:1px solid var(--line); }
summary { cursor:pointer; padding:1.35rem .5rem 1.35rem 0; font-weight:650; }
summary::marker { color:var(--accent); }
details p { margin:0; padding:0 0 1.5rem; color:#c5cfdb; max-width:70ch; }
.join-steps { padding-left:1.5rem; margin:1.6rem 0 2rem; color:#c5cfdb; }
.join-steps li { padding-left:.25rem; margin-block:.75rem; }
.join-steps strong { color:var(--text); }
.closing { margin-top:2.5rem; }
.closing a { display:inline-flex; align-items:center; min-height:44px; color:var(--accent); font-weight:700; }
footer { padding:2rem 0; border-top:1px solid var(--line); }
.footer-inner { display:flex; justify-content:space-between; gap:1.5rem; align-items:end; }
.footer-inner p { margin:0; }
@media (max-width:900px) {
.hero { grid-template-columns:1fr; gap:2rem; }
.hero-image { max-width:540px; justify-self:center; }
.hero-lead { max-width:40ch; }
.split { grid-template-columns:1fr; gap:1.5rem; }
}
@media (max-width:600px) {
.join-card { grid-template-columns:1fr; gap:0; }
.qr-wrap { display:none; }
.footer-inner { flex-direction:column; align-items:flex-start; }
.hero-actions { align-items:stretch; flex-direction:column; }
.hero-actions .button-ghost { border-color:transparent; }
}
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior:auto; }
*,*::before,*::after { transition:none !important; animation:none !important; }
}
/* The city scene shares the hero surface; the plate stays fully visible. */
.hero { position:relative; isolation:isolate; display:block; padding:0; overflow:hidden; }
.hero-inner { position:relative; z-index:1; min-height:700px; display:flex; align-items:center; padding-block:5rem; pointer-events:none; }
.hero-content { width:52%; pointer-events:auto; }
.hero-art { position:absolute; inset:0 0 0 auto; width:61%; }
.hero-image { width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; }
.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,var(--bg) 0%,transparent 32%),linear-gradient(0deg,var(--bg),transparent 23%),linear-gradient(180deg,var(--bg),transparent 15%); pointer-events:none; }
h1 { font-size:clamp(2.5rem,4.1vw,3.8rem); line-height:1.12; }
h1 span { color:#eab778; }
.location { margin:1.5rem 0 1rem; }
.hero-lead { max-width:35ch; font-size:1.15rem; }
.hero-kicker { max-width:36ch; }
.hero-actions { gap:1.5rem; }
.hero-note { max-width:40ch; font-size:.85rem; margin-top:1rem; }
.hero-more { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); }
.button { border-radius:8px; min-height:64px; padding:1rem 1.6rem; gap:1.5rem; font-size:1.15rem; font-weight:750; }
.button-arrow { flex:none; }
.button-primary { background:#eab778; border-color:#eab778; }
.button-primary:hover { background:#f6cb94; }
.about-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:var(--content-gap); }
.body-copy .intro { margin:0 0 1.25rem; color:var(--text); font-size:1.25rem; }
.body-copy p:last-child { margin-bottom:0; }
.privacy-section { background:var(--surface); }
.privacy-section .about-layout { grid-template-columns:1fr; gap:2rem; }
.privacy-section h2 { font-size:clamp(2.25rem,4.1vw,3.7rem); max-width:22ch; }
.join-section { background:#eab778; color:#241b12; }
.join-card { padding:0; background:none; border-radius:0; grid-template-columns:minmax(0,1fr) 160px; gap:3rem; align-items:start; }
.join-copy h2 { font-size:clamp(2.6rem,5.5vw,4.5rem); }
.join-copy p { color:#3f3020; font-size:1.25rem; }
.join-copy .button { margin-top:.5rem; background:#172337; color:#fff3e4; border-color:#172337; }
.join-copy .button:hover { background:#263b59; }
.join-copy .small { max-width:57ch; font-size:.875rem; margin-top:1.2rem; }
.join-section :focus-visible { outline-color:#172337; }
.qr-wrap img { width:160px; border-radius:8px; }
.qr-wrap p { color:#3f3020; }
@media (max-width:900px) {
.hero-inner { min-height:0; padding-block:3rem 0; }
.hero-content { width:100%; }
.hero-art { position:relative; width:min(100%,650px); height:auto; aspect-ratio:1.35; margin:-1rem auto 0; }
.hero { display:flex; flex-direction:column; }
.hero-inner { order:-1; }
.hero-image { max-width:none; object-position:center 55%; }
.hero-art::after { background:linear-gradient(90deg,var(--bg),transparent 12%,transparent 88%,var(--bg)),linear-gradient(0deg,var(--bg),transparent 18%,transparent 80%,var(--bg)); }
.hero-content h1 { font-size:clamp(2.4rem,6.2vw,3.8rem); }
.hero-lead,.hero-kicker { max-width:48ch; }
.about-layout { grid-template-columns:1fr; gap:1.75rem; }
}
@media (max-width:600px) {
.hero-inner { padding-top:2.25rem; }
.hero-actions { gap:.5rem; align-items:flex-start; }
.hero-actions .button { width:100%; }
.hero-more { display:none; }
.hero-note { max-width:none; margin:.5rem 0 0; }
.hero-art { margin-top:0; }
.join-card { grid-template-columns:1fr; gap:0; }
.join-copy .button { width:100%; }
}

/* Experiment: clearer navigation, conversation starters and joining sequence. */
.site-nav { display:flex; align-items:center; justify-content:space-between; gap:2rem; padding-block:1.25rem; border-bottom:1px solid var(--line); }
.wordmark { font-weight:800; letter-spacing:.03em; line-height:1.3; text-decoration:none; }
.wordmark span { display:block; margin-top:.25rem; color:var(--muted); font-size:.75rem; font-weight:400; letter-spacing:0; }
.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--muted); font-size:.875rem; text-decoration:none; }
.nav-links a:hover { color:var(--text); text-decoration:underline; }
.nav-links .nav-join { color:#171006; background:#eab778; padding:.65rem 1.1rem; border-radius:8px; font-weight:700; }
.nav-links .nav-join:hover { background:#f6cb94; color:#171006; text-decoration:none; }
.hero-inner { min-height:650px; }
.location { font-size:1.05rem; color:#edf0f4; }
.hero-actions { gap:1rem; }
.hero-note { color:#b9c4d2; }
#o-nas h2 { font-size:clamp(2.25rem,4.1vw,3.7rem); max-width:13ch; }
.conversation-prompts { list-style:none; padding:0; margin:0 0 2rem; }
.conversation-prompts li { padding:1.2rem 0; border-bottom:1px solid var(--line); font-size:clamp(1.4rem,2.6vw,2.15rem); line-height:1.3; color:var(--muted); }
.conversation-prompts li:first-child { padding-top:0; }
.conversation-prompts strong { font-weight:650; color:#eab778; }
.boundaries { display:grid; grid-template-columns:1fr 1fr; column-gap:4rem; list-style:none; padding:0; margin:2.5rem 0; color:#c5cfdb; }
.boundaries li { border-top:1px solid var(--line); padding:1.5rem 0 2rem; max-width:65ch; }

.boundaries strong { display:block; margin-bottom:.65rem; color:var(--text); font-size:1.3rem; }
.join-copy h2 { max-width:none; }
.join-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.75rem; list-style:decimal; padding-left:1.35rem; margin:3rem 0; color:#3f3020; }
.join-steps li { padding:.9rem .25rem 0; margin:0; border-top:1px solid #3f3020; }
.join-steps li::marker { font-weight:700; font-variant-numeric:tabular-nums; }
.join-steps strong { display:block; color:#241b12; font-size:1.05rem; }
.join-steps span { display:block; font-size:.9375rem; }
summary:hover { color:#eab778; }
@media (max-width:900px) {
  .hero-inner { min-height:0; }
  .hero-content h1 { max-width:18ch; }
}
@media (max-width:600px) {
  .site-nav { gap:1rem; padding-block:.85rem; }
  .nav-links { gap:1rem; }
  .nav-links a:not(.nav-join) { display:none; }
  .hero-actions .hero-more { display:inline-flex; }
  .hero-actions { align-items:center; }
  .hero-note { text-align:center; font-size:.8rem; }
  .hero-content h1 { font-size:clamp(2.1rem,8.8vw,3.2rem); }
  .location { margin-top:1.25rem; }
  .hero-lead { font-size:1.05rem; }
  .hero-kicker { margin-top:.75rem; }
  .hero-actions { margin-top:1.5rem; }
  .button { padding-inline:1.25rem; font-size:1.1rem; }
}

.faq-answer { padding-bottom:1.5rem; color:#c5cfdb; max-width:70ch; }
.faq-answer p { padding:0; }
.faq-answer p + p { margin-top:1rem; }
.faq-answer ul { margin:1rem 0; padding-left:1.5rem; }
.faq-answer li + li { margin-top:.5rem; }
.faq-answer strong { color:var(--text); }

#faq-prywatnosc { scroll-margin-top:2rem; }

#faq-prywatnosc summary.privacy-highlight { background:#eab778; color:#09111d; }
#faq-prywatnosc summary.privacy-highlight::marker { color:#09111d; }

/* Keep the origin story at the same scale as the supporting content. */
#misja { padding-block:clamp(2.5rem,5vw,4rem); }
#misja .intro { font-size:1.25rem; line-height:1.65; }
@media (max-width:900px) {
  .join-card { grid-template-columns:1fr; gap:2rem; }
  .qr-wrap { display:none; }
  .faq-layout { grid-template-columns:1fr; gap:2rem; }
  .faq-layout h2 { max-width:22ch; }
}
@media (max-width:600px) {
  .boundaries { grid-template-columns:1fr; margin:2rem 0 1rem; }
  .boundaries li { padding:1.25rem 0; }
  .join-steps { grid-template-columns:1fr; gap:1.25rem; margin:2rem 0; }
  .join-steps li { padding-top:1rem; }

}

/* Steps stay legible before the narrow phone breakpoint. */
@media (min-width:601px) and (max-width:760px) {
  .join-steps { grid-template-columns:1fr; gap:1.5rem; margin-block:2rem; }
}