/* Bajuli – kierunek „Premium Storybook”.
   Kolory: kość (tło), las (nagłówki, przyciski), szampan (delikatne złoto),
   terakota (akcent), szałwia (drugie tło), grafit (tekst). */

@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonty/dm-serif-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4; }
@font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonty/dm-serif.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonty/dm-serif-kursywa-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4; }
@font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonty/dm-serif-kursywa.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonty/dm-sans-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C4; }
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonty/dm-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }

:root {
  --kosc: #F7F3EA;
  --kosc-jasna: #FCFAF5;
  --las: #263F35;
  --las-ciemny: #1B2F27;
  --szampan: #D8C7A5;
  --terakota: #A65E49;
  --terakota-ciemna: #8C4A37;
  --szalwia: #E8E9DF;
  --grafit: #332F29;
  --grafit-2: rgba(51, 47, 41, .74);
  --kreska: rgba(51, 47, 41, .16);
  --szer: 1200px;
  --margines: clamp(20px, 4vw, 40px);
  --odstep-sekcji: clamp(72px, 10vw, 136px);
  --szeryf: "DM Serif Display", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --zwykla: "DM Sans", Manrope, "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: clip;
  background: var(--kosc); color: var(--grafit);
  font-family: var(--zwykla); font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--las); text-decoration-color: var(--szampan); text-decoration-thickness: 2px; text-underline-offset: 4px; }
a:hover { text-decoration-color: var(--terakota); }
h1, h2, h3 { font-family: var(--szeryf); font-weight: 400; color: var(--las); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(2.55rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.012em; }
h2 { font-size: clamp(2rem, 3.9vw, 3.15rem); line-height: 1.1; letter-spacing: -.008em; }
h3 { font-size: clamp(1.45rem, 2.2vw, 1.85rem); line-height: 1.18; }
h1 em, h2 em { font-style: italic; color: var(--terakota); }
p { margin: 0 0 1em; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--terakota); outline-offset: 3px; border-radius: 2px; }

.srodek { width: 100%; max-width: calc(var(--szer) + 2 * var(--margines)); margin: 0 auto; padding: 0 var(--margines); }
section { padding: var(--odstep-sekcji) 0; }
.naglowek-sekcji { max-width: 780px; margin-bottom: clamp(40px, 6vw, 72px); }
.wstep { max-width: 620px; color: var(--grafit-2); font-size: 1.08rem; margin: 20px 0 0; }
.nadtytul {
  display: flex; align-items: center; gap: 14px; margin: 0 0 20px;
  font-size: .76rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--terakota-ciemna);
}
.nadtytul::before { content: ""; width: 32px; height: 1px; background: var(--szampan); flex: none; }

.przeskocz { position: absolute; left: -9999px; top: 8px; z-index: 30; background: var(--las); color: var(--kosc); padding: 10px 16px; border-radius: 6px; }
.przeskocz:focus { left: 8px; }

/* Ilustracja jako plansza z książki: cienka złota ramka odsunięta od obrazu */
.plansza img, .hero-obraz img { border-radius: 4px; outline: 1px solid var(--szampan); outline-offset: 10px; }

/* Pasek u góry */
.pasek { position: sticky; top: 0; z-index: 20; background: var(--kosc); border-bottom: 1px solid var(--kreska); }
.pasek .srodek { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 68px; }
.logo { font-family: var(--szeryf); font-size: 1.7rem; line-height: 1; color: var(--las); text-decoration: none; letter-spacing: -.01em; }
.logo span { font-style: italic; color: var(--terakota); }
.logo img { display: block; height: 44px; width: auto; }
.menu { display: flex; gap: clamp(18px, 2.6vw, 36px); margin-left: auto; }
.menu a { font-size: .95rem; font-weight: 500; color: var(--grafit); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: border-color .2s, color .2s; }
.menu a:hover { color: var(--las); border-bottom-color: var(--terakota); }

