@font-face{font-family:'Raleway';src:url('assets/raleway-regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Raleway';src:url('assets/raleway-semibold.ttf') format('truetype');font-weight:600;font-display:swap}

/* Baza jak logo: czerń jako pole, biel tylko jako linia i tekst. Jedyny kolor: przycisk startu viewera. */
:root{
  --bg:#050505;
  --bg-2:#0d0d0d;
  --fg:#f2f2f0;
  --fg-dim:#a6a6a2;
  --fg-mute:#6f6f6b;
  --line:rgba(255,255,255,.13);
  --line-2:rgba(255,255,255,.3);
  --spark:linear-gradient(120deg,#ffcc00,#ff6a00);
  --radius:2px;
  --font:'Raleway',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.01em}
p{margin:0}
:focus-visible{outline:1px solid var(--fg);outline-offset:3px}
.strong{color:var(--fg);font-weight:600}
.eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-dim)}
.eyebrow .dot{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:7px solid currentColor}
.hero-index{font-size:clamp(3rem,8vw,6rem);font-weight:600;line-height:1;color:transparent;-webkit-text-stroke:1px var(--line-2)}

/* topbar */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:2rem;padding:.8rem 1.75rem;background:rgba(5,5,5,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;font-size:.78rem;font-weight:600;letter-spacing:.28em}
.topbar .brand img{width:34px;height:34px}
.topbar nav{display:flex;gap:1.8rem}
.topbar nav a{display:flex;gap:.45em;align-items:baseline;font-size:.78rem;font-weight:600;letter-spacing:.06em;color:var(--fg-dim);transition:color .15s}
.topbar nav a em{font-style:normal;font-size:.72em;color:var(--fg-mute)}
.topbar nav a:hover{color:var(--fg)}
.contact-cta{flex:none;display:inline-flex;align-items:center;gap:.45em;padding:.5rem 1.05rem;border:1px solid var(--line-2);border-radius:var(--radius);font-size:.76rem;font-weight:600;letter-spacing:.06em;transition:border-color .15s,background .15s,color .15s}
.contact-cta:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
@media (max-width:760px){.topbar nav{display:none}.topbar .brand span{display:none}.topbar{gap:.8rem;padding-left:1rem;padding-right:1rem}.contact-cta{padding:.5rem .7rem}}


/* hero: tekst + duże logo, jak na okładce */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center;gap:3rem;padding:clamp(3.5rem,9vw,6.5rem) 1.75rem clamp(3rem,7vw,5rem);max-width:1320px;margin:0 auto}
.hero h1{margin-top:1.4rem;font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.04}
.hero .lead{margin-top:1.5rem;max-width:33rem;font-size:1.05rem;color:var(--fg-dim)}
.hero-logo{width:100%;max-width:420px;justify-self:center;opacity:.95}
.scroll-cue{margin-top:2.2rem;display:inline-flex;gap:.6em;align-items:center;font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding-bottom:.35em;border-bottom:1px solid var(--fg)}
.scroll-cue span{transition:transform .2s}
.scroll-cue:hover span{transform:translateY(3px)}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:2rem}.hero-logo{order:-1;max-width:190px;justify-self:start}}

