/* ============================================================
   TOKENS — jasny motyw (bazowy)
   Paleta wywiedziona wprost z faktycznej strony Zielona Pergola:
   butelkowa zieleń + złoto + kremowa poświata, tu w układzie
   prezentacji/slajdów, nie klonowania układu strony.
   ============================================================ */
:root{
  --ink:#15321F;
  --ink-soft:#3c5b46;
  --cream:#F6F1E5;
  --cream-deep:#EDE4D0;
  --panel:#FFFDF8;
  --gold:#A9812F;
  --gold-light:#D8B26A;
  --gold-dark:#8A661F;
  --sage:#7E9877;
  --line:rgba(21,50,31,.16);
  --line-soft:rgba(21,50,31,.09);
  --shadow:0 32px 64px -28px rgba(21,50,31,.38), 0 4px 14px rgba(21,50,31,.08);
  --danger:#A63A24;
  --focus:#8A661F;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#F3EEE0;
    --ink-soft:#C9C2AC;
    --cream:#12180F;
    --cream-deep:#1A2216;
    --panel:#1E271B;
    --gold:#D9B36C;
    --gold-light:#E7CE9B;
    --gold-dark:#B98F3F;
    --sage:#9BB093;
    --line:rgba(243,238,224,.14);
    --line-soft:rgba(243,238,224,.08);
    --shadow:0 32px 64px -28px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.3);
    --danger:#E08A6E;
    --focus:#E7CE9B;
  }
}
:root[data-theme="dark"]{
  --ink:#F3EEE0; --ink-soft:#C9C2AC; --cream:#12180F; --cream-deep:#1A2216; --panel:#1E271B;
  --gold:#D9B36C; --gold-light:#E7CE9B; --gold-dark:#B98F3F;
  --line:rgba(243,238,224,.14); --line-soft:rgba(243,238,224,.08);
  --shadow:0 32px 64px -28px rgba(0,0,0,.65), 0 4px 14px rgba(0,0,0,.3);
  --danger:#E08A6E; --focus:#E7CE9B;
}
:root[data-theme="light"]{
  --ink:#15321F; --ink-soft:#3c5b46; --cream:#F6F1E5; --cream-deep:#EDE4D0; --panel:#FFFDF8;
  --gold:#A9812F; --gold-light:#D8B26A; --gold-dark:#8A661F;
  --line:rgba(21,50,31,.16); --line-soft:rgba(21,50,31,.09);
  --shadow:0 32px 64px -28px rgba(21,50,31,.38), 0 4px 14px rgba(21,50,31,.08);
  --danger:#A63A24; --focus:#8A661F;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--cream); color:var(--ink);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  overflow:hidden; height:100svh; width:100vw;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Fraunces',Georgia,'Iowan Old Style',serif; font-weight:600; margin:0; text-wrap:balance}
p{margin:0}
button{font-family:inherit; cursor:pointer}
button:focus-visible, a:focus-visible{outline:2px solid var(--focus); outline-offset:3px; border-radius:4px}
::selection{background:var(--gold-light); color:var(--ink)}

.deck{position:relative; height:100svh; width:100vw; overflow:hidden}

.slide{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding:56px clamp(24px,6vw,96px);
  opacity:0; visibility:hidden; transform:translateY(14px);
  transition:opacity .38s ease, transform .38s ease;
  pointer-events:none;
}
.slide.is-active{opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto}
@media (prefers-reduced-motion: reduce){
  .slide{transition:opacity .01s linear; transform:none}
}

/* ---------- slajdy treściowe (funkcje / dodatki) ---------- */
.slide-grid{
  display:grid; grid-template-columns:minmax(320px,460px) 1fr; gap:clamp(28px,5vw,72px);
  align-items:center; max-width:1360px; margin:0 auto; width:100%;
}
.slide-grid-single{grid-template-columns:1fr; max-width:900px}
.slide-text-wide{max-width:760px}

.eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:16px;
}
.slide-text h2{font-size:clamp(24px,2.7vw,36px); line-height:1.14; margin-bottom:18px; color:var(--ink)}
.slide-text .body{font-size:16.5px; line-height:1.62; color:var(--ink-soft); max-width:56ch}
.slide-text .tech{
  margin-top:18px; font-size:13.5px; line-height:1.6; color:var(--ink-soft); opacity:.86;
  padding-top:14px; border-top:1px solid var(--line-soft); max-width:56ch;
}
.slide-text .tech span{font-weight:600; color:var(--gold-dark); margin-right:4px}
.slide-text .note{
  margin-top:10px; font-size:13.5px; font-style:italic; color:var(--gold-dark); opacity:.9;
}