/* Przyciski */
.przycisk {
  display: inline-block; border: 1px solid var(--las); cursor: pointer;
  background: var(--las); color: var(--kosc);
  font: 600 1.02rem/1.2 var(--zwykla); letter-spacing: .01em; text-align: center; text-decoration: none;
  padding: 17px 30px; border-radius: 6px;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.przycisk:hover { background: var(--las-ciemny); border-color: var(--las-ciemny); transform: translateY(-1px); }
.przycisk:active { transform: translateY(0); }
.przycisk:focus-visible { outline: 2px solid var(--terakota); outline-offset: 3px; border-radius: 6px; }
.przycisk.maly { padding: 11px 20px; font-size: .93rem; }
.przycisk.jasny { background: var(--kosc); border-color: var(--kosc); color: var(--las); }
.przycisk.jasny:hover { background: var(--szampan); border-color: var(--szampan); }
.przycisk.jasny:focus-visible { outline-color: var(--szampan); }
.przycisk[disabled] { opacity: .65; cursor: progress; transform: none; }

/* 1. Hero */
.hero { padding: clamp(24px, 3.2vw, 44px) 0 0; }
.hero-uklad {
  width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--margines);
  display: grid; grid-template-columns: minmax(0, .76fr) minmax(0, 1fr); gap: clamp(32px, 3.4vw, 48px); align-items: center;
}
.hero h1 { font-size: clamp(2.7rem, 5.1vw, 4.7rem); line-height: 1.02; }
.hero .nadtytul { margin-bottom: 22px; }
.hero .lead { font-size: 1.17rem; line-height: 1.6; color: var(--grafit-2); max-width: 500px; margin: 26px 0 0; }
.hero-akcje { display: flex; align-items: center; gap: 16px 28px; flex-wrap: wrap; margin-top: 34px; }
.przycisk.duzy { padding: 21px 36px; font-size: 1.1rem; }
.odnosnik-film { display: inline-flex; align-items: center; gap: 12px; font-weight: 500; font-size: .98rem; color: var(--las); text-decoration: none; }
.odnosnik-film .trojkat {
  position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(38, 63, 53, .45); flex: none; transition: background-color .2s, border-color .2s;
}
.odnosnik-film .trojkat::after { content: ""; position: absolute; left: 16px; top: 13px; border-left: 10px solid var(--las); border-top: 6px solid transparent; border-bottom: 6px solid transparent; transition: border-color .2s; }
.odnosnik-film:hover .trojkat { background: var(--las); border-color: var(--las); }
.odnosnik-film:hover .trojkat::after { border-left-color: var(--kosc); }
.hero-cena { margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--kreska); max-width: 500px; }
.cena-wiersz { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin: 0; }
.cena-duza { font-family: var(--szeryf); font-size: 2.3rem; line-height: 1; color: var(--las); white-space: nowrap; }
.cena-opis { font-size: .93rem; color: var(--grafit-2); }

/* Licznik do prawdziwego terminu (zmiana ceny, Mikołajki, Wigilia) */
.oferta { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-top: 12px; font-size: .9rem; color: var(--grafit-2); }
.oferta[hidden], [data-nota-ceny][hidden] { display: none; }
.licznik { display: inline-flex; gap: 12px; }
.licznik:empty { display: none; }
.licznik span { display: inline-flex; align-items: baseline; gap: 4px; font-size: .8rem; color: var(--grafit-2); }
.licznik b { font-weight: 600; font-size: 1rem; color: var(--las); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }

.hero-obraz figcaption { margin-top: 24px; font-size: .8rem; letter-spacing: .04em; color: var(--grafit-2); text-align: right; }
.hero-obraz img { width: 100%; }

.fakty { display: grid; grid-template-columns: repeat(4, 1fr); margin: clamp(40px, 5vw, 68px) 0 0; border-top: 1px solid var(--kreska); border-bottom: 1px solid var(--kreska); }
.fakty div { padding: 24px 28px; border-left: 1px solid var(--kreska); }
.fakty div:first-child { border-left: 0; padding-left: 0; }
.fakty dt { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terakota-ciemna); }
.fakty dd { margin: 6px 0 0; font-family: var(--szeryf); font-size: 1.32rem; line-height: 1.2; color: var(--las); }

/* 2. Personalizacja: trzy duże kadry, każdy w innym układzie */
.rozdzial { display: grid; align-items: center; gap: clamp(36px, 6vw, 96px); }
.rozdzial + .rozdzial { margin-top: clamp(80px, 11vw, 152px); }
.rozdzial-imie { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rozdzial-kula { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding-left: clamp(0px, 4vw, 56px); }
.rozdzial-dedykacja { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); padding-right: clamp(0px, 7vw, 104px); }
.rozdzial-tekst p { color: var(--grafit-2); margin: 18px 0 0; max-width: 460px; }
.numer { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; font-family: var(--szeryf); font-style: italic; font-size: 2.5rem; line-height: 1; color: var(--terakota); }
.numer::after { content: ""; width: 64px; height: 1px; background: var(--szampan); }
.plansza img { width: 100%; }
.plansza figcaption { margin-top: 24px; font-size: .8rem; letter-spacing: .04em; color: var(--grafit-2); }
.plansza-kula img { aspect-ratio: 1; object-fit: cover; transition: opacity .3s ease; }
.cytat { margin: 30px 0 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--szampan); max-width: 440px; }
.cytat p { margin: 0; font-family: var(--szeryf); font-style: italic; font-size: 1.28rem; line-height: 1.4; color: var(--las); }
.cytat b { font-weight: 400; color: var(--terakota); }
.cytat footer { margin-top: 10px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--grafit-2); }
.motywy { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--kreska); max-width: 460px; }
.motywy button {
  border: 0; background: none; padding: 8px 0; cursor: pointer;
  font: 500 .98rem var(--zwykla); color: var(--grafit-2);
  border-bottom: 1px solid transparent; transition: color .15s, border-color .15s;
}
.motywy button:hover { color: var(--las); border-bottom-color: var(--szampan); }
.motywy button[aria-pressed="true"] { color: var(--las); font-weight: 600; border-bottom-color: var(--terakota); }

