@font-face { font-family: "ZS"; src: url("fonts/ZmianologicaSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "ZS"; src: url("fonts/ZmianologicaSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "ZS"; src: url("fonts/ZmianologicaSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "ZS"; src: url("fonts/ZmianologicaSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ZS"; src: url("fonts/ZmianologicaSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  --papier: #F7F4EE;
  --biel: #FFFFFF;
  --tusz: #1E1B22;
  --tekst: #3D3842;
  --szary: #6B6570;
  --linia: #DDD6CA;
  --fiolet: #5B4270;
  --fiolet-ciemny: #47325A;
  --fiolet-jasny: #C9B8E0;
  --turkus: #2F6B6A;
  --rea-1: #D9B867; --rea-2: #B8913F; --rea-3: #85662A;
  --eks-1: #7FB0AC; --eks-2: #2F6B6A;
  --rel-1: #E3AFA2; --rel-2: #C47A69; --rel-3: #9C463D;
  --int-1: #9C89B4; --int-2: #5B4270;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--tekst);
  font-family: "ZS", "Montserrat", system-ui, sans-serif;
  font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--fiolet); }
h1, h2, h3 { color: var(--tusz); line-height: 1.2; margin: 0 0 .6em; }
h1 { font-size: clamp(34px, 5.2vw, 58px); font-weight: 800; letter-spacing: -.5px; }
h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.waski { max-width: 760px; margin: 0 auto; }
.waski.lewo { margin-left: 0; }
section { padding: 88px 0; }
.jasna { background: var(--biel); }
.ciemna { background: var(--tusz); color: #D9D4DD; }
.ciemna h2, .ciemna h3 { color: #FFFFFF; }

.etykieta { font-size: 13px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--fiolet); margin-bottom: 14px; }
.ciemna .etykieta { color: var(--fiolet-jasny); }
.kreska { width: 72px; height: 3px; background: var(--fiolet); border: 0; margin: 24px 0 28px; }

/* nawigacja */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(247,244,238,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linia); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.marka { font-weight: 800; letter-spacing: 3px; color: var(--tusz); text-decoration: none; font-size: 17px; display: flex; align-items: center; gap: 12px; }
.marka img { height: 50px; width: auto; }
.nav ul { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; align-items: center; }
.nav ul a { color: var(--tekst); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav ul a:hover { color: var(--fiolet); }

/* przyciski — jeden wzór dla całej strony */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 6px;
  font-family: inherit; font-size: 16px; font-weight: 700; text-decoration: none;
  background: var(--fiolet); color: #FFFFFF; border: 2px solid var(--fiolet);
  transition: background .15s, border-color .15s, color .15s, opacity .15s; cursor: pointer;
}
.btn:hover { background: var(--fiolet-ciemny); border-color: var(--fiolet-ciemny); color: #FFFFFF; }
.btn.obrys { background: transparent; color: var(--fiolet); }
.btn.obrys:hover { background: var(--fiolet); color: #FFFFFF; }
.ciemna .btn.obrys { color: #FFFFFF; border-color: #FFFFFF; }
.ciemna .btn.obrys:hover { background: #FFFFFF; color: var(--tusz); }
.btn.is-disabled { opacity: .4; cursor: not-allowed; }
.btn.is-disabled:hover { background: var(--fiolet); border-color: var(--fiolet); }
.nav .btn, .nav ul a.btn { min-height: 40px; padding: 0 18px; font-size: 14px; color: #FFFFFF; }
.przyciski { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ikony ZML w kolorach SYNVARII */
.zi { width: var(--zi-rozmiar, 1em); height: var(--zi-rozmiar, 1em); fill: none; stroke: var(--zi-linia, var(--tusz)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; vertical-align: middle; flex: none; }
.zi .a { stroke: var(--zi-akcent, var(--turkus)); }
.zi .af { fill: var(--zi-akcent, var(--turkus)); stroke: none; }
.zi .f { fill: var(--zi-linia, var(--tusz)); stroke: none; }
.zi .a, .zi .af { transform-box: fill-box; transform-origin: center; }
.ciemna .zi { --zi-linia: #FFFFFF; --zi-akcent: var(--fiolet-jasny); }
.ikona { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; background: #EFE9F4; margin-bottom: 18px; --zi-rozmiar: 30px; }
.ciemna .ikona { background: #3A3343; }
.btn .zi { --zi-rozmiar: 20px; --zi-linia: currentColor; --zi-akcent: currentColor; }
.pokaz .zi .a, .pokaz .zi .af { animation: zi-raz 1.4s ease-in-out .2s 1 both; }
.karta:hover .zi .a, .karta:hover .zi .af, .pytanie:hover .zi .a, .pytanie:hover .zi .af { animation: zi-raz 1.4s ease-in-out infinite; }
@keyframes zi-raz { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* płynne wejścia sekcji */
.js .wejscie { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.js .wejscie.pokaz { opacity: 1; transform: none; }
.js .wejscie.d1 { transition-delay: .1s; } .js .wejscie.d2 { transition-delay: .2s; } .js .wejscie.d3 { transition-delay: .3s; }

/* hero */
.hero { padding: 28px 0 72px; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero .podtytul { font-size: clamp(20px, 2.4vw, 26px); font-weight: 500; color: var(--szary); line-height: 1.4; margin-bottom: 0; }
.hero .podtytul strong { color: var(--tusz); font-weight: 700; }
.hero .lead { font-size: 18px; max-width: 560px; }
.dane-mini { margin-top: 22px; font-size: 14px; color: var(--szary); }
.okladka-hero { width: 100%; max-width: 400px; margin-left: auto; }
.okladka { box-shadow: 0 24px 60px rgba(30,27,34,.20), 0 2px 6px rgba(30,27,34,.08); border-radius: 3px; }

/* model */
.nazwa-modelu { background: var(--biel); border: 1px solid var(--linia); border-left: 5px solid var(--fiolet); border-radius: 8px; padding: 22px 26px; margin: 28px 0 0; font-size: 16px; }
.nazwa-modelu strong { color: var(--tusz); }
.pytania { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.pytanie { background: var(--biel); border: 1px solid var(--linia); border-radius: 8px; padding: 28px; }
.pytanie .nr { font-size: 14px; font-weight: 800; color: var(--fiolet); letter-spacing: 1px; margin-bottom: 10px; }
.pytanie p { font-size: 15.5px; margin: 0; }
.pytanie .odp { margin-top: 14px; font-size: 14.5px; color: var(--tusz); font-weight: 600; }

/* film */
.film { margin-top: 36px; background: var(--tusz); border-radius: 10px; overflow: hidden; box-shadow: 0 24px 60px rgba(30,27,34,.18); }
.film video { display: block; width: 100%; height: auto; background: var(--tusz); }
details.tekst-filmu { margin-top: 18px; background: var(--biel); border: 1px solid var(--linia); border-radius: 8px; padding: 0 22px; }
details.tekst-filmu summary { cursor: pointer; padding: 16px 0; font-weight: 700; color: var(--fiolet); }
details.tekst-filmu[open] { padding-bottom: 14px; }
details.tekst-filmu p { font-size: 15.5px; }

/* test */
.test-zachęta { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: center; background: var(--biel); border: 1px solid var(--linia); border-radius: 10px; padding: 32px 36px; }
.test-zachęta .ikona { margin: 0; width: 72px; height: 72px; --zi-rozmiar: 38px; }
.test-zachęta h2 { font-size: 26px; margin-bottom: 8px; }
.test-zachęta p { margin: 0; font-size: 16px; }

/* listy */
.lista-num { counter-reset: n; list-style: none; padding: 0; margin: 32px 0 0; }
.lista-num li { counter-increment: n; position: relative; padding: 0 0 22px 56px; }
.lista-num li::before { content: counter(n); position: absolute; left: 0; top: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--fiolet); color: #FFFFFF; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.lista-num strong { color: var(--tusz); }

.karty { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.karty.dwie { grid-template-columns: repeat(2, 1fr); }
.karta { background: var(--biel); border: 1px solid var(--linia); border-radius: 8px; padding: 28px; display: flex; flex-direction: column; }
.karta p { font-size: 15.5px; margin: 0; }
.ciemna .karta { background: #2A2630; border-color: #3B3542; }
.ciemna .karta p { color: #CFC9D4; }
.karta .btn { margin-top: auto; align-self: flex-start; }
.karta p + .btn { margin-top: 22px; }

/* zakup */
.zakup { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.zakup .okladka { max-width: 360px; }
.panel { background: var(--biel); border: 1px solid var(--linia); border-radius: 10px; padding: 36px; }
.dane { display: grid; grid-template-columns: 120px 1fr; gap: 6px 18px; margin: 0 0 24px; font-size: 15px; }
.dane dt { color: var(--szary); }
.dane dd { margin: 0; color: var(--tusz); font-weight: 500; }
.cena { font-size: 40px; font-weight: 800; color: var(--tusz); line-height: 1.1; margin: 8px 0 24px; }
.cena span { display: block; font-size: 14px; font-weight: 500; color: var(--szary); margin-top: 6px; }
.zgoda { display: flex; gap: 14px; align-items: flex-start; background: var(--papier); border: 1px solid var(--linia); border-radius: 8px; padding: 16px 18px; font-size: 14px; line-height: 1.55; margin-bottom: 22px; cursor: pointer; }
.zgoda input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--fiolet); }
.zgoda--uwaga { border-color: var(--fiolet); box-shadow: 0 0 0 3px rgba(91,66,112,.18); }
.panel .btn { width: 100%; }
.info { list-style: none; padding: 0; margin: 24px 0 0; font-size: 14.5px; color: var(--szary); }
.info li { padding-left: 22px; position: relative; margin-bottom: 6px; }
.info li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--fiolet); }

/* stopka */
footer { background: var(--tusz); color: #A9A2AE; font-size: 14px; padding: 56px 0 32px; }
footer .siatka { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
footer h4 { color: #FFFFFF; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin: 0 0 14px; }
footer a { color: #D9D4DD; text-decoration: none; }
footer a:hover { color: #FFFFFF; text-decoration: underline; }
footer ul { list-style: none; padding: 0; margin: 0; }
footer li { margin-bottom: 8px; }
footer .dol { border-top: 1px solid #3B3542; margin-top: 40px; padding-top: 22px; font-size: 13px; }

@media (max-width: 900px) {
  section { padding: 64px 0; }
  .hero .wrap, .zakup { grid-template-columns: 1fr; gap: 40px; }
  .okladka-hero { max-width: 300px; margin: 0 auto; order: -1; }
  .zakup .okladka { max-width: 260px; margin: 0 auto; }
  .pytania, .karty, .karty.dwie { grid-template-columns: 1fr; }
  .test-zachęta { grid-template-columns: 1fr; text-align: left; padding: 26px 22px; }
  .nav ul li.zw { display: none; }
  footer .siatka { grid-template-columns: 1fr; gap: 28px; }
  .panel { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .wejscie { opacity: 1; transform: none; transition: none; }
  .zi .a, .zi .af { animation: none !important; }
}

/* animacja z lektorem: dziesięć archetypów */
.ar { margin-top: 32px; background: var(--biel); border: 1px solid var(--linia); border-radius: 10px; padding: 22px 24px 18px; --hl: #C9A453; }
.ar-gora { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ar-gora .btn { min-height: 44px; padding: 0 22px; font-size: 15px; }
.ar-czas { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--szary); font-variant-numeric: tabular-nums; }
.ar-scena { position: relative; }
.ag { display: grid; grid-template-columns: 150px repeat(3, 1fr); gap: 8px; }
.ag .hd { font-size: 13px; color: var(--szary); text-align: center; padding: 6px; line-height: 1.3; border-radius: 6px; transition: opacity .45s, background .45s; }
.ag .hd b { display: block; color: var(--tusz); font-size: 16px; }
.ag .rh { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; color: var(--tusz); }
.ag .rh i { width: 12px; height: 44px; background: var(--c); border-radius: 3px; flex: none; }
.ag .cl { background: color-mix(in srgb, var(--c) 11%, #FFFFFF); border-left: 5px solid var(--c); border-radius: 6px; padding: 10px 12px; transition: opacity .45s, transform .45s, box-shadow .45s; }
.ag .cl b { display: block; font-size: 15px; line-height: 1.25; margin-bottom: 4px; color: var(--tusz); }
.ag .cl b small { font-size: 12px; color: var(--szary); margin-left: 6px; font-weight: 600; }
.ag .cl p { font-size: 13px; line-height: 1.4; margin: 0; color: var(--szary); }
.ag .cl.off { background: repeating-linear-gradient(45deg, #F3F0EA, #F3F0EA 9px, #FFFFFF 9px, #FFFFFF 18px); border-left-color: var(--linia); }
.ag .cl.off b { color: var(--szary); }
.ag .sr-m { display: none; }
.ag.dim .cl:not(.act) { opacity: .28; }
.ag.dim .hd:not(.act) { opacity: .4; }
.ag .cl.act { transform: scale(1.03); box-shadow: 0 0 0 3px var(--hl), 0 10px 24px rgba(30,27,34,.16); position: relative; z-index: 2; }
.ag .hd.act { background: color-mix(in srgb, var(--hl) 24%, #FFFFFF); }
.arq { position: absolute; inset: 0; z-index: 4; background: rgba(255,255,255,.96); display: flex; align-items: center; justify-content: center; gap: 40px; opacity: 0; pointer-events: none; transition: opacity .5s; border-radius: 8px; }
.arq.v { opacity: 1; }
.arq .qs { display: flex; flex-direction: column; gap: 16px; width: 46%; }
.arq .qc { background: #F3EEF7; border-left: 5px solid var(--fiolet); border-radius: 6px; padding: 14px 18px; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.arq .qc.v, .arq .mx.v { opacity: 1; transform: none; }
.arq .qc small { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--fiolet); }
.arq .qc b { display: block; font-size: 19px; color: var(--tusz); margin: 4px 0 10px; }
.arq .op { display: flex; gap: 8px; }
.arq .op span { flex: 1; text-align: center; background: #FFFFFF; border: 2px solid var(--linia); border-radius: 6px; padding: 7px; font-size: 14px; font-weight: 600; color: var(--tusz); }
.arq .mx { display: grid; grid-template-columns: 110px 1fr 1fr; gap: 6px; width: 40%; opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; }
.arq .mh { text-align: center; font-size: 13px; font-weight: 700; color: var(--szary); }
.arq .mv { display: flex; align-items: center; justify-content: flex-end; text-align: right; font-size: 13px; font-weight: 700; color: var(--szary); padding-right: 4px; }
.arq .me { background: var(--c); color: #FFFFFF; height: 76px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 800; }
.arb { margin-top: 14px; }
.arb .cap { text-align: center; font-size: 17px; color: var(--tekst); line-height: 1.4; min-height: 2.8em; display: flex; align-items: center; justify-content: center; }
.arb .tl { position: relative; height: 28px; cursor: pointer; touch-action: none; }
.arb .tl:before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 6px; border-radius: 3px; background: var(--linia); }
.arb .tl i { position: absolute; left: 0; top: 11px; height: 6px; width: 0; border-radius: 3px; background: var(--fiolet); }
.arb .tl b { position: absolute; top: 14px; left: 0; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--fiolet); border: 3px solid #FFFFFF; box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .15s; }
.arb .tl:hover b, .arb .tl.drag b, .arb .tl:focus-visible b { transform: scale(1.25); }
.arb .tl:focus-visible { outline: 2px solid var(--fiolet); outline-offset: 4px; border-radius: 4px; }
@media (max-width: 760px) {
  .ar { padding: 16px 14px 12px; }
  .ag { grid-template-columns: 1fr; gap: 8px; }
  .ag .hd, .ag .ag-r { display: none; }
  .ag .rh { margin-top: 12px; }
  .ag .sr-m { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--szary); margin-bottom: 2px; }
  .arq { align-items: flex-start; flex-direction: column; justify-content: flex-start; gap: 16px; padding: 12px; }
  .arq .qs, .arq .mx { width: 100%; }
  .arb { position: sticky; bottom: 0; background: #FFFFFF; padding: 8px 0 4px; z-index: 6; }
  .arb .cap { font-size: 15px; }
}

/* =========== ARTYKUŁY — siatka kafelków (jak blog zmianologi.ca) =========== */
.art-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
@media (max-width: 980px) { .art-siatka { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .art-siatka { grid-template-columns: 1fr; } }
.art-karta { background: var(--biel); border: 2px solid var(--linia); border-radius: 8px; overflow: hidden; transition: border-color .2s, transform .2s, box-shadow .2s; }
.art-karta:hover { border-color: var(--fiolet); transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.06); }
.art-karta-link { display: flex; flex-direction: column; height: 100%; padding: 28px 28px 24px; text-decoration: none; color: inherit; }
.art-karta-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 14px; font-size: 12px; }
.art-karta-data { color: var(--szary); letter-spacing: .3px; }
.art-karta-tag { background: #F3EEF7; color: var(--fiolet); padding: 3px 10px; border-radius: 3px; font-weight: 600; letter-spacing: .5px; }
.art-karta-czas { display: inline-flex; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 12px; color: var(--szary); letter-spacing: .3px; }
.art-karta-czas svg, .art-karta-cta svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.art-karta-tytul { font-size: 20px; line-height: 1.3; color: var(--tusz); margin: 0 0 12px; }
.art-karta-lead { font-size: 15px; line-height: 1.6; color: var(--tekst); margin: 0 0 18px; flex: 1; }
.art-karta-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--fiolet); }
.art-karta:hover .art-karta-cta svg { transform: translateX(3px); transition: transform .2s; }
.ciemna .art-karta-tytul { color: var(--tusz); }