.slide-media{display:flex; align-items:center; justify-content:center; min-width:0}
.framecard{
  position:relative; width:100%; max-width:640px; border-radius:16px; overflow:hidden;
  background:var(--panel); box-shadow:var(--shadow); border:1px solid var(--line-soft);
}
.framecard::before{
  content:""; display:block; height:9px; width:100%;
  background:linear-gradient(90deg, var(--gold) 0 46px, transparent 46px);
  background-color:var(--cream-deep);
}
.framecard img{display:block; width:100%; height:auto}
.icon-card{aspect-ratio:4/3; background:var(--cream-deep)}
.icon-card-inner{display:flex; align-items:center; justify-content:center; height:100%}
.icon-card svg{color:var(--gold-dark)}
@media (prefers-color-scheme: dark){ .icon-card svg{color:var(--gold-light)} }
:root[data-theme="dark"] .icon-card svg{color:var(--gold-light)}

/* ---------- meta (dodatki): nakład pracy ---------- */
.meta-row{display:flex; gap:40px; margin:22px 0 8px; flex-wrap:wrap}
.meta-block{display:flex; flex-direction:column; gap:8px}
.meta-label{font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); opacity:.75}
.effort-pill{
  display:inline-flex; align-items:center; padding:4px 13px; border-radius:999px;
  font-size:12.5px; font-weight:600; width:fit-content;
  background:var(--cream-deep); color:var(--ink-soft); border:1px solid var(--line);
}
.effort-maly{color:var(--sage); border-color:var(--sage)}
.effort-sredni{color:var(--gold-dark); border-color:var(--gold-dark)}
.effort-duzy{color:var(--danger); border-color:var(--danger)}
.effort-zalezny{color:var(--ink-soft)}

/* ---------- picker (Wybieram / Wstępnie zainteresowany) ---------- */
.picker{margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.picker-label{font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); opacity:.7}
.picker-btns{display:flex; gap:10px; flex-wrap:wrap}
.pick{
  font:inherit; font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:999px;
  border:1.5px solid var(--line); background:transparent; color:var(--ink-soft);
  transition:background .18s ease, color .18s ease, border-color .18s ease, transform .12s ease;
}
.pick:hover{transform:translateY(-1px)}
.pick-yes{border-color:var(--ink); color:var(--ink)}
.pick-yes.is-active{background:var(--ink); color:var(--cream); border-color:var(--ink)}
.pick-maybe{border-color:var(--gold-dark); color:var(--gold-dark)}
.pick-maybe.is-active{background:var(--gold); color:#fff; border-color:var(--gold)}
.pick-demo{pointer-events:none; display:inline-flex}
.pick-static{padding:8px 16px; font-size:13px}

/* ---------- slajdy strukturalne ---------- */
.slide-structural{align-items:center; text-align:center}
.title-inner{max-width:820px; margin:0 auto}
.slide-structural .eyebrow{text-align:center}
.slide-structural h1{font-size:clamp(34px,5.4vw,64px); line-height:1.08}
.slide-structural h1 em, .slide-structural h2 em{
  font-style:italic; font-weight:500; color:var(--gold-dark);
  text-shadow:0 1px 0 rgba(246,241,229,.5);
}
.lede{margin-top:22px; font-size:18px; line-height:1.6; color:var(--ink-soft); max-width:58ch; margin-left:auto; margin-right:auto}
.divider-inner .lede{font-size:19px}

.title-stats{display:flex; justify-content:center; gap:clamp(28px,6vw,64px); margin-top:40px}
.title-stats div{display:flex; flex-direction:column; align-items:center; gap:4px}
.title-stats b{font-family:'Fraunces',serif; font-size:34px; color:var(--ink)}
.title-stats span{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); opacity:.75}