/* 3. Fragment bajki */
.fragment { background: var(--las); color: var(--kosc); }
.fragment-gora { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 6vw, 96px); align-items: end; margin-bottom: clamp(40px, 5vw, 68px); }
.fragment .nadtytul { color: var(--szampan); }
.fragment .nadtytul::before { opacity: .6; }
.fragment h2 { color: var(--kosc); font-size: clamp(1.95rem, 3.6vw, 3rem); }
.fragment h2 em { color: var(--szampan); }
.fragment-opis p { margin: 0; color: rgba(247, 243, 234, .82); }
.fragment-dane { display: flex; flex-wrap: wrap; gap: 0 clamp(20px, 3vw, 40px); margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(216, 199, 165, .32); }
.fragment-dane dt { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--szampan); }
.fragment-dane dd { margin: 4px 0 0; font-family: var(--szeryf); font-size: 1.2rem; line-height: 1.2; color: var(--kosc); }
.film { position: relative; border-radius: 4px; background: #000; outline: 1px solid rgba(216, 199, 165, .55); outline-offset: 12px; }
.film video { width: 100%; aspect-ratio: 16 / 9; border-radius: 4px; background: #000; object-fit: cover; }
.odtworz {
  position: absolute; inset: 0; width: 100%; border: 0; padding: 0; cursor: pointer; border-radius: 4px;
  background: rgba(27, 47, 39, .2); color: var(--kosc);
  display: grid; place-content: center; justify-items: center; gap: 22px;
  font: 600 .8rem var(--zwykla); letter-spacing: .16em; text-transform: uppercase;
  transition: background-color .25s;
}
.odtworz .kolo { position: relative; width: clamp(80px, 9.5vw, 128px); aspect-ratio: 1; border-radius: 50%; background: var(--kosc); box-shadow: 0 0 0 10px rgba(247, 243, 234, .28); transition: transform .25s, box-shadow .25s; }
.odtworz .kolo::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-36%, -50%); border-left: clamp(18px, 2.2vw, 28px) solid var(--las); border-top: clamp(12px, 1.4vw, 18px) solid transparent; border-bottom: clamp(12px, 1.4vw, 18px) solid transparent; }
.odtworz .napis { background: var(--las); padding: 9px 16px; border-radius: 4px; }
.odtworz:hover { background: rgba(27, 47, 39, .06); }
.odtworz:hover .kolo { transform: scale(1.05); box-shadow: 0 0 0 16px rgba(247, 243, 234, .2); }
.odtworz:focus-visible { outline: 2px solid var(--szampan); outline-offset: 4px; }
.podpis-filmu { margin-top: 30px; font-size: .86rem; letter-spacing: .03em; color: rgba(247, 243, 234, .72); text-align: center; }
.fragment-akcja { display: flex; align-items: center; justify-content: center; gap: 14px 30px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 48px); font-size: .93rem; color: var(--szampan); }

/* 4. Jak to działa: jedna linia z trzema znacznikami, po której idzie Tupek */
.jak { background: var(--szalwia); }
.jak-gora { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.jak-gora .naglowek-sekcji { margin-bottom: clamp(36px, 5vw, 64px); }
.jak-tupek { width: auto; height: clamp(170px, 21vw, 290px); margin: 0 clamp(0px, 3vw, 44px) -8px 0; flex: none; }
.kroki { list-style: none; margin: 0; padding: 0; counter-reset: krok; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(28px, 5vw, 76px); border-top: 1px solid var(--las); }
.krok { counter-increment: krok; position: relative; padding: 46px 0 0; }
.krok::after { content: ""; position: absolute; left: 1px; top: -6px; width: 11px; height: 11px; background: var(--las); transform: rotate(45deg); }
.krok::before { content: counter(krok); display: block; font-family: var(--szeryf); font-style: italic; font-size: clamp(4.2rem, 6.6vw, 6rem); line-height: .86; color: var(--terakota); margin-bottom: 26px; }
.krok-etykieta { display: block; margin-bottom: 10px; font-size: .72rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--terakota-ciemna); }
.krok h3 { font-size: clamp(1.4rem, 2vw, 1.7rem); max-width: 15em; }
.krok p { color: rgba(51, 47, 41, .86); margin: 14px 0 0; max-width: 34ch; }

