/* ══════════════════════════════════════════════════════════════════
   Klucz i Sól — Prezentacja na spotkanie (iPad 11" poziomo)
   Deck przeklikiwany / swipe. Design system spójny z kluczisol.com.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --paper: #F4F1E9;
  --paper-2: #EDE7DA;
  --card: #FBF9F3;
  --ink: #1A1814;
  --ink-soft: #4A463E;
  --ink-mute: #8B8578;
  --wood: #A06A3E;
  --wood-deep: #8C5C36;
  --sage: #5E7150;
  --terra: #B5532E;
  --gold: #C9A24B;
  --line: #DED7C7;
  --line-2: #E9E3D6;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Space Grotesk", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.6, .04, .2, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  height: 100%; width: 100%; overflow: hidden;
  background: var(--ink); color: var(--ink);
  font-family: var(--sans);
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

/* ── Deck shell ── */
.deck { position: fixed; inset: 0; overflow: hidden; background: var(--paper); }
.track {
  display: flex; height: 100%; width: 100%;
  transition: transform .62s var(--ease);
  will-change: transform;
}
.slide {
  flex: 0 0 100%; height: 100%; position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(40px, 6vh, 70px) clamp(48px, 7vw, 110px);
  background: var(--paper);
  overflow: hidden;
}
.slide--dark { background: var(--ink); color: var(--paper); }
.slide--wood { background: linear-gradient(150deg, #2B211A, #4A3322 70%, #5C3E25); color: var(--paper); }

/* fade-up wejście treści gdy slajd aktywny */
.slide .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.slide.is-active .reveal { opacity: 1; transform: none; }
.slide.is-active .reveal:nth-child(2) { transition-delay: .07s; }
.slide.is-active .reveal:nth-child(3) { transition-delay: .14s; }
.slide.is-active .reveal:nth-child(4) { transition-delay: .21s; }
.slide.is-active .reveal:nth-child(5) { transition-delay: .28s; }

/* ── Typografia ── */
.eyebrow { font-family: var(--mono); font-size: clamp(10px, .82vw, 13px); letter-spacing: .22em; text-transform: uppercase; color: var(--wood-deep); margin-bottom: 1.1rem; display: flex; align-items: center; gap: .7rem; }
.slide--dark .eyebrow, .slide--wood .eyebrow { color: var(--gold); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .7; }
h1.title { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 5.4vw, 82px); line-height: 1.02; letter-spacing: -.015em; }
h2.head { font-family: var(--serif); font-weight: 300; font-size: clamp(32px, 3.9vw, 58px); line-height: 1.06; letter-spacing: -.012em; }
.accent { font-style: italic; color: var(--wood-deep); }
.slide--dark .accent, .slide--wood .accent { color: var(--gold); }
.lead { font-size: clamp(15px, 1.35vw, 20px); line-height: 1.6; color: var(--ink-soft); max-width: 56ch; margin-top: 1.3rem; }
.slide--dark .lead, .slide--wood .lead { color: #D9D2C4; }
.small { font-size: clamp(12px, .95vw, 14px); color: var(--ink-mute); }

/* ── Cover ── */
.cover__stats { display: flex; gap: clamp(28px, 4vw, 60px); margin-top: 2.4rem; flex-wrap: wrap; }
.stat .stat__n { font-family: var(--serif); font-weight: 300; font-size: clamp(22px, 2.3vw, 34px); }
.stat .stat__l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); margin-top: .25rem; }
.slide--dark .stat__l { color: #9B9587; }

/* ── Listy argumentów ── */
.arglist { display: flex; flex-direction: column; gap: 1.05rem; margin-top: 1.8rem; max-width: 60ch; }
.arg { display: flex; gap: 1rem; align-items: flex-start; }
.arg__num { font-family: var(--mono); font-size: 12px; color: var(--wood-deep); border: 1px solid var(--line); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 30px; margin-top: 2px; }
.slide--dark .arg__num { color: var(--gold); border-color: rgba(255,255,255,.18); }
.arg__t { font-size: clamp(14px, 1.15vw, 17px); line-height: 1.5; }
.arg__t b { font-weight: 600; }
.arg__t .muted { color: var(--ink-mute); }
.slide--dark .arg__t .muted { color: #9B9587; }

/* dwukolumnowy układ slajdu */
.cols { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.cols--narrow { grid-template-columns: 1fr 1.15fr; }

/* karty (np. 3 obiekcje) */
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2rem; }
.c3 { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem 1.3rem; position: relative; overflow: hidden; }
.slide--dark .c3 { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.c3::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--terra); }
.c3__k { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--terra); }
.c3__t { font-family: var(--serif); font-size: clamp(18px, 1.7vw, 25px); font-weight: 300; margin: .5rem 0 .55rem; line-height: 1.12; }
.c3__d { font-size: clamp(12.5px, 1vw, 14.5px); line-height: 1.5; color: var(--ink-soft); }
.slide--dark .c3__d { color: #C9C2B4; }

/* pełnoekranowy cytat / hasło */
.quote { font-family: var(--serif); font-weight: 300; font-size: clamp(30px, 4.2vw, 64px); line-height: 1.1; letter-spacing: -.01em; max-width: 22ch; }

/* pill / oznaczenia */
.pill { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; padding: .38rem .7rem; border-radius: 999px; border: 1px solid var(--line); color: var(--wood-deep); }
.pill--sage { color: var(--sage); border-color: rgba(94,113,80,.4); background: rgba(94,113,80,.07); }
.pill--terra { color: var(--terra); border-color: rgba(181,83,46,.35); background: rgba(181,83,46,.06); }

/* ── MODUŁ: pory dnia ── */
.daypic { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(26,24,20,.5); background: var(--paper-2); }
.daypic__layer { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s var(--ease); }
.daypic__layer:first-child { opacity: 1; }
.dayctrl { margin-top: 1.6rem; }
.dayctrl__top { display: flex; align-items: baseline; gap: .8rem; }
.dayctrl__name { font-family: var(--serif); font-size: clamp(26px, 2.6vw, 40px); font-weight: 300; }
.dayctrl__time { font-family: var(--mono); font-size: 13px; color: var(--wood-deep); letter-spacing: .08em; }
.dayslider { -webkit-appearance: none; appearance: none; width: 100%; height: 3px; border-radius: 3px; background: var(--line); margin: 1.2rem 0 .6rem; outline: none; cursor: pointer; }
.dayslider::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--wood-deep); border: 3px solid var(--paper); box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: grab; }
.dayslider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--wood-deep); border: 3px solid var(--paper); cursor: grab; }
.dayticks { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); }
.dayticks span.on { color: var(--wood-deep); }
.daydesc { margin-top: 1.1rem; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.55; color: var(--ink-soft); max-width: 44ch; min-height: 4.6em; }