.btn-start{
  margin-top:44px; font:inherit; font-size:15px; font-weight:600; letter-spacing:.02em;
  padding:15px 34px; border-radius:999px; border:0; background:var(--ink); color:var(--cream);
  box-shadow:var(--shadow); transition:transform .15s ease, background .15s ease;
}
.btn-start:hover{transform:translateY(-2px); background:var(--ink-soft)}
.btn-small{margin-top:0; padding:12px 26px; font-size:13.5px; box-shadow:none}
.btn-reset-link{
  display:block; margin:18px auto 0; font:inherit; font-size:12.5px; color:var(--ink-soft);
  background:none; border:0; text-decoration:underline; opacity:.7;
}
.btn-reset-link:hover{opacity:1}

.intro-grid{display:flex; gap:22px; justify-content:center; margin-top:36px; flex-wrap:wrap}
.intro-card{
  background:var(--panel); border:1px solid var(--line-soft); border-radius:14px; padding:22px 24px;
  max-width:280px; text-align:left; box-shadow:var(--shadow);
}
.intro-card p{margin-top:14px; font-size:14.5px; color:var(--ink-soft); line-height:1.55}
.intro-note{margin-top:34px; font-size:13.5px; color:var(--ink-soft); max-width:58ch; margin-left:auto; margin-right:auto; opacity:.85}

.summary-cols{display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:34px; text-align:left; max-width:860px; margin-left:auto; margin-right:auto}
.summary-col h3{margin-bottom:14px}
.summary-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; max-height:34vh; overflow-y:auto}
.summary-list li{font-size:14.5px; padding:9px 12px; background:var(--panel); border:1px solid var(--line-soft); border-radius:9px; color:var(--ink)}
.summary-empty{color:var(--ink-soft); font-style:italic; opacity:.7; background:transparent !important; border:none !important; padding:4px 0 !important}
.summary-actions{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:34px}
.summary-hint{font-size:13px; color:var(--sage); min-height:18px}

/* ---------- makiety CSS (PWA / automatyzacje) ---------- */
.mockcard{width:100%; max-width:420px; margin:0 auto}
.phoneframe{
  width:260px; margin:0 auto; border-radius:34px; background:var(--ink); padding:14px 10px;
  box-shadow:var(--shadow);
}
.phonenotch{width:60px; height:14px; background:var(--cream); border-radius:8px; margin:0 auto 8px}
.phonescreen{background:var(--cream-deep); border-radius:20px; padding:16px 14px; min-height:340px; display:flex; flex-direction:column; justify-content:flex-end; gap:16px}
.ios-prompt{background:var(--panel); border-radius:14px; padding:18px 16px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.18)}
.ios-icon{width:44px; height:44px; border-radius:11px; background:var(--ink); color:var(--cream); font-family:'Fraunces',serif; font-weight:600; font-size:20px; display:flex; align-items:center; justify-content:center; margin:0 auto 10px}
.ios-prompt p{font-size:13px; margin-top:4px}
.ios-sub{color:var(--ink-soft); font-size:11.5px !important}
.ios-btns{display:flex; justify-content:space-between; margin-top:14px; border-top:1px solid var(--line-soft); padding-top:10px; font-size:13px; font-weight:600}
.ios-add{color:var(--gold-dark)}
.home-icons{display:flex; gap:14px; justify-content:center}
.hi{width:40px; height:40px; border-radius:10px; background:rgba(21,50,31,.12)}
.hi-new{background:var(--ink); color:var(--cream); display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-weight:600}