/* 5. Prezent */
.prezent { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.prezent-obraz img { width: 100%; height: 100%; min-height: 560px; max-height: 860px; object-fit: cover; object-position: 50% 30%; }
.prezent-tekst { align-self: center; max-width: 640px; padding: clamp(56px, 8vw, 112px) clamp(20px, 6vw, 96px); }
.prezent-tekst h2 { font-size: clamp(1.9rem, 3.2vw, 2.7rem); margin-bottom: 26px; }
.prezent-tekst p { color: var(--grafit-2); }
.zalety { list-style: none; margin: 26px 0 36px; padding: 0; border-top: 1px solid var(--kreska); }
.zalety li { padding: 13px 0 13px 26px; border-bottom: 1px solid var(--kreska); position: relative; font-size: .98rem; }
.zalety li::before, .pewniki li::before { content: ""; position: absolute; left: 4px; top: 1.45em; width: 7px; height: 7px; background: var(--szampan); transform: rotate(45deg); }

/* 6. Formularz: kreator prezentu */
.zamowienie { background: var(--szalwia); }
.formularz {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 410px);
  grid-template-areas: "pola podglad" "podsumowanie podglad";
  column-gap: clamp(36px, 5vw, 76px);
  background: var(--kosc-jasna); border: 1px solid var(--szampan); border-radius: 6px;
  padding: clamp(24px, 4.4vw, 64px);
}
.pola { grid-area: pola; }
.podglad { grid-area: podglad; }
.podsumowanie { grid-area: podsumowanie; display: grid; gap: 20px; padding-top: 36px; border-top: 1px solid var(--kreska); }
.legenda-pol { margin: 0; font-size: .84rem; color: var(--grafit-2); }
.gwiazdka { color: var(--terakota-ciemna); font-weight: 600; }
.opcja { margin-left: 6px; font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--grafit-2); }
.grupa { display: grid; grid-template-columns: clamp(52px, 6vw, 84px) minmax(0, 1fr); padding: 0 0 clamp(44px, 5vw, 60px); }
.grupa + .grupa { padding-top: clamp(44px, 5vw, 60px); border-top: 1px solid var(--kreska); }
.grupa-numer { font-family: var(--szeryf); font-style: italic; font-size: clamp(3rem, 4.4vw, 4.2rem); line-height: .8; color: var(--terakota); }
.grupa-tresc { display: grid; gap: 26px; min-width: 0; }
.grupa-tytul { font-size: clamp(1.55rem, 2.3vw, 1.95rem); }
.grupa-opis { margin: 8px 0 0; font-size: .95rem; color: var(--grafit-2); }
.pole { display: grid; gap: 8px; align-content: start; }
.rzad { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
label, legend { font-weight: 600; font-size: .96rem; color: var(--grafit); }
.podpowiedz { font-size: .86rem; color: var(--grafit-2); }
input[type="text"], input[type="email"] {
  width: 100%; min-height: 54px; padding: 14px 16px; border-radius: 6px;
  border: 1px solid rgba(51, 47, 41, .3); background: #fff; color: var(--grafit);
  font: 1.04rem var(--zwykla); transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: rgba(51, 47, 41, .45); }
input[type="text"]:hover, input[type="email"]:hover { border-color: var(--las); }
input[type="text"]:focus, input[type="email"]:focus { border-color: var(--las); outline: none; box-shadow: 0 0 0 3px rgba(38, 63, 53, .16); }
.pole.zle input { border-color: var(--terakota); box-shadow: 0 0 0 3px rgba(166, 94, 73, .14); }
.blad { color: var(--terakota-ciemna); font-size: .88rem; font-weight: 500; }
.blad:empty { display: none; }
.ukryte { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 18px; }
.warianty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.wariant { position: relative; cursor: pointer; font-weight: 400; }
.wariant input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.wariant .kafel {
  display: grid; justify-items: center; align-content: start; gap: 14px; position: relative; height: 100%;
  padding: 20px 10px 16px; border: 1px solid var(--kreska); border-radius: 6px; background: #fff;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.wariant img { width: 100%; max-width: 124px; border-radius: 50%; transition: transform .25s; }
.wariant .nazwa { font-size: .92rem; line-height: 1.25; text-align: center; color: var(--grafit); }
.wariant:hover .kafel { border-color: var(--las); }
.wariant:hover img { transform: scale(1.04); }
.wariant input:checked + .kafel { border-color: var(--las); box-shadow: inset 0 0 0 1px var(--las); background: var(--szalwia); }
.wariant input:checked + .kafel .nazwa { font-weight: 600; color: var(--las); }
.wariant input:checked + .kafel::after {
  content: ""; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--las) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23F7F3EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 24px no-repeat;
}
.wariant input:focus-visible + .kafel { outline: 2px solid var(--terakota); outline-offset: 3px; }
fieldset.zle .kafel { border-color: rgba(166, 94, 73, .55); }
fieldset.zle .blad { display: block; margin-top: 14px; }

.zgoda { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; font-weight: 400; font-size: .9rem; line-height: 1.55; color: rgba(51, 47, 41, .84); cursor: pointer; }
.zgoda input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--las); cursor: pointer; }
.do-zaplaty {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 48px); align-items: center;
  margin-top: 10px; padding: clamp(22px, 3vw, 32px); border-radius: 6px; background: var(--szalwia);
}
.kwota-etykieta { display: block; margin-bottom: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--terakota-ciemna); }
.kwota .cena-duza { font-size: 3.1rem; }
.kwota small { display: block; margin-top: 8px; font-size: .86rem; color: var(--grafit-2); }
.zaplac { display: grid; gap: 12px; }
.zaplac .przycisk { width: 100%; padding: 23px 28px; font-size: 1.14rem; }
.zaplac small { font-size: .84rem; color: var(--grafit-2); text-align: center; text-wrap: balance; }
.podpis-filmu, .final-nota, .kwota small { text-wrap: balance; }
.podsumowanie .oferta { margin-top: 0; }
.pewniki { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 28px; font-size: .86rem; color: var(--grafit-2); }
.pewniki li { position: relative; padding-left: 20px; }
.pewniki li::before { left: 2px; top: .62em; }