/* ── MODUŁ: 3 persony ── */
.personas { display: grid; grid-template-columns: 320px 1fr; gap: clamp(28px, 4vw, 60px); margin-top: 1.6rem; align-items: stretch; }
.persona__tabs { display: flex; flex-direction: column; gap: .8rem; }
.ptab { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1.05rem 1.15rem; cursor: pointer; font: inherit; color: inherit; transition: border-color .2s, box-shadow .2s, transform .12s; display: flex; gap: .85rem; align-items: center; }
.ptab:hover { transform: translateY(-1px); }
.ptab.on { border-color: var(--wood); box-shadow: inset 0 0 0 1px var(--wood); }
.ptab__ico { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--paper-2); flex: 0 0 38px; }
.ptab__ico svg { width: 20px; height: 20px; stroke: var(--wood-deep); fill: none; stroke-width: 1.6; }
.ptab__n { font-family: var(--serif); font-size: 20px; font-weight: 300; }
.ptab__s { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-top: .15rem; }
.persona__panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.7rem 1.8rem; display: flex; flex-direction: column; }
.ppanel__story { font-family: var(--serif); font-weight: 300; font-size: clamp(18px, 1.9vw, 27px); line-height: 1.22; letter-spacing: -.01em; }
.ppanel__story .accent { font-style: italic; }
.ppanel__h { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--wood-deep); margin: 1.5rem 0 .8rem; }
.ppanel__list { display: flex; flex-direction: column; gap: .6rem; }
.ppanel__li { display: flex; gap: .65rem; font-size: clamp(13px, 1.05vw, 15.5px); line-height: 1.45; color: var(--ink-soft); }
.ppanel__li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wood); margin-top: .55em; flex: 0 0 6px; }
.ppanel__hl { margin-top: auto; padding-top: 1.3rem; font-size: 13px; color: var(--ink-mute); border-top: 1px solid var(--line-2); }
.ppanel__hl b { color: var(--sage); font-weight: 600; }

