@import url("/fonts/fonts.css");

/* =========================================================================
   amor50 - strona publiczna
   Projektowane od telefonu w gore. Odbiorca ma 50+ lat, wiec:
   - tekst bazowy 18-19 px zamiast typowych 16,
   - przyciski i pola minimum 56 px wysokosci (pewne trafienie palcem),
   - kontrast tekstu wyzsze niz minimum WCAG AA,
   - zadnych cienkich, szarych napisow i zadnych efektow przy najechaniu,
     ktore chowaja tresc.
   ========================================================================= */

:root {
  --wino:          #6b1b2e;
  --wino-glebokie: #4a1220;
  --wino-jasne:    #8b2740;
  --zloto:         #b8942f;
  --zloto-ciemne:  #8a6a1f;
  --zloto-jasne:   #d9b768;
  --zloto-blask:   #e8ce8b;
  --krem:          #fbf6ee;
  --krem-cien:     #f3e9d9;
  --piasek:        #e6d9c0;
  --atrament:      #2a211c;
  --atrament-mkk:  #55493f;
  --biel:          #ffffff;

  --cien-mala:  0 1px 3px rgba(74, 18, 32, .07);
  --cien-karta: 0 4px 18px rgba(74, 18, 32, .09);
  --cien-duza:  0 10px 34px rgba(74, 18, 32, .14);

  --promien:      14px;
  --promien-duzy: 22px;

  --szeryf: "Playfair Display", Georgia, "Times New Roman", serif;
  --bezszeryf: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --pismo: "Dancing Script", "Segoe Script", cursive;

  --tresc: 1140px;
  --tresc-waska: 760px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--bezszeryf);
  font-size: 1.125rem;          /* 18 px */
  line-height: 1.72;
  color: var(--atrament-mkk);
  background: var(--krem);
  overflow-x: hidden;
}

@media (min-width: 900px) {
  body { font-size: 1.1875rem; }  /* 19 px */
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--szeryf);
  color: var(--wino-glebokie);
  font-weight: 600;
  line-height: 1.22;
  margin: 0 0 .6em;
  letter-spacing: -.005em;
}

h1 { font-size: clamp(2.4rem, 9vw, 4.2rem); font-weight: 400; }
h2 { font-size: clamp(1.75rem, 5.4vw, 2.6rem); font-weight: 400; }
h3 { font-size: clamp(1.25rem, 3.4vw, 1.6rem); }
h4 { font-size: 1.15rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--zloto-ciemne); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--wino); }

