/*
Theme Name: sousweb kursy
Theme URI: https://sousweb.com
Author: sousweb
Author URI: https://sousweb.com
Description: Strona sprzedażowa kursu online w stylu premiery produktu: czarne hero, karuzela najważniejszych rzeczy, kafelki, przewijana historia, kalkulator i program kursu. Działa z darmowym Tutor LMS. Tryb demo z wejściem jako kursant na tymczasowym koncie. Treści zmienisz w Wygląd > Dostosuj > Akademia.
Version: 1.0.1
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: sousweb-kursy
*/

@font-face { font-family: 'Akademia Text'; src: url('assets/fonts/akademia-text-400.woff') format('woff'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Akademia Text'; src: url('assets/fonts/akademia-text-500.woff') format('woff'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Akademia Text'; src: url('assets/fonts/akademia-text-600.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Akademia Display'; src: url('assets/fonts/akademia-display-600.woff') format('woff'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Akademia Display'; src: url('assets/fonts/akademia-display-700.woff') format('woff'); font-weight: 700; font-display: swap; }

:root {
	--black: #000000;
	--ink: #1D1D1F;
	--gray: #6E6E73;
	--gray-2: #86868B;
	--gray-3: #A1A1A6;
	--line: #D2D2D7;
	--paper: #F5F5F7;
	--white: #FFFFFF;
	--card-dark: #1D1D1F;
	--blue: #0071E3;
	--blue-hover: #0077ED;
	--link: #0066CC;
	--link-dark: #2997FF;
	/* Kolor skórki chleba: jedyny ciepły akcent na stronie */
	--crust: linear-gradient(90deg, #F7B267 0%, #E8743B 55%, #D9532E 100%);
	--crust-solid: #E8743B;

	--f-display: 'Akademia Display', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
	--f-text: 'Akademia Text', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif;
	--ease: cubic-bezier(.28, .11, .32, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--wrap: 1068px;
	--gut: 22px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
	margin: 0;
	overflow-x: clip;
	background: var(--white);
	color: var(--ink);
	font-family: var(--f-text);
	font-size: 17px;
	line-height: 1.47;
	letter-spacing: -.022em;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body.home { background: var(--black); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
[id] { scroll-margin-top: 60px; }
sup { font-size: .55em; vertical-align: super; line-height: 0; margin-left: 1px; color: var(--gray-2); }

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin: 0 auto; padding: 0 var(--gut); }
.ico { width: 1em; height: 1em; flex: 0 0 auto; }

.h2 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(40px, 6.2vw, 80px); line-height: 1.05; letter-spacing: -.015em; text-wrap: balance; }
.h2--light { color: var(--paper); }
.lead { margin: 0; max-width: 36rem; font-size: clamp(19px, 1.9vw, 21px); line-height: 1.42; color: var(--gray); letter-spacing: .011em; }
.eyebrow { margin: 0 0 12px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; background: var(--crust); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }

/* Przyciski: niebieska pigułka i link ze strzałką */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 980px; background: var(--blue); color: var(--white); font-size: 17px; font-weight: 400; letter-spacing: -.022em; text-decoration: none; transition: background .2s; white-space: nowrap; }
.pill:hover { background: var(--blue-hover); text-decoration: none; }
.pill--sm { min-height: 28px; padding: 0 12px; font-size: 12px; letter-spacing: -.01em; }
.link { display: inline-flex; align-items: center; gap: 4px; font-size: 17px; color: var(--link); }
.link .ico { width: 14px; height: 14px; }
.link .ico--play { width: 18px; height: 18px; padding: 3px; border: 1.5px solid currentColor; border-radius: 50%; margin-right: 6px; }
.link--light { color: var(--link-dark); }

/* Pasek demo */
.ribbon { margin: 0; padding: 12px var(--gut); background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.4; text-align: center; }
.ribbon a { display: inline-flex; align-items: center; gap: 2px; }
.ribbon .ico { width: 12px; height: 12px; }
.notice-bar { padding: 14px var(--gut); background: #FFF4E5; color: var(--ink); font-size: 15px; text-align: center; }
.notice-bar__link { display: inline-flex; align-items: center; gap: 2px; margin-left: 8px; color: var(--blue); font-weight: 600; text-decoration: none; white-space: nowrap; }
.notice-bar__link:hover { text-decoration: underline; }
.notice-bar__link svg { width: 12px; height: 12px; }

/* Menu główne: cienkie, ciemne, przewija się razem ze stroną */
.gnav { position: relative; z-index: 60; background: rgba(22, 22, 23, .92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.gnav__inner { max-width: 1024px; margin: 0 auto; padding: 0 var(--gut); height: 44px; display: flex; align-items: center; gap: 32px; }
.gnav__logo { display: inline-flex; align-items: center; gap: 8px; color: #E8E8ED; font-size: 14px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.gnav__logo:hover { text-decoration: none; color: var(--white); }
.gnav__links { flex: 1; display: flex; justify-content: center; gap: 32px; }
.gnav__links a, .gnav__account { color: rgba(232, 232, 237, .8); font-size: 12px; letter-spacing: -.01em; transition: color .2s; }
.gnav__links a:hover, .gnav__account:hover { color: var(--white); text-decoration: none; }
.gnav__account { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.gnav__account .ico { width: 16px; height: 16px; }

/* Menu kursu: przykleja się do góry przy przewijaniu */
.lnav { position: sticky; top: 0; z-index: 55; background: rgba(22, 22, 23, .8); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, .12); transition: background .3s; }
.lnav.is-light { background: rgba(251, 251, 253, .82); border-bottom-color: rgba(0, 0, 0, .12); }
.lnav__inner { max-width: 1024px; margin: 0 auto; padding: 0 var(--gut); height: 52px; display: flex; align-items: center; gap: 20px; }
.lnav__title { margin-right: auto; color: var(--paper); font-family: var(--f-display); font-size: 21px; font-weight: 600; letter-spacing: .011em; white-space: nowrap; }
.lnav__title:hover { text-decoration: none; }
.lnav__links { display: flex; gap: 24px; }
.lnav__links a { color: rgba(245, 245, 247, .8); font-size: 12px; letter-spacing: -.01em; }
.lnav__links a:hover { color: var(--white); text-decoration: none; }
.lnav.is-light .lnav__title { color: var(--ink); }
.lnav.is-light .lnav__links a { color: rgba(29, 29, 31, .8); }
.lnav.is-light .lnav__links a:hover { color: var(--ink); }
.lnav__toggle { display: none; width: 32px; height: 32px; margin-right: -6px; border: 0; background: none; color: var(--paper); cursor: pointer; align-items: center; justify-content: center; }
.lnav__toggle .ico { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .3s var(--ease); }
.lnav.is-light .lnav__toggle { color: var(--ink); }

/* Hero: czarne tło, nazwa kursu i bochenek jak produkt na premierze */
.hero { position: relative; overflow: hidden; background: var(--black); color: var(--paper); text-align: center; padding: 56px 0 0; }
.hero__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: 0 var(--gut); }
.hero__eyebrow { margin: 0 0 6px; font-size: clamp(19px, 2vw, 24px); font-weight: 600; letter-spacing: .009em; background: var(--crust); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__title { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(52px, 9.4vw, 112px); line-height: 1; letter-spacing: -.02em; color: #F5F5F7; }
.hero__sub { margin: 14px 0 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(22px, 2.9vw, 32px); line-height: 1.15; letter-spacing: .004em; color: #F5F5F7; text-wrap: balance; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 18px 28px; margin-top: 28px; }
.hero__price { margin: 16px 0 0; color: var(--gray-2); font-size: 17px; }
.hero__stage { position: relative; height: clamp(340px, 48vw, 600px); margin-top: -2vw; display: flex; align-items: flex-start; justify-content: center; }
.hero__loaf { position: relative; z-index: 1; width: min(92vw, 980px); transform-origin: 50% 30%; transform: scale(var(--s, 1)) translateY(var(--y, 0)); filter: brightness(var(--b, 1)); will-change: transform; }
.hero__glow { position: absolute; left: 50%; top: 52%; width: 90%; height: 60%; transform: translate(-50%, -50%); background: radial-gradient(ellipse at center, rgba(232, 116, 59, .22), rgba(232, 116, 59, 0) 62%); opacity: var(--g, .6); pointer-events: none; }

/* Najważniejsze: karuzela dużych kart */
.highlights { background: var(--black); color: var(--paper); padding: clamp(60px, 9vw, 110px) 0 clamp(90px, 12vw, 160px); }
.highlights .h2 { margin-bottom: clamp(32px, 4vw, 52px); }
.hl { position: relative; }
.hl__track { margin: 0; padding: 0 max(var(--gut), calc((100vw - var(--wrap)) / 2)); list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(1260px, calc(100vw - var(--gut) * 4)); gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 max(var(--gut), calc((100vw - var(--wrap)) / 2)); scrollbar-width: none; overscroll-behavior-x: contain; }
.hl__track::-webkit-scrollbar { display: none; }
.hl__card { position: relative; scroll-snap-align: start; height: clamp(440px, 52vw, 680px); border-radius: 28px; overflow: hidden; background: #0C0C0D; display: flex; flex-direction: column; }
.hl__cap { position: relative; z-index: 2; margin: 0; padding: clamp(28px, 4vw, 52px) clamp(28px, 4vw, 56px) 0; max-width: 680px; font-family: var(--f-display); font-weight: 600; font-size: clamp(21px, 2.6vw, 28px); line-height: 1.14; letter-spacing: .007em; color: var(--gray-2); }
.hl__cap strong { color: var(--paper); font-weight: 600; }
.hl__media { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hl__media--scene { padding: 24px clamp(24px, 6vw, 120px) 0; align-items: flex-end; }
.hl__scene { display: block; width: 100%; height: 100%; max-height: 100%; border-radius: 18px 18px 0 0; }
.hl__media--scene .hl__scene { height: auto; aspect-ratio: 16 / 9; max-width: 900px; }
.hl__controls { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 30px; }
.hl__dots { display: flex; gap: 14px; padding: 18px 22px; border-radius: 999px; background: rgba(66, 66, 69, .72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.hl__dots button { position: relative; width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(245, 245, 247, .55); cursor: pointer; overflow: hidden; transition: width .5s var(--ease); }
.hl__dots button[aria-selected="true"] { width: 48px; background: rgba(245, 245, 247, .35); }
.hl__dots button span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--paper); border-radius: inherit; }
.hl__dots button[aria-selected="true"] span { width: var(--p, 0%); }
.hl__play { width: 56px; height: 56px; border: 0; border-radius: 50%; background: rgba(66, 66, 69, .72); color: var(--paper); cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); transition: background .2s; }
.hl__play:hover { background: rgba(86, 86, 90, .8); }
.hl__play .ico { width: 18px; height: 18px; }
.hl__play .ico--play { display: none; }
.hl__play.is-paused .ico--play { display: block; }
.hl__play.is-paused .ico--pause { display: none; }

/* Karta 2: telefon z lekcją */
.phone { position: relative; width: 270px; height: 100%; max-height: 540px; aspect-ratio: 9 / 18; padding: 11px; border-radius: 48px; background: #1C1C1E; box-shadow: inset 0 0 0 1.5px #3A3A3C, 0 30px 80px rgba(0, 0, 0, .6); transform: translateY(40px); opacity: .4; transition: transform 1s var(--ease-out), opacity 1s; }
.phone::before { content: ""; position: absolute; left: 50%; top: 19px; width: 86px; height: 24px; margin-left: -43px; border-radius: 999px; background: #000; z-index: 2; }
.is-active .phone { transform: none; opacity: 1; }
.phone__screen { height: 100%; border-radius: 38px; overflow: hidden; background: var(--white); color: var(--ink); }
.ls { padding: 52px 16px 16px; display: flex; flex-direction: column; gap: 6px; height: 100%; }
.ls__video { position: relative; margin: 0 -16px 8px; }
.ls__video .hl__scene { border-radius: 0; height: auto; aspect-ratio: 16 / 9; }
.ls__time { position: absolute; right: 8px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 10px; letter-spacing: 0; }
.ls__crumb { margin: 0; font-size: 11px; color: var(--gray); }
.ls__title { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 19px; line-height: 1.15; }
.ls__text { margin: 2px 0 0; font-size: 12.5px; line-height: 1.45; color: #424245; }
.ls__done { margin-top: auto; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 12px; background: var(--blue); color: #fff; font-size: 13px; }

/* Karta 3: pierścień postępu */
.progress { display: grid; grid-template-columns: auto auto; align-items: center; gap: 24px 48px; }
.ring { width: clamp(150px, 20vw, 230px); height: auto; transform: rotate(-90deg); grid-row: span 2; }
.ring circle { fill: none; stroke-width: 10; stroke-linecap: round; }
.ring__bg { stroke: #2C2C2E; }
.ring__fg { stroke: var(--crust-solid); stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
.is-active .ring__fg { stroke-dashoffset: 31; }
.progress__pct { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(56px, 8vw, 96px); line-height: 1; letter-spacing: -.02em; color: var(--paper); }
.progress__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 17px; color: var(--gray-2); }
.progress__list li { display: flex; align-items: center; gap: 10px; }
.progress__list li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #48484A; flex: 0 0 auto; }
.progress__list .is-done { color: var(--paper); }
.progress__list .is-done::before { border: 0; background: #30D158 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.progress__list .is-now { color: var(--paper); }
.progress__list .is-now::before { border-color: var(--crust-solid); background: radial-gradient(circle, var(--crust-solid) 0 40%, transparent 42%); }

/* Karta 4: pytanie i odpowiedź */
.chat { width: min(600px, 100%); display: flex; flex-direction: column; gap: 14px; }
.chat p { margin: 0; max-width: 82%; padding: 14px 18px; border-radius: 22px; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.35; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .5s, transform .6s var(--ease-out); }
.chat span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; opacity: .7; }
.chat__q { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 6px; }
.chat__a { align-self: flex-start; background: #2C2C2E; color: var(--paper); border-bottom-left-radius: 6px; }
.is-active .chat p { opacity: 1; transform: none; }
.is-active .chat p:nth-child(2) { transition-delay: 1.1s; }
.is-active .chat p:nth-child(3) { transition-delay: 2.4s; }

/* Karta 5: quiz */
.quiz { width: min(580px, 100%); padding: clamp(22px, 3vw, 34px); border-radius: 22px; background: #1C1C1E; display: flex; flex-direction: column; gap: 10px; }
.quiz__q { margin: 0 0 8px; font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--paper); }
.quiz__a { display: flex; align-items: center; height: 48px; padding: 0 18px; border-radius: 12px; border: 1.5px solid #3A3A3C; color: var(--paper); font-size: 17px; transition: border-color .4s, background .4s; }
.is-active .quiz__a--ok { border-color: #30D158; background: rgba(48, 209, 88, .12); transition-delay: 1s; }
.quiz__note { margin: 6px 0 0; color: #30D158; font-size: 15px; opacity: 0; transition: opacity .5s 1.4s; }
.is-active .quiz__note { opacity: 1; }

/* Poznaj kurs: kafelki */
.bento { background: var(--paper); padding: clamp(90px, 12vw, 160px) 0; }
.bento .h2 { margin-bottom: clamp(36px, 5vw, 64px); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.tile { position: relative; min-height: 340px; padding: 36px 36px 32px; border-radius: 28px; background: var(--white); overflow: hidden; display: flex; flex-direction: column; }
.tile--wide { grid-column: span 2; }
.tile--dark { background: var(--black); color: var(--paper); }
.tile__eyebrow { margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--gray); }
.tile--dark .tile__eyebrow { color: var(--gray-2); }
.tile__big { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; letter-spacing: -.005em; text-wrap: balance; }
.tile__num { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(40px, 4.3vw, 60px); white-space: nowrap; line-height: 1; letter-spacing: -.02em; background: var(--crust); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tile__num--inf { font-size: clamp(96px, 11vw, 130px); line-height: .8; margin-bottom: 12px; }
.tile__text { margin: 12px 0 0; font-size: 17px; color: var(--gray); max-width: 26rem; }
.tile--stat { justify-content: flex-end; }
.chips { margin: auto 0 0; padding: 26px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border-radius: 999px; background: var(--paper); font-size: 15px; font-weight: 500; }
.chips span { width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.tile--crumb { grid-row: span 2; }
.tile__img { width: 120%; max-width: none; margin: auto -16% -6% auto; align-self: flex-end; transform: rotate(-6deg); filter: drop-shadow(0 30px 40px rgba(232, 116, 59, .18)); }
.timeline { margin: 4px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.timeline li { position: relative; padding: 0 0 18px 22px; font-size: 15px; color: var(--gray); }
.timeline li::before { content: ""; position: absolute; left: 0; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--crust-solid); }
.timeline li::after { content: ""; position: absolute; left: 4px; top: 20px; bottom: 2px; width: 1px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline strong { display: block; color: var(--ink); font-weight: 600; font-size: 17px; }
.devices { position: relative; height: 150px; margin-top: auto; }
.devices__laptop { position: absolute; left: 0; bottom: 0; width: 78%; aspect-ratio: 16 / 10; padding: 6px; border-radius: 12px 12px 4px 4px; background: #1D1D1F; }
.devices__laptop::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -8px; height: 8px; border-radius: 0 0 10px 10px; background: linear-gradient(#D2D2D7, #A1A1A6); }
.devices__screen { display: block; height: 100%; border-radius: 6px; background: var(--paper); overflow: hidden; position: relative; }
.devices__side { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; background: #FFFFFF; border-right: 1px solid var(--line); background-image: repeating-linear-gradient(#FFFFFF 0 10px, #E8E8ED 10px 14px, #FFFFFF 14px 20px); background-position: 0 10px; background-size: 80% 100%; background-repeat: no-repeat; }
.devices__main { position: absolute; left: 34%; right: 6%; top: 10%; height: 54%; border-radius: 4px; background: linear-gradient(135deg, #F3E3C2, #D9B784); }
.devices__phone { position: absolute; right: 2%; bottom: -6px; width: 26%; aspect-ratio: 9 / 18; padding: 4px; border-radius: 16px; background: #1D1D1F; }
.devices__phone .devices__screen { border-radius: 12px; background: linear-gradient(180deg, #D9B784 0 34%, #FFFFFF 34%); }
.tile--forever { grid-column: span 2; justify-content: flex-end; }
.tile--forever .tile__num--inf { font-size: clamp(110px, 13vw, 170px); }

/* Historia: od zakwasu do bochenka, przewijana */
.story { position: relative; height: 300vh; background: var(--black); color: var(--paper); }
.story__sticky { position: sticky; top: 52px; height: calc(100vh - 52px); min-height: 560px; display: flex; align-items: center; overflow: hidden; }
.story .h2 { font-size: clamp(36px, 4.6vw, 56px); }
.story__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.story__steps ol { margin: 36px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 22px; }
.story__steps li { position: relative; padding-left: 46px; font-size: 17px; line-height: 1.45; color: var(--gray-2); opacity: .45; transition: opacity .4s, color .4s; }
.story__steps li strong { display: block; color: var(--paper); font-family: var(--f-display); font-size: 24px; font-weight: 600; margin-bottom: 2px; }
.story__steps li.is-active { opacity: 1; color: var(--gray-3); }
.story__n { position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid #48484A; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--paper); transition: background .4s, border-color .4s; }
.story__steps li.is-active .story__n { background: var(--paper); color: var(--black); border-color: var(--paper); }
.tablet { padding: 12px; border-radius: 30px; background: #1C1C1E; box-shadow: inset 0 0 0 1.5px #3A3A3C, 0 40px 120px rgba(232, 116, 59, .12); }
.story__scene { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 20px; }
.story__bar { margin: 22px auto 0; width: 50%; height: 3px; border-radius: 2px; background: #2C2C2E; overflow: hidden; }
.story__bar span { display: block; height: 100%; width: 0; background: var(--paper); }

/* Kalkulator */
.calc { background: var(--white); padding: clamp(90px, 12vw, 160px) 0; }
.calc__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 80px); align-items: center; }
.calc__intro .lead { margin-top: 20px; }
.calc__panel { padding: clamp(26px, 4vw, 44px); border-radius: 28px; background: var(--paper); display: flex; flex-direction: column; gap: 26px; }
.calc__row { display: flex; flex-direction: column; gap: 12px; }
.calc__label { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.calc__label output { font-weight: 400; color: var(--gray); font-variant-numeric: tabular-nums; }
.seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 3px; border-radius: 12px; background: #E3E3E8; }
.seg button { height: 36px; border: 0; border-radius: 9px; background: transparent; font-size: 15px; font-weight: 500; cursor: pointer; transition: background .25s, box-shadow .25s; }
.seg button[aria-pressed="true"] { background: var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; --fill: 50%; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue) var(--fill), #D2D2D7 var(--fill)); }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--blue) var(--fill), #D2D2D7 var(--fill)); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -11px; border-radius: 50%; background: var(--white); box-shadow: 0 1px 6px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .06); }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border: 0; border-radius: 50%; background: var(--white); box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.calc__result { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.calc__result div { padding: 16px 12px; border-radius: 16px; background: var(--white); text-align: center; }
.calc__result dt { font-size: 13px; color: var(--gray); }
.calc__result dd { margin: 4px 0 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__note { margin: 0; font-size: 14px; color: var(--gray); }

/* Program */
.program { background: var(--paper); padding: clamp(90px, 12vw, 160px) 0; }
.program__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(32px, 4vw, 52px); }
.modules { display: flex; flex-direction: column; gap: 14px; }
.module { border-radius: 22px; background: var(--white); overflow: hidden; }
.module summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 24px 28px; cursor: pointer; list-style: none; }
.module summary::-webkit-details-marker { display: none; }
.module__n { width: 44px; height: 44px; border-radius: 50%; background: var(--paper); font-family: var(--f-display); font-weight: 600; font-size: 19px; display: flex; align-items: center; justify-content: center; }
.module__title { font-family: var(--f-display); font-weight: 600; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.15; }
.module__title small { display: block; margin-top: 4px; font-family: var(--f-text); font-weight: 400; font-size: 15px; color: var(--gray); letter-spacing: -.01em; }
.module__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--paper); display: flex; align-items: center; justify-content: center; transition: transform .4s var(--ease); }
.module__icon .ico { width: 16px; height: 16px; }
.module[open] .module__icon { transform: rotate(45deg); }
.module__body { padding: 0 28px 24px 90px; }
.module__summary { margin: 0 0 12px; color: var(--gray); }
.lessons { margin: 0; padding: 0; list-style: none; }
.lessons li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #E8E8ED; font-size: 17px; }
.lessons__n { font-size: 14px; color: var(--gray-2); font-variant-numeric: tabular-nums; }
.lessons__min { font-size: 14px; color: var(--gray); white-space: nowrap; }
.lessons__free { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px; background: rgba(0, 113, 227, .08); font-size: 14px; }
.lessons__free .ico { width: 16px; height: 16px; padding: 3px; border-radius: 50%; background: var(--blue); color: #fff; }
.lessons__free:hover { text-decoration: none; background: rgba(0, 113, 227, .14); }
.lessons__quiz .lessons__n { font-weight: 600; color: var(--crust-solid); }
.lessons__quiz .lessons__title { color: var(--gray); }
@supports (interpolate-size: allow-keywords) {
	.module, .qa { interpolate-size: allow-keywords; }
	.module::details-content, .qa::details-content { height: 0; overflow: clip; transition: height .5s var(--ease), content-visibility .5s allow-discrete; }
	.module[open]::details-content, .qa[open]::details-content { height: auto; }
}

/* Prowadząca */
.teacher { background: var(--white); padding: clamp(90px, 12vw, 160px) 0; }
.teacher__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.teacher__photo { aspect-ratio: 1; border-radius: 50%; overflow: hidden; max-width: 420px; }
.teacher__img { width: 100%; height: 100%; object-fit: cover; }
.teacher__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: radial-gradient(circle at 32% 28%, #FBE3C4, #F2B47A 45%, #D96A3A 100%); color: rgba(255, 255, 255, .92); font-family: var(--f-display); font-weight: 600; font-size: clamp(72px, 10vw, 140px); letter-spacing: -.02em; }
.teacher__role { margin: 14px 0 22px; font-size: 21px; font-weight: 600; color: var(--ink); letter-spacing: .011em; }

/* Ceny */
.pricing { background: var(--paper); padding: clamp(90px, 12vw, 160px) 0; text-align: center; }
.pricing .h2 { margin-bottom: clamp(36px, 5vw, 64px); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 860px; margin: 0 auto; }
.plans--one { grid-template-columns: minmax(0, 420px); justify-content: center; }
.plan { position: relative; padding: 48px 36px 40px; border-radius: 28px; background: var(--white); display: flex; flex-direction: column; align-items: center; }
.plan__badge { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; font-size: 12px; font-weight: 600; background: var(--crust); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.plan__name { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 24px; line-height: 1.2; text-wrap: balance; }
.plan__price { margin: 10px 0 22px; font-family: var(--f-display); font-weight: 600; font-size: 40px; letter-spacing: -.01em; }
.plan__list { margin: 30px 0 0; padding: 26px 0 0; border-top: 1px solid #E8E8ED; list-style: none; display: flex; flex-direction: column; gap: 14px; text-align: left; align-self: stretch; font-size: 15px; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; }
.plan__list .ico { width: 18px; height: 18px; color: #1D9E4A; margin-top: 1px; }
.pricing__pay { margin: 30px 0 0; color: var(--gray); font-size: 15px; }

/* Opinie */
.voices { background: var(--white); padding: clamp(90px, 12vw, 160px) 0; }
.voices .h2 { margin-bottom: clamp(36px, 5vw, 64px); }
.voices__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.voice { margin: 0; padding: 32px; border-radius: 28px; background: var(--paper); display: flex; flex-direction: column; gap: 20px; }
.voice blockquote { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: .005em; }
.voice figcaption { margin-top: auto; color: var(--gray); font-size: 15px; }
.demo-note { margin: 28px 0 0; color: var(--gray); font-size: 14px; }

/* Pytania */
.faq { background: var(--paper); padding: clamp(90px, 12vw, 160px) 0; }
.faq__wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq__list { border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--f-display); font-weight: 600; font-size: 21px; line-height: 1.25; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary span { width: 30px; height: 30px; border-radius: 50%; background: var(--white); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: transform .4s var(--ease); }
.qa summary .ico { width: 14px; height: 14px; }
.qa[open] summary span { transform: rotate(45deg); }
.qa p { margin: 0; padding: 0 50px 24px 0; color: var(--gray); }

/* Finał */
.finale { background: var(--black); color: var(--paper); text-align: center; padding: clamp(90px, 12vw, 150px) 0 clamp(100px, 13vw, 170px); overflow: hidden; }
.finale__inner { display: flex; flex-direction: column; align-items: center; }
.finale__loaf { width: min(520px, 80vw); margin-bottom: 20px; }
.finale .h2 { max-width: 14ch; }

/* Stopka */
.foot { background: var(--paper); color: var(--gray); font-size: 12px; line-height: 1.33; letter-spacing: -.01em; }
.foot__inner { max-width: 1024px; margin: 0 auto; padding: 18px var(--gut) 22px; }
.foot__notes { padding: 0 0 12px; border-bottom: 1px solid var(--line); }
.foot__notes p { margin: 0 0 8px; }
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.foot__h { margin: 0 0 8px; color: var(--ink); font-weight: 600; }
.foot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.foot a { color: #424245; }
.foot__base { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-top: 14px; }
.foot__base p { margin: 0; }
.foot__legal { flex-direction: row !important; flex-wrap: wrap; gap: 0 14px !important; }
.foot__credit { margin-left: auto !important; }

/* Okienka: lekcja próbna i tryb demo */
.sheet { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, .48); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.sheet.is-open { opacity: 1; visibility: visible; }
.sheet__box { position: relative; width: min(460px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 48px 36px 34px; border-radius: 28px; background: var(--white); text-align: center; transform: scale(.96); transition: transform .45s var(--ease-out); }
.sheet.is-open .sheet__box { transform: none; }
.sheet__box--film { width: min(880px, 100%); padding: 40px 40px 34px; text-align: left; }
.sheet__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #E8E8ED; color: var(--gray); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.sheet__close .ico { width: 16px; height: 16px; }
.sheet__mark { display: block; width: 120px; margin: 0 auto 14px; padding: 10px; border-radius: 22px; background: var(--black); }
.sheet__eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--crust-solid); }
.sheet__title { margin: 0 0 12px; font-family: var(--f-display); font-weight: 600; font-size: 28px; line-height: 1.15; letter-spacing: .004em; }
.sheet__text { margin: 0 0 24px; color: var(--gray); }
.sheet__film { position: relative; aspect-ratio: 16 / 9; margin: 8px 0 22px; border-radius: 16px; overflow: hidden; background: #000; }
.sheet__film iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sheet__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.sheet__actions--stack { flex-direction: column; }

/* Proste strony */
.plain { padding: clamp(60px, 9vw, 110px) 0; }
.plain .wrap { max-width: 760px; }
.plain h1 { margin: 0 0 24px; font-family: var(--f-display); font-weight: 600; font-size: clamp(36px, 5vw, 56px); line-height: 1.07; }

/* Pasek kursanta demo na stronach Tutora */
.swk-pill { position: fixed; left: 50%; bottom: 18px; z-index: 99999; transform: translateX(-50%); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; width: max-content; max-width: calc(100vw - 24px); padding: 10px 18px; border-radius: 999px; background: rgba(29, 29, 31, .88); color: #F5F5F7; font-family: var(--f-text); font-size: 13px; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.swk-pill a { color: #2997FF; text-decoration: none; }

/* Wejście sekcji przy przewijaniu */
.js .rise { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .rise.is-in { opacity: 1; transform: none; }

@media (max-width: 1068px) {
	.gnav__links { gap: 22px; }
}

@media (max-width: 833px) {
	.gnav__links { display: none; }
	.gnav__inner { justify-content: space-between; }
	.gnav__account span { display: none; }
	.lnav__toggle { display: inline-flex; }
	.lnav__links { position: absolute; left: 0; right: 0; top: 52px; flex-direction: column; gap: 0; padding: 8px var(--gut) 18px; background: inherit; -webkit-backdrop-filter: inherit; backdrop-filter: inherit; border-bottom: 1px solid rgba(255, 255, 255, .12); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .3s, transform .3s var(--ease), visibility .3s; }
	.lnav.is-open .lnav__links { opacity: 1; visibility: visible; transform: none; }
	.lnav.is-open .lnav__toggle .ico { transform: rotate(-90deg); }
	.lnav__links a { padding: 12px 0; font-size: 17px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.lnav.is-light .lnav__links { border-bottom-color: rgba(0, 0, 0, .12); }
	.lnav.is-light .lnav__links a { border-bottom-color: rgba(0, 0, 0, .06); }
	.lnav__title { font-size: 19px; }
	.tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.tile--wide { grid-column: span 2; }
	.tile--crumb { grid-row: auto; grid-column: span 2; min-height: 420px; }
	.tile__img { width: 90%; margin: auto -6% -16% auto; }
	.story { height: auto; }
	.story__sticky { position: relative; top: 0; height: auto; min-height: 0; padding: 90px 0; }
	.story__grid { grid-template-columns: minmax(0, 1fr); }
	.story__screen { order: -1; }
	.story__steps li { opacity: 1; }
	.calc__grid, .teacher__grid, .faq__wrap { grid-template-columns: minmax(0, 1fr); }
	.teacher__photo { max-width: 300px; }
	.voices__grid { grid-template-columns: minmax(0, 1fr); }
	.calc__result { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.module__body { padding-left: 28px; }
	.progress { grid-template-columns: auto; justify-items: center; text-align: left; }
	.ring { grid-row: auto; }
}

@media (max-width: 600px) {
	body { font-size: 17px; }
	.hero { padding-top: 48px; }
	.hero__stage { margin-top: 10px; }
	.hl__track { grid-auto-columns: calc(100vw - var(--gut) * 2 - 12px); gap: 12px; }
	.hl__card { height: 520px; border-radius: 22px; }
	.hl__media--scene { padding: 20px 0 0; }
	.hl__media--scene .hl__scene { border-radius: 0; height: 100%; aspect-ratio: auto; }
	.phone { width: 230px; }
	.progress__list { font-size: 15px; }
	.tiles { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.tile, .tile--wide, .tile--crumb, .tile--forever { grid-column: auto; min-height: 0; padding: 30px 26px 28px; border-radius: 24px; }
	.tile--stat, .tile--forever { min-height: 240px; }
	.tile--crumb { min-height: 400px; }
	.devices { height: 170px; margin-top: 26px; }
	.plans { grid-template-columns: minmax(0, 1fr); }
	.module summary { padding: 20px; gap: 14px; grid-template-columns: auto minmax(0, 1fr) auto; }
	.module__n { width: 36px; height: 36px; font-size: 16px; }
	.module__body { padding: 0 20px 18px; }
	.lessons li { grid-template-columns: 34px minmax(0, 1fr) auto; font-size: 16px; }
	.lessons__free { grid-column: 2; grid-row: 2; justify-self: start; }
	.lessons__min { grid-column: 3; grid-row: 1; }
	.foot__cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.foot__credit { margin-left: 0 !important; }
	.sheet { align-items: flex-end; padding: 0; }
	.sheet__box { width: 100%; border-radius: 22px 22px 0 0; padding: 44px 22px 30px; }
	.sheet__box--film { padding: 40px 18px 26px; }
	.swk-pill { border-radius: 18px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.js .rise { opacity: 1; transform: none; transition: none; }
	.hero__loaf { transform: none; filter: none; }
	.phone, .chat p, .quiz__a, .quiz__note, .ring__fg { transition: none !important; }
}