/* viewer */
.viewer{position:relative;height:min(88vh,860px);min-height:480px;overflow:hidden;background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
#stage{position:absolute;inset:0;outline:none}
.viewer .veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 60%,rgba(0,0,0,.8) 100%)}
.scene-top{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;justify-content:space-between;gap:1rem;padding:1.1rem 1.5rem}
.tag{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:.45em .8em;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(0,0,0,.4);backdrop-filter:blur(6px);color:var(--fg-dim)}
.tag b{color:var(--fg);font-weight:600}
.tag.ghost{color:var(--fg)}
#welcome{position:absolute;left:1.5rem;bottom:5.5rem;z-index:3;max-width:26rem}
#welcome h2{margin-top:.6rem;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.05}
#welcome p{margin-top:.9rem;font-size:.78rem;letter-spacing:.04em;color:var(--fg-dim)}
.primary{margin-top:1.4rem;display:inline-flex;align-items:center;gap:.55em;padding:.85rem 1.5rem;background:var(--spark);color:#050505;font-weight:600;letter-spacing:.02em;border-radius:var(--radius);transition:transform .15s,box-shadow .15s}
.primary:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px rgba(255,140,0,.7)}
.primary:disabled{opacity:.6;pointer-events:none}
#loading{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center;background:rgba(0,0,0,.78);backdrop-filter:blur(4px)}
#loading .loading-logo{width:72px;height:72px;margin-bottom:.6rem;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){#loading .loading-logo{animation:none}}
#loading h2{font-size:1.25rem}
#loading p{color:var(--fg-dim);font-size:.82rem}
#loading progress{margin-top:.8rem;width:min(220px,60vw);height:1px;appearance:none;border:none;background:var(--line)}
#loading progress::-webkit-progress-bar{background:var(--line)}
#loading progress::-webkit-progress-value{background:var(--fg)}
#tools{position:absolute;right:1.5rem;top:4.4rem;z-index:3;display:flex;flex-direction:column;gap:.5rem}
#tools button{width:2.4rem;height:2.4rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(0,0,0,.45);backdrop-filter:blur(6px);transition:background .15s,color .15s}
#tools button:hover{background:var(--fg);color:var(--bg)}
#tools #detail{width:auto;padding:0 .9rem;gap:.4em;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
#detailCard{position:absolute;top:4.4rem;right:5.4rem;z-index:5;max-width:19rem;padding:1.4rem;background:rgba(5,5,5,.92);border:1px solid var(--line-2);border-radius:var(--radius);backdrop-filter:blur(8px)}
#detailCard #closeDetail{position:absolute;top:.6rem;right:.8rem;font-size:1.1rem;color:var(--fg-dim)}
#detailCard h3{margin-top:.6rem;font-size:1.05rem}
#detailCard p{margin-top:.6rem;font-size:.84rem;color:var(--fg-dim)}
#mapBox{position:absolute;left:1.5rem;bottom:1.4rem;z-index:3;width:11.5rem;padding:.75rem;background:rgba(0,0,0,.5);border:1px solid var(--line);border-radius:var(--radius);backdrop-filter:blur(6px)}
#mapBox>span{font-size:.6rem;font-weight:600;letter-spacing:.2em;color:var(--fg-dim)}
#mapBox svg{width:100%;height:auto;margin-top:.4rem}
#mapBox svg polyline{stroke:rgba(255,255,255,.45)}
#mapBox svg circle{fill:rgba(255,255,255,.55)}
#mapBox svg circle[r="6"]{fill:#fff}
#mapBox small{display:block;margin-top:.3rem;font-size:.6rem;color:var(--fg-mute)}
.scene-bottom{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1.4rem 1.5rem}
.scene-bottom h3{margin-top:.35rem;font-size:clamp(1.1rem,2.4vw,1.55rem)}
#hint{font-size:.72rem;letter-spacing:.04em;color:var(--fg-dim);text-align:right}
.viewer.ready #welcome{display:none}
.viewer.ready .scene-bottom{padding-left:14.5rem}

/* tourbar */
.tourbar{display:flex;align-items:center;gap:1rem;padding:.85rem 1.5rem;border-bottom:1px solid var(--line);overflow-x:auto}
.tourbar #tour{flex:none;display:inline-flex;align-items:center;gap:.55em;padding:.5rem 1rem;border:1px solid var(--line-2);border-radius:var(--radius);font-size:.74rem;font-weight:600;letter-spacing:.06em}
.tourbar #tour:disabled,.tourbar #next:disabled{opacity:.35}
#chapters{display:flex;gap:.4rem;flex:1;min-width:0}
#chapters button{flex:none;padding:.5rem .9rem;border:1px solid var(--line);border-radius:var(--radius);font-size:.72rem;font-weight:600;color:var(--fg-dim);white-space:nowrap;transition:border-color .15s,color .15s,background .15s}
#chapters button:hover{border-color:var(--line-2);color:var(--fg)}
#chapters button.active{background:var(--fg);border-color:var(--fg);color:var(--bg)}
#counter{flex:none;font-size:.72rem;font-weight:600;letter-spacing:.14em;color:var(--fg-mute)}
.tourbar #next{flex:none;width:2.2rem;height:2.2rem;border:1px solid var(--line-2);border-radius:var(--radius)}

/* statement */
.statement{padding:clamp(4rem,10vw,7rem) 1.75rem;text-align:center;border-bottom:1px solid var(--line)}
.statement p{max-width:36rem;margin:0 auto;font-size:clamp(1.2rem,3vw,1.8rem);line-height:1.35;color:var(--fg-dim)}