.mailcard{background:var(--panel); border-radius:14px; box-shadow:var(--shadow); padding:8px; display:flex; flex-direction:column}
.mail-row{display:flex; gap:12px; align-items:flex-start; padding:14px 12px; border-bottom:1px solid var(--line-soft); text-align:left}
.mail-row:last-child{border-bottom:0}
.mail-row b{display:block; font-size:14px; color:var(--ink); font-weight:600}
.mail-row small{display:block; margin-top:3px; font-size:11.5px; color:var(--ink-soft); opacity:.75}
.mail-dot{width:9px; height:9px; border-radius:50%; margin-top:6px; flex:none}
.mail-dot-1{background:var(--sage)}
.mail-dot-2{background:var(--gold)}

/* ---------- HUD: pasek postępu, nawigacja, spis treści ---------- */
.hud{position:fixed; inset:0; pointer-events:none; z-index:40}
.progress-track{position:fixed; top:0; left:0; right:0; height:3px; background:var(--line-soft); z-index:41}
.progress-fill{height:100%; background:var(--gold); transition:width .3s ease; width:0%}
.hud-top{
  position:fixed; top:16px; left:24px; right:24px; display:flex; justify-content:space-between; align-items:center;
  font-size:12px; color:var(--ink-soft); pointer-events:none; z-index:41;
}
.hud-section{font-weight:600; letter-spacing:.08em; text-transform:uppercase}
.hud-frac{font-variant-numeric:tabular-nums}
.hud-btn{pointer-events:auto; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  border-radius:999px; padding:7px 15px; font-size:12px; font-weight:600; box-shadow:var(--shadow)}

.nav-controls{
  position:fixed; bottom:22px; right:24px; display:flex; gap:10px; z-index:41; pointer-events:auto;
}
.nav-btn{
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line); background:var(--panel);
  color:var(--ink); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  transition:transform .15s ease, background .15s ease;
}
.nav-btn:hover{transform:translateY(-2px)}
.nav-btn:disabled{opacity:.35; pointer-events:none}
.nav-btn svg{width:19px; height:19px}

.toc-btn{
  position:fixed; bottom:22px; left:24px; z-index:41; pointer-events:auto;
  background:var(--panel); border:1px solid var(--line); color:var(--ink); border-radius:999px;
  padding:11px 20px; font-size:13px; font-weight:600; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:8px;
}

.toc-overlay{
  position:fixed; inset:0; background:rgba(10,16,10,.55); z-index:60; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s ease; padding:40px 20px;
}
.toc-overlay.is-open{opacity:1; visibility:visible}
.toc-panel{
  background:var(--cream); border-radius:18px; box-shadow:var(--shadow); max-width:560px; width:100%;
  max-height:80vh; display:flex; flex-direction:column; overflow:hidden;
}
.toc-head{display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--line-soft)}
.toc-head h3{font-size:19px}
.toc-close{background:none; border:0; font-size:22px; color:var(--ink-soft); line-height:1; padding:4px}
.toc-list{list-style:none; margin:0; padding:10px 12px; overflow-y:auto}
.toc-h{font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-dark); padding:14px 12px 6px}
.toc-list button{
  display:block; width:100%; text-align:left; background:none; border:0; padding:10px 12px; border-radius:8px;
  font-size:14.5px; color:var(--ink);
}
.toc-list button:hover{background:var(--cream-deep)}

@media (max-width:900px){
  body{overflow-y:auto; height:auto}
  .deck{height:auto; overflow:visible}
  /* Na telefonie slajdy stoją jedne pod drugimi w normalnym przepływie strony
     (position:relative), więc — inaczej niż na desktopie — wszystkie muszą być
     naprawdę widoczne: samo przełączanie .is-active nie przewija do właściwego
     miejsca, tylko zmienia który fragment długiej strony jest "aktywny". */
  .slide{position:relative; min-height:100svh; padding:88px 22px 140px; transform:none;
    opacity:1; visibility:visible; pointer-events:auto}
  .slide-grid{grid-template-columns:1fr; gap:30px}
  .slide-media{order:-1}
  .framecard{max-width:420px}
  .summary-cols{grid-template-columns:1fr}
  .hud-top{left:16px; right:16px}
  .nav-controls{bottom:16px; right:16px}
  .toc-btn{bottom:16px; left:16px; padding:10px 16px; font-size:12px}
}
@media (max-width:520px){
  .title-stats{gap:22px}
  .title-stats b{font-size:26px}
  .intro-grid{gap:14px}
  .picker{flex-direction:column; align-items:flex-start}
}