/* Karta prezentu: strona z Księgi u góry, odcinek z podsumowaniem na dole */
.podglad { border-left: 1px solid var(--kreska); padding-left: clamp(28px, 4vw, 60px); }
.podglad .przyklejone { position: sticky; top: 100px; }
.podglad-tytul { margin: 0 0 18px; font-size: .74rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--terakota-ciemna); }
.karta { background: var(--kosc); border: 1px solid var(--szampan); border-radius: 4px; text-align: center; }
.karta-gora { position: relative; padding: 42px 28px 36px; }
.karta-gora::before { content: ""; position: absolute; inset: 8px 8px 0; border: 1px solid var(--szampan); border-bottom: 0; border-radius: 2px 2px 0 0; opacity: .7; pointer-events: none; }
.karta-kula { width: 138px; height: 138px; margin: 0 auto 26px; border-radius: 50%; outline: 1px solid var(--szampan); outline-offset: 6px; overflow: hidden; display: grid; place-items: center; background: var(--szalwia); }
.karta-kula img { width: 100%; height: 100%; object-fit: cover; }
.karta-kula img[hidden] { display: none; }
.karta-kula span { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grafit-2); padding: 0 16px; line-height: 1.4; }
.karta-kula:not([data-pusty]) span { display: none; }
.karta .etykieta { font-size: .68rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--terakota-ciemna); margin-bottom: 10px; }
.karta .imie { font-family: var(--szeryf); font-size: 3rem; line-height: 1.05; color: var(--las); overflow-wrap: anywhere; }
.karta .miasto { font-family: var(--szeryf); font-style: italic; font-size: 1.2rem; color: var(--grafit-2); min-height: 1.65em; margin-top: 4px; overflow-wrap: anywhere; }
.ozdobnik { position: relative; width: 124px; height: 9px; margin: 20px auto 22px;
  background: linear-gradient(var(--szampan), var(--szampan)) left center / 46px 1px no-repeat, linear-gradient(var(--szampan), var(--szampan)) right center / 46px 1px no-repeat; }
.ozdobnik::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; background: var(--szampan); transform: translate(-50%, -50%) rotate(45deg); }
.karta .linia { font-family: var(--szeryf); font-style: italic; font-size: 1.36rem; line-height: 1.3; color: var(--las); overflow-wrap: anywhere; }
.karta .linia + .linia { font-family: var(--zwykla); font-style: normal; font-size: .95rem; color: var(--grafit-2); margin-top: 8px; min-height: 1.6em; }
.karta-dol { position: relative; margin: 0; padding: 22px 28px 24px; border-top: 1px dashed var(--szampan); text-align: left; background: var(--kosc-jasna); border-radius: 0 0 4px 4px; }
.karta-dol::before, .karta-dol::after { content: ""; position: absolute; top: -10px; width: 19px; height: 19px; border-radius: 50%; background: var(--kosc-jasna); border: 1px solid var(--szampan); }
.karta-dol::before { left: -10px; clip-path: inset(0 0 0 50%); }
.karta-dol::after { right: -10px; clip-path: inset(0 50% 0 0); }
.karta-dol div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 7px 0; }
.karta-dol dt { font-size: .82rem; color: var(--grafit-2); }
.karta-dol dd { margin: 0; font-size: .9rem; font-weight: 500; color: var(--grafit); text-align: right; }
.karta-dol .karta-cena { margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--kreska); }
.karta-dol .karta-cena dt { font-size: .7rem; font-weight: 600; letter-spacing: .17em; text-transform: uppercase; color: var(--terakota-ciemna); }
.karta-dol .karta-cena dd { font-family: var(--szeryf); font-weight: 400; font-size: 1.9rem; line-height: 1; color: var(--las); }
.podglad .uwaga { margin: 18px 0 0; font-size: .86rem; color: var(--grafit-2); }