/* sekcje */
.section-head{display:flex;align-items:baseline;gap:1.2rem;margin-bottom:2.4rem}
.section-head h2{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.08}
.offer,.process,.studio{padding:clamp(4rem,8vw,6rem) 1.75rem;border-bottom:1px solid var(--line)}
.offer>*,.process>*{max-width:1320px;margin-left:auto;margin-right:auto}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line)}
.cards article{padding:2.2rem 1.8rem 2rem;border-right:1px solid var(--line);transition:background .2s}
.cards article:last-child{border-right:none}
.cards article:hover{background:var(--bg-2)}
.cards .num{font-size:.7rem;font-weight:600;letter-spacing:.2em;color:var(--fg-mute)}
.cards h3{margin-top:1.4rem;font-size:1.25rem}
.cards p{margin-top:.75rem;font-size:.9rem;color:var(--fg-dim)}
@media (max-width:900px){.cards{grid-template-columns:1fr}.cards article{border-right:none;border-bottom:1px solid var(--line)}.cards article:last-child{border-bottom:none}}

.process ol{list-style:none;padding:0;display:flex;gap:2rem}
.process li{flex:1;padding-top:1.4rem;border-top:1px solid var(--line-2)}
.process li strong{font-size:1.9rem;font-weight:600;color:transparent;-webkit-text-stroke:1px var(--fg)}
.process li h3{margin-top:.9rem;font-size:1.1rem}
.process li p{margin-top:.6rem;font-size:.88rem;color:var(--fg-dim)}
@media (max-width:820px){.process ol{flex-direction:column}}

.studio{position:relative;overflow:hidden}
.studio>div{position:relative;max-width:1320px;margin:0 auto;padding-left:min(38%,30rem)}
.studio-mark{position:absolute;left:max(1.75rem,calc(50% - 640px));top:50%;transform:translateY(-50%);width:min(30%,300px);opacity:.14;pointer-events:none}
.studio h2{margin-top:.6rem;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.08}
.studio p{margin-top:1.1rem;max-width:32rem;color:var(--fg-dim)}
.studio a{display:inline-flex;gap:.45em;margin-top:1.4rem;font-size:.74rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding-bottom:.35em;border-bottom:1px solid var(--fg)}
@media (max-width:760px){.studio>div{padding-left:0}.studio-mark{position:static;transform:none;width:120px;margin-bottom:1.5rem;opacity:.2}}

/* kontakt */
.closing{padding:clamp(4.5rem,11vw,8rem) 1.75rem;text-align:center}
.closing .hero-index{display:block;margin-bottom:1rem}
.closing h2{font-size:clamp(2rem,5.5vw,3.6rem);line-height:1.05}
.big-link{display:inline-block;margin-top:2rem;font-size:clamp(1.15rem,3vw,1.6rem);font-weight:600;padding-bottom:.25em;border-bottom:1px solid var(--fg)}
.closing>p{margin-top:1.2rem;font-size:.88rem;color:var(--fg-dim)}
.closing>p a{border-bottom:1px solid var(--fg-mute)}

footer{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;align-items:center;justify-content:space-between;padding:1.1rem 1.75rem;border-top:1px solid var(--line);font-size:.7rem;letter-spacing:.04em;color:var(--fg-mute)}
footer #analytics{font-weight:600;color:var(--fg-dim);border-bottom:1px solid var(--line-2)}

/* analityka */
dialog#analyticsDialog{position:fixed;inset:0;margin:auto;width:min(30rem,90vw);padding:1.8rem;border:1px solid var(--line-2);border-radius:var(--radius);background:var(--bg);color:var(--fg)}
dialog#analyticsDialog::backdrop{background:rgba(0,0,0,.7)}
dialog#analyticsDialog #closeAnalytics{position:absolute;top:.9rem;right:1.1rem;font-size:1.1rem;color:var(--fg-dim)}
dialog#analyticsDialog h2{margin-top:.5rem;font-size:1.3rem}
dialog#analyticsDialog p{margin-top:.6rem;font-size:.84rem;color:var(--fg-dim)}
dialog#analyticsDialog label{display:flex;gap:.5em;align-items:center;margin-top:1rem;font-size:.84rem}
#stats{margin-top:.8rem;display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;color:var(--fg-dim)}
#heatmap{margin-top:.8rem;width:100%;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg-2)}
#downloadStats,#clearStats{margin-top:.9rem;margin-right:.8rem;padding:.5rem .9rem;border:1px solid var(--line-2);border-radius:var(--radius);font-size:.74rem;font-weight:600}