/* ── MODUŁ: statystyki zakłamane ── */
.statcompare { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
.scol { border: 1px solid var(--line); border-radius: 16px; padding: 1.4rem 1.4rem 1.5rem; background: var(--card); }
.scol--bad { border-color: rgba(181,83,46,.3); }
.scol--good { border-color: rgba(94,113,80,.35); background: rgba(94,113,80,.05); }
.scol__h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.scol--bad .scol__h { color: var(--terra); }
.scol--good .scol__h { color: var(--sage); }
.bar { display: flex; align-items: center; gap: .7rem; margin: .55rem 0; }
.bar__l { font-size: 12px; width: 116px; flex: 0 0 116px; color: var(--ink-soft); }
.bar__track { flex: 1; height: 10px; border-radius: 6px; background: var(--paper-2); overflow: hidden; }
.bar__fill { height: 100%; border-radius: 6px; transition: width 1s var(--ease); }
.scol--bad .bar__fill { background: var(--terra); }
.scol--good .bar__fill { background: var(--sage); }
.bar__v { font-family: var(--mono); font-size: 11px; width: 34px; text-align: right; color: var(--ink-mute); }

/* ── MODUŁ: prezentacja nieruchomości (galeria + rzut + cena) ── */
.showcase { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(24px, 3vw, 44px); margin-top: 1.4rem; align-items: start; }
.shc__main { width: 100%; aspect-ratio: 16/10; border-radius: 16px; background-size: cover; background-position: center; box-shadow: 0 26px 54px -28px rgba(26,24,20,.5); transition: background-image .3s; }
.shc__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 12px; }
.shc__thumb { aspect-ratio: 4/3; border-radius: 9px; background-size: cover; background-position: center; border: 2px solid transparent; cursor: pointer; padding: 0; transition: border-color .2s, transform .12s; }
.shc__thumb:hover { transform: translateY(-1px); }
.shc__thumb.is-on { border-color: var(--wood); }
.shc__side { display: flex; flex-direction: column; gap: 14px; }
.shc__plan { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem 1rem; }
.shc__planlbl { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--wood-deep); margin-bottom: .6rem; }
.shc__planimg { width: 100%; aspect-ratio: 2.3/1; background-size: contain; background-repeat: no-repeat; background-position: center; }
.shc__price { background: var(--ink); color: var(--paper); border-radius: 14px; padding: 1.1rem 1.3rem; }
.shc__price_l { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #9B9587; }
.shc__price_v { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 2.7vw, 38px); line-height: 1; margin: .35rem 0 .55rem; }
.shc__price_tag { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: #A9C29A; }
.shc__price_tag::before { content: "●"; color: var(--sage); }
.shc__price_note { font-size: 12px; line-height: 1.5; color: #C9C2B4; margin-top: .6rem; }

/* ── MODUŁ: wycena składowa po składowej ── */
.valwrap { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 4vw, 56px); margin-top: 1.4rem; align-items: start; }
.valbuild { display: flex; flex-direction: column; gap: .5rem; }
.valbase { display: flex; justify-content: space-between; align-items: baseline; padding: .7rem .9rem; border-radius: 11px; background: var(--paper-2); }
.valbase__l { font-size: 13.5px; color: var(--ink-soft); } .valbase__l b { color: var(--ink); }
.valbase__v { font-family: var(--mono); font-size: 14px; color: var(--ink); }
.valrow { display: flex; align-items: center; gap: .8rem; padding: .62rem .9rem; border: 1px solid var(--line); border-radius: 11px; cursor: pointer; transition: border-color .2s, background .2s; background: var(--card); }
.valrow.on { border-color: rgba(94,113,80,.45); background: rgba(94,113,80,.05); }
.valrow__tick { width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--line); flex: 0 0 20px; display: grid; place-items: center; transition: all .2s; }
.valrow.on .valrow__tick { background: var(--sage); border-color: var(--sage); }
.valrow__tick svg { width: 12px; height: 12px; stroke: #fff; fill: none; stroke-width: 2.4; opacity: 0; transition: opacity .2s; }
.valrow.on .valrow__tick svg { opacity: 1; }
.valrow__l { flex: 1; font-size: 13.5px; line-height: 1.35; color: var(--ink-soft); }
.valrow.on .valrow__l { color: var(--ink); }
.valrow__v { font-family: var(--mono); font-size: 13px; color: var(--sage); white-space: nowrap; }
.valrow:not(.on) .valrow__v { color: var(--ink-mute); }

.valcard { background: var(--ink); color: var(--paper); border-radius: 18px; padding: 1.6rem 1.7rem; position: sticky; top: 0; }
.valcard__h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #9B9587; }
.valcard__big { font-family: var(--serif); font-weight: 300; font-size: clamp(26px, 3vw, 42px); line-height: 1; margin: .55rem 0 .2rem; letter-spacing: -.01em; }
.valcard__big small { font-size: .5em; color: #C9C2B4; }
.valcard__perm { font-family: var(--mono); font-size: 13px; color: var(--gold); }
.valbar { margin: 1.2rem 0 .4rem; height: 8px; border-radius: 5px; background: rgba(255,255,255,.12); position: relative; }
.valbar__fill { position: absolute; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--gold), #E0BE6A); transition: left .5s var(--ease), width .5s var(--ease); }
.valbar__mark { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--paper); transition: left .5s var(--ease); }
.valbar__lbl { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; color: #9B9587; margin-top: .5rem; letter-spacing: .06em; }
.valask { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(255,255,255,.14); font-size: 12.5px; line-height: 1.5; color: #C9C2B4; }
.valask b { color: var(--gold); }
.valnote { font-size: 11px; color: #8B8578; margin-top: .9rem; line-height: 1.45; }

/* ── MODUŁ: pełna analiza cech (checklist) ── */
.featgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem 2rem; margin-top: 1.5rem; }
.featcol { display: flex; flex-direction: column; gap: .12rem; }
.feat { display: flex; align-items: center; gap: .6rem; padding: .42rem 0; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.feat__i { width: 17px; height: 17px; flex: 0 0 17px; border-radius: 5px; display: grid; place-items: center; }
.feat__i svg { width: 11px; height: 11px; stroke-width: 2.4; fill: none; }
.feat--yes .feat__i { background: rgba(94,113,80,.15); } .feat--yes .feat__i svg { stroke: var(--sage); }
.feat--no .feat__i { background: var(--paper-2); } .feat--no .feat__i svg { stroke: var(--ink-mute); }
.feat__l { flex: 1; color: var(--ink-soft); } .feat--yes .feat__l { color: var(--ink); }
.feat__v { font-family: var(--mono); font-size: 10.5px; color: var(--wood-deep); }
.featscore { display: flex; align-items: baseline; gap: .6rem; margin-top: 1.4rem; }
.featscore__n { font-family: var(--serif); font-size: clamp(28px, 3vw, 44px); font-weight: 300; color: var(--sage); }
.featscore__l { font-size: 13px; color: var(--ink-soft); max-width: 40ch; line-height: 1.45; }

/* ── Nawigacja / nawigator ── */
.navbtn { position: fixed; top: 50%; transform: translateY(-50%); z-index: 30; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(251,249,243,.7); backdrop-filter: blur(6px); display: grid; place-items: center; cursor: pointer; transition: background .2s, opacity .2s; opacity: .55; }
.navbtn:hover { opacity: 1; background: var(--card); }
.navbtn svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.8; }
.navbtn--prev { left: 16px; } .navbtn--next { right: 16px; }
.navbtn[disabled] { opacity: .12; pointer-events: none; }
/* na ciemnych slajdach */
.deck.on-dark .navbtn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
.deck.on-dark .navbtn svg { stroke: var(--paper); }

/* navigator dolny */
.navigator { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 30; display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-radius: 999px; background: rgba(251,249,243,.72); backdrop-filter: blur(8px); border: 1px solid var(--line); }
.deck.on-dark .navigator { background: rgba(28,24,20,.55); border-color: rgba(255,255,255,.14); }
.dots { display: flex; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); border: none; padding: 0; cursor: pointer; transition: all .25s var(--ease); }
.deck.on-dark .dot { background: rgba(255,255,255,.25); }
.dot.on { background: var(--wood-deep); width: 22px; border-radius: 5px; }
.deck.on-dark .dot.on { background: var(--gold); }
.navlabel { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-soft); min-width: 132px; }
.deck.on-dark .navlabel { color: #C9C2B4; }
.navlabel b { color: var(--ink); } .deck.on-dark .navlabel b { color: var(--paper); }

/* logo w rogu */
.brand { position: fixed; top: 20px; left: clamp(48px, 7vw, 110px); z-index: 25; font-family: var(--serif); font-size: 17px; letter-spacing: .01em; display: flex; align-items: center; gap: .5rem; }
.brand .diamond { color: var(--wood); }
.brand .tag { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); align-self: center; }
.deck.on-dark .brand { color: var(--paper); } .deck.on-dark .brand .tag { color: #9B9587; }

/* CTA */
.cta__contact { display: flex; gap: 2rem; margin-top: 2.2rem; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; letter-spacing: .04em; }
.cta__contact span { color: var(--gold); }

@media (max-width: 820px) { .cols, .personas, .statcompare { grid-template-columns: 1fr; } .cards3 { grid-template-columns: 1fr; } }