/* 7. Pytania */
.faq > .srodek, .metryczka > .srodek { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 7vw, 104px); align-items: start; }
.faq-bok { position: sticky; top: 108px; }
.faq-bok .wstep { color: rgba(51, 47, 41, .84); }
.faq-okruszek { height: 210px; width: auto; margin-top: 36px; }
.pytania { border-bottom: 1px solid rgba(51, 47, 41, .24); }
details { border-top: 1px solid rgba(51, 47, 41, .24); }
summary { cursor: pointer; list-style: none; position: relative; padding: 27px 60px 27px 0; font-weight: 600; font-size: 1.14rem; line-height: 1.4; color: var(--las); transition: color .15s; }
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 10px; top: 50%; width: 17px; height: 2px; background: var(--las); transition: transform .25s, background-color .15s; }
summary::after { transform: rotate(90deg); }
details[open] summary::after { transform: rotate(0deg); }
details[open] summary { padding-bottom: 16px; }
summary:hover { color: var(--terakota-ciemna); }
summary:hover::before, summary:hover::after { background: var(--terakota); }
details p { color: rgba(51, 47, 41, .88); font-size: 1.02rem; line-height: 1.7; max-width: 60ch; margin: 0 0 30px; padding-right: 40px; }

/* W skrócie: metryczka jak w stopce redakcyjnej książki */
.metryczka { padding-top: 0; }
.metryczka > .srodek { border-top: 0; }
.metryczka h2 { font-size: clamp(1.5rem, 2.3vw, 1.9rem); line-height: 1.2; }
.metryczka dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 56px); }
.metryczka dl div { padding: 20px 0 22px; border-top: 1px solid var(--kreska); }
.metryczka dt { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--terakota-ciemna); }
.metryczka dd { margin: 8px 0 0; font-size: .96rem; color: var(--grafit-2); }

