/* ═══════════════════════════════════════════════════════════════════════
   Kabała — 72 Imiona i Drzewo Życia, układ 1:1 z makietą „kabala jedna strona"
   ═══════════════════════════════════════════════════════════════════════
   Tło: jedna wysoka grafika (łuki, księżyce, góry) u góry i u dołu strony.
   Złoto serwisu, indygo, hebrajskie litery jako motyw; kolumna 1520 px. */

.tkb-strona {
	--tlo-kolor:    #07061a;
	--panel:        rgba( 9, 7, 28, .78 );
	--panel-mocny:  rgba( 7, 5, 22, .92 );
	--obrys:        rgba( 230, 196, 138, .32 );
	--obrys-slaby:  rgba( 230, 196, 138, .16 );
	--zloto:        #fde291;
	--zloto-cieply: #f9d57a;
	--zloto-ciemne: #e6c48a;
	--zloto-etyk:   #cda474;
	--lawenda:      #ad97d3;
	--lawenda-jasna:#c9b8ef;
	--blask:        #f4efff;
	--tekst:        #b6b3c4;
	--tekst-slaby:  #9693ab;
	--tekst-mocny:  #ece8f1;
	--neon:         #a06ffb;
	--mocna: #f6cf5e; --rowna: #ad97d3; --slaba: #5a4b7a;
	--f-mercy: #f2c95c; --f-middle: #b58cf0; --f-severity: #7fb3ff;
	--serif: 'Cormorant Garamond', 'Times New Roman', serif;
	--sans:  'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hebr:  'Noto Serif Hebrew', 'David', 'Times New Roman', serif;
	position: relative; padding: 0 0 50px; color: var( --tekst ); font-family: var( --sans ); font-weight: 300;
	background: var( --tlo ) center top / 100% auto no-repeat, var( --tlo ) center bottom / 100% auto no-repeat, var( --tlo-kolor );
	overflow-x: clip;
}
.tkb-strona *, .tkb-strona *::before, .tkb-strona *::after { box-sizing: border-box; }
body:has( .tkb-strona ) .wp-site-blocks > header, body:has( .tkb-strona ) header.wp-block-template-part, body:has( .tkb-strona ) .wp-site-blocks > footer, body:has( .tkb-strona ) footer.wp-block-template-part, body:has( .tkb-strona ) .wp-block-post-title { display: none !important; }
body:has( .tkb-strona ) .wp-site-blocks, body:has( .tkb-strona ) .wp-block-group, body:has( .tkb-strona ) .wp-block-post-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }
body:has( .tkb-strona ) .wp-block-post-content > *, body:has( .tkb-strona ) .entry-content > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
body:has( .tkb-strona ) { background: #07061a; }
/* Jak pozostałe strony Wyroczni: cała strona, razem z tłem, w kolumnie 1520 px — tło nie wychodzi poza obrys panelu. */
body:has( .tkb-strona ) .wp-block-post-content > .tkb-strona, body:has( .tkb-strona ) .entry-content > .tkb-strona, .tkb-strona { max-width: 1520px !important; margin-left: auto !important; margin-right: auto !important; }

/* ─────────────────────────────  wspólne  ─────────────────────────── */

.tkb-nad { margin: 0 0 10px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tkb-nad i { font-style: normal; color: var( --zloto-ciemne ); margin: 0 10px; }
.tkb-tytul { margin: 0; font-family: var( --serif ); font-weight: 500; font-size: clamp( 40px, 4.4vw, 64px ); letter-spacing: .01em; color: var( --zloto-cieply ); line-height: 1.08; }
.tkb-ozdoba { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 16px 0 18px; color: var( --zloto-ciemne ); }
.tkb-ozdoba i { display: block; width: 110px; height: 1px; background: linear-gradient( 90deg, transparent, var( --zloto-ciemne ) ); }
.tkb-ozdoba i + b + i { background: linear-gradient( 90deg, var( --zloto-ciemne ), transparent ); }
.tkb-ozdoba b { font: 400 22px var( --hebr ); letter-spacing: .1em; direction: rtl; white-space: nowrap; }
.tkb-lead { max-width: 52ch; margin: 0 auto 26px; font-size: 15.5px; line-height: 1.7; color: var( --tekst-mocny ); }
.tkb-cta { display: flex; justify-content: center; margin: 0; }
.tkb-btn { display: inline-block; height: 48px; padding: 0 30px; border: 1px solid var( --zloto-ciemne ); border-radius: 999px; background: linear-gradient( 180deg, rgba( 253, 226, 145, .14 ), rgba( 253, 226, 145, .03 ) ); color: var( --zloto ); font: 400 12px/46px var( --sans ); letter-spacing: .22em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .2s, box-shadow .2s; }
.tkb-btn:hover { background: rgba( 253, 226, 145, .22 ); box-shadow: 0 0 22px rgba( 253, 226, 145, .18 ); }
.tkb-btn--maly { height: 36px; padding: 0 18px; font-size: 10.5px; line-height: 34px; }
.tkb-btn--pelny { background: linear-gradient( 180deg, #fde9a8, #dfb960 ); color: #241a05; border-color: #f2d68c; font-weight: 500; box-shadow: 0 0 30px rgba( 253, 226, 145, .28 ); }
.tkb-btn--pelny:hover { background: linear-gradient( 180deg, #fff0ba, #ecc97a ); }
.tkb-strona button:focus-visible, .tkb-strona a:focus-visible, .tkb-strona input:focus-visible { outline: 2px solid var( --neon ); outline-offset: 3px; }
.tkb-link { border: 0; padding: 0; background: none; color: var( --zloto ); font: 400 11px var( --sans ); letter-spacing: .24em; text-transform: uppercase; cursor: pointer; }
.tkb-link:hover { color: var( --zloto-cieply ); text-decoration: underline; text-underline-offset: 4px; }

.tkb-sekcja__glowa { max-width: 900px; margin: 0 auto 26px; text-align: center; }
.tkb-sekcja__nad { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 0 0 6px; font-size: 12px; letter-spacing: .38em; text-transform: uppercase; color: var( --zloto ); }
.tkb-sekcja__nad i { display: block; width: 110px; height: 1px; background: linear-gradient( 90deg, transparent, var( --zloto-ciemne ) ); }
.tkb-sekcja__nad i + i { background: linear-gradient( 90deg, var( --zloto-ciemne ), transparent ); }
.tkb-sekcja__tytul { margin: 0 0 10px; font: 500 clamp( 30px, 3.1vw, 44px ) var( --serif ); color: var( --zloto-cieply ); }
.tkb-sekcja__lead { max-width: 70ch; margin: 0 auto 8px; font-size: 14.5px; line-height: 1.65; color: var( --tekst ); }
.tkb-wynik, .tkb-drzewo-sekcja, .tkb-sily, .tkb-litery, .tkb-galeria, .tkb-metoda { position: relative; max-width: 1520px; margin: 56px auto 0; padding: 0 60px; }

/* pionowe napisy po bokach */
.tkb-bok { position: absolute; top: 90px; margin: 0; display: grid; gap: 14px; width: 130px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; line-height: 1.9; color: var( --zloto-etyk ); }
.tkb-bok--l { left: 40px; text-align: left; }
.tkb-bok--p { right: 40px; text-align: right; }
.tkb-bok b { font-weight: 400; color: var( --zloto-cieply ); }
.tkb-bok i { display: block; width: 26px; height: 1px; background: var( --zloto-ciemne ); font-style: normal; }
.tkb-bok--p i { margin-left: auto; width: auto; height: auto; background: none; color: var( --zloto ); font-size: 16px; line-height: 1; }
.tkb-bok__cytat { font: italic 400 15px/1.35 var( --serif ); letter-spacing: 0; text-transform: none; color: var( --zloto-cieply ); }
.tkb-bok small { font-size: 9.5px; letter-spacing: .26em; color: var( --tekst-slaby ); }
.tkb-bok--nisko { top: 60px; }

/* ─────────────────────────────  nav  ─────────────────────────────── */

.tkb-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1520px; margin: 0 auto; padding: 12px 40px; background: linear-gradient( 180deg, rgba( 7, 6, 26, .96 ), rgba( 7, 6, 26, .7 ) ); border-bottom: 1px solid var( --obrys-slaby ); }
.tkb-nav__marka { display: flex; align-items: center; gap: 12px; color: var( --zloto ); text-decoration: none; }
.tkb-nav__marka b { font: 400 28px var( --hebr ); direction: rtl; }
.tkb-nav__marka span { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; line-height: 1.4; color: var( --zloto-etyk ); }
.tkb-nav__linki { display: flex; gap: 28px; }
.tkb-nav__linki a { color: var( --tekst-mocny ); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; }
.tkb-nav__linki a:hover { color: var( --zloto ); }

/* ─────────────────────────────  hero  ────────────────────────────── */

.tkb-hero { position: relative; display: grid; grid-template-columns: 150px 440px minmax( 0, 1fr ) 330px; align-items: center; max-width: 1520px; min-height: 620px; margin: 0 auto; padding: 30px 0 30px; }
.tkb-hero__drzewo { grid-column: 2; position: relative; height: 560px; }
.tkb-hero__drzewo svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow( 0 0 26px rgba( 160, 111, 251, .22 ) ); }
.tkb-glowa { grid-column: 3; max-width: 520px; margin: 0 auto; text-align: center; padding: 0 20px; }
.tkb-hero .tkb-bok--l { grid-column: 1; position: static; align-self: start; margin-top: 40px; justify-self: center; }
.tkb-hero .tkb-bok--p { grid-column: 4; position: static; align-self: start; margin-top: 150px; justify-self: end; margin-right: 30px; }

/* ─────────────────────────────  formularz  ───────────────────────── */

.tkb-form { position: relative; display: grid; grid-template-columns: 1fr 1fr 1.2fr auto auto; gap: 12px 22px; align-items: end; max-width: 1180px; margin: -10px auto 0; padding: 26px 34px 20px; border: 1px solid var( --obrys ); border-radius: 22px; background: var( --panel-mocny ); box-shadow: 0 30px 60px rgba( 0, 0, 0, .4 ); }
.tkb-pole { position: relative; display: grid; gap: 8px; }
.tkb-pole span { font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tkb-pole input { height: 48px; padding: 0 16px; border: 1px solid rgba( 230, 196, 138, .3 ); border-radius: 12px; background: rgba( 6, 4, 22, .8 ); color: var( --tekst-mocny ); font: 400 15px var( --sans ); color-scheme: dark; }
.tkb-podpowiedzi { position: absolute; left: 0; right: 0; top: 100%; z-index: 5; margin: 6px 0 0; padding: 6px; list-style: none; border: 1px solid var( --obrys ); border-radius: 12px; background: #0b0822; box-shadow: 0 20px 50px rgba( 0, 0, 0, .5 ); }
.tkb-podpowiedzi li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; color: var( --tekst-mocny ); font-size: 14px; cursor: pointer; }
.tkb-podpowiedzi li small { color: var( --tekst-slaby ); font-size: 12px; }
.tkb-podpowiedzi li:hover { background: rgba( 160, 111, 251, .14 ); }
.tkb-form .tkb-btn--pelny { height: 48px; line-height: 46px; padding: 0 44px; }
.tkb-form__lock { display: flex; align-items: center; gap: 12px; margin: 0; padding-left: 22px; border-left: 1px solid var( --obrys-slaby ); height: 48px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; line-height: 1.6; color: var( --zloto-etyk ); }
.tkb-form__lock i { font-style: normal; font-size: 16px; filter: sepia( 1 ) saturate( 3 ) hue-rotate( 5deg ); }
.tkb-form__uwaga { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var( --tekst-slaby ); }
.tkb-blad { grid-column: 1 / -1; margin: 0; color: #f0a35a; font-size: 13px; }

/* ─────────────────────────────  aniołowie  ───────────────────────── */

.tkb-aniolowie { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 22px; }
.tkb-aniol { position: relative; display: grid; grid-template-columns: 170px minmax( 0, 1fr ); grid-template-rows: auto 1fr auto auto; gap: 6px 18px; padding: 22px 26px 20px; border: 1px solid var( --obrys ); border-radius: 18px; background: var( --panel-mocny ); text-align: left; cursor: pointer; transition: border-color .2s, transform .2s, box-shadow .2s; color: var( --tekst ); font: inherit; }
.tkb-aniol:hover { border-color: var( --zloto ); transform: translateY( -3px ); box-shadow: 0 30px 60px rgba( 0, 0, 0, .45 ); }
.tkb-aniol--glowny { border-color: rgba( 253, 226, 145, .6 ); box-shadow: 0 0 0 1px rgba( 253, 226, 145, .14 ), 0 0 60px rgba( 253, 226, 145, .08 ); }
.tkb-aniol__rola { grid-column: 1 / -1; margin: 0 0 4px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var( --zloto ); }
.tkb-aniol__rola b { display: block; margin-top: 3px; font-weight: 300; letter-spacing: .04em; text-transform: none; color: var( --tekst-slaby ); font-size: 12px; }
.tkb-aniol .tkb-pieczec { grid-column: 1; grid-row: 2 / 4; width: 150px; height: 150px; align-self: start; }
.tkb-pieczec svg { width: 100%; height: 100%; overflow: visible; }
.tkb-aniol__tekst { grid-column: 2; grid-row: 2 / 4; min-width: 0; }
.tkb-aniol__imie { margin: 0; font: 500 32px/1.05 var( --serif ); color: var( --zloto-cieply ); letter-spacing: .02em; }
.tkb-aniol__hebr { margin: 2px 0 8px; font: 400 20px/1.1 var( --hebr ); color: var( --lawenda ); direction: rtl; text-align: left; }
.tkb-aniol__znaczenie { margin: 0 0 10px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var( --zloto ); }
.tkb-aniol__rys { margin: 0; font-size: 13.5px; line-height: 1.6; color: var( --tekst ); }
.tkb-aniol__meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var( --obrys-slaby ); font-size: 12px; color: var( --tekst-slaby ); }
.tkb-aniol__meta b { font-weight: 400; color: var( --tekst-mocny ); }
.tkb-aniol__wiecej { grid-column: 1 / -1; margin: 10px 0 0; text-align: center; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var( --zloto ); }
.tkb-aniol--brak { grid-template-columns: 1fr; place-items: center; text-align: center; color: var( --tekst-slaby ); font-size: 14px; cursor: default; }
.tkb-aniol--brak:hover { transform: none; border-color: var( --obrys ); box-shadow: none; }

/* ─────────────────────────────  drzewo  ──────────────────────────── */

.tkb-drzewo__uklad { display: grid; grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.15fr ); gap: 40px; align-items: center; padding: 28px 44px 24px; border: 1px solid var( --obrys ); border-radius: 22px; background: var( --panel ); }
.tkb-drzewo__rys svg { width: 100%; max-height: 640px; display: block; margin: 0 auto; overflow: visible; }
.tkb-drzewo__rys .kula, .tkb-hero__drzewo .kula { cursor: pointer; }
.tkb-hero__drzewo .kula { cursor: default; }
.tkb-drzewo__rys .kula:hover circle.rdzen { filter: brightness( 1.2 ); }
.tkb-drzewo__rys .kula.jest-dominujaca circle.poswiata { animation: tkb-oddech 4s ease-in-out infinite; }
@keyframes tkb-oddech { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media ( prefers-reduced-motion: reduce ) { .tkb-drzewo__rys .kula.jest-dominujaca circle.poswiata { animation: none; } }
.tkb-drzewo-svg text { font-family: var( --sans ); fill: var( --tekst-mocny ); }
.tkb-drzewo-svg .glif { font-family: var( --serif ); }
.tkb-drzewo-svg .hebr { font-family: var( --hebr ); fill: var( --lawenda ); }
.tkb-drzewo-svg .sciezka { stroke: rgba( 230, 196, 138, .28 ); stroke-width: 1.1; fill: none; }
.tkb-drzewo-svg .sciezka.jest-aktywna { stroke: rgba( 253, 226, 145, .8 ); stroke-width: 1.7; }
.tkb-drzewo-svg .okrag { fill: none; stroke: rgba( 230, 196, 138, .16 ); stroke-width: .8; }
.tkb-drzewo-svg .okrag--krop { stroke-dasharray: 2 4; }
.tkb-drzewo__bok { display: grid; gap: 22px; }
.tkb-filary { display: grid; gap: 22px; }
.tkb-filar { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: baseline; }
.tkb-filar h4 { grid-column: 1; margin: 0; font: 500 21px var( --serif ); color: var( --zloto-cieply ); }
.tkb-filar output { grid-column: 2; font: 500 24px var( --serif ); color: var( --zloto ); }
.tkb-filar .pasek { grid-column: 1 / -1; position: relative; height: 5px; border-radius: 999px; background: rgba( 230, 196, 138, .12 ); }
.tkb-filar .pasek i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var( --fb, var( --zloto ) ); box-shadow: 0 0 12px color-mix( in srgb, var( --fb, var( --zloto ) ) 60%, transparent ); }
.tkb-filar p { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.6; color: var( --tekst ); }
.tkb-filar--mercy { --fb: var( --f-mercy ); } .tkb-filar--middle { --fb: var( --f-middle ); } .tkb-filar--severity { --fb: var( --f-severity ); }
.tkb-drzewo__cta { margin: 0; text-align: right; }

/* ─────────────────────────────  cztery siły  ─────────────────────── */

.tkb-sily__siatka { display: grid; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: 18px; }
.tkb-sila { display: grid; grid-template-columns: 108px minmax( 0, 1fr ); gap: 8px 16px; padding: 22px 22px 20px; border: 1px solid var( --obrys ); border-radius: 18px; background: var( --panel-mocny ); text-align: left; color: var( --tekst ); font: inherit; cursor: pointer; transition: border-color .2s, transform .2s; }
.tkb-sila:hover { border-color: var( --zloto ); transform: translateY( -2px ); }
.tkb-sila__planeta { grid-row: 1 / 3; width: 108px; height: 108px; border-radius: 999px; overflow: hidden; background: #0a0722 center / cover no-repeat; box-shadow: 0 0 34px color-mix( in srgb, var( --k ) 45%, transparent ), inset 0 0 0 1px rgba( 255, 255, 255, .08 ); }
.tkb-sila__nos { grid-column: 2; margin: 0; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tkb-sila__nos i { font-style: normal; margin-right: 6px; color: var( --zloto ); }
.tkb-sila__tekst { grid-column: 2; }
.tkb-sila__hebr { margin: 0; font: 400 30px/1 var( --hebr ); color: var( --zloto ); direction: rtl; text-align: left; }
.tkb-sila b { display: block; margin: 4px 0 0; font: 500 24px/1.05 var( --serif ); color: var( --zloto-cieply ); }
.tkb-sila small { display: block; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tkb-sila__etyk { grid-column: 1 / -1; margin: 10px 0 0; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var( --tekst-mocny ); }
.tkb-sila__pasek { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.tkb-sila__pasek .pasek { position: relative; height: 6px; border-radius: 999px; background: rgba( 230, 196, 138, .14 ); }
.tkb-sila__pasek .pasek i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var( --k ); box-shadow: 0 0 12px color-mix( in srgb, var( --k ) 70%, transparent ); }
.tkb-sila__pasek output { font: 400 13px var( --sans ); color: var( --tekst-mocny ); }
.tkb-sila .tkb-sila__opis { grid-column: 1 / -1; margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var( --tekst ); }

/* ─────────────────────────────  22 litery  ───────────────────────── */

.tkb-sciezki { display: grid; grid-template-columns: repeat( 11, minmax( 0, 1fr ) ); gap: 12px; max-width: 1180px; margin: 0 auto; }
.tkb-sciezka { display: grid; justify-items: center; gap: 6px; padding: 14px 6px 12px; border: 1px solid var( --obrys-slaby ); border-radius: 14px; background: rgba( 8, 6, 26, .7 ); text-align: center; color: var( --tekst-slaby ); font: inherit; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.tkb-sciezka:hover { border-color: var( --zloto-ciemne ); }
.tkb-sciezka b { font: 400 30px/1 var( --hebr ); color: var( --zloto-ciemne ); }
.tkb-sciezka span { font-size: 11.5px; color: var( --tekst-mocny ); }
.tkb-sciezka.jest-aktywna { border-color: rgba( 253, 226, 145, .7 ); background: rgba( 253, 226, 145, .08 ); box-shadow: 0 0 22px rgba( 253, 226, 145, .18 ); }
.tkb-sciezka.jest-aktywna b { color: var( --zloto ); text-shadow: 0 0 14px rgba( 253, 226, 145, .5 ); }
.tkb-sciezka.jest-aktywna.jest-matka { border-color: rgba( 173, 151, 211, .8 ); background: rgba( 160, 111, 251, .12 ); box-shadow: 0 0 22px rgba( 160, 111, 251, .25 ); }
.tkb-sciezka.jest-aktywna.jest-matka b { color: var( --lawenda-jasna ); text-shadow: 0 0 14px rgba( 173, 151, 211, .6 ); }

/* ─────────────────────────────  slider 72 (dwa rzędy)  ───────────── */

.tkb-slider { position: relative; padding: 0 60px; margin: 26px 0 0; }
.tkb-slider__tor { display: grid; grid-auto-flow: column; grid-template-rows: auto; grid-auto-columns: var( --szer, 200px ); gap: 16px; padding: 4px 2px 18px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; cursor: grab; }
.tkb-slider--dwa .tkb-slider__tor { grid-template-rows: auto auto; }
.tkb-slider__tor::-webkit-scrollbar { display: none; }
.tkb-slider__tor.jest-ciagniety { cursor: grabbing; scroll-snap-type: none; }
.tkb-slider__tor > * { scroll-snap-align: start; }
.tkb-slider__strz { position: absolute; top: 50%; transform: translateY( -50% ); z-index: 2; width: 44px; height: 44px; border: 1px solid rgba( 230, 196, 138, .38 ); border-radius: 999px; background: rgba( 8, 6, 26, .9 ); color: var( --zloto ); font: 300 26px/1 var( --serif ); cursor: pointer; transition: border-color .2s, box-shadow .2s, opacity .2s; }
.tkb-slider__strz:hover { border-color: var( --zloto ); box-shadow: 0 0 18px rgba( 253, 226, 145, .22 ); }
.tkb-slider__strz:disabled { opacity: .22; cursor: default; box-shadow: none; }
.tkb-slider__strz--l { left: 0; } .tkb-slider__strz--p { right: 0; }
.tkb-slider__stopka { display: flex; align-items: center; gap: 16px; }
.tkb-slider__pasek { position: relative; flex: 1 1 auto; height: 2px; border-radius: 999px; background: rgba( 230, 196, 138, .14 ); }
.tkb-slider__pasek i { position: absolute; top: -1px; height: 4px; border-radius: 999px; background: linear-gradient( 90deg, var( --zloto-ciemne ), var( --zloto ) ); transition: left .18s ease, width .18s ease; }
.tkb-slider__licznik { flex: 0 0 auto; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --tekst-slaby ); }

.tkb-kafel { display: grid; justify-items: center; gap: 6px; padding: 16px 12px 16px; border: 1px solid var( --obrys-slaby ); border-radius: 16px; background: rgba( 8, 6, 26, .75 ); text-align: center; color: var( --tekst ); font: inherit; cursor: pointer; transition: border-color .2s, transform .2s; }
.tkb-kafel:hover { border-color: var( --zloto ); transform: translateY( -2px ); }
.tkb-kafel.jest-twoj { border-color: rgba( 253, 226, 145, .7 ); box-shadow: 0 0 30px rgba( 253, 226, 145, .14 ); }
.tkb-kafel .tkb-pieczec { width: 104px; height: 104px; }
.tkb-kafel__nr { font-size: 10px; letter-spacing: .3em; color: var( --tekst-slaby ); }
.tkb-kafel b { font: 500 22px var( --serif ); color: var( --zloto-cieply ); }
.tkb-kafel small { font-size: 11.5px; color: var( --tekst ); }
.tkb-kafel span { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var( --tekst-slaby ); }

/* ─────────────────────────────  metoda  ──────────────────────────── */

.tkb-metoda__gwiazda { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 6px; color: var( --zloto ); font-size: 16px; }
.tkb-metoda__gwiazda i { display: block; width: 130px; height: 1px; background: linear-gradient( 90deg, transparent, var( --zloto-ciemne ) ); }
.tkb-metoda__gwiazda i + i { background: linear-gradient( 90deg, var( --zloto-ciemne ), transparent ); }
.tkb-metoda__siatka { display: grid; grid-template-columns: repeat( 3, minmax( 0, 1fr ) ); gap: 20px; }
.tkb-karta-metody { display: grid; grid-template-columns: 180px minmax( 0, 1fr ); gap: 18px; padding: 20px; border: 1px solid var( --obrys ); border-radius: 18px; background: var( --panel-mocny ); }
.tkb-karta-metody__obraz { width: 180px; height: 180px; border-radius: 14px; overflow: hidden; background: radial-gradient( circle at 50% 40%, #241a4a, #0a0722 75% ); display: grid; place-items: center; }
.tkb-karta-metody__obraz svg { width: 88%; height: 88%; overflow: visible; }
.tkb-karta-metody__obraz--armila { background: var( --armila ) center / cover no-repeat; }
.tkb-karta-metody__obraz--zwoj { padding: 14px; }
.tkb-karta-metody__obraz--zwoj b { display: block; font: 400 13px/1.55 var( --hebr ); color: var( --zloto-ciemne ); direction: rtl; text-align: justify; opacity: .85; overflow: hidden; max-height: 100%; }
.tkb-karta-metody__nad { margin: 0 0 6px; font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tkb-karta-metody h3 { margin: 0 0 8px; font: 500 22px var( --serif ); color: var( --zloto-cieply ); }
.tkb-karta-metody p { margin: 0 0 12px; font-size: 13px; line-height: 1.65; color: var( --tekst ); }

/* ─────────────────────────────  okno (poza .tkb-strona → własne tokeny)  ── */

.tkb-okno { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
	--zloto: #fde291; --zloto-cieply: #f9d57a; --zloto-ciemne: #e6c48a; --zloto-etyk: #cda474; --lawenda: #ad97d3; --lawenda-jasna: #c9b8ef;
	--tekst: #c9c4cf; --tekst-slaby: #9a94a6; --tekst-mocny: #efeaf0; --obrys: rgba( 230, 196, 138, .34 ); --obrys-slaby: rgba( 230, 196, 138, .16 );
	--mocna: #f6cf5e; --rowna: #ad97d3; --slaba: #5a4b7a; --f-mercy: #f2c95c; --f-middle: #b58cf0; --f-severity: #7fb3ff;
	--serif: 'Cormorant Garamond', 'Times New Roman', serif; --sans: 'Jost', system-ui, sans-serif; --hebr: 'Noto Serif Hebrew', serif;
	font: 300 15px/1.6 var( --sans ); color: var( --tekst ); }
.tkb-okno * { box-sizing: border-box; }
.tkb-okno__tlo { position: absolute; inset: 0; background: rgba( 3, 2, 10, .72 ); backdrop-filter: blur( 10px ); }
.tkb-okno__panel { position: relative; display: grid; grid-template-columns: 260px minmax( 0, 1fr ); gap: 34px; width: min( 100%, 980px ); max-height: 92vh; overflow: auto; padding: 34px 38px; border: 1px solid var( --obrys ); border-radius: 18px; background: radial-gradient( 700px 400px at 20% 0, color-mix( in srgb, var( --b, #a06ffb ) 22%, transparent ), transparent 70% ), linear-gradient( 180deg, #0e0a1e, #070516 ); box-shadow: 0 40px 100px rgba( 0, 0, 0, .7 ); }
.tkb-okno__panel--jeden { grid-template-columns: 1fr; width: min( 100%, 820px ); }
.tkb-okno__panel--drzewo { grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1.1fr ); width: min( 100%, 1240px ); }
.tkb-okno__zamknij { position: absolute; right: 14px; top: 12px; z-index: 2; width: 36px; height: 36px; border: 1px solid var( --obrys ); border-radius: 999px; background: rgba( 7, 5, 22, .8 ); color: var( --zloto ); font-size: 22px; cursor: pointer; }
.tkb-okno__zamknij:hover { border-color: var( --zloto ); }
.tkb-okno__lewa { display: grid; align-content: start; justify-items: center; gap: 14px; }
.tkb-okno__lewa .tkb-pieczec { width: 220px; height: 220px; }
.tkb-okno__lewa .tkb-pieczec svg { width: 100%; height: 100%; }
.tkb-okno__kula { width: 150px; height: 150px; border-radius: 999px; background: radial-gradient( circle at 40% 35%, var( --b ), #0a0722 75% ); box-shadow: 0 0 60px color-mix( in srgb, var( --b ) 45%, transparent ); display: grid; place-items: center; font: 500 56px var( --serif ); color: #0a0722; }
.tkb-okno__kula--foto { width: 190px; height: 190px; background-size: cover; background-position: center; color: transparent; box-shadow: 0 0 70px color-mix( in srgb, var( --b ) 55%, transparent ), inset 0 0 0 1px rgba( 255, 255, 255, .1 ); }
.tkb-okno__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; width: 100%; }
.tkb-okno__meta dt { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var( --zloto-etyk ); line-height: 1.9; }
.tkb-okno__meta dd { margin: 0; color: var( --tekst-mocny ); }
.tkb-okno__prawa { min-width: 0; }
.tkb-okno__nad { margin: 0 0 6px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tkb-okno__tytul { margin: 0 0 4px; font: 500 40px/1.1 var( --serif ); color: var( --zloto-cieply ); }
.tkb-okno__hebr { margin: 0 0 12px; font: 400 26px var( --hebr ); color: var( --lawenda ); direction: rtl; text-align: left; }
.tkb-okno__lead { margin: 0 0 18px; font-size: 15.5px; line-height: 1.65; color: var( --tekst-mocny ); }
.tkb-okno__sekcja { margin: 0 0 14px; padding-top: 14px; border-top: 1px solid var( --obrys-slaby ); }
.tkb-okno__sekcja h4 { margin: 0 0 8px; font: 500 20px var( --serif ); color: var( --zloto ); }
.tkb-okno__sekcja p { margin: 0; font-size: 14px; line-height: 1.65; color: var( --tekst ); }
.tkb-okno__sekcja ul { margin: 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.6; color: var( --tekst ); }
.tkb-okno__sekcja li::marker { color: var( --zloto-ciemne ); }
.tkb-okno__skladniki { display: grid; grid-template-columns: repeat( 4, 1fr ); gap: 10px; margin: 0; }
.tkb-okno__skladniki div { padding: 10px 12px; border: 1px solid var( --obrys-slaby ); border-radius: 10px; }
.tkb-okno__skladniki dt { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var( --zloto-etyk ); }
.tkb-okno__skladniki dd { margin: 4px 0 0; font: 500 22px var( --serif ); color: var( --tekst-mocny ); }
.tkb-okno__skladniki dd small { display: block; font: 300 11.5px var( --sans ); color: var( --tekst-slaby ); }

/* pełne drzewo (okno) — filary jako karty z ikoną planety, synteza, legenda */
.tkb-okno__drzewo svg { width: 100%; max-height: 82vh; overflow: visible; }
.tkb-fkarty { display: grid; gap: 14px; }
.tkb-fkarta { display: grid; grid-template-columns: 74px minmax( 0, 1fr ); gap: 4px 18px; align-items: center; padding: 16px 20px; border: 1px solid var( --obrys ); border-radius: 16px; background: rgba( 7, 5, 22, .7 ); }
.tkb-fkarta__ikona { grid-row: 1 / 4; width: 74px; height: 74px; border-radius: 999px; display: grid; place-items: center; font: 500 30px var( --serif ); color: #0a0722; background: radial-gradient( circle at 40% 35%, var( --fb ), #0a0722 78% ); box-shadow: 0 0 30px color-mix( in srgb, var( --fb ) 55%, transparent ); }
.tkb-fkarta h4 { margin: 0; display: flex; justify-content: space-between; align-items: baseline; font: 500 22px var( --serif ); color: var( --zloto-cieply ); }
.tkb-fkarta h4 output { font-size: 20px; color: var( --zloto ); }
.tkb-fkarta .pasek { position: relative; height: 5px; border-radius: 999px; background: rgba( 230, 196, 138, .12 ); }
.tkb-fkarta .pasek i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var( --fb ); }
.tkb-fkarta p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var( --tekst ); }
.tkb-fkarta--mercy { --fb: var( --f-mercy ); } .tkb-fkarta--middle { --fb: var( --f-middle ); } .tkb-fkarta--severity { --fb: var( --f-severity ); }
.tkb-synteza { margin: 14px 0 0; padding: 16px 20px; border: 1px solid var( --obrys ); border-left: 3px solid var( --zloto-ciemne ); border-radius: 12px; font: italic 400 16.5px/1.6 var( --serif ); color: var( --tekst-mocny ); background: rgba( 7, 5, 22, .7 ); }
.tkb-legenda { display: flex; gap: 22px; justify-content: flex-end; margin: 14px 0 0; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var( --tekst-slaby ); }
.tkb-legenda i { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 999px; vertical-align: middle; }
.tkb-legenda .jest-mocna { background: var( --mocna ); box-shadow: 0 0 10px var( --mocna ); }
.tkb-legenda .jest-rowna { background: var( --rowna ); }
.tkb-legenda .jest-slaba { background: var( --slaba ); }

/* ─────────────────────────────  ekrany  ──────────────────────────── */

@media ( max-width: 1200px ) {
	.tkb-hero { grid-template-columns: 1fr 1fr; padding: 30px 30px; }
	.tkb-hero__drzewo { grid-column: 1; height: 460px; }
	.tkb-glowa { grid-column: 2; }
	.tkb-bok { display: none; }
	.tkb-wynik, .tkb-drzewo-sekcja, .tkb-sily, .tkb-litery, .tkb-galeria, .tkb-metoda { padding: 0 24px; }
	.tkb-drzewo__uklad { grid-template-columns: 1fr; }
	.tkb-sily__siatka { grid-template-columns: 1fr 1fr; }
	.tkb-sciezki { grid-template-columns: repeat( 6, 1fr ); }
	.tkb-metoda__siatka { grid-template-columns: 1fr; }
	.tkb-nav__linki { display: none; }
	.tkb-form { grid-template-columns: 1fr 1fr 1fr; }
	.tkb-form__lock { display: none; }
	.tkb-aniolowie { grid-template-columns: 1fr; }
}
@media ( max-width: 800px ) {
	.tkb-hero { grid-template-columns: 1fr; }
	.tkb-hero__drzewo, .tkb-glowa { grid-column: 1; }
	.tkb-form { grid-template-columns: 1fr 1fr; }
	.tkb-pole--miasto, .tkb-form .tkb-btn--pelny { grid-column: 1 / -1; }
	.tkb-aniol { grid-template-columns: 1fr; }
	.tkb-aniol .tkb-pieczec, .tkb-aniol__tekst { grid-column: 1; grid-row: auto; justify-self: center; text-align: center; }
	.tkb-sily__siatka { grid-template-columns: 1fr; }
	.tkb-sciezki { grid-template-columns: repeat( 4, 1fr ); }
	.tkb-slider { padding: 0; } .tkb-slider__strz { display: none; }
	.tkb-slider--dwa .tkb-slider__tor { grid-template-rows: auto; }
	.tkb-karta-metody { grid-template-columns: 1fr; }
	.tkb-okno__panel, .tkb-okno__panel--drzewo { grid-template-columns: 1fr; padding: 24px; }
	.tkb-okno__skladniki { grid-template-columns: 1fr 1fr; }
}
@media ( max-width: 680px ) {
	.tkb-nad { font-size: 9.5px; letter-spacing: .2em; }
	.tkb-ozdoba i { width: 36px; }
	.tkb-tytul { font-size: 38px; }
	.tkb-hero { min-height: 0; padding: 16px 16px 24px; }
	.tkb-hero__drzewo { height: 400px; }
	.tkb-nav { padding: 10px 16px; }
	.tkb-nav__marka span { display: none; }
}