/* ── Żywy podgląd: prawdziwa strona zamiast zrzutu ekranu ────────────────
   Ramka wczytuje podstronę w podwojonej szerokosci i pomniejsza ja o polowe.
   Dzieki temu widac uklad komputerowy, a skala zawsze pasuje do ramki —
   niezaleznie od szerokosci ekranu, bez zgadywania wartosci. */
.framecard-live{
  position:relative;
  width:100%;
  aspect-ratio:16/11;
  overflow:hidden;
  background:#fff;
}
.framecard-live::before{display:none}          /* bez zlotego paska nad podgladem */
.framecard-live iframe{
  position:absolute; top:0; left:0;
  width:200%; height:200%;
  border:0;
  transform:scale(.5);
  transform-origin:top left;
}
/* Klikniecie w podglad nie ma przewijac strony w srodku ramki —
   od otwierania jest przycisk w rogu. */
.framecard-live .zaslona{
  position:absolute; inset:0; z-index:1;
}
.framecard-live .live-open{
  position:absolute; right:12px; bottom:12px; z-index:2;
  padding:7px 14px; border-radius:999px;
  font-size:.8rem; font-weight:600; text-decoration:none;
  background:rgba(21,50,31,.92); color:#F6F1E5;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.framecard-live .live-open:hover{background:#15321F}
/* Na telefonie ramka jest waska, wiec przy proporcji 16/12 podglad mialby
   niecale 300 px wysokosci — za malo, zeby cokolwiek z niego wyczytac.
   Kwadrat daje wiecej strony w pionie przy tej samej szerokosci. */
@media (max-width:900px){ .framecard-live{aspect-ratio:1/1} }
@media (max-width:520px){ .framecard-live{aspect-ratio:4/5} }

/* ── Prośba o wycenę na końcu katalogu ──────────────────────────────────
   Bez tego katalog kończy się ślepo: klient wybiera kilkanaście rzeczy
   i nie ma jak powiedzieć „wyceńcie mi to". */
.wycena{
  margin:34px auto 0; max-width:560px; text-align:left;
  padding:22px 24px 24px; border-radius:16px;
  background:var(--panel); border:1px solid var(--line-soft); box-shadow:var(--shadow);
}
.wycena h3{margin:0 0 6px; font-size:1.18rem}
.wycena-lede{margin:0 0 16px; font-size:.92rem; opacity:.85; line-height:1.55}
.wycena-pola{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.wycena-pola .pelna{grid-column:1 / -1}
.wycena label{display:block; font-size:.8rem; font-weight:600; letter-spacing:.02em}
.wycena input[type=text],.wycena input[type=tel],.wycena input[type=email]{
  width:100%; margin-top:5px; padding:10px 12px; font:inherit; font-size:.95rem;
  border:1px solid var(--line-soft); border-radius:9px; background:#fff; color:inherit;
}
.wycena input:focus{outline:2px solid var(--gold); outline-offset:1px}
.wycena-zgoda{display:flex; gap:9px; align-items:flex-start; margin:14px 0 16px; font-weight:400}
.wycena-zgoda input{margin-top:3px; flex:0 0 auto}
.wycena-zgoda span{font-size:.84rem; line-height:1.5; opacity:.88}
.wycena-status{margin:12px 0 0; font-size:.9rem; min-height:1.2em}
.wycena-status.ok{color:#1d6b3f; font-weight:600}
.wycena-status.zle{color:#a3341f; font-weight:600}
/* Pułapka na roboty spamujące — człowiek tego nie widzi i nie wypełni. */
.pulapka{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
@media (max-width:560px){ .wycena-pola{grid-template-columns:1fr} }