:focus-visible {
  outline: 3px solid var(--wino);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- pomocnicze ---------------------------------------------------------- */

.srodek { width: 100%; max-width: var(--tresc); margin-inline: auto; padding-inline: 20px; }
.srodek--waski { max-width: var(--tresc-waska); }

.tylko-dla-czytnika {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.pomin-do-tresci {
  position: absolute; left: 12px; top: -70px; z-index: 200;
  background: var(--wino); color: var(--krem);
  padding: 14px 22px; border-radius: 0 0 10px 10px;
  font-weight: 700; text-decoration: none;
  transition: top .18s;
}
.pomin-do-tresci:focus { top: 0; color: var(--krem); }

.pismo { font-family: var(--pismo); font-weight: 600; }

/* --- naglowek strony ----------------------------------------------------- */

.gora {
  background: var(--krem);
  border-bottom: 1px solid var(--piasek);
  position: sticky; top: 0; z-index: 60;
  box-shadow: var(--cien-mala);
}

.gora__pas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 12px;
}

.znak { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.znak__godlo { width: 42px; height: 42px; flex: none; }
.znak__tekst { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.znak__nazwa {
  /* Nazwa „Od Serca do Serca” jest dluzsza niz dawna „amor50”, wiec na waskim
     ekranie pozwalamy jej lamac sie na dwie linijki (po spacji), zamiast
     spychac hamburger albo wychodzic poza ekran. Rozmiar skaluje sie z szerokoscia. */
  font-family: var(--szeryf); color: var(--wino);
  font-size: clamp(1.3rem, 5.4vw, 1.65rem); line-height: 1.06;
  letter-spacing: .01em;
}
.znak__podpis {
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--zloto-ciemne); font-weight: 700; padding-top: 2px;
}

/* --- przycisk menu na telefonie -----------------------------------------
   Pokazuje go dopiero skrypt (klasa .js-menu na naglowku). Bez JavaScriptu
   menu zostaje rozwiniete i wszystko dziala jak dotad.
   Sam symbol trzech kresek bywa nierozpoznawany przez osoby, ktore nie
   wychowaly sie na aplikacjach - dlatego obok jest slowo "Menu". */
.menu__przycisk {
  display: none;
  align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 18px;
  background: var(--krem-cien); border: 2px solid var(--piasek);
  border-radius: 999px; cursor: pointer;
  font-family: inherit; font-size: 1.02rem; font-weight: 700;
  color: var(--wino-glebokie);
}
.menu__przycisk:hover { border-color: var(--wino); color: var(--wino); }

.menu__kreski { display: inline-flex; flex-direction: column; gap: 5px; width: 24px; }
.menu__kreski span {
  display: block; height: 3px; border-radius: 2px; background: currentColor;
  transition: transform .2s ease, opacity .15s ease;
}

/* Przy otwartym menu trzy kreski zamieniaja sie w krzyzyk. */
.gora.otwarte .menu__kreski span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.gora.otwarte .menu__kreski span:nth-child(2) { opacity: 0; }
.gora.otwarte .menu__kreski span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 899px) {
  .gora.js-menu .menu__przycisk { display: inline-flex; }
  .gora.js-menu .menu { display: none; }
  .gora.js-menu.otwarte .menu { display: block; }
  .gora.js-menu .menu__lista { flex-direction: column; padding-block: 6px 12px; }
  .gora.js-menu .menu__link {
    padding: 15px 16px; font-size: 1.08rem;
    border-bottom: 1px solid var(--krem-cien); border-radius: 0;
  }
  .gora.js-menu .menu__lista li:last-child .menu__link { border-bottom: 0; }
}

.menu { border-top: 1px solid var(--piasek); }
.menu__lista {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px;
}
.menu__link {
  display: block; padding: 13px 14px;
  font-size: 1.03rem; font-weight: 700; color: var(--wino-glebokie);
  text-decoration: none; border-radius: 9px;
  border-bottom: 3px solid transparent;
}
.menu__link:hover { background: var(--krem-cien); color: var(--wino); }
.menu__link[aria-current="page"] { color: var(--wino); border-bottom-color: var(--zloto); }

@media (min-width: 900px) {
  .gora__pas { padding-block: 16px; }
  .menu { border-top: 0; }
  .gora__wnetrze { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
  .menu__lista { justify-content: flex-end; }
  .znak__godlo { width: 50px; height: 50px; }
  .znak__nazwa { font-size: 2rem; }
}

/* --- przyciski ----------------------------------------------------------- */

.przycisk {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 58px; padding: 15px 30px;
  font-family: var(--bezszeryf); font-size: 1.13rem; font-weight: 700;
  letter-spacing: .01em; text-align: center; text-decoration: none;
  border: 2px solid transparent; border-radius: 999px; cursor: pointer;
  transition: transform .14s ease, box-shadow .18s ease, background-color .18s ease;
}
.przycisk:active { transform: translateY(1px); }

.przycisk--glowny {
  background: linear-gradient(160deg, var(--wino-jasne), var(--wino) 55%, var(--wino-glebokie));
  color: #fdf4e3;
  box-shadow: var(--cien-karta);
}
.przycisk--glowny:hover { color: #fff; box-shadow: var(--cien-duza); }

.przycisk--zloty {
  background: linear-gradient(160deg, #e2c273, var(--zloto) 60%, #a8842a);
  color: #35240b; box-shadow: var(--cien-karta);
}
.przycisk--zloty:hover { color: #241706; box-shadow: var(--cien-duza); }

.przycisk--obrys {
  background: transparent; border-color: var(--wino); color: var(--wino);
}
.przycisk--obrys:hover { background: var(--wino); color: var(--krem); }

.przycisk--jasny { background: var(--krem); color: var(--wino-glebokie); }
.przycisk--jasny:hover { background: #fff; color: var(--wino); }

.przycisk--szeroki { width: 100%; }
@media (min-width: 620px) { .przycisk--szeroki { width: auto; } }

.przycisk--wielki { min-height: 66px; font-size: 1.22rem; padding-inline: 38px; }

/* --- naglowek glowny (hero) ---------------------------------------------- */

.hero { position: relative; background: var(--wino-glebokie); overflow: hidden; }

.hero__tlo {
  position: absolute; inset: 0;
  background-size: cover;
  /* Na telefonie widac tylko okolo 29% szerokosci zdjecia (375 px z 1303 px
     po przeskalowaniu), wiec o tym, co zostanie w kadrze, decyduje ta jedna
     wartosc. Srodek sprawdza sie najlepiej i jest najbezpieczniejszy przy
     podmianie zdjecia - fotografowie zwykle ustawiaja glowny motyw centralnie.
     Pion na 45%, zeby nie ucinac nieba nad naglowkiem. */
  background-position: center 45%;
}
.hero__zaslona {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(38,8,16,.72) 0%, rgba(58,13,26,.46) 42%, rgba(74,18,32,.80) 100%),
    radial-gradient(120% 90% at 18% 22%, rgba(74,18,32,.86) 0%, rgba(74,18,32,.10) 62%);
}

.hero__tresc {
  position: relative; z-index: 2;
  padding-block: 62px 78px; text-align: center; color: #fdf6e8;
}

.plakietka {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(251,246,238,.13);
  border: 1px solid rgba(232,206,139,.55);
  color: var(--zloto-blask);
  padding: 10px 22px; border-radius: 999px;
  font-size: .93rem; font-weight: 700; letter-spacing: .04em;
  backdrop-filter: blur(3px);
  margin: 0 0 26px;
}

.hero h1 {
  color: #fdf6e8; margin-bottom: .12em;
  text-shadow: 0 2px 18px rgba(28,5,12,.5);
}
.hero__pismo {
  font-family: var(--pismo); font-weight: 600;
  font-size: clamp(1.7rem, 6.4vw, 2.9rem);
  color: var(--zloto-blask); line-height: 1.25;
  margin: 0 0 24px; text-shadow: 0 2px 14px rgba(28,5,12,.45);
}
.hero__lead {
  font-size: clamp(1.1rem, 3.4vw, 1.35rem); line-height: 1.62;
  max-width: 34ch; margin: 0 auto 34px; color: #f7ead6;
}
.hero__lead strong { color: var(--zloto-blask); font-weight: 700; }
.hero__notka { margin-top: 16px; font-size: .96rem; color: rgba(247,234,214,.82); }

@media (min-width: 900px) {
  .hero__tresc { padding-block: 96px 116px; }
  .hero__lead { max-width: 46ch; }
}

/* ozdobny przedzialacz z serduszkiem */
.ozdoba {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  color: var(--zloto); margin: 26px auto; max-width: 320px;
}
.ozdoba::before, .ozdoba::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
}
.ozdoba::after { background: linear-gradient(90deg, currentColor, transparent); }
.ozdoba svg { flex: none; }
.ozdoba--jasna { color: var(--zloto-blask); }

/* falista krawedz pod naglowkiem */
.fala { display: block; width: 100%; height: 46px; position: relative; z-index: 3; margin-top: -1px; }
.fala path { fill: var(--krem); }

/* --- sekcje -------------------------------------------------------------- */

.sekcja { padding-block: 56px; }
.sekcja--krem  { background: var(--krem); }
.sekcja--cien  { background: var(--krem-cien); }
.sekcja--biala { background: var(--biel); }
@media (min-width: 900px) { .sekcja { padding-block: 84px; } }

.sekcja__glowa { text-align: center; max-width: 62ch; margin: 0 auto 40px; }
.sekcja__glowa p { font-size: 1.1rem; }
.nadtytul {
  display: block; font-size: .82rem; font-weight: 700;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--zloto-ciemne); margin-bottom: 12px;
}

/* --- motto dnia ---------------------------------------------------------- */

.motto {
  background: linear-gradient(150deg, var(--wino) 0%, var(--wino-glebokie) 100%);
  color: #fbf1de; position: relative; overflow: hidden;
}
.motto::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 88% 8%, rgba(232,206,139,.16), transparent 60%);
}
.motto__wnetrze { position: relative; text-align: center; padding-block: 52px; }
.motto__cudzyslow { color: var(--zloto-blask); opacity: .85; margin-bottom: 12px; }
.motto__nadtytul {
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--zloto-blask); font-weight: 700; margin-bottom: 20px;
}
.motto__tekst {
  font-family: var(--szeryf); font-weight: 400;
  font-size: clamp(1.45rem, 5.2vw, 2.25rem); line-height: 1.45;
  max-width: 26ch; margin: 0 auto; color: #fdf6e8;
}
@media (min-width: 900px) { .motto__tekst { max-width: 34ch; } }
.motto__data { margin-top: 22px; font-size: .95rem; color: rgba(251,241,222,.76); }