@media (max-width:600px){
  .scene-top{flex-wrap:wrap}
  #welcome{left:1rem;right:1rem;bottom:4.6rem;max-width:none}
  #tools{top:auto;bottom:6.5rem;right:1rem;flex-direction:row}
  #detailCard{left:1rem;right:1rem;max-width:none;top:auto;bottom:9.5rem}
  #mapBox{display:none}
  .viewer.ready .scene-bottom{padding-left:1rem}
  .scene-bottom{flex-direction:column;align-items:flex-start;padding:1rem}
  #hint{text-align:left}
}

/* ---- Film ze skanu (wersja finalna: bez viewera na stronie, tylko film + link do prezentacji) ---- */
.film{position:relative;background:#000;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.film-frame{position:relative;width:min(100%,calc(88vh*16/9));margin:0 auto;background:#000}
.film-view{position:relative;aspect-ratio:16/9;overflow:hidden}
.film-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-shade{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 58%,rgba(0,0,0,.78) 100%)}
.film-brand{position:absolute;z-index:3;pointer-events:none;transform:translate(-56.02%,-58.61%)}
.film-brand img{width:100%;height:auto;display:block;opacity:0;transform-origin:56.02% 58.61%;filter:drop-shadow(0 1px 3px #0005);transition:opacity .06s linear,transform .06s linear}
.film .scene-top{z-index:4;pointer-events:none}
.film-bottom{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding:1.4rem 1.5rem}
.film-bottom h2{margin-top:.4rem;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.05}
.film-actions{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.film-actions .primary{margin-top:0}
.film-toggle{padding:.8rem 1.1rem;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(0,0,0,.4);backdrop-filter:blur(6px);font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;transition:background .15s,color .15s}
.film-toggle:hover{background:var(--fg);color:var(--bg)}
footer a{border-bottom:1px solid var(--line-2)}
/* Przełącznik języka PL / EN / DE */
.lang-switch{display:flex;gap:2px;flex:none}
.lang-switch button{padding:.4rem .5rem;font-size:.7rem;font-weight:600;letter-spacing:.1em;color:var(--fg-mute);border:1px solid transparent;border-radius:var(--radius);transition:color .15s,border-color .15s}
.lang-switch button:hover{color:var(--fg)}
.lang-switch button[aria-pressed="true"]{color:var(--fg);border-color:var(--line-2)}
/* Cały film jest linkiem do pełnej prezentacji (nowa karta). */
.film-link{position:absolute;inset:0;z-index:3;cursor:pointer;display:grid;place-items:center}
.film-hint{padding:.6rem 1rem;border:1px solid var(--line-2);border-radius:var(--radius);background:rgba(0,0,0,.55);backdrop-filter:blur(6px);font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.film-link:hover .film-hint,.film-link:focus-visible .film-hint{opacity:1;transform:none}
.film-link:focus-visible{outline:1px solid var(--fg);outline-offset:-6px}
@media (hover:none){.film-hint{display:none}} /* na dotyku: stuknięcie w film otwiera prezentację; przycisk pod filmem mówi to wprost */
@media (prefers-reduced-motion:reduce){.film-brand img{transition:none}}

/* Telefon i wąski tablet: film na pełną szerokość, podpis i przyciski pod filmem (żeby nie zasłaniały kadru). */
@media (max-width:700px){
  .film-frame{width:100%}
  .film .scene-top{padding:.7rem .8rem}
  .film .scene-top .tag.ghost{display:none}
  .film-shade{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,0) 30%)}
  .film-bottom{position:static;background:var(--bg);padding:1.2rem 1rem 1.4rem;flex-direction:column;align-items:stretch}
  .film-actions{flex-direction:column-reverse;align-items:stretch}
  .film-actions .primary,.film-toggle{justify-content:center;text-align:center;width:100%}
  .hero{padding-left:1rem;padding-right:1rem}
  .hero h1{font-size:clamp(2.1rem,10vw,2.8rem)}
  .hero-logo{max-width:120px}
  .offer,.process,.studio,.closing,.statement{padding-left:1rem;padding-right:1rem}
  footer{padding-left:1rem;padding-right:1rem}
}