/* 8. Zakończenie: ilustracja przyciemniona zielenią marki, tekst na pełnym tle */
.final { padding: 0 0 clamp(72px, 9vw, 120px); background: var(--las); color: var(--kosc); text-align: center; }
.final-obraz { position: relative; background: var(--las); }
.final-obraz img { width: 100%; height: clamp(300px, 46vw, 640px); object-fit: cover; object-position: 50% 26%; filter: saturate(.8); }
.final-obraz::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--las); mix-blend-mode: soft-light; opacity: .9; }
.final-obraz::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(38, 63, 53, .22) 0%, rgba(38, 63, 53, .16) 34%, rgba(38, 63, 53, .78) 72%, var(--las) 96%); }
.final .srodek { position: relative; z-index: 3; margin-top: clamp(-120px, -8vw, -48px); }
.final h2 { color: var(--kosc); max-width: 820px; margin: 0 auto 38px; font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
.final h2 em { color: var(--szampan); }
.final-nota { margin: 22px 0 0; font-size: .9rem; letter-spacing: .03em; color: var(--szampan); }

/* Stopka */
.stopka { background: var(--las); color: rgba(247, 243, 234, .78); font-size: .9rem; padding: 0 0 44px; }
.stopka .srodek { display: grid; grid-template-columns: 1fr auto; gap: 18px 40px; align-items: center; }
.stopka .srodek::before { content: ""; grid-column: 1 / -1; height: 1px; background: rgba(216, 199, 165, .32); margin-bottom: 24px; }
.stopka .logo { color: var(--kosc); }
.stopka .logo span { color: var(--szampan); }
.stopka .logo img { height: 48px; }
.stopka-marka p { margin: 8px 0 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.stopka nav { display: flex; gap: 12px 30px; flex-wrap: wrap; }
.stopka a { color: var(--kosc); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
.stopka nav a:hover { border-bottom-color: var(--szampan); }
.stopka-nota { grid-column: 1 / -1; margin: 10px 0 0; font-size: .8rem; color: rgba(247, 243, 234, .6); }

/* Pasek z przyciskiem na telefonie (pokazuje go skrypt.js) */
.dolny-pasek { display: none; }

/* Strony tekstowe (regulamin itd.) i komunikaty z zamow.php */
.tekstowa { max-width: 800px; padding-top: clamp(40px, 7vw, 80px); padding-bottom: clamp(64px, 9vw, 112px); }
.tekstowa h1 { font-size: clamp(2rem, 4.4vw, 3rem); margin-bottom: .55em; }
.tekstowa h2 { font-size: 1.5rem; margin: 2em 0 .6em; padding-top: 1.1em; border-top: 1px solid var(--kreska); }
.tekstowa li { margin-bottom: .55em; }
.tekstowa ol, .tekstowa ul { padding-left: 1.3em; }
.tekstowa li::marker { color: var(--terakota-ciemna); }
.tekstowa form { padding: 0; margin: 0 0 1em; }
.do-uzupelnienia { background: var(--terakota); color: #fff; padding: 1px 6px; border-radius: 3px; font-weight: 600; }
.ramka { position: relative; background: var(--kosc-jasna); border: 1px solid var(--szampan); border-radius: 4px; padding: clamp(28px, 5vw, 56px); }
.ramka p:last-child { margin: 1.6em 0 0; }

/* Wejście sekcji przy przewijaniu (tylko gdy działa skrypt) */
.js .pokaz { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.js .pokaz.widac { opacity: 1; transform: none; }
.js .krok.pokaz:nth-child(2) { transition-delay: .12s; }
.js .krok.pokaz:nth-child(3) { transition-delay: .24s; }

/* Tablet */
@media (max-width: 1080px) {
  .formularz { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .rzad { grid-template-columns: 1fr; }
  .do-zaplaty { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .menu { display: none; }
  /* Ilustracja wchodzi zaraz pod nagłówek, przycisk zostaje na pierwszym ekranie */
  .hero-uklad { grid-template-columns: 1fr; gap: 0; }
  .hero-tekst { display: contents; }
  .hero-tekst .nadtytul { order: 1; }
  .hero-tekst h1 { order: 2; }
  .hero-obraz { order: 3; margin-top: 30px; }
  .hero .lead { order: 4; max-width: 620px; margin-top: 34px; }
  .hero-akcje { order: 5; }
  .hero-cena { order: 6; max-width: none; }
  .hero h1 { font-size: clamp(2.5rem, 8vw, 4.2rem); }
  .fakty { grid-template-columns: 1fr 1fr; }
  .fakty div { padding: 20px 0 20px 24px; }
  .fakty div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .fakty div:nth-child(n+3) { border-top: 1px solid var(--kreska); }
  .rozdzial-imie, .rozdzial-kula, .rozdzial-dedykacja { grid-template-columns: 1fr; padding: 0; gap: 34px; }
  .rozdzial-kula .plansza { order: -1; }
  .plansza-kula img { aspect-ratio: 3 / 2; }
  .rozdzial-tekst p, .cytat, .motywy { max-width: 620px; }
  .fragment-gora { grid-template-columns: 1fr; align-items: start; }
  .prezent { grid-template-columns: 1fr; }
  .prezent-obraz img { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  .prezent-tekst { max-width: none; }
  .formularz { grid-template-columns: 1fr; grid-template-areas: "pola" "podglad" "podsumowanie"; }
  .rzad { grid-template-columns: 1fr 1fr; }
  .do-zaplaty { grid-template-columns: auto minmax(0, 1fr); }
  .podglad { border-left: 0; padding: 44px 0 48px; border-top: 1px solid var(--kreska); }
  .podglad .przyklejone { position: static; max-width: 430px; margin: 0 auto; }
  .faq > .srodek, .metryczka > .srodek { grid-template-columns: 1fr; }
  .faq-bok { position: static; }
  .faq-okruszek { display: none; }
}

/* Telefon: ilustracje i film na całą szerokość ekranu, formularz bez podwójnych marginesów */
@media (max-width: 760px) {
  :root { --margines: 20px; }
  body { font-size: 16.5px; }
  html { scroll-padding-top: 72px; }
  section { padding: 68px 0; }
  .pasek .srodek { min-height: 58px; }
  .logo { font-size: 1.55rem; }
  .logo img { height: 38px; }
  h2 { font-size: clamp(1.95rem, 8vw, 2.5rem); }

  .hero { padding-top: 26px; }
  .hero h1 { font-size: clamp(2.5rem, 11.4vw, 3.3rem); }
  .hero .nadtytul { margin-bottom: 14px; }
  .hero-obraz, .rozdzial .plansza, .kino { margin-left: calc(-1 * var(--margines)); margin-right: calc(-1 * var(--margines)); }
  .hero-obraz img, .plansza img, .film, .film video, .odtworz { border-radius: 0; outline: 0; }
  .hero-obraz { margin-top: 24px; }
  .hero-obraz figcaption, .lead-dalej { display: none; }
  .hero .lead { margin-top: 26px; font-size: 1.08rem; }
  .hero-akcje { margin-top: 24px; gap: 18px; }
  .przycisk.duzy { padding: 20px 16px; font-size: 1.03rem; }
  .hero-akcje .przycisk { width: 100%; }
  .hero-cena { margin-top: 28px; }
  .fakty { margin-top: 44px; }
  .fakty dd { font-size: 1.2rem; }

  .rozdzial + .rozdzial { margin-top: 76px; }
  .rozdzial-imie, .rozdzial-kula, .rozdzial-dedykacja { gap: 0; }
  .plansza figcaption { margin: 12px var(--margines) 0; font-size: .78rem; }
  .rozdzial-tekst { margin-top: 30px; }
  .numer { font-size: 2.2rem; margin-bottom: 14px; }
  .plansza-kula img { aspect-ratio: 5 / 4; }
  .motywy { gap: 2px 20px; }
  .motywy button { padding: 10px 0; font-size: 1rem; }

  .fragment h2 { font-size: clamp(1.85rem, 7.6vw, 2.4rem); }
  .fragment-dane { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 0 14px; }
  .fragment-dane dd { font-size: 1.05rem; }
  .fragment-dane dt { font-size: .64rem; letter-spacing: .13em; }
  .odtworz { gap: 14px; }
  .odtworz .kolo { width: 76px; box-shadow: 0 0 0 8px rgba(247, 243, 234, .28); }
  .odtworz .napis { font-size: .7rem; padding: 7px 12px; }
  .podpis-filmu { margin: 16px var(--margines) 0; }
  .fragment-akcja { flex-direction: column; }
  .fragment-akcja .przycisk { width: 100%; }

  /* Trzy kroki jako pionowa ścieżka */
  .jak-gora .naglowek-sekcji { margin-bottom: 36px; }
  .jak-tupek { height: 132px; margin: 0 0 -6px; }
  .kroki { grid-template-columns: 1fr; border-top: 1px solid var(--las); border-left: 1px solid var(--las); border-top: 0; margin-left: 6px; padding: 8px 0 0 30px; }
  .jak-gora { border-bottom: 1px solid var(--las); margin-bottom: 0; }
  .krok { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; align-items: end; padding: 30px 0 0; }
  .krok::after { left: -36px; top: 52px; }
  .krok::before { grid-row: 1; font-size: 4rem; margin: 0; }
  .krok-etykieta { grid-row: 1; grid-column: 2; margin: 0 0 8px; }
  .krok h3, .krok p { grid-column: 1 / -1; }
  .krok h3 { margin-top: 16px; font-size: 1.45rem; }
  .krok p { margin-top: 10px; max-width: none; }

  /* Formularz na pełną szerokość ekranu */
  .formularz { margin: 0 calc(-1 * var(--margines)); border-left: 0; border-right: 0; border-radius: 0; padding: 40px var(--margines) 44px; }
  .grupa { grid-template-columns: 1fr; padding-bottom: 44px; }
  .grupa + .grupa { padding-top: 40px; }
  .grupa-numer { font-size: 3.2rem; margin-bottom: 16px; }
  .grupa-tresc { gap: 22px; }
  .grupa-tytul { font-size: 1.6rem; }
  .rzad { grid-template-columns: 1fr; gap: 22px; }
  input[type="text"], input[type="email"] { min-height: 56px; }
  .warianty { grid-template-columns: 1fr 1fr; gap: 12px; }
  .wariant .kafel { padding: 18px 8px 14px; gap: 12px; }
  .wariant img { max-width: 108px; }
  .wariant .nazwa { font-size: .95rem; }
  .podglad { padding: 40px 0 44px; }
  .do-zaplaty { grid-template-columns: 1fr; padding: 24px 20px; gap: 20px; }
  .kwota { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 14px; }
  .kwota-etykieta { grid-column: 1 / -1; }
  .kwota small { margin: 0; }
  .zaplac .przycisk { padding: 22px 18px; }
  .pewniki { display: grid; gap: 8px; }

  .metryczka dl { grid-template-columns: 1fr; }
  summary { font-size: 1.08rem; padding: 22px 46px 22px 0; }
  summary::before, summary::after { right: 6px; }
  details p { padding-right: 0; font-size: 1rem; }

  .final-obraz img { height: 78vw; max-height: 420px; object-position: 50% 20%; }
  .final .srodek { margin-top: -56px; }
  .final h2 { font-size: clamp(2rem, 8.6vw, 2.6rem); margin-bottom: 30px; }
  .final .przycisk { width: 100%; }
  .stopka .srodek { grid-template-columns: 1fr; }
  .stopka { padding-bottom: 96px; }

  .dolny-pasek {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px var(--margines) calc(10px + env(safe-area-inset-bottom));
    background: var(--kosc); border-top: 1px solid var(--szampan);
    transition: transform .3s ease;
  }
  .dolny-pasek[hidden] { display: flex; transform: translateY(110%); visibility: hidden; transition: transform .3s ease, visibility 0s .3s; }
  .dolny-cena { font-size: .8rem; line-height: 1.3; color: var(--grafit-2); }
  .dolny-cena b { display: block; font-family: var(--szeryf); font-weight: 400; font-size: 1.3rem; color: var(--las); }
  .dolny-pasek .przycisk { padding: 13px 22px; flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .js .pokaz { opacity: 1; transform: none; }
}