/* --- uklad dwukolumnowy -------------------------------------------------- */

.duet { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) {
  .duet { grid-template-columns: 1.05fr .95fr; gap: 56px; }
  .duet--odwrocony > :first-child { order: 2; }
}
.duet__obraz {
  border-radius: var(--promien-duzy); overflow: hidden;
  box-shadow: var(--cien-duza); border: 1px solid var(--piasek);
}
/* 16/10 zamiast 4/3: zdjecia przychodza w proporcji zblizonej do 16/9,
   wiec wezszy kadr obcinalby im boki razem z brzegami sylwetek. */
.duet__obraz img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.cytat-wyrozniony {
  font-family: var(--szeryf); font-size: clamp(1.2rem, 3.6vw, 1.5rem);
  line-height: 1.5; color: var(--wino);
  border-left: 4px solid var(--zloto); padding: 6px 0 6px 20px;
  margin: 26px 0 0;
}

/* --- kafelki z atutami --------------------------------------------------- */

.atuty { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .atuty { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (min-width: 1000px) { .atuty { grid-template-columns: repeat(4, 1fr); } }

.atut {
  background: var(--biel); border: 1px solid var(--piasek);
  border-radius: var(--promien); padding: 30px 22px; text-align: center;
  box-shadow: var(--cien-mala);
  display: flex; flex-direction: column; align-items: center;
}
.atut__ikona {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(155deg, #fdf8ee, var(--krem-cien));
  border: 1px solid var(--piasek); color: var(--zloto-ciemne);
}
.atut__ikona svg { width: 34px; height: 34px; }
.atut h3 { font-size: 1.22rem; margin-bottom: .45em; }
.atut p { font-size: 1rem; line-height: 1.62; }

/* --- miejsca spotkan ----------------------------------------------------- */

.miejsca { display: grid; gap: 26px; }
@media (min-width: 860px) { .miejsca { grid-template-columns: repeat(2, 1fr); } }

.miejsce {
  background: var(--biel); border: 1px solid var(--piasek);
  border-radius: var(--promien-duzy); overflow: hidden;
  box-shadow: var(--cien-karta); display: flex; flex-direction: column;
}
.miejsce__obraz { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.miejsce__tresc { padding: 26px 24px 30px; }
.miejsce__nazwa {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--szeryf); font-size: 1.4rem; color: var(--wino);
  margin-bottom: .5em;
}
.miejsce__nazwa svg { color: var(--zloto); flex: none; }

/* --- cennik -------------------------------------------------------------- */

.pakiety { display: grid; gap: 24px; align-items: start; }
@media (min-width: 900px) { .pakiety { grid-template-columns: repeat(3, 1fr); } }

.pakiet {
  background: var(--biel); border: 1px solid var(--piasek);
  border-radius: var(--promien-duzy); padding: 32px 26px;
  box-shadow: var(--cien-karta); display: flex; flex-direction: column;
  position: relative;
}
.pakiet--wyrozniony {
  border: 2px solid var(--zloto);
  box-shadow: 0 12px 38px rgba(74, 18, 32, .17);
}
@media (min-width: 900px) { .pakiet--wyrozniony { transform: translateY(-12px); } }

.pakiet__wstega {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(160deg, #e2c273, var(--zloto) 60%, #a8842a);
  color: #35240b; font-size: .8rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 7px 20px; border-radius: 999px; white-space: nowrap;
  box-shadow: var(--cien-mala);
}
.pakiet__nazwa { font-size: 1.4rem; margin-bottom: .3em; }
.pakiet__ceny { margin: 16px 0 6px; }
.pakiet__cena {
  font-family: var(--szeryf); font-size: 2.5rem; color: var(--wino);
  line-height: 1.05; display: block;
}
.pakiet__cena-druga {
  font-family: var(--szeryf); font-size: 1.5rem; color: var(--zloto-ciemne);
  display: block; margin-top: 4px;
}
.pakiet__okres { font-size: .96rem; color: var(--atrament-mkk); margin-bottom: 18px; }
.pakiet__opis { font-size: 1rem; margin-bottom: 18px; }
.pakiet__lista { list-style: none; margin: 0 0 26px; padding: 0; }
.pakiet__lista li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 8px 0; font-size: 1rem; line-height: 1.55;
  border-bottom: 1px solid var(--krem-cien);
}
.pakiet__lista li:last-child { border-bottom: 0; }
.pakiet__lista svg { flex: none; width: 21px; height: 21px; color: var(--zloto); margin-top: 3px; }
.pakiet__stopka { margin-top: auto; }

/* --- porady -------------------------------------------------------------- */

.porady { display: grid; gap: 24px; }
@media (min-width: 760px)  { .porady { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .porady { grid-template-columns: repeat(3, 1fr); } }

.porada {
  background: var(--biel); border: 1px solid var(--piasek);
  border-radius: var(--promien); box-shadow: var(--cien-mala);
  display: flex; flex-direction: column; overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.porada:hover { box-shadow: var(--cien-duza); transform: translateY(-3px); }
.porada__obraz { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.porada__pasek { height: 6px; background: linear-gradient(90deg, var(--zloto), var(--wino)); }
.porada__tresc { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
.porada__tytul { font-size: 1.25rem; margin-bottom: .5em; }
.porada__tytul a { color: var(--wino-glebokie); text-decoration: none; }
.porada__tytul a:hover { color: var(--wino); text-decoration: underline; }
.porada__zajawka { font-size: 1rem; flex: 1; margin-bottom: 18px; }
.porada__wiecej {
  font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
}
.porada__wiecej::after { content: "→"; font-size: 1.15em; }

/* --- formularz ----------------------------------------------------------- */

.wniosek { background: var(--krem-cien); }

.rozwijak { max-width: 860px; margin-inline: auto; }
.rozwijak > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 68px; padding: 18px 34px;
  background: linear-gradient(160deg, var(--wino-jasne), var(--wino) 55%, var(--wino-glebokie));
  color: #fdf4e3; font-size: 1.24rem; font-weight: 700;
  border-radius: 999px; box-shadow: var(--cien-karta);
  text-align: center; transition: box-shadow .18s ease;
}
.rozwijak > summary::-webkit-details-marker { display: none; }
.rozwijak > summary:hover { box-shadow: var(--cien-duza); }
.rozwijak > summary .strzalka { transition: transform .2s ease; }
.rozwijak[open] > summary .strzalka { transform: rotate(180deg); }
.rozwijak[open] > summary { border-radius: var(--promien-duzy) var(--promien-duzy) 0 0; }

.formularz {
  background: var(--biel); border: 1px solid var(--piasek); border-top: 0;
  border-radius: 0 0 var(--promien-duzy) var(--promien-duzy);
  padding: 30px 20px 34px; box-shadow: var(--cien-karta);
}
@media (min-width: 700px) { .formularz { padding: 40px 38px 44px; } }

/* --- ankieta: siedem zwijanych czesci ------------------------------------
   Pytan jest kilkadziesiat. Jedna dluga strona odstraszalaby juz na wejsciu,
   zwlaszcza na telefonie - dlatego kazda czesc otwiera sie osobno, a widac
   od razu, ile ich jest i na ktorej sie stoi. */

/* Nad ankieta stoja dwie rozne rzeczy i musza wygladac na dwie rozne rzeczy:
   obietnica dotyczaca danych (chlodna, z klodka) i instrukcja obslugi
   formularza (cieplejsza, z naglowkiem). Wczesniej mialy identyczny styl
   i czytalo sie je jak jeden dlugi akapit. */

.ankieta__wstep {
  background: linear-gradient(180deg, #fdf8ee, var(--krem));
  border: 2px solid var(--zloto-jasne); border-radius: var(--promien);
  padding: 18px 20px 20px; font-size: 1rem; margin-bottom: 26px;
}
.ankieta__wstep p { margin: 0 0 10px; }
.ankieta__wstep p:last-child { margin-bottom: 0; }
.ankieta__wstep-tytul {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--szeryf); font-size: 1.16rem; color: var(--wino-glebokie);
  margin-bottom: 12px !important;
}
.ankieta__wstep-tytul svg { color: var(--zloto-ciemne); flex: none; }
.ankieta__wstep-liczba { color: var(--atrament); }

.czesc {
  border: 2px solid var(--piasek); border-radius: var(--promien);
  margin-bottom: 14px; background: #fffdf9; overflow: hidden;
}
.czesc[open] { border-color: var(--zloto-jasne); box-shadow: var(--cien-mala); }

.czesc__glowa {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; min-height: 64px;
  background: var(--krem-cien);
  font-weight: 700; color: var(--wino-glebokie);
}
.czesc__glowa::-webkit-details-marker { display: none; }
.czesc__glowa:hover { background: var(--piasek); }
.czesc[open] .czesc__glowa { background: var(--krem-cien); border-bottom: 1px solid var(--piasek); }
.czesc[open] .czesc__glowa .strzalka { transform: rotate(180deg); }
.czesc__glowa .strzalka { margin-left: auto; transition: transform .2s ease; }

.czesc__numer {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--wino); color: #fdf4e3;
  font-family: var(--szeryf); font-size: 1.05rem;
}
.czesc__tytul { font-size: 1.1rem; }
.czesc__uwaga {
  background: #fdecea; color: #a01d16; border: 1px solid #f3b7b2;
  border-radius: 999px; padding: 3px 12px; font-size: .82rem; white-space: nowrap;
}

.czesc__tresc { padding: 22px 18px 26px; }
@media (min-width: 700px) { .czesc__tresc { padding: 26px 24px 30px; } }
.czesc__wstep { font-size: 1rem; color: var(--atrament-mkk); margin-bottom: 22px; }

.pola-ankiety { display: grid; gap: 22px; }
@media (min-width: 700px) {
  .pola-ankiety { grid-template-columns: 1fr 1fr; }
  .pola-ankiety > .pole { grid-column: 1 / -1; }
  .pola-ankiety > .pole--polowa { grid-column: auto; }
}

/* Sekcja o granicach: wiele krotkich pytan pod rzad, wiec ciasniej. */
.pola-ankiety--siatka { gap: 14px; }
.pole--znaczenie { border: 0; padding: 0; margin: 0; }
.pole--znaczenie .legenda { font-size: 1.02rem; margin-bottom: 8px; }
.wybor--waski { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.wybor--waski label {
  min-height: 50px; padding: 10px 8px; font-size: .97rem;
  justify-content: center; text-align: center;
}
.wybor--waski label::before { display: none; }
@media (max-width: 400px) {
  .wybor--waski label { font-size: .9rem; padding-inline: 4px; }
}

fieldset.pole { border: 0; padding: 0; margin: 0; }

.grupa-pol {
  border: 0; margin: 0 0 30px; padding: 0;
}
.grupa-pol__tytul {
  font-family: var(--szeryf); font-size: 1.25rem; color: var(--wino);
  padding: 0 0 12px; margin: 0 0 20px; width: 100%;
  border-bottom: 2px solid var(--krem-cien);
  display: flex; align-items: center; gap: 10px;
}
.grupa-pol__tytul svg { color: var(--zloto); }

.pola { display: grid; gap: 20px; }
@media (min-width: 700px) {
  .pola--dwa { grid-template-columns: 1fr 1fr; }
  .pola--trzy { grid-template-columns: repeat(3, 1fr); }
}

.pole { display: flex; flex-direction: column; gap: 8px; }
.pole > label, .legenda {
  font-weight: 700; color: var(--wino-glebokie); font-size: 1.02rem;
  line-height: 1.35;
}

/* Dwa pola stojace obok siebie musza miec okienka na tej samej wysokosci.
   Bez tego „Imię” i „Nazwisko” rozjezdzaly sie o kilkanascie pikseli, bo
   jedno pytanie miescilo sie w linijce, a drugie w dwoch. Rezerwujemy wiec
   miejsce na dwie linijki i dosuwamy pytanie do dolu - okienko zaczyna sie
   wtedy zawsze w tym samym miejscu. Tylko na szerokim ekranie: na telefonie
   pola i tak stoja jedno pod drugim, a pusta przestrzen bylaby strata. */
@media (min-width: 700px) {
  .pola-ankiety > .pole > .pole__etykieta {
    min-height: 2.7em; display: flex; align-items: flex-end;
  }
}

/* Podpowiedz stoi POD okienkiem i ma wyraznie inny kolor niz pytanie -
   zeby nikt nie wzial jej za kolejne pytanie. */
.pole__podpowiedz {
  font-size: .93rem; line-height: 1.5; margin: -2px 0 0;
  color: #8a4a3c; padding-left: 11px; border-left: 3px solid #e3c4bc;
}
.wymagane { color: var(--wino); font-weight: 700; }

input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="password"], select, textarea {
  width: 100%; min-height: 56px;
  padding: 14px 16px;
  font-family: inherit; font-size: 1.08rem; color: var(--atrament);
  background: #fffdf9; border: 2px solid var(--piasek);
  border-radius: 11px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
textarea { min-height: 128px; line-height: 1.6; resize: vertical; }
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236b1b2e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 48px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--wino); outline: none;
  box-shadow: 0 0 0 4px rgba(107, 27, 46, .13);
}
input::placeholder, textarea::placeholder { color: #a9998a; }

.pole--blad input, .pole--blad select, .pole--blad textarea { border-color: #b3261e; background: #fff7f6; }
.komunikat-pola {
  color: #a01d16; font-size: .97rem; font-weight: 700;
  display: flex; align-items: flex-start; gap: 7px;
}
.komunikat-pola::before { content: "!"; flex: none;
  display: inline-grid; place-items: center; width: 20px; height: 20px;
  border-radius: 50%; background: #b3261e; color: #fff; font-size: .8rem; margin-top: 2px; }

/* wybor jednokrotny w postaci duzych kart - latwiej trafic niz w kropke */
.wybor { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.wybor--pion { grid-template-columns: 1fr; }
.wybor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.wybor label {
  display: flex; align-items: center; gap: 11px;
  min-height: 58px; padding: 12px 18px;
  border: 2px solid var(--piasek); border-radius: 11px;
  background: #fffdf9; cursor: pointer; font-size: 1.05rem; font-weight: 700;
  color: var(--atrament); transition: all .15s ease;
}
.wybor label::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--piasek); background: #fff;
}
.wybor input:checked + label {
  border-color: var(--wino); background: #fdf4f0; color: var(--wino-glebokie);
}
.wybor input:checked + label::before {
  border-color: var(--wino); background: var(--wino); box-shadow: inset 0 0 0 4px #fff;
}
.wybor input:focus-visible + label { outline: 3px solid var(--wino); outline-offset: 2px; }

.zgoda {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; border: 2px solid var(--piasek); border-radius: 11px;
  background: #fffdf9; margin-bottom: 14px; cursor: pointer;
}
.zgoda:hover { border-color: var(--zloto); }
.zgoda input[type="checkbox"] {
  flex: none; width: 28px; height: 28px; margin: 2px 0 0;
  accent-color: var(--wino); cursor: pointer;
}
.zgoda span { font-size: 1rem; line-height: 1.55; }
.zgoda--blad { border-color: #b3261e; background: #fff7f6; }

.pulapka {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}

.notka-o-danych {
  display: flex; gap: 12px; align-items: flex-start;
  background: #f2f2ef; border: 1px solid #ddddd6;
  padding: 14px 16px; border-radius: 10px;
  font-size: .97rem; line-height: 1.55; color: var(--atrament-mkk);
  margin: 0 0 18px;
}
.notka-o-danych svg { flex: none; margin-top: 2px; color: #6f6a5f; }

/* --- strona „mój wniosek” -------------------------------------------------
   Prywatna strona klienta, do ktorej prowadzi odnosnik z wiadomosci.
   Ten sam jezyk wizualny co reszta serwisu, ale bez naglowka z wielkim
   zdjeciem - liczy sie tresc i to, zeby wszystko bylo widoczne od razu. */

.mini-powrot { font-size: 1rem; margin: 0 0 18px; }

.formularz--samodzielny {
  border-radius: var(--promien-duzy); border-top: 1px solid var(--piasek);
}

.moj__meta { font-size: .97rem; color: var(--atrament-mkk); margin: 0 0 22px; }

.moj__przyciski {
  display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 30px;
}

.moj__karta {
  background: var(--biel); border: 1px solid var(--piasek);
  border-radius: var(--promien); box-shadow: var(--cien-mala);
  padding: 22px 20px; margin-bottom: 18px;
}
@media (min-width: 700px) { .moj__karta { padding: 26px 28px; } }

.moj__karta h2 {
  display: flex; align-items: center; gap: 11px;
  font-size: 1.25rem; margin: 0 0 18px; color: var(--wino-glebokie);
}
.moj__karta h2 svg { color: var(--zloto-ciemne); flex: none; }
.moj__karta--groza { border-color: #e0a49f; }
.moj__karta--groza h2 { color: #8c1a13; }
.moj__karta--groza h2 svg { color: #b3261e; }

.moj__lista { margin: 0; }
.moj__lista > div {
  display: grid; gap: 4px; padding: 13px 0;
  border-bottom: 1px solid var(--krem-cien);
}
.moj__lista > div:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 700px) {
  .moj__lista > div { grid-template-columns: 250px 1fr; gap: 22px; align-items: start; }
}
.moj__lista dt { font-size: .92rem; font-weight: 700; color: var(--atrament-mkk); line-height: 1.45; }
.moj__lista dd {
  margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--atrament);
  white-space: pre-line; word-break: break-word;
}

.moj__historia { list-style: none; padding: 0; margin: 0; }
.moj__historia li {
  display: grid; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--krem-cien);
  font-size: .98rem;
}
.moj__historia li:last-child { border-bottom: 0; }
@media (min-width: 700px) { .moj__historia li { grid-template-columns: 190px 1fr; gap: 18px; } }
.moj__historia-data { color: var(--atrament-mkk); font-size: .9rem; }

.moj__stopka {
  font-size: .95rem; color: var(--atrament-mkk); text-align: center;
  margin: 30px 0 0; padding-top: 22px; border-top: 1px solid var(--piasek);
}

.przycisk--groza { border-color: #b3261e; color: #8c1a13; }
.przycisk--groza:hover { background: #fdecea; border-color: #8c1a13; }

/* --- komunikaty ---------------------------------------------------------- */

.komunikat {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--promien);
  margin-bottom: 26px; font-size: 1.03rem; line-height: 1.6;
}
.komunikat svg { flex: none; margin-top: 2px; }
.komunikat--blad { background: #fdecea; border: 1px solid #f3b7b2; color: #8c1a13; }
.komunikat--sukces { background: #eaf6ec; border: 1px solid #b4dcbb; color: #1d5f2c; }
.komunikat--info { background: var(--krem-cien); border: 1px solid var(--piasek); color: var(--atrament); }

/* --- pas wezwania -------------------------------------------------------- */

.wezwanie {
  background: linear-gradient(150deg, var(--wino) 0%, var(--wino-glebokie) 100%);
  color: #fbf1de; text-align: center; position: relative; overflow: hidden;
}
.wezwanie::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 130% at 12% 100%, rgba(232,206,139,.15), transparent 62%);
}
.wezwanie__wnetrze { position: relative; padding-block: 54px; }
.wezwanie h2 { color: #fdf6e8; margin-bottom: .35em; }
.wezwanie p { font-size: 1.12rem; color: var(--zloto-blask); margin-bottom: 28px; }

.zamkniecie { background: var(--krem-cien); text-align: center; padding-block: 46px; }
.zamkniecie__tekst {
  font-family: var(--pismo); font-weight: 600;
  font-size: clamp(1.5rem, 5.6vw, 2.4rem); line-height: 1.4;
  color: var(--wino); max-width: 22ch; margin: 0 auto;
}

/* --- tresc artykulow i stron prawnych ------------------------------------ */

.artykul { max-width: 74ch; margin-inline: auto; }
.artykul h2 { font-size: clamp(1.4rem, 4vw, 1.9rem); margin-top: 1.7em; }
.artykul h3 { font-size: clamp(1.18rem, 3.4vw, 1.42rem); margin-top: 1.6em; color: var(--wino); }
.artykul p, .artykul li { font-size: 1.09rem; line-height: 1.78; }
.artykul ul, .artykul ol { padding-left: 1.4em; margin-bottom: 1.3em; }
.artykul li { margin-bottom: .55em; }
.artykul li::marker { color: var(--zloto); font-weight: 700; }
.artykul blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 4px solid var(--zloto); font-family: var(--szeryf);
  font-size: 1.2rem; color: var(--wino);
}
.artykul table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 1rem; }
.artykul th, .artykul td { padding: 12px 14px; border: 1px solid var(--piasek); text-align: left; vertical-align: top; }
.artykul th { background: var(--krem-cien); color: var(--wino-glebokie); }
.artykul code {
  background: var(--krem-cien); padding: 2px 7px; border-radius: 5px;
  font-size: .93em; color: var(--wino-glebokie);
}
.artykul hr { border: 0; height: 1px; background: var(--piasek); margin: 2.2em 0; }
.artykul img { border-radius: var(--promien); margin: 1.4em 0; }

.uwaga-prawna {
  background: #fdf6e3; border: 1px solid var(--zloto-jasne);
  border-left: 5px solid var(--zloto); border-radius: 0 10px 10px 0;
  padding: 18px 20px; margin-bottom: 30px; font-size: 1rem;
}

.strona-glowa {
  background: linear-gradient(150deg, var(--wino) 0%, var(--wino-glebokie) 100%);
  color: #fdf6e8; padding-block: 54px 60px; text-align: center;
}
.strona-glowa h1 { color: #fdf6e8; font-size: clamp(2rem, 6.4vw, 3.1rem); margin-bottom: .2em; }
.strona-glowa p { color: var(--zloto-blask); font-size: 1.1rem; max-width: 52ch; margin-inline: auto; }

.okruszki { font-size: .96rem; margin-bottom: 26px; }
.okruszki a { color: var(--zloto-ciemne); }

/* --- podziekowanie ------------------------------------------------------- */

.podziekowanie { text-align: center; max-width: 640px; margin-inline: auto; }
.podziekowanie__znak {
  width: 96px; height: 96px; margin: 0 auto 26px;
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(155deg, #fdf8ee, var(--krem-cien));
  border: 2px solid var(--zloto); color: var(--wino);
}
.podziekowanie__znak svg { width: 48px; height: 48px; }
.podziekowanie__mail {
  display: inline-block; background: var(--krem-cien);
  border: 1px solid var(--piasek); border-radius: 10px;
  padding: 10px 18px; font-weight: 700; color: var(--wino-glebokie);
  margin: 6px 0 22px; word-break: break-all;
}

/* --- kontakt ------------------------------------------------------------- */

.kontakt-siatka { display: grid; gap: 22px; }
@media (min-width: 800px) { .kontakt-siatka { grid-template-columns: repeat(2, 1fr); } }

.kontakt-karta {
  background: var(--biel); border: 1px solid var(--piasek);
  border-radius: var(--promien); padding: 28px 24px; box-shadow: var(--cien-mala);
}
.kontakt-karta h3 { display: flex; align-items: center; gap: 11px; font-size: 1.2rem; }
.kontakt-karta h3 svg { color: var(--zloto); flex: none; }
.kontakt-karta a { font-weight: 700; }
.kontakt-lista { list-style: none; margin: 0; padding: 0; }
.kontakt-lista li { padding: 9px 0; border-bottom: 1px solid var(--krem-cien); }
.kontakt-lista li:last-child { border-bottom: 0; }
.kontakt-lista span { display: block; font-size: .9rem; color: var(--atrament-mkk); }

/* --- stopka -------------------------------------------------------------- */

.dol {
  background: var(--wino-glebokie); color: #e8d9c4;
  padding-block: 46px 26px; font-size: 1rem;
}
.dol a { color: var(--zloto-blask); }
.dol a:hover { color: #fff; }
.dol__siatka { display: grid; gap: 32px; }
@media (min-width: 800px) { .dol__siatka { grid-template-columns: 1.4fr 1fr 1fr; gap: 44px; } }
.dol__nazwa {
  font-family: var(--szeryf); font-size: 1.9rem; color: var(--zloto-blask);
  margin-bottom: 4px; display: block;
}
.dol__podpis {
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(232,206,139,.72); margin-bottom: 16px;
}
.dol h4 {
  color: var(--zloto-blask); font-family: var(--bezszeryf);
  font-size: .82rem; letter-spacing: .16em; text-transform: uppercase;
  margin-bottom: 14px;
}
.dol ul { list-style: none; margin: 0; padding: 0; }
.dol li { margin-bottom: 11px; }
.dol__kreska {
  border-top: 1px solid rgba(232,206,139,.24);
  margin-top: 34px; padding-top: 20px;
  display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between;
  font-size: .92rem; color: rgba(232,217,196,.75);
}
/* Podpis wykonawcy - celowo dyskretny, zeby nie konkurowal z trescia stopki. */
.dol__wykonanie a { color: rgba(232,206,139,.8); text-decoration: none; }
.dol__wykonanie a:hover { color: #fff; text-decoration: underline; }

/* --- druk ---------------------------------------------------------------- */

@media print {
  .gora, .dol, .wezwanie, .rozwijak, .fala { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .sekcja { padding-block: 12pt; }
}