:root {
  --ink: #0e1512;
  --ink-2: #17211d;
  --paper: #ffffff;
  --paper-2: #f4f7f5;
  --text: #111614;
  --text-inv: #edf3ef;
  --muted: #68756f;
  --green: #288a45;
  --green-dk: #1d6533;
  --accent: #2b63ef;
  --accent-dk: #1e4fd1;
  --line: rgba(17, 22, 20, .12);
  --line-inv: rgba(255, 255, 255, .14);
  --r: 16px;
  --pad: clamp(20px, 5vw, 64px);
  --shell-w: 1280px;
  --shadow: 0 2px 8px rgba(0, 0, 0, .05);
  --offer-h: 32px;
  --nav-h: 58px;
  --chrome-h: calc(var(--offer-h) + var(--nav-h));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--chrome-h) + 18px); }
body {
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 {
  font-family: "Manrope", sans-serif;
  letter-spacing: -.035em;
  line-height: 1.08;
}
h2 { margin-bottom: 22px; font-size: clamp(2rem, 4.5vw, 3.6rem); }
p { max-width: 68ch; }

.container { width: min(1120px, calc(100% - 2 * var(--pad))); margin-inline: auto; }
.skip-link {
  position: fixed;
  z-index: 1000;
  left: 16px;
  top: 12px;
  padding: 10px 14px;
  color: white;
  background: var(--ink);
  border-radius: 8px;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.eyebrow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 18px;
  color: var(--green-dk);
  font-family: "Manrope", sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  line-height: 1.4;
  text-transform: uppercase;
}
.eyebrow::before { width: 26px; height: 2px; background: currentColor; content: ""; }
.eyebrow--light { color: #72d490; }

.button {
  display: inline-flex;
  min-height: 52px;
  padding: 14px 24px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border: 1px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  font-family: "Manrope", sans-serif;
  font-size: .94rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button:focus-visible, summary:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid #ffca5c; outline-offset: 3px; }
.button--primary { color: white; background: var(--accent); box-shadow: 0 7px 18px rgba(47, 107, 255, .2); }
.button--primary:hover { background: var(--accent-dk); }
.button--light { color: var(--ink); background: white; }
.button--ghost { border-color: var(--line); color: var(--text); background: white; }
.button--small { min-height: 40px; padding: 9px 16px; border-radius: 9px; font-size: .78rem; }

.offer-bar {
  position: fixed;
  z-index: 130;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: var(--offer-h);
  padding: 0 var(--pad);
  align-items: center;
  color: var(--text-inv);
  background: linear-gradient(90deg, #132c48 0%, var(--green-dk) 100%);
  border-bottom: 1px solid var(--line-inv);
  backdrop-filter: blur(12px);
}
.offer-bar__inner { display: flex; width: min(var(--shell-w), 100%); margin: auto; align-items: center; justify-content: center; gap: 16px; }
.offer-bar p { display: flex; margin: 0; align-items: center; gap: 9px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; }
.offer-dot { width: 7px; height: 7px; background: #63df8b; border-radius: 50%; box-shadow: 0 0 0 4px rgba(99, 223, 139, .12); }

.site-header { position: fixed; z-index: 120; top: var(--offer-h); right: 0; left: 0; height: var(--nav-h); background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease, background .25s ease; backdrop-filter: blur(16px); }
.site-header.is-scrolled { background: rgba(255, 255, 255, .98); box-shadow: 0 8px 28px rgba(14, 21, 18, .08); }
.site-header__inner { display: flex; width: min(var(--shell-w), calc(100% - 2 * var(--pad))); height: 100%; margin: 0 auto; align-items: center; justify-content: space-between; gap: 24px; }
.site-logo { display: flex; width: 110px; flex: 0 0 auto; align-items: center; }
.site-logo img { width: 100%; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); }
/* Menu stoi posrodku paska. Grid z rownymi bokami trzyma je na srodku niezaleznie od
   tego, ile miejsca zajmuje logo i przycisk. Warunek z .site-nav zostawia pasek ekranu
   wyboru bez zmian, bo tam w srodku nie ma menu. */
.site-header__inner:has(.site-nav) { display: grid; grid-template-columns: 1fr auto 1fr; }
.site-header__inner:has(.site-nav) .button--nav { justify-self: end; }
.site-nav a { position: relative; color: #46534e; font-family: "Manrope", sans-serif; font-size: .76rem; font-weight: 700; text-decoration: none; }
.site-nav a::after { position: absolute; right: 0; bottom: -7px; left: 0; height: 2px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .2s ease; }
.site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); }
.button--nav { min-height: 38px; padding: 9px 17px; border-radius: 999px; font-size: .74rem; white-space: nowrap; }

.timer { display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.timer span { display: grid; min-width: 42px; text-align: center; }
.timer b { font-family: "Manrope", sans-serif; line-height: 1; }
.timer small { margin-top: 3px; color: rgba(255, 255, 255, .55); font-size: .54rem; line-height: 1; text-transform: uppercase; }
.timer i { margin: 0 4px 12px; color: rgba(255, 255, 255, .42); font-style: normal; }
.timer--small span { min-width: 27px; }
.timer--small b { font-size: .76rem; }
.timer--small small { display: none; }
.timer--small i { margin: 0 1px; color: rgba(255, 255, 255, .52); }
.timer--large { margin: 36px auto; justify-content: center; }
.timer--large span { min-width: clamp(56px, 8vw, 90px); }
.timer--large b { color: white; font-size: clamp(2.1rem, 7vw, 4.4rem); }
.timer--large small { font-size: .65rem; }

.cinema { position: relative; color: white; background: var(--ink); }
.cinema + .proof-marquee { position: relative; z-index: 2; margin-top: -100svh; }
.cinema__tail { height: 100svh; }
.cinema__stage { position: sticky; z-index: 0; top: 0; height: 100svh; min-height: 620px; overflow: hidden; background: var(--ink); }
#seq { display: block; width: 100%; height: 100%; background: var(--ink); }
.cinema__scrim { position: absolute; z-index: 1; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 20%, rgba(14, 21, 18, .55) 78%), linear-gradient(90deg, rgba(14, 21, 18, .9) 0%, rgba(14, 21, 18, .28) 55%, transparent 100%); pointer-events: none; }
.cinema__scrim::after { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 50%, transparent 20%, rgba(14, 21, 18, .55) 78%), linear-gradient(270deg, rgba(14, 21, 18, .9) 0%, rgba(14, 21, 18, .28) 55%, transparent 100%); content: ""; opacity: 0; transition: opacity .3s ease; }
.cinema.is-right .cinema__scrim::after { opacity: 1; }
.cinema__flow { position: relative; z-index: 1; margin-top: -100svh; }
.chapter { display: grid; min-height: 100svh; padding-block: clamp(80px, 12vh, 140px); padding-inline: max(var(--pad), calc((100vw - var(--shell-w)) / 2)); align-content: center; }
.chapter__box { width: min(34rem, 100%); text-shadow: 0 2px 24px rgba(0, 0, 0, .32); }
.chapter--hero .chapter__box { width: min(32rem, 100%); transform: translateX(clamp(-44px, -2.4vw, -20px)); }
.chapter--right { justify-items: end; text-align: right; }
.chapter--right p { margin-left: auto; }
.chapter h1, .chapter h2 { text-wrap: balance; }
.chapter h1 { max-width: 580px; margin-bottom: 24px; font-size: clamp(2.25rem, 4.6vw, 4.15rem); }
.chapter h1 em { color: #4f7cff; font-style: normal; }
.chapter h2 { margin-bottom: 22px; font-size: clamp(2.35rem, 5.2vw, 4.7rem); }
.chapter__number { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #77df96; font-family: "Manrope", sans-serif; font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.chapter__number::before { width: 30px; height: 2px; background: currentColor; content: ""; }
.chapter--right .chapter__number { justify-content: flex-end; }
.chapter--right .chapter__number::before { order: 2; }
.chapter__box > p:not(.eyebrow, .chapter__number) { color: #d2dbd7; font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.7; }
.chapter--final .button { margin-top: 12px; text-shadow: none; }
.brand-logo { width: 178px; height: auto; padding: 8px; margin-bottom: clamp(20px, 4vh, 38px); background: white; border-radius: 10px; mix-blend-mode: normal; }
.chapter .eyebrow { color: #75dd95; }
.hero-rating { display: inline-flex; padding: 7px 12px; margin-bottom: 22px; align-items: center; gap: 9px; color: white; background: rgba(255, 255, 255, .11); border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; text-shadow: none; backdrop-filter: blur(10px); }
.hero-rating > span { color: #ffd958; font-size: .72rem; letter-spacing: .08em; }
.hero-rating strong { font-family: "Manrope", sans-serif; font-size: .72rem; }
.hero-rating small { color: #c9d3ce; font-size: .68rem; }
.lead { margin-bottom: 30px; color: #c7d2cd; font-size: clamp(1rem, 1.45vw, 1.18rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 22px; }
.hero-proof { max-width: 180px; color: #aab7b1; font-size: .76rem; line-height: 1.35; }
.hero-proof em { color: white; font-style: normal; font-weight: 700; }
.cinema__loader {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  padding: clamp(24px, 6vw, 80px);
  color: white;
  background: var(--ink);
  border-radius: 0;
  flex-direction: column;
  justify-content: flex-end;
  transition: opacity .35s ease, visibility .35s ease;
}
.cinema__loader.is-done { opacity: 0; visibility: hidden; }
.cinema__loader > div, .cinema__loader > i { width: min(480px, 100%); margin-inline: auto; }
.cinema__loader > div { display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; gap: 20px; font-size: .72rem; font-weight: 700; }
.cinema__loader > div span { color: #b5c0bb; }
.cinema__loader > i { display: block; overflow: hidden; height: 3px; background: rgba(255, 255, 255, .14); border-radius: 3px; }
.cinema__loader > i em { display: block; width: 0; height: 100%; background: var(--accent); transition: width .15s ease; }

.proof-marquee { overflow: hidden; color: var(--text); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.proof-marquee__track { display: flex; width: max-content; min-width: 100%; padding: 17px 0; align-items: center; animation: proof-marquee 34s linear infinite; }
.proof-marquee__group { display: flex; min-width: 100vw; flex: 0 0 auto; align-items: center; justify-content: space-around; white-space: nowrap; }
.proof-marquee span { display: inline-flex; align-items: baseline; gap: 5px; color: var(--muted); font-size: .76rem; font-weight: 650; }
.proof-marquee b, .proof-marquee strong { color: var(--accent-dk); font-family: "Manrope", sans-serif; font-size: .92rem; }
.proof-marquee i { margin: 0 clamp(20px, 3vw, 44px); color: var(--green); font-style: normal; }
/* Pozycja z logo platformy. Znak jest kolorowy, wiec pasek zostaje jasny, inaczej
   czarny TikTok znikalby w tle. Liczba idzie krojem naglowkowym, jak reszta liczb. */
.proof-marquee__kanal { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.proof-marquee__kanal .social-channel__logo { width: 19px; height: 19px; margin: 0; flex: none; }
.proof-marquee__kanal strong { color: var(--accent-dk); font-family: "Manrope", sans-serif; font-size: .92rem; }
@keyframes proof-marquee { to { transform: translateX(-50%); } }
.task-card {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  width: min(430px, 82%);
  min-height: 460px;
  padding: 34px;
  background: white;
  border: 1px solid rgba(14, 21, 18, .17);
  border-radius: 8px;
  box-shadow: 0 28px 70px rgba(14, 21, 18, .15);
  transform: translate(-50%, -50%) rotateY(-8deg) rotateX(3deg) rotateZ(1deg);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}
.task-card::before { position: absolute; top: 72px; right: 0; bottom: 0; left: 0; background: repeating-linear-gradient(to bottom, transparent 0 34px, rgba(17, 22, 20, .07) 35px); content: ""; pointer-events: none; }
.task-card__top { position: relative; display: flex; padding-bottom: 16px; margin-bottom: 48px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font-size: .65rem; letter-spacing: .08em; }
.task-card__top b { font-size: .75rem; }
.task-card p { position: relative; font-family: "Manrope", sans-serif; font-size: clamp(.92rem, 1.5vw, 1.1rem); font-weight: 600; line-height: 1.5; }
.task-equation { position: relative; padding: 14px; margin: 36px 0 42px; color: var(--accent-dk); background: #eef3ff; border-left: 3px solid var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.1rem; font-weight: 700; }
.task-answer { position: relative; font-size: .8rem; }
.task-answer span { display: inline-block; width: 60px; border-bottom: 1px solid var(--text); }
.task-stamp { position: absolute; right: 32px; bottom: 30px; display: grid; width: 58px; height: 58px; color: var(--green-dk); border: 2px solid var(--green); border-radius: 50%; place-items: center; font-family: "Manrope", sans-serif; font-size: .78rem; font-weight: 800; transform: rotate(-8deg); }
.step-chip {
  position: absolute;
  z-index: 2;
  display: flex;
  width: 170px;
  min-height: 62px;
  padding: 11px 14px;
  align-items: center;
  gap: 12px;
  color: var(--text);
  background: white;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
}
.step-chip b { display: grid; width: 34px; height: 34px; flex: 0 0 auto; color: white; background: var(--accent); border-radius: 8px; place-items: center; font-size: .7rem; }
.step-chip span { font-size: .74rem; font-weight: 700; line-height: 1.25; }
.step-chip--1 { top: 21%; left: 16%; }
.step-chip--2 { top: 22%; left: 85%; }
.step-chip--3 { top: 76%; left: 15%; }
.step-chip--4 { top: 78%; left: 84%; }
.hero-callout { position: absolute; z-index: 6; width: min(340px, 30vw); padding: 22px 24px; color: var(--text); background: rgba(255, 255, 255, .96); border: 1px solid rgba(255, 255, 255, .55); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .2); opacity: 0; line-height: 1.25; pointer-events: none; backdrop-filter: blur(10px); }
.hero-callout span { display: block; margin-bottom: 18px; color: var(--green-dk); font-family: "Manrope", sans-serif; font-size: .65rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.hero-callout strong { display: block; margin-bottom: 8px; font-family: "Manrope", sans-serif; font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -.035em; line-height: 1.12; }
.hero-callout p { margin: 0; color: var(--muted); font-size: .8rem; }
.hero-callout::after { position: absolute; height: 1px; background: var(--accent); content: ""; transform-origin: left; }
.hero-callout--one { top: 14%; right: clamp(24px, 7vw, 110px); }
.hero-callout--one::after { top: 100%; left: 30px; width: 90px; transform: rotate(125deg); }
.hero-callout--two { top: 42%; right: clamp(24px, 11vw, 170px); }
.hero-callout--two::after { top: 50%; right: 100%; width: 90px; transform: rotate(180deg); }
.hero-callout--three { right: clamp(24px, 6vw, 90px); bottom: 12%; }
.hero-callout--three::after { right: 100%; bottom: 50%; width: 90px; transform: rotate(180deg); }
.hero-method { position: absolute; z-index: 7; right: clamp(28px, 7vw, 112px); bottom: 10%; width: min(340px, 30vw); padding: 22px 24px; color: var(--ink); background: rgba(255, 255, 255, .94); border: 1px solid rgba(255, 255, 255, .5); border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .2); opacity: 0; font-family: "Manrope", sans-serif; font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 800; text-align: left; backdrop-filter: blur(12px); }
.hero-method::before { display: block; margin-bottom: 8px; color: var(--violet); content: "ETAP 04"; font-size: .7rem; font-weight: 900; letter-spacing: .14em; }
.math-orbit { position: absolute; color: rgba(47, 107, 255, .3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; transform: rotate(-8deg); }
.math-orbit--one { top: 7%; left: 2%; }
.math-orbit--two { right: 0; bottom: 4%; transform: rotate(7deg); }
.scroll-hint { position: absolute; z-index: 8; bottom: 20px; left: 50%; display: flex; align-items: center; gap: 9px; color: rgba(255, 255, 255, .68); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; transform: translateX(-50%); }
.scroll-hint span { position: relative; width: 18px; height: 28px; border: 1px solid rgba(255, 255, 255, .68); border-radius: 12px; }
.scroll-hint span::after { position: absolute; top: 5px; left: 7px; width: 2px; height: 5px; background: white; border-radius: 2px; content: ""; animation: scroll-dot 1.5s ease infinite; }
@keyframes scroll-dot { 50% { transform: translateY(9px); opacity: .3; } }

.section { position: relative; padding: clamp(82px, 11vw, 150px) 0; }
.section > .container { position: relative; z-index: 1; }
.section--paper { background: var(--paper); }
.section--soft { background: var(--paper-2); }
.section--ink { color: var(--text-inv); background: var(--ink); }
.section--ink p { color: #b5c0bb; }
.narrow-head { max-width: 820px; margin-bottom: 52px; text-align: center; }
.narrow-head .eyebrow { justify-content: center; }
.narrow-head p:last-child { margin: 0 auto; color: var(--muted); font-size: 1.05rem; }
.split-heading { display: grid; margin-bottom: 56px; grid-template-columns: 1.15fr .85fr; align-items: end; gap: clamp(32px, 8vw, 100px); }
.split-heading h2 { margin-bottom: 0; }
.split-heading > p { margin-bottom: 6px; color: var(--muted); }

.video-shell { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--ink); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 25px 60px rgba(14, 21, 18, .12); }
.video-shell iframe { width: 100%; height: 100%; border: 0; }

.transformation .narrow-head { margin-bottom: 46px; }
.transformation-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.transformation-card { padding: clamp(28px, 4vw, 44px); background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.transformation-card--after { border: 2px solid rgba(40, 138, 69, .26); }
.transformation-card__label { margin-bottom: 26px; color: var(--muted); font-family: "Manrope", sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.transformation-card--after .transformation-card__label { color: var(--green-dk); }
.transformation-card--before ul { padding: 0; margin: 0; list-style: none; }
.transformation-card--before li { position: relative; padding: 15px 0 15px 32px; color: #68716d; border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 600; line-height: 1.5; }
.transformation-card--before li:last-child { border-bottom: 0; }
.transformation-card--before li::before { position: absolute; top: 15px; left: 0; color: #d26a64; content: "×"; font-family: "Manrope", sans-serif; font-weight: 900; }
.promise-list { border-top: 1px solid var(--line); }
.promise-item { display: grid; padding: 28px 0; border-bottom: 1px solid var(--line); grid-template-columns: 70px 1fr auto; align-items: center; gap: 24px; }
.promise-item b { color: var(--accent); font-family: "Manrope", sans-serif; font-size: .8rem; }
.promise-item p { margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(1.05rem, 2.1vw, 1.4rem); font-weight: 700; line-height: 1.35; }
.promise-item span { display: grid; width: 32px; height: 32px; color: var(--green-dk); border: 1px solid rgba(40, 138, 69, .35); border-radius: 50%; place-items: center; }
.transformation-card .promise-item { padding: 14px 0; grid-template-columns: 34px 1fr auto; gap: 12px; }
.transformation-card .promise-item p { font-family: "DM Sans", sans-serif; font-size: .9rem; font-weight: 650; line-height: 1.5; }
.transformation-card .promise-item b { font-size: .68rem; }
.transformation-card .promise-item span { width: 25px; height: 25px; font-size: .65rem; }

.guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.guarantee-card { position: relative; min-height: 280px; padding: 30px; overflow: hidden; background: var(--ink-2); border: 1px solid var(--line-inv); border-radius: var(--r); }
.guarantee-card__icon { display: grid; width: 54px; height: 54px; margin-bottom: 50px; color: white; background: var(--accent); border-radius: 14px; place-items: center; font-family: "Manrope", sans-serif; font-size: 1.4rem; font-weight: 800; transform: rotate(-3deg); }
.guarantee-card:nth-child(2) .guarantee-card__icon { background: var(--green); transform: rotate(3deg); }
.guarantee-card h3 { margin-bottom: 12px; font-size: 1.35rem; }
.guarantee-card p { margin: 0; color: #aebbb5; font-size: .91rem; }

.manifest-grid { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(42px, 9vw, 120px); }
.manifest-photo { position: relative; }
.manifest-photo img { width: 100%; max-height: 690px; object-fit: cover; object-position: center 30%; border-radius: var(--r); }
.manifest-photo::before { position: absolute; z-index: -1; right: -18px; bottom: -18px; width: 80%; height: 80%; background: var(--accent); border-radius: var(--r); content: ""; }
.manifest-photo > span { position: absolute; right: 12px; bottom: 12px; padding: 10px 14px; color: white; background: var(--ink); border-radius: 8px; font-family: "Manrope", sans-serif; font-size: .75rem; font-weight: 800; line-height: 1.3; }
.manifest-photo small { color: #b5c0bb; font-weight: 500; }
/* Karty lekcji: numer w kolku, tytul kroku i zdanie wyjasnienia. Zastepuja
   portret w sekcji manifestu, gdy tresc ma pole "manifest_card". */
.manifest-cards { display: grid; gap: 16px; }
.manifest-cards__head { color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.manifest-cards__deck { display: grid; margin: 0; padding: 0; gap: 12px; list-style: none; }
.manifest-card { display: grid; padding: 20px 22px; grid-template-columns: auto 1fr; gap: 16px; background: white; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.manifest-card b { color: var(--accent); font-family: "Manrope", sans-serif; font-size: 1rem; letter-spacing: -.02em; }
.manifest-card strong { display: block; margin-bottom: 5px; font-size: 1rem; }
.manifest-card span { color: var(--muted); font-size: .9rem; line-height: 1.5; }
.manifest-cards__foot { color: var(--muted); font-size: .85rem; }

.manifest-copy h2 { max-width: 720px; }
.manifest-lead { color: var(--muted); font-size: 1.05rem; }
.check-list { padding: 0; margin: 32px 0 0; list-style: none; }
.check-list li { position: relative; padding: 13px 0 13px 40px; border-bottom: 1px solid var(--line); font-weight: 600; }
.check-list li::before { position: absolute; top: 13px; left: 0; display: grid; width: 25px; height: 25px; color: white; background: var(--green); border-radius: 50%; content: "✓"; place-items: center; font-size: .7rem; }

.modules { counter-reset: module; }
.module { position: relative; border-bottom: 1px solid var(--line); counter-increment: module; }
.module::after { position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--green)); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.module[open]::after { transform: scaleX(1); }
.module:first-child { border-top: 1px solid var(--line); }
.module summary { display: grid; padding: 24px 0; align-items: center; gap: 20px; cursor: pointer; list-style: none; grid-template-columns: 64px 1fr auto; }
.module summary::-webkit-details-marker { display: none; }
.module summary::before { color: var(--accent); content: "0" counter(module); font-family: "Manrope", sans-serif; font-size: .8rem; font-weight: 800; }
.module summary strong { font-family: "Manrope", sans-serif; font-size: clamp(1.05rem, 2.2vw, 1.4rem); }
.module-toggle { display: grid; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; place-items: center; transition: transform .2s ease; }
.module[open] .module-toggle { color: white; background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }
.module-body { padding: 0 0 30px 84px; }
.module-body ul { padding: 0; margin: 0; color: var(--muted); list-style: none; }
.module-body li { padding: 8px 0; }
.module-body li::before { margin-right: 11px; color: var(--green); content: "✓"; font-weight: 800; }

.outcome-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.outcome-card { min-height: 220px; padding: 26px; background: white; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); grid-column: span 2; }
.outcome-card:nth-child(4), .outcome-card:nth-child(5) { grid-column: span 3; }
.outcome-card b { display: block; margin-bottom: 54px; color: var(--accent); font-family: "Manrope", sans-serif; font-size: .78rem; }
.outcome-card h3 { margin-bottom: 10px; font-size: 1.2rem; }
.outcome-card p { margin: 0; color: var(--muted); font-size: .88rem; }

.quote-grid { display: grid; margin-bottom: 48px; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.quote-card { padding: 28px; color: var(--text); background: white; border: 1px solid transparent; border-radius: var(--r); }
.quote-card__stars { color: #f3a915; letter-spacing: .1em; }
.quote-card blockquote { margin: 36px 0 24px; font-size: .91rem; }
.quote-card cite { color: var(--muted); font-style: normal; font-size: .75rem; font-weight: 700; }

.testimonial-video-block { margin-bottom: 64px; }
.testimonial-subheading { display: flex; margin-bottom: 26px; align-items: end; justify-content: space-between; gap: 30px; }
.testimonial-subheading span { color: #72d490; font-size: clamp(1rem, 1.2vw, 1.25rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.testimonial-subheading h3 { max-width: 650px; margin: 0; color: white; font-size: clamp(1.45rem, 2.6vw, 2.25rem); text-align: right; }
.testimonial-video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.testimonial-video-grid[data-kolumny="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Dwa nagrania zostawialy w trojkolumnowej siatce puste miejsce z prawej, wiec dostaja
   wlasna siatke posrodku. */
.testimonial-video-grid[data-kolumny="2"] { width: min(100%, 720px); margin-inline: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.testimonial-video { position: relative; overflow: hidden; aspect-ratio: 9 / 16; background: #08131c; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px; box-shadow: 0 22px 46px rgba(0, 0, 0, .24); }
.testimonial-video--wide { width: min(100%, 760px); aspect-ratio: 16 / 9; grid-column: 1 / -1; justify-self: center; }
.testimonial-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Pionowy kafel rozciagniety na cala kolumne mial na laptopie ponad 600 px wysokosci,
   wiec jedna opinia zjadala caly ekran. Ograniczamy szerokosc, a wysokosc schodzi
   sama z proporcji 9:16 do okolo 470 px. Kafel szeroki zostaje bez zmian. */
@media (min-width: 768px) {
  .testimonial-video-grid > .testimonial-video:not(.testimonial-video--wide) {
    width: min(100%, 264px);
    justify-self: center;
  }
}

.opinion-carousel { position: relative; }
.opinion-strip {
  display: flex;
  padding: 22px 58px 26px;
  gap: 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-padding-inline: 58px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.opinion-strip::-webkit-scrollbar { display: none; }
.opinion-strip img { width: min(390px, 76vw); height: 240px; flex: 0 0 auto; padding: 12px; object-fit: contain; background: white; border: 1px solid var(--line-inv); border-radius: 12px; scroll-snap-align: start; transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease; }
.opinion-strip img:nth-child(3n + 1) { transform: rotate(-1.1deg); }
.opinion-strip img:nth-child(3n + 2) { transform: rotate(.8deg); }
.opinion-strip img:nth-child(3n) { transform: rotate(-.45deg); }
.opinion-arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  width: 52px;
  height: 52px;
  padding: 0;
  color: var(--ink);
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  cursor: pointer;
  place-items: center;
  transform: translateY(-50%);
  transition: transform .2s ease, opacity .2s ease, background .2s ease;
}
.opinion-arrow:hover { background: #72d490; transform: translateY(-50%) scale(1.06); }
.opinion-arrow:disabled { opacity: .3; cursor: default; }
.opinion-arrow--prev { left: 14px; }
.opinion-arrow--next { right: 14px; }
.opinion-arrow span { font-size: 1.3rem; line-height: 1; }

.bonus-grid { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: clamp(40px, 9vw, 120px); }
/* place-content trzyma grafike i miniatury razem. Bez niego wolne miejsce z min-height
   rozchodzilo sie miedzy wiersze i miniatury odjezdzaly daleko pod mockup. */
.bonus-visual { position: relative; display: grid; min-height: 520px; place-items: center; place-content: center; }
/* height: auto jest tu wazne. Bez niego przegladarka bierze wysokosc z atrybutu height
   grafiki, przycina ja do max-height i zostawia pod obrazkiem pas pustego miejsca. */
.bonus-visual img { position: relative; z-index: 2; height: auto; max-height: 560px; object-fit: contain; filter: drop-shadow(0 28px 34px rgba(14, 21, 18, .18)); }
.bonus-glow { position: absolute; width: 76%; aspect-ratio: 1; background: #eaf0ff; border-radius: 50%; }
.bonus-list { margin-top: 30px; border-top: 1px solid var(--line); }
.bonus-item { display: grid; padding: 18px 0; border-bottom: 1px solid var(--line); grid-template-columns: 1fr auto; gap: 20px; }
.bonus-item strong { font-family: "Manrope", sans-serif; font-size: .96rem; }
.bonus-item span { color: var(--muted); font-size: .8rem; }
.bonus-total { display: flex; padding: 18px 20px; margin-top: 22px; align-items: center; justify-content: space-between; gap: 20px; background: var(--paper-2); border-radius: 10px; font-size: .8rem; }
.bonus-total b { color: var(--accent-dk); font-size: 1rem; }

.pricing-trust { display: grid; margin-bottom: 24px; grid-template-columns: repeat(3, 1fr); background: white; border: 1px solid var(--line); border-radius: 16px; }
.pricing-trust > div { display: flex; min-height: 92px; padding: 20px 24px; align-items: center; gap: 14px; border-right: 1px solid var(--line); }
.pricing-trust > div:last-child { border-right: 0; }
.pricing-trust strong { color: var(--accent); font-family: "Manrope", sans-serif; font-size: 1.45rem; letter-spacing: -.05em; }
.pricing-trust span { color: var(--muted); font-size: .74rem; font-weight: 650; line-height: 1.35; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; align-items: stretch; }
.price-card { position: relative; display: flex; padding: clamp(28px, 4vw, 44px); overflow: hidden; flex-direction: column; background: white; border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); }
.price-card--recommended { border: 2px solid var(--accent); box-shadow: 0 22px 44px rgba(47, 107, 255, .12); }
.price-card--recommended::after { position: absolute; z-index: 1; top: -30%; bottom: -30%; left: -45%; width: 22%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent); content: ""; opacity: 0; pointer-events: none; transform: rotate(14deg) translateX(-180%); }
.price-card--recommended.is-visible::after { animation: price-sheen 1.1s .45s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes price-sheen { 15% { opacity: .6; } 100% { opacity: 0; transform: rotate(14deg) translateX(850%); } }
.price-badge { position: absolute; z-index: 2; top: 0; left: 50%; padding: 7px 16px; color: white; background: var(--accent); border-radius: 0 0 9px 9px; font-family: "Manrope", sans-serif; font-size: .65rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; transform: translateX(-50%); white-space: nowrap; }
.price-card__top { padding-bottom: 26px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.price-card__top h3 { margin: 20px 0 12px; font-size: 1.5rem; }
.price-card__top p { margin: 0; color: var(--muted); font-size: .8rem; }
.price-card__price small { display: block; color: var(--muted); font-size: .7rem; }
.price-card__price s { color: #8a9490; }
.price-card__price strong { display: block; margin: 6px 0 0; font-family: "Manrope", sans-serif; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.06em; }
.price-save { display: flex; margin: 14px 0 0; align-items: center; gap: 10px; }
.price-save b { padding: 5px 10px; color: white; background: var(--green); border-radius: 8px; font-family: "Manrope", sans-serif; font-size: .8rem; }
.price-save span { color: var(--muted); font-size: .82rem; font-weight: 650; }
.price-card ul { padding: 0; margin: 30px 0; list-style: none; }
.price-card li { position: relative; padding: 8px 0 8px 30px; font-size: .88rem; }
.price-card li::before { position: absolute; left: 0; color: var(--green); content: "✓"; font-weight: 900; }
.price-card .button { width: 100%; margin-top: auto; }
.price-micro { margin: 12px auto 0; color: var(--muted); font-size: .67rem; text-align: center; }
/* Pole opcjonalne. Kurs E8 rat nie ma, wiec ta regula dotyczy tylko matury. */
.price-installments { margin: 6px auto 0; color: var(--accent); font-size: .78rem; font-weight: 600; text-align: center; }
.pricing-note { margin-top: 28px; color: var(--muted); font-size: .78rem; text-align: center; }
.pricing-note a { color: var(--green-dk); font-weight: 700; }

.faq-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: clamp(40px, 10vw, 140px); }
.faq-intro { position: sticky; top: 100px; align-self: start; }
.faq-intro p:last-child { color: var(--muted); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary { display: grid; padding: 22px 0; cursor: pointer; list-style: none; grid-template-columns: 1fr auto; gap: 20px; font-family: "Manrope", sans-serif; font-weight: 700; line-height: 1.4; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { color: var(--accent); content: "+"; font-size: 1.3rem; transition: transform .22s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 40px 24px 0; margin: 0; color: var(--muted); font-size: .9rem; }

.author-grid { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: clamp(40px, 9vw, 120px); }
.author-copy > p:not(.eyebrow) { color: var(--muted); font-size: 1.02rem; }
.achievement-list { margin-top: 30px; }
.achievement { display: grid; padding: 15px 0; border-bottom: 1px solid var(--line); grid-template-columns: 32px 1fr; gap: 12px; font-size: .85rem; font-weight: 700; }
.achievement span { color: var(--accent); font-family: "Manrope", sans-serif; }
.author-card { position: relative; overflow: hidden; height: 650px; border-radius: var(--r); }
.author-card img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.author-card > div { position: absolute; right: 16px; bottom: 16px; left: 16px; padding: 18px; color: white; background: rgba(14, 21, 18, .9); border-radius: 10px; font-size: .8rem; line-height: 1.5; }

.final-cta { position: relative; padding: clamp(100px, 14vw, 180px) 0 40px; overflow: hidden; color: white; background: linear-gradient(145deg, var(--ink) 0%, var(--ink-2) 100%); text-align: center; }
.final-inner { position: relative; z-index: 2; }
.final-inner .eyebrow { justify-content: center; }
.final-inner h2 { margin-bottom: 0; font-size: clamp(2.3rem, 6vw, 4.8rem); }
/* Odstep pod naglowkiem dawal licznik swoim marginesem. Site bez licznika ma tu
   przycisk tuz przy naglowku, wiec brakujacy odstep wraca regula sasiedztwa. */
.final-inner h2 + .button { margin-top: 36px; }
.secure-note { margin: 14px auto 70px; color: rgba(255, 255, 255, .7); font-size: .69rem; }
.final-shape { position: absolute; width: 280px; height: 280px; border: 65px solid rgba(255, 255, 255, .08); border-radius: 50%; }
.final-shape--one { top: -120px; left: -90px; }
.final-shape--two { right: -100px; bottom: 80px; }
.legal-nav { display: flex; padding-top: 22px; justify-content: center; gap: 24px; border-top: 1px solid rgba(255, 255, 255, .2); }
.legal-nav a { color: rgba(255, 255, 255, .72); font-size: .7rem; text-decoration: none; }

.consent { position: fixed; z-index: 300; right: 18px; bottom: 18px; display: none; width: min(520px, calc(100% - 36px)); padding: 20px; background: white; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 20px 60px rgba(14, 21, 18, .2); }
.consent.is-visible { display: block; }
.consent p { margin-bottom: 16px; color: var(--muted); font-size: .75rem; line-height: 1.5; }
.consent p b { color: var(--text); }
.consent > div { display: flex; justify-content: flex-end; gap: 10px; }
.consent .button { min-height: 42px; padding: 10px 16px; font-size: .72rem; }

/* Na telefonie panel zaslanial przycisk w sekcji koncowej i odnosniki w stopce,
   wiec do czasu decyzji te przyciski nie reagowaly. Rozciagniecie panelu na cala
   szerokosc samo tego nie leczy, bo rosnie tez jego wysokosc. Dlatego app.js dokłada
   na czas panelu dolny margines strony, a tutaj zostaje tylko wezszy uklad. */
@media (max-width: 640px) {
  .consent { right: 10px; left: 10px; bottom: 10px; width: auto; padding: 16px; }
  .consent p { margin-bottom: 12px; }
  .consent .button { flex: 1; }
}

.mobile-cta { position: fixed; z-index: 140; right: 0; bottom: 0; left: 0; display: none; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; gap: 12px; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -12px 34px rgba(14, 21, 18, .12); opacity: 0; pointer-events: none; transform: translateY(110%); transition: opacity .25s ease, transform .25s ease; backdrop-filter: blur(16px); }
.mobile-cta > span { display: flex; flex-direction: column; line-height: 1.1; }
.mobile-cta small { color: var(--muted); font-size: .62rem; font-weight: 700; }
.mobile-cta strong { margin-top: 4px; font-family: "Manrope", sans-serif; font-size: 1rem; }
.mobile-cta .button { min-height: 48px; padding: 12px 20px; border-radius: 999px; font-size: .8rem; }

.section .eyebrow::before, .final-cta .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform .55s .08s cubic-bezier(.22, 1, .36, 1); }
.section .reveal.is-visible .eyebrow::before, .final-cta .reveal.is-visible .eyebrow::before { transform: scaleX(1); }

.motion-symbol { position: absolute; z-index: 0; top: 10%; right: clamp(12px, 4vw, 72px); color: var(--accent); font-family: "Manrope", sans-serif; font-size: clamp(7rem, 15vw, 14rem); font-weight: 800; line-height: 1; opacity: .035; pointer-events: none; transform: translate3d(0, var(--motion-y, 0), 0) rotate(-8deg); }
.motion-symbol--left { top: auto; right: auto; bottom: 8%; left: clamp(12px, 3vw, 56px); transform: translate3d(0, var(--motion-y, 0), 0) rotate(7deg); }
.section--ink .motion-symbol { color: white; opacity: .045; }
.parallax-media { will-change: transform; }
.manifest-photo img.parallax-media { transform: translate3d(0, var(--motion-y, 0), 0) scale(1.035); }
.bonus-visual img.parallax-media { transform: translate3d(0, var(--motion-y, 0), 0); }
.author-card img.parallax-media { transform: translate3d(0, var(--motion-y, 0), 0) scale(1.04); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease var(--reveal-delay, 0ms), transform .6s cubic-bezier(.22, 1, .36, 1) var(--reveal-delay, 0ms), box-shadow .25s ease, border-color .25s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (hover: hover) and (pointer: fine) {
  .transformation-card.reveal.is-visible:hover, .guarantee-card.reveal.is-visible:hover, .outcome-card.reveal.is-visible:hover, .quote-card.reveal.is-visible:hover, .price-card.reveal.is-visible:hover { border-color: rgba(43, 99, 239, .34); box-shadow: 0 18px 38px rgba(14, 21, 18, .11); transform: translateY(-4px); }
  .guarantee-card.reveal.is-visible:hover { border-color: rgba(117, 221, 149, .42); box-shadow: 0 18px 38px rgba(0, 0, 0, .2); }
  .opinion-strip img:hover { z-index: 2; box-shadow: 0 18px 36px rgba(0, 0, 0, .2); transform: translateY(-4px) rotate(0); }
}

@media (max-width: 960px) {
  .site-nav { display: none; }
  /* Bez menu w srodku pasek wraca do dwoch elementow po bokach. */
  .site-header__inner:has(.site-nav) { display: flex; justify-content: space-between; }
  .manifest-grid, .bonus-grid, .author-grid { gap: 56px; }
  .guarantee-grid { grid-template-columns: 1fr; }
  .guarantee-card { min-height: 220px; }
  .guarantee-card__icon { margin-bottom: 32px; }
}

@media (max-width: 767px) {
  :root { --pad: 20px; --r: 14px; --offer-h: 34px; --nav-h: 62px; }
  h2 { font-size: clamp(1.85rem, 9vw, 2.8rem); }
  .offer-bar { padding: 0 12px; }
  .offer-bar p { display: flex; font-size: .61rem; }
  .offer-dot { width: 6px; height: 6px; }
  .offer-bar__inner { justify-content: center; gap: 8px; }
  .timer--small span { min-width: 23px; }
  .timer--small b { font-size: .67rem; }
  .timer--small i { margin-inline: 1px; }
  .site-header__inner { width: calc(100% - 32px); gap: 14px; }
  .site-logo { width: 102px; }
  .button--nav { min-height: 38px; padding: 9px 15px; font-size: .68rem; }
  .brand-logo { width: 150px; margin-bottom: 26px; }
  .eyebrow { max-width: 100%; flex-wrap: wrap; font-size: .69rem; letter-spacing: .1em; }
  .cinema { color: var(--text); background: var(--paper); }
  .cinema + .proof-marquee { margin-top: 0; }
  .cinema__tail { display: none; }
  .cinema__stage { position: static; height: auto; min-height: 0; }
  #seq, .cinema__scrim, .cinema__loader, .scroll-hint { display: none; }
  .cinema__flow { margin-top: 0; }
  .chapter { min-height: auto; padding: 84px var(--pad); color: var(--text); background: var(--paper); }
  .chapter--hero .chapter__box { width: 100%; transform: none; }
  .chapter--hero { min-height: 100svh; padding-top: calc(var(--chrome-h) + 54px); padding-bottom: 76px; background: linear-gradient(90deg, rgba(244, 247, 245, .98) 0%, rgba(244, 247, 245, .93) 58%, rgba(244, 247, 245, .62) 100%), url("img/hero-poster.webp") center / cover no-repeat; }
  .chapter--right { justify-items: start; background: var(--paper-2); text-align: left; }
  .chapter--right p { margin-left: 0; }
  .chapter--right .chapter__number { justify-content: flex-start; }
  .chapter--right .chapter__number::before { order: initial; }
  .chapter h1 { max-width: 100%; font-size: clamp(2.05rem, 10.5vw, 3.2rem); overflow-wrap: normal; }
  .chapter h2 { font-size: clamp(2rem, 9vw, 3rem); }
  .chapter h1, .chapter h2, .chapter__box { text-shadow: none; }
  .chapter .eyebrow, .chapter__number { color: var(--green-dk); }
  .chapter__box > p:not(.eyebrow, .chapter__number), .chapter .lead { color: #4e5b56; }
  .hero-rating { color: var(--text); background: rgba(255, 255, 255, .88); border-color: var(--line); box-shadow: var(--shadow); }
  .hero-rating small { color: var(--muted); }
  .lead { font-size: .98rem; }
  .hero-actions { align-items: stretch; flex-direction: column; }
  .hero-actions .button { width: 100%; }
  .hero-proof { max-width: none; color: var(--muted); text-align: center; }
  .hero-proof em { color: var(--text); }
  .proof-marquee__track { animation-duration: 25s; }
  .proof-marquee__group { min-width: max-content; }
  .motion-symbol { display: none; }
  .opinion-strip img { transform: none; }
  .section { padding: 84px 0; }
  .narrow-head { margin-bottom: 38px; text-align: left; }
  .narrow-head .eyebrow { justify-content: flex-start; }
  .narrow-head p:last-child { margin-left: 0; }
  .split-heading { margin-bottom: 40px; grid-template-columns: 1fr; gap: 12px; }
  .transformation-grid { grid-template-columns: 1fr; }
  .transformation-card { padding: 28px 22px; }
  .promise-item { padding: 22px 0; grid-template-columns: 42px 1fr; gap: 10px; }
  .promise-item span { display: none; }
  .manifest-grid, .bonus-grid, .author-grid, .faq-grid { grid-template-columns: 1fr; gap: 54px; }
  .manifest-photo { max-width: 520px; }
  .manifest-photo img { height: 560px; }
  .module summary { grid-template-columns: 40px 1fr auto; gap: 10px; }
  .module-body { padding-left: 50px; }
  .outcome-grid { grid-template-columns: 1fr; }
  .outcome-card, .outcome-card:nth-child(4), .outcome-card:nth-child(5) { min-height: 190px; grid-column: auto; }
  .quote-grid { grid-template-columns: 1fr; }
  .testimonial-video-block { margin-bottom: 48px; }
  .testimonial-subheading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .testimonial-subheading h3 { text-align: left; }
  .testimonial-video-grid,
  .testimonial-video-grid[data-kolumny="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  /* Trzy pionowe filmy zostawiaja na telefonie sierote w drugim rzedzie, wiec ja centrujemy.
     Przy czterech pionowych siatka wychodzi rowno, wiec regula nie moze sie wtedy odpalac. */
  .testimonial-video-grid > .testimonial-video:nth-child(3):nth-last-child(2) { width: calc(50% - 5px); grid-column: 1 / -1; justify-self: center; }
  .testimonial-video--wide { width: 100%; grid-column: 1 / -1; }
  .testimonial-video { border-radius: 14px; }
  .opinion-strip { padding-inline: 42px; scroll-padding-inline: 42px; }
  .opinion-strip img { width: 82vw; height: 220px; }
  .opinion-arrow { width: 44px; height: 44px; }
  .opinion-arrow--prev { left: 6px; }
  .opinion-arrow--next { right: 6px; }
  .bonus-visual { min-height: 380px; }
  .bonus-visual img { max-height: 430px; }
  .bonus-total { align-items: flex-start; flex-direction: column; gap: 4px; }
  .pricing-trust { grid-template-columns: 1fr; }
  .pricing-trust > div { min-height: 76px; border-right: 0; border-bottom: 1px solid var(--line); }
  .pricing-trust > div:last-child { border-bottom: 0; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { padding: 30px 24px; }
  .faq-intro { position: relative; top: auto; }
  .author-card { height: 560px; }
  .legal-nav { flex-wrap: wrap; }
  .consent > div { align-items: stretch; flex-direction: column-reverse; }
  .consent .button { width: 100%; }
  .mobile-cta { display: flex; }
  .mobile-cta.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }
  body:has(.consent.is-visible) .mobile-cta { opacity: 0; pointer-events: none; transform: translateY(110%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  .cinema { color: var(--text); background: var(--paper); }
  .cinema + .proof-marquee { margin-top: 0; }
  .cinema__tail { display: none; }
  .cinema__stage { position: static; height: auto; min-height: 0; }
  #seq, .cinema__scrim, .cinema__loader, .scroll-hint { display: none; }
  .cinema__flow { margin-top: 0; }
  .chapter { min-height: auto; padding: 90px var(--pad); color: var(--text); background: var(--paper); }
  .chapter--hero { min-height: 100svh; background: linear-gradient(90deg, rgba(244, 247, 245, .98) 0%, rgba(244, 247, 245, .9) 62%, rgba(244, 247, 245, .56) 100%), url("img/hero-poster.webp") center / cover no-repeat; }
  .chapter--right { justify-items: start; background: var(--paper-2); text-align: left; }
  .chapter--right p { margin-left: 0; }
  .chapter--right .chapter__number { justify-content: flex-start; }
  .chapter--right .chapter__number::before { order: initial; }
  .chapter h1, .chapter h2, .chapter__box { text-shadow: none; }
  .chapter .eyebrow, .chapter__number { color: var(--green-dk); }
  .chapter__box > p:not(.eyebrow, .chapter__number), .chapter .lead { color: #4e5b56; }
  .hero-proof { color: var(--muted); }
  .hero-proof em { color: var(--text); }
  .hero-rating { color: var(--text); background: rgba(255, 255, 255, .88); border-color: var(--line); }
  .hero-rating small { color: var(--muted); }
  .proof-marquee__track { animation: none; }
  .section .eyebrow::before, .final-cta .eyebrow::before { transform: none; }
  .opinion-strip img, .parallax-media { transform: none !important; }
  .reveal { opacity: 1; transform: none; transition-delay: 0ms; }
  .social-compare__track i { width: var(--wypelnienie); transition: none; }
}

/* Wariant statyczny: osobny kierunek wizualny inspirowany drugim landingiem. */
.static-variant {
  --ink: #102233;
  --ink-2: #173247;
  --paper: #fbfcfa;
  --paper-2: #edf4ef;
  --green: #2c934d;
  --green-dk: #1c6c37;
  background: #fbfcfa;
}

.static-variant .eyebrow {
  gap: 0;
  font-size: clamp(1.05rem, 1.45vw, 1.5rem);
  letter-spacing: .09em;
  line-height: 1.3;
}

.static-variant .eyebrow::before {
  display: none;
  content: none;
}

.static-variant .site-header {
  background: rgba(251, 252, 250, .92);
  box-shadow: 0 8px 34px rgba(16, 34, 51, .07);
}

.static-hero {
  position: relative;
  overflow: hidden;
  min-height: min(820px, calc(100svh - 54px));
  padding: calc(var(--chrome-h) + clamp(24px, 3vw, 46px)) 0 clamp(72px, 7vw, 90px);
  color: white;
  background:
    radial-gradient(circle at 78% 17%, rgba(71, 130, 255, .28), transparent 26%),
    radial-gradient(circle at 12% 82%, rgba(44, 147, 77, .23), transparent 30%),
    linear-gradient(128deg, #0e2132 0%, #153149 57%, #112a3d 100%);
}

.static-hero::before {
  position: absolute;
  inset: 0;
  opacity: .16;
  background-image:
    linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
  background-size: 52px 52px;
  content: "";
  mask-image: linear-gradient(90deg, black, transparent 72%);
}

.static-hero::after {
  position: absolute;
  right: -10vw;
  bottom: -32vw;
  width: 64vw;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  box-shadow: 0 0 0 80px rgba(255, 255, 255, .025), 0 0 0 160px rgba(255, 255, 255, .018);
  content: "";
}

.static-hero__formula {
  position: absolute;
  top: 18%;
  left: 4%;
  color: rgba(255, 255, 255, .045);
  font-family: "Manrope", sans-serif;
  font-size: clamp(5rem, 12vw, 11rem);
  font-weight: 800;
  letter-spacing: -.08em;
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-7deg);
}

.static-hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 610px;
  grid-template-columns: minmax(0, 1.06fr) minmax(380px, .94fr);
  align-items: center;
  gap: clamp(42px, 7vw, 90px);
}

.static-hero__copy { padding-block: 26px; }
.static-hero__copy .eyebrow {
  display: block;
  margin-bottom: 14px;
  font-size: clamp(.78rem, 1.05vw, 1rem);
  letter-spacing: .11em;
  white-space: nowrap;
}
.static-hero__copy .eyebrow span { margin-inline: .45em; }
/* Polskie znaki diakrytyczne (ż, ó, ę, ł) potrzebuja luzniejszej interlinii,
   przy 1.02 wiersze nagłowka zlewaly sie ze soba. */
.static-hero__copy h1 {
  max-width: 760px;
  margin-bottom: 22px;
  color: white;
  font-size: clamp(2.35rem, 4.1vw, 3.6rem);
  letter-spacing: -.022em;
  line-height: 1.16;
  word-spacing: .03em;
}
.static-hero__copy h1 em { color: #7de29b; font-style: normal; }
.static-hero__copy .lead { max-width: 670px; color: rgba(255, 255, 255, .78); font-size: clamp(1.02rem, 1.5vw, 1.22rem); }
/* Wstep w hero moze byc jednym akapitem albo kilkoma, wiec odstepy ustawia kontener. */
.hero-lead .lead { margin-bottom: 14px; }
.hero-lead .lead:last-child { margin-bottom: 30px; }
.hero-lead strong { color: white; font-weight: 700; }
.static-hero__copy .hero-rating { margin-bottom: 20px; color: white; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); }
.static-hero__copy .hero-rating small { color: rgba(255, 255, 255, .65); }
.static-hero__copy .hero-proof { color: rgba(255, 255, 255, .65); }
.static-hero__copy .hero-proof em { color: white; }

.static-hero__benefits {
  display: flex;
  margin: 22px 0;
  flex-wrap: wrap;
  gap: 9px;
}
.static-hero__benefits span {
  padding: 8px 12px;
  color: #dff7e7;
  background: rgba(44, 147, 77, .15);
  border: 1px solid rgba(125, 226, 155, .24);
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
}

.static-hero__visual { position: relative; align-self: stretch; }
.static-hero__product-stage {
  position: absolute;
  inset: 24px 12px 24px 0;
  overflow: visible;
  background:
    radial-gradient(circle at 72% 38%, rgba(74, 133, 255, .32), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .055));
  border: 1px solid rgba(255, 255, 255, .17);
  border-radius: 32px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .26), inset 0 1px 0 rgba(255, 255, 255, .09);
  backdrop-filter: blur(4px);
}

.static-hero__product-stage::before {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 22px;
  content: "";
}

.static-hero__product-label {
  position: absolute;
  z-index: 2;
  top: 34px;
  left: 34px;
  display: grid;
  max-width: 190px;
  gap: 7px;
}
.static-hero__product-label span { color: #7de29b; font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.static-hero__product-label strong { color: white; font-family: "Manrope", sans-serif; font-size: 1rem; line-height: 1.25; }

.static-hero__mockup {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: -5%;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 34px rgba(0, 0, 0, .36));
  transform: translateY(-48%) rotate(1.5deg) scale(1.3);
}

.static-hero__portrait {
  position: absolute;
  z-index: 4;
  bottom: 30px;
  left: -42px;
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.static-hero__portrait-photo {
  overflow: hidden;
  width: 176px;
  height: 176px;
  flex: 0 0 176px;
  background: #dcebdd;
  border: 7px solid #f8fbf8;
  border-radius: 50%;
  box-shadow: 0 22px 50px rgba(0, 0, 0, .35);
}
.static-hero__portrait-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  transform: scale(1.48);
}
.static-hero__portrait span {
  display: grid;
  min-width: 132px;
  padding: 10px 12px;
  margin-bottom: 8px;
  gap: 2px;
  color: var(--text);
  background: rgba(255, 255, 255, .94);
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .2);
}
.static-hero__portrait b { font-family: "Manrope", sans-serif; font-size: .72rem; line-height: 1.2; }
.static-hero__portrait small { color: var(--muted); font-size: .6rem; font-weight: 650; }

.hero-result-card {
  position: absolute;
  z-index: 3;
  display: grid;
  width: 190px;
  padding: 17px 18px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(5, 20, 32, .24);
  color: var(--text);
  backdrop-filter: blur(10px);
}
.hero-result-card b { color: var(--accent); font-family: "Manrope", sans-serif; font-size: 1.5rem; letter-spacing: -.05em; line-height: 1; }
.hero-result-card span { margin-top: 7px; color: var(--muted); font-size: .68rem; font-weight: 650; line-height: 1.35; }
.hero-result-card--top { top: 13%; right: -28px; }
.hero-result-card--bottom { right: -12px; bottom: 8%; left: auto; }
.static-variant .proof-marquee { position: relative; z-index: 3; margin: 0; }

.results-band { padding: 34px 0; color: white; background: linear-gradient(100deg, var(--green-dk), #2f9451); }
.results-band__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.results-band__grid > div { display: grid; padding: 8px clamp(18px, 3vw, 34px); gap: 5px; border-right: 1px solid rgba(255, 255, 255, .2); }
.results-band__grid > div:last-child { border-right: 0; }
.results-band strong { font-family: "Manrope", sans-serif; font-size: clamp(1.8rem, 3vw, 2.5rem); letter-spacing: -.06em; line-height: 1; }
.results-band span { color: rgba(255, 255, 255, .72); font-size: .72rem; font-weight: 650; line-height: 1.35; }

/* Pasek spolecznosciowy: zasiegi z trzech kanalow i liczby, ktore je poparte. */
.social-band { padding: clamp(48px, 6vw, 76px) 0; background: linear-gradient(160deg, #f6faf7, #eef3fb); border-bottom: 1px solid var(--line); }
.social-band__title { margin-bottom: 30px; font-size: clamp(1.5rem, 3.4vw, 2.35rem); letter-spacing: -.03em; text-align: center; }
.social-band__channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.social-channel { display: grid; padding: 22px 24px; gap: 6px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); text-align: center; }
.social-channel__name { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.social-channel b { color: var(--accent); font-family: "Manrope", sans-serif; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.05em; line-height: 1; }
.social-channel__logo { width: 24px; height: 24px; margin: 0 auto 2px; }
.social-channel small { color: var(--muted); font-size: .74rem; font-weight: 650; }

/* Wynik z matury stoi w osobnym pasmie niz zasiegi, bo to inna obietnica. */
.social-proof { padding: clamp(48px, 6vw, 76px) 0; background: var(--paper); border-bottom: 1px solid var(--line); }
.social-proof .social-band__title { margin-bottom: 26px; }

/* Dwie srednie na wspolnej skali. Slupek rosnie dopiero, gdy karta wjedzie w ekran,
   bo wtedy widac sam ruch z 33 na 70, a nie dwa gotowe paski. */
.social-compare { display: grid; padding: 24px clamp(18px, 3vw, 30px); margin-top: 16px; gap: 14px; background: white; border: 1px solid var(--line); border-radius: 16px; }
.social-compare__eyebrow { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.social-compare__row { display: grid; grid-template-columns: minmax(120px, 240px) 1fr auto; gap: clamp(12px, 2vw, 22px); align-items: center; }
.social-compare__label { color: var(--muted); font-size: .85rem; font-weight: 650; }
.social-compare__track { position: relative; height: 14px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.social-compare__track i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: #c9d4d0; border-radius: 999px; transition: width 1s cubic-bezier(.22, 1, .36, 1) .12s; }
.social-compare.is-visible .social-compare__track i { width: var(--wypelnienie); }
.social-compare__row.is-cel .social-compare__track i { background: var(--accent); }
.social-compare__row b { color: var(--text); font-family: "Manrope", sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.6rem); letter-spacing: -.04em; }
.social-compare__row.is-cel b { color: var(--accent); }
.social-compare__note { color: var(--muted); font-size: .8rem; line-height: 1.5; }

.social-band__stats { display: grid; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.social-band__stats > div { display: grid; padding: 22px 24px; gap: 6px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 16px; }
.social-band__stats strong { color: var(--green-dk); font-family: "Manrope", sans-serif; font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -.05em; line-height: 1; }
.social-band__stats span { color: var(--muted); font-size: .76rem; font-weight: 650; line-height: 1.4; }

/* Blok oferty, ktory w kursie pod webinar zastepuje liste "co otrzymasz". */
.offer-pitch__sub { margin-top: 12px; color: var(--accent-dk); font-family: "Manrope", sans-serif; font-size: clamp(1rem, 2vw, 1.25rem); }
.offer-pitch__body { max-width: 900px; margin-top: 34px; padding: clamp(26px, 4vw, 42px); background: white; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.offer-pitch__intro { margin: 0 0 20px; color: var(--text); font-weight: 700; }
.offer-pitch__list { display: grid; padding: 0; margin: 0; gap: 14px; list-style: none; }
.offer-pitch__list li { position: relative; padding-left: 38px; color: var(--muted); font-size: .94rem; line-height: 1.55; }
.offer-pitch__list li strong { color: var(--text); }
.offer-pitch__list li::before {
  position: absolute;
  top: 1px;
  left: 0;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  background: var(--green);
  border-radius: 50%;
  color: white;
  font-size: .72rem;
  font-weight: 800;
  content: "✓";
}

/* Miniatury pozostalych bonusow pod glownym mockupem ebooka. */
.bonus-thumbs { position: relative; z-index: 2; display: flex; margin-top: 18px; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
/* Miniatury sa na tyle waskie, zeby cztery bonusy zmiescily sie w jednym rzedzie.
   Szersze zawijaly czwarta grafike do osobnego wiersza pod pozostalymi. */
.bonus-thumbs img { width: clamp(80px, 7.6vw, 98px); height: auto; max-height: 112px; object-fit: contain; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 14px; filter: drop-shadow(0 14px 22px rgba(14, 21, 18, .14)); }

/* Więcej rytmu kolorystycznego poniżej hero. */
.static-variant #jak-to-dziala {
  background:
    radial-gradient(circle at 8% 15%, rgba(43, 99, 239, .1), transparent 28%),
    linear-gradient(145deg, #f4f8f4 0%, #eaf1f8 100%);
}
.static-variant #transformacja {
  background:
    linear-gradient(135deg, rgba(222, 241, 227, .92), rgba(231, 239, 251, .92)),
    #edf4ef;
}
.static-variant .manifest {
  overflow: hidden;
  background: linear-gradient(180deg, #fbfcfa 0%, #f4f8f4 100%);
}
.static-variant .manifest::after,
.static-variant #co-otrzymasz::after,
.static-variant .bonuses::after {
  position: absolute;
  right: -70px;
  bottom: -90px;
  color: rgba(43, 99, 239, .035);
  font-family: "Manrope", sans-serif;
  font-size: clamp(10rem, 26vw, 25rem);
  font-weight: 800;
  line-height: .8;
  content: "π";
}
.static-variant #program { background: #eaf2ed; border-block: 1px solid rgba(28, 108, 55, .09); }
.static-variant #co-otrzymasz { overflow: hidden; background: linear-gradient(145deg, #f8faf7, #eef3fb); }
.static-variant #co-otrzymasz::after { content: "Σ"; }
.static-variant .bonuses { overflow: hidden; background: linear-gradient(140deg, #f2f7ed, #edf4ef); }
.static-variant .bonuses::after { left: -50px; right: auto; color: rgba(44, 147, 77, .04); content: "√"; }
.static-variant .pricing { background: linear-gradient(180deg, #eaf2ed 0%, #f2f5fb 100%); }
.static-variant .author { background: #e8f0eb; }
.static-variant .transformation-card,
.static-variant .outcome-card,
.static-variant .module,
.static-variant .price-card { box-shadow: 0 12px 34px rgba(16, 34, 51, .07); }

@media (max-width: 960px) {
  .static-hero { min-height: auto; }
  .static-hero__grid { min-height: 760px; grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr); gap: 34px; }
  .static-hero__copy h1 { font-size: clamp(2.15rem, 4.9vw, 3.35rem); line-height: 1.15; }
  .hero-result-card--top { right: -10px; }
  .hero-result-card--bottom { left: -24px; }
}

@media (max-width: 767px) {
  .static-hero { padding-top: calc(var(--chrome-h) + 42px); padding-bottom: 58px; }
  .static-hero::before { mask-image: none; opacity: .1; }
  .static-hero::after { display: none; }
  .static-hero__formula { top: 12%; left: -10%; font-size: 6rem; }
  .static-hero__grid { width: calc(100vw - 40px); max-width: calc(100vw - 40px); min-height: 0; grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .static-hero__copy { width: 100%; min-width: 0; padding: 0; text-align: left; }
  .static-hero__copy h1 { font-size: clamp(1.95rem, 9vw, 2.7rem); line-height: 1.14; }
  .static-hero__copy h1 em { display: block; }
  /* Kurs z dlugim naglowkiem. Wyrozniony fragment w osobnej linii plus pelny stopien
     rozbijaly zdanie na szesc linijek. Zwarty wariant wraca do trzech: mniejszy stopien
     i wyroznienie plynace w tekscie, kolor zostaje. */
  [data-hero-title="kompakt"] .static-hero__copy h1 { font-size: clamp(1.6rem, 7.2vw, 2.1rem); line-height: 1.16; }
  [data-hero-title="kompakt"] .static-hero__copy h1 em { display: inline; }
  .static-hero__copy h1,
  .static-hero__copy .lead { width: 100%; max-width: 100%; overflow-wrap: break-word; }
  .static-hero__copy .hero-rating { width: fit-content; margin-bottom: 22px; }
  .static-hero__copy .eyebrow { font-size: clamp(.68rem, 3vw, .82rem); letter-spacing: .075em; }
  .static-hero__benefits { margin-block: 24px; }
  .static-hero__visual { min-height: 520px; }
  .static-hero__product-stage { inset: 0; border-radius: 24px; }
  .static-hero__product-stage::before { inset: 12px; border-radius: 16px; }
  .static-hero__product-label { top: 26px; left: 24px; max-width: 160px; }
  .static-hero__product-label strong { font-size: .86rem; }
  .static-hero__mockup { right: -4%; width: 100%; height: 100%; transform: translateY(-50%) rotate(1.5deg) scale(1.2); }
  .static-hero__portrait { bottom: 22px; left: -8px; gap: 6px; }
  .static-hero__portrait-photo { width: 132px; height: 132px; flex-basis: 132px; border-width: 5px; }
  .static-hero__portrait span { min-width: 114px; padding: 8px 9px; }
  .hero-result-card { width: 148px; padding: 12px 13px; }
  .hero-result-card b { font-size: 1.2rem; }
  .hero-result-card--top { top: 12%; right: -5px; }
  /* Na telefonie karta z liczba i podpis pod portretem Milosza sa w tym samym pasie,
     wiec karte podnosimy nad zdjecie, inaczej zaslania "Twoj prowadzacy". */
  .hero-result-card--bottom { right: -5px; bottom: 34%; left: auto; }
  .results-band { padding: 22px 0; }
  .results-band__grid { grid-template-columns: repeat(2, 1fr); }
  .results-band__grid > div { padding: 18px 14px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .results-band__grid > div:nth-child(2) { border-right: 0; }
  .results-band__grid > div:nth-child(n+3) { border-bottom: 0; }
  .social-band__channels { grid-template-columns: 1fr; }
  .social-compare__row { grid-template-columns: 1fr auto; }
  .social-compare__label { grid-column: 1 / -1; }
  .social-band__stats { grid-template-columns: 1fr; }
  .offer-pitch__list li { padding-left: 32px; font-size: .88rem; }
}

@media (max-width: 430px) {
  .static-variant .site-header__inner { width: calc(100vw - 32px); }
  .static-variant .button--nav { display: none; }
}

/* Motyw jasny. Wlacza go build.mjs atrybutem data-theme na <html>, na podstawie pola
   "theme" w tresci site'u. Domyslny motyw "ciemny" siedzi w regulach wyzej, tutaj sa
   tylko roznice: hero na jasnym zielonym tle zamiast granatowego. Dzieki temu dwa kursy
   na tym samym szablonie wygladaja jak dwie osobne strony. */
[data-theme="jasny"] {
  --hero-glass: rgba(255, 255, 255, .86);
  --hero-shade: rgba(9, 48, 28, .16);
  --hero-edge: rgba(0, 99, 46, .13);
}

[data-theme="jasny"] .static-hero {
  color: var(--text);
  background:
    radial-gradient(circle at 80% 12%, rgba(18, 184, 92, .22), transparent 34%),
    radial-gradient(circle at 6% 88%, rgba(0, 129, 60, .14), transparent 38%),
    linear-gradient(140deg, #f1fbf4 0%, #e2f5e9 54%, #f8fdfa 100%);
}
[data-theme="jasny"] .static-hero::before {
  opacity: .55;
  background-image:
    linear-gradient(rgba(0, 99, 46, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 99, 46, .09) 1px, transparent 1px);
}
[data-theme="jasny"] .static-hero::after {
  border-color: var(--hero-edge);
  box-shadow: 0 0 0 80px rgba(0, 129, 60, .035), 0 0 0 160px rgba(0, 129, 60, .022);
}
[data-theme="jasny"] .static-hero__formula { color: rgba(0, 99, 46, .07); }

[data-theme="jasny"] .static-hero__copy .eyebrow { color: var(--accent-dk); }
[data-theme="jasny"] .static-hero__copy h1 { color: var(--ink); }
[data-theme="jasny"] .static-hero__copy h1 em { color: var(--accent); }
[data-theme="jasny"] .static-hero__copy .lead { color: var(--muted); }
[data-theme="jasny"] .hero-lead strong { color: var(--ink); }
[data-theme="jasny"] .static-hero__copy .hero-rating {
  color: var(--text);
  background: var(--hero-glass);
  border-color: var(--hero-edge);
  box-shadow: 0 6px 18px rgba(9, 48, 28, .07);
}
[data-theme="jasny"] .static-hero__copy .hero-rating small { color: var(--muted); }
[data-theme="jasny"] .static-hero__copy .hero-proof { color: var(--muted); }
[data-theme="jasny"] .static-hero__copy .hero-proof em { color: var(--ink); }
[data-theme="jasny"] .static-hero__benefits span {
  color: var(--accent-dk);
  background: rgba(18, 184, 92, .13);
  border-color: rgba(0, 129, 60, .22);
}

[data-theme="jasny"] .static-hero__product-stage {
  background:
    radial-gradient(circle at 70% 34%, rgba(18, 184, 92, .18), transparent 42%),
    linear-gradient(150deg, rgba(255, 255, 255, .94), rgba(255, 255, 255, .55));
  border-color: var(--hero-edge);
  box-shadow: 0 34px 80px var(--hero-shade), inset 0 1px 0 white;
}
[data-theme="jasny"] .static-hero__product-stage::before { border-color: rgba(0, 99, 46, .08); }
[data-theme="jasny"] .static-hero__product-label span { color: var(--accent-dk); }
[data-theme="jasny"] .static-hero__product-label strong { color: var(--ink); }
[data-theme="jasny"] .static-hero__mockup { filter: drop-shadow(0 26px 30px rgba(9, 48, 28, .22)); }
[data-theme="jasny"] .static-hero__portrait-photo {
  border-color: white;
  box-shadow: 0 22px 46px var(--hero-shade);
}
[data-theme="jasny"] .static-hero__portrait span { box-shadow: 0 14px 30px rgba(9, 48, 28, .14); }
[data-theme="jasny"] .hero-result-card {
  border-color: var(--hero-edge);
  box-shadow: 0 18px 40px var(--hero-shade);
}
[data-theme="jasny"] .button--primary { box-shadow: 0 7px 18px rgba(0, 129, 60, .22); }

/* Wzor tla hero. Wybiera go build.mjs atrybutem data-hero na <html>, na podstawie pola
   "hero_pattern" w tresci site'u. Domyslna "siatka" siedzi w regulach wyzej, tutaj jest
   wariant "parabola": kropki zamiast kratki, uklad wspolrzednych z wykresem funkcji
   kwadratowej i mockup na przekrzywionej kartce zamiast szklanej plyty. */
[data-hero="parabola"] .static-hero::before {
  opacity: .5;
  background-image: radial-gradient(rgba(0, 99, 46, .22) 1.5px, transparent 1.6px);
  background-size: 26px 26px;
  mask-image: linear-gradient(200deg, black, transparent 78%);
}

/* Wykres wchodzi na miejsce okregu z wariantu domyslnego. */
[data-hero="parabola"] .static-hero::after {
  right: -11vw;
  bottom: auto;
  top: 44%;
  width: min(860px, 64vw);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: .26;
  background: url("img/hero-parabola.svg") center / contain no-repeat;
  transform: translateY(-50%);
}

[data-hero="parabola"] .static-hero__formula {
  top: 12%;
  left: 2%;
  font-size: clamp(3.4rem, 7.4vw, 7rem);
  transform: rotate(-4deg);
}

[data-hero="parabola"] .static-hero__product-stage {
  inset: 18px 6px 30px 8px;
  background:
    repeating-linear-gradient(rgba(0, 99, 46, .07) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(0, 99, 46, .07) 0 1px, transparent 1px 30px),
    linear-gradient(160deg, rgba(255, 255, 255, .93) 0%, rgba(244, 252, 247, .74) 100%);
  border-radius: 20px;
  box-shadow: 0 30px 70px var(--hero-shade), 0 2px 0 rgba(0, 99, 46, .06);
  transform: rotate(-1.6deg);
}

/* Wewnetrzna ramka jest przerywana, jak obrys zadania odreczonego olowkiem. */
[data-hero="parabola"] .static-hero__product-stage::before {
  inset: 13px;
  border: 1.5px dashed rgba(0, 129, 60, .26);
  border-radius: 13px;
}

[data-hero="parabola"] .static-hero__product-label {
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--hero-edge);
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(9, 48, 28, .1);
  transform: rotate(1.6deg);
}

[data-hero="parabola"] .static-hero__mockup {
  right: -2%;
  transform: translateY(-48%) rotate(-2.4deg) scale(1.24);
}

[data-hero="parabola"] .static-hero__portrait { transform: rotate(1.6deg); }

@media (max-width: 767px) {
  [data-hero="parabola"] .static-hero::after { display: none; }
  [data-hero="parabola"] .static-hero__product-stage { transform: none; }
  [data-hero="parabola"] .static-hero__product-label,
  [data-hero="parabola"] .static-hero__portrait { transform: none; }
}

/* Motyw fioletowy. Kolory sa zdjete z pudelka kursu maturalnego, zeby landing i produkt
   wygladaly jak jedna calosc. To wariant motywu ciemnego: reguly bazowe zostaja, tutaj
   zmieniamy tlo hero, zielen akcentow i zielone elementy wariantu "parabola". */
[data-theme="fiolet"],
/* Wariant statyczny ustawia wlasna zielen na body, czyli blizej tresci niz motyw na <html>,
   wiec fiolet trzeba powtorzyc takze tam, inaczej liczby i ptaszki zostaja zielone. */
[data-theme="fiolet"] .static-variant {
  --green: #8b27c7;
  --green-dk: #5f1a92;
  --hero-shade: rgba(14, 5, 28, .5);
  --hero-edge: rgba(198, 122, 255, .26);
}

[data-theme="fiolet"] .static-hero {
  background:
    radial-gradient(circle at 78% 17%, rgba(168, 62, 232, .36), transparent 28%),
    radial-gradient(circle at 12% 82%, rgba(96, 32, 168, .34), transparent 32%),
    linear-gradient(128deg, #190a2c 0%, #2c1150 56%, #1b0b32 100%);
}
[data-theme="fiolet"] .static-hero__formula { color: rgba(214, 163, 255, .07); }
[data-theme="fiolet"] .static-hero__copy h1 em { color: #d6a3ff; }
[data-theme="fiolet"] .static-hero__benefits span {
  color: #e6cbff;
  background: rgba(168, 62, 232, .2);
  border-color: rgba(198, 122, 255, .34);
}
[data-theme="fiolet"] .static-hero__product-label span { color: #d6a3ff; }
[data-theme="fiolet"] .eyebrow--light { color: #c78bff; }
[data-theme="fiolet"] .testimonial-subheading span { color: #c78bff; }
[data-theme="fiolet"] .opinion-arrow:hover { background: #c78bff; }
[data-theme="fiolet"] .button--primary { box-shadow: 0 7px 18px rgba(139, 39, 199, .34); }
[data-theme="fiolet"] .results-band { background: linear-gradient(100deg, #4d1580, #8b27c7); }
[data-theme="fiolet"] .social-band { background: linear-gradient(160deg, #faf6ff, #f1eefb); }

/* Wariant "parabola" jest napisany w zieleni, wiec na fioletowym hero trzeba go przemalowac. */
[data-theme="fiolet"][data-hero="parabola"] .static-hero::before {
  opacity: .3;
  background-image: radial-gradient(rgba(214, 163, 255, .55) 1.5px, transparent 1.6px);
}
[data-theme="fiolet"][data-hero="parabola"] .static-hero::after {
  opacity: .22;
  background-image: url("img/hero-parabola-fiolet.svg");
}
[data-theme="fiolet"][data-hero="parabola"] .static-hero__product-stage {
  background:
    repeating-linear-gradient(rgba(214, 163, 255, .13) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(214, 163, 255, .13) 0 1px, transparent 1px 30px),
    linear-gradient(160deg, rgba(60, 25, 100, .82) 0%, rgba(30, 12, 54, .68) 100%);
  border: 1px solid var(--hero-edge);
  box-shadow: 0 30px 70px var(--hero-shade), 0 2px 0 rgba(198, 122, 255, .08);
}
[data-theme="fiolet"][data-hero="parabola"] .static-hero__product-stage::before { border-color: rgba(214, 163, 255, .28); }
[data-theme="fiolet"][data-hero="parabola"] .static-hero__product-label {
  background: rgba(30, 12, 54, .88);
  border-color: var(--hero-edge);
  box-shadow: 0 10px 24px rgba(14, 5, 28, .4);
}

/* Wariant hero "panel". Wlacza go build.mjs atrybutem data-hero-variant na <html>,
   na podstawie pola hero.variant w tresci site'u. Zamiast pudelka z portretem po prawej
   stoi karta z wynikiem ucznia: dwa slupki, lista dzialow i dwie liczby. Kursy bez tego
   pola dostaja "produkt" i zadna z ponizszych regul ich nie dotyczy. */
.hero-panel { display: none; }

[data-hero-variant="panel"] .static-hero__product-stage,
[data-hero-variant="panel"] .hero-result-card { display: none; }

[data-hero-variant="panel"] .hero-panel {
  --panel-akcent: #7de29b;
  position: relative;
  display: grid;
  padding: clamp(24px, 2.6vw, 32px);
  gap: clamp(18px, 2vw, 24px);
  align-content: start;
  color: white;
  background: linear-gradient(158deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .055));
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 26px;
  box-shadow: 0 34px 80px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .1);
  backdrop-filter: blur(6px);
}

/* Pudelko kursu wystaje poza rog karty, zeby produkt byl widoczny mimo braku sceny. */
.hero-panel__box {
  position: absolute;
  z-index: 2;
  top: clamp(-58px, -4vw, -34px);
  right: -30px;
  width: clamp(112px, 13vw, 168px);
  height: auto;
  filter: drop-shadow(0 22px 30px rgba(0, 0, 0, .45));
  transform: rotate(6deg);
}

/* Prawy margines robi miejsce pudelku, ktore wystaje poza gorny rog karty. */
.hero-panel__head { display: flex; padding-right: clamp(96px, 11vw, 148px); align-items: center; justify-content: space-between; gap: 14px; }
.hero-panel__label {
  color: rgba(255, 255, 255, .62);
  font-family: "Manrope", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-panel__badge {
  padding: 6px 12px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
}

.hero-panel__bars { display: grid; gap: 15px; }
.hero-panel__bar-top {
  display: flex;
  margin-bottom: 8px;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, .72);
  font-size: .76rem;
  font-weight: 650;
}
.hero-panel__bar-top b { color: white; font-family: "Manrope", sans-serif; font-size: 1.2rem; letter-spacing: -.04em; }
.hero-panel__bar--cel .hero-panel__bar-top b { color: var(--panel-akcent); }
.hero-panel__track { overflow: hidden; height: 13px; background: rgba(255, 255, 255, .1); border-radius: 999px; }
.hero-panel__fill {
  display: block;
  width: var(--wypelnienie);
  height: 100%;
  background: rgba(255, 255, 255, .26);
  border-radius: 999px;
  animation: panel-fill 1.2s .3s cubic-bezier(.22, 1, .36, 1) both;
}
.hero-panel__bar--cel .hero-panel__fill {
  background: linear-gradient(90deg, var(--accent), var(--panel-akcent));
  box-shadow: 0 0 20px rgba(255, 255, 255, .22);
}
@keyframes panel-fill { from { width: 0; } to { width: var(--wypelnienie); } }

.hero-panel__checks {
  display: grid;
  padding: 0;
  margin: 0;
  gap: 10px 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
}
.hero-panel__checks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: rgba(255, 255, 255, .78);
  font-size: .75rem;
  font-weight: 650;
  line-height: 1.35;
}
.hero-panel__checks i {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 1px;
  place-items: center;
  color: rgba(255, 255, 255, .55);
  background: rgba(255, 255, 255, .12);
  border-radius: 50%;
  font-size: .62rem;
  font-style: normal;
  font-weight: 800;
}
.hero-panel__checks li[data-zrobione="tak"] i { color: var(--ink); background: var(--panel-akcent); }

.hero-panel__foot {
  display: grid;
  padding-top: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.hero-panel__stat { display: grid; gap: 5px; }
.hero-panel__stat b { color: white; font-family: "Manrope", sans-serif; font-size: 1.45rem; letter-spacing: -.05em; line-height: 1; }
.hero-panel__stat span { color: rgba(255, 255, 255, .6); font-size: .68rem; font-weight: 650; line-height: 1.35; }

.hero-panel__author {
  position: absolute;
  z-index: 3;
  bottom: -26px;
  left: -28px;
  display: flex;
  padding: 7px 16px 7px 7px;
  align-items: center;
  gap: 10px;
  color: var(--text);
  background: rgba(255, 255, 255, .95);
  border-radius: 999px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}
.hero-panel__author img {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 50%;
}
.hero-panel__author span { display: grid; gap: 1px; }
.hero-panel__author b { font-family: "Manrope", sans-serif; font-size: .74rem; line-height: 1.2; }
.hero-panel__author small { color: var(--muted); font-size: .62rem; font-weight: 650; }

/* Jeden pakiet nie moze wisiec w polowie szerokosci siatki dwukolumnowej. */
.pricing-grid > .price-card:only-child { width: min(640px, 100%); grid-column: 1 / -1; justify-self: center; }

@media (max-width: 960px) {
  [data-hero-variant="panel"] .static-hero__grid { min-height: 0; }
  .hero-panel__box { right: -14px; width: clamp(96px, 12vw, 132px); }
  .hero-panel__author { left: -14px; }
}

@media (max-width: 767px) {
  [data-hero-variant="panel"] .static-hero__visual { min-height: 0; margin-bottom: 26px; }
  .hero-panel__box { top: -40px; right: -8px; width: 104px; }
  .hero-panel__author { position: static; margin-top: 4px; justify-self: start; box-shadow: 0 12px 26px rgba(0, 0, 0, .22); }
  .hero-panel__checks { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-panel__fill { animation: none; }
}

/* Motyw stalowy. Kolory sa zdjete z pudelka Turbo Rozszerzenia: grafit, granat i cyjan.
   To wariant motywu ciemnego, wiec reguly bazowe zostaja, a tutaj zmienia sie tlo hero,
   zielen akcentow i kolor panelu z wynikiem. */
[data-theme="stal"],
/* Wariant statyczny ustawia wlasna zielen na body, czyli blizej tresci niz motyw na <html>,
   wiec cyjan trzeba powtorzyc takze tam, inaczej liczby i ptaszki zostaja zielone. */
[data-theme="stal"] .static-variant {
  --green: #0e7c92;
  --green-dk: #0a5c6e;
  --hero-shade: rgba(3, 18, 26, .5);
  --hero-edge: rgba(122, 214, 232, .26);
}

/* Papier wariantu statycznego ma zielonkawy odcien. Kafelki statystyk, sekcje "soft"
   i podsumowanie bonusow biora go z tej zmiennej, wiec na stali chlodzimy ja u zrodla. */
[data-theme="stal"] .static-variant {
  --paper: #fbfdfe;
  --paper-2: #edf3f6;
  background: #fbfdfe;
}

[data-theme="stal"] .static-hero {
  background:
    radial-gradient(circle at 76% 14%, rgba(23, 163, 190, .3), transparent 28%),
    radial-gradient(circle at 10% 84%, rgba(10, 92, 110, .42), transparent 34%),
    linear-gradient(128deg, #091820 0%, #11303f 56%, #0a2130 100%);
}
[data-theme="stal"] .static-hero__formula { color: rgba(150, 226, 240, .07); }
[data-theme="stal"] .static-hero__copy h1 em { color: #7ee0f0; }
[data-theme="stal"] .static-hero__benefits span {
  color: #cdf1f8;
  background: rgba(23, 163, 190, .18);
  border-color: rgba(122, 214, 232, .32);
}
[data-theme="stal"] .hero-panel { --panel-akcent: #7ee0f0; }
[data-theme="stal"] .eyebrow--light { color: #7ee0f0; }
[data-theme="stal"] .testimonial-subheading span { color: #7ee0f0; }
[data-theme="stal"] .opinion-arrow:hover { background: #7ee0f0; }
[data-theme="stal"] .button--primary { box-shadow: 0 7px 18px rgba(14, 124, 146, .34); }
[data-theme="stal"] .results-band { background: linear-gradient(100deg, #0a5c6e, #12a3be); }
[data-theme="stal"] .social-band { background: linear-gradient(160deg, #f5fafc, #eef4f8); }

/* Jasna polowa strony jest napisana w zieleni. Na motywie stalowym przemalowujemy ja
   na chlodne szarosci, zeby sekcje pod hero trzymaly ten sam klimat co pudelko kursu. */
[data-theme="stal"] .static-variant #jak-to-dziala {
  background:
    radial-gradient(circle at 8% 15%, rgba(18, 163, 190, .1), transparent 28%),
    linear-gradient(145deg, #f5f9fb 0%, #e9f1f5 100%);
}
[data-theme="stal"] .static-variant #transformacja {
  background:
    linear-gradient(135deg, rgba(219, 238, 243, .92), rgba(228, 237, 244, .92)),
    #e9f2f5;
}
[data-theme="stal"] .static-variant .manifest { background: linear-gradient(180deg, #fbfdfe 0%, #f2f7f9 100%); }
[data-theme="stal"] .static-variant #program { background: #e9f1f4; border-block-color: rgba(10, 92, 110, .1); }
[data-theme="stal"] .static-variant #co-otrzymasz { background: linear-gradient(145deg, #f7fafb, #eaf2f7); }
[data-theme="stal"] .static-variant .bonuses { background: linear-gradient(140deg, #f1f7f9, #e9f2f5); }
[data-theme="stal"] .static-variant .bonuses::after { color: rgba(14, 124, 146, .05); }
[data-theme="stal"] .static-variant .pricing { background: linear-gradient(180deg, #e9f1f4 0%, #f2f5fb 100%); }
[data-theme="stal"] .static-variant .author { background: #e6eff2; }

/* Tlo hero "wykres": pozioma siatka jak na papierze milimetrowym i rosnaca krzywa
   z zaznaczonymi punktami. Pasuje do kursu, ktory sprzedaje wzrost wyniku. */
[data-hero="wykres"] .static-hero::before {
  opacity: .22;
  background-image:
    linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 100% 58px, 58px 100%;
  mask-image: linear-gradient(180deg, transparent, black 46%);
}

[data-hero="wykres"] .static-hero::after {
  top: auto;
  right: -4vw;
  bottom: -4%;
  width: min(880px, 62vw);
  aspect-ratio: 2 / 1;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  opacity: .3;
  background: url("img/hero-wykres.svg") right bottom / contain no-repeat;
  transform: none;
}

[data-hero="wykres"] .static-hero__formula {
  top: 9%;
  left: 3%;
  font-size: clamp(3.6rem, 8vw, 7.5rem);
  transform: rotate(-3deg);
}

@media (max-width: 767px) {
  [data-hero="wykres"] .static-hero::after { display: none; }
}

/* Wariant hero "keynote". Uklad przepisany ze strony produktowej Apple: czarne
   plotno, krój SF Pro, ta sama drabina wielkosci (naglowek 80 / 64 / 48 px, zdanie
   prowadzace 28 / 21 px, przycisk i reszta 21 / 17 px) i te same progi 1068 px oraz
   734 px, na ktorych Apple ja przelacza. Wlacza go build.mjs atrybutem
   data-hero-variant na <html>, tak samo jak wariant "panel". Kursow bez tego pola
   zadna z ponizszych regul nie dotyczy. */
.hero-keynote { display: none; }

[data-hero-variant="keynote"] {
  /* Dokladnie stos Apple, z Interem dolozonym przed Helvetica. Na macOS i iOS
     przegladarka bierze prawdziwe SF Pro Display, bo krój siedzi w systemie.
     Na Windowsie i Androidzie schodzi na Inter, ktory strona i tak wczytuje
     i ktory jest najblizszy SF z dostepnych. */
  --sf: "SF Pro Display", "SF Pro Icons", -apple-system, BlinkMacSystemFont, "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Pasek nawigacji na czarnym hero, dopoki strona stoi na gorze, jak ciemne menu
   Apple. Po przewinieciu wraca bialy, bo dalsza czesc strony jest jasna. */
[data-hero-variant="keynote"] .site-header:not(.is-scrolled) {
  background: rgba(0, 0, 0, .72);
  border-bottom-color: rgba(255, 255, 255, .12);
}
[data-hero-variant="keynote"] .site-header:not(.is-scrolled) .site-nav a { color: #f5f5f7; }

[data-hero-variant="keynote"] .static-hero {
  min-height: 0;
  /* Tekst startuje wysoko, zeby pudelko zmiescilo sie na pierwszym ekranie. */
  padding: calc(var(--chrome-h) + 8px) 0 60px;
  background: #000;
  font-family: var(--sf);
  text-align: center;
}
/* Siatka i okrag w rogu to sygnatura pozostalych hero. Apple stawia produkt na
   czystej czerni, wiec tutaj oba tla znikaja. */
[data-hero-variant="keynote"] .static-hero::before,
[data-hero-variant="keynote"] .static-hero::after { display: none; }

/* Szablon przypisuje wlasne kroje pojedynczym elementom (naglowki, oceny, przyciski).
   W keynote wszystko ma isc jednym krojem, tak jak u Apple. */
[data-hero-variant="keynote"] .static-hero :where(h1, p, span, a, em, b, strong, small, div) {
  font-family: inherit;
}

[data-hero-variant="keynote"] .static-hero__grid {
  min-height: 0;
  /* 980 px to szerokosc kolumny tekstowej na stronach Apple. Miara idzie od okna,
     nie od rodzica, bo pasek z przewijana lista jest szerszy niz ekran i procenty
     wypychalyby naglowek poza telefon. */
  width: min(980px, calc(100vw - 2 * var(--pad)));
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

[data-hero-variant="keynote"] .static-hero__copy {
  display: flex;
  padding-block: 0;
  flex-direction: column;
  align-items: center;
}

[data-hero-variant="keynote"] .static-hero__copy .eyebrow {
  display: block;
  margin-bottom: 17px;
  color: #f5f5f7;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
  text-transform: none;
  white-space: normal;
}
/* Kreska przed etykieta nalezy do jasnych sekcji, u Apple etykiety jej nie maja. */
[data-hero-variant="keynote"] .static-hero__copy .eyebrow::before { display: none; }
[data-hero-variant="keynote"] .static-hero__copy .eyebrow span { color: #86868b; }

[data-hero-variant="keynote"] .static-hero__copy h1 {
  max-width: none;
  margin-bottom: 18px;
  font-size: clamp(54px, 4.4vw, 72px);
  font-weight: 600;
  letter-spacing: -.052em;
  line-height: 1.02;
}
[data-hero-variant="keynote"] .static-hero__copy .lead {
  max-width: 720px;
  margin: 0 auto;
  color: #86868b;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.2;
}

[data-hero-variant="keynote"] .hero-actions { margin-top: 20px; }
/* Przycisk Apple: pigulka bez cienia, lekki tekst, bez podskoku pod kursorem. */
[data-hero-variant="keynote"] .hero-actions .button {
  min-height: 0;
  padding: 12px 24px;
  gap: 6px;
  border-radius: 980px;
  box-shadow: none;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.1764705882;
}
[data-hero-variant="keynote"] .hero-actions .button:hover { filter: brightness(1.1); transform: none; }
[data-hero-variant="keynote"] #hero-cta span { display: none; }

/* Ocena stoi w szablonie nad etykieta jako pigulka na szkle. Tutaj traci obudowe
   i kolejnoscia we flexie schodzi pod przycisk, jak szara linijka pod CTA u Apple. */
[data-hero-variant="keynote"] .static-hero__copy .hero-rating {
  order: 1;
  padding: 0;
  margin: 16px 0 0;
  gap: 7px;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
[data-hero-variant="keynote"] .static-hero__copy .hero-rating > span { font-size: 12px; }
[data-hero-variant="keynote"] .static-hero__copy .hero-rating strong {
  color: #f5f5f7;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.022em;
}
[data-hero-variant="keynote"] .static-hero__copy .hero-rating small { color: #86868b; font-size: 15px; }

[data-hero-variant="keynote"] .static-hero__visual { align-self: center; }

[data-hero-variant="keynote"] .hero-keynote {
  position: relative;
  display: grid;
  margin-top: 22px;
  justify-items: center;
  gap: 0;
}

/* Poswiata pod pudelkiem, zeby produkt stal na scenie, a nie wisial w czerni. */
[data-hero-variant="keynote"] .hero-keynote::before {
  position: absolute;
  z-index: 0;
  bottom: 4%;
  left: 50%;
  width: min(850px, 118%);
  height: 88%;
  background: radial-gradient(ellipse, rgba(126, 224, 240, .26), transparent 67%);
  content: "";
  filter: blur(20px);
  transform: translateX(-50%);
}

/* Wysokosc, nie szerokosc, ustawia produkt na scenie: tak samo jak na stronie
   www MZG, gdzie pudelko ma 420 px wysokosci i zmiesci sie na pierwszym ekranie. */
[data-hero-variant="keynote"] .hero-keynote__box {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 92%;
  /* Nad pudelkiem stoi okolo 470 px tekstu, wiec 34vh pilnuje, zeby caly produkt
     zmiescil sie na pierwszym ekranie takze na niskim laptopie (723 px widoku),
     gdzie 420 px zeszloby pod krawedz. */
  height: clamp(240px, min(31vw, 34vh), 420px);
  object-fit: contain;
  filter: drop-shadow(0 35px 45px rgba(0, 0, 0, .9));
}

[data-hero-variant="keynote"] .hero-keynote__strip {
  position: relative;
  z-index: 1;
  width: min(900px, 100%);
  max-width: 100%;
  padding-top: 20px;
  margin: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #86868b;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.5;
}
[data-hero-variant="keynote"] .hero-keynote__strip span { margin-inline: .6em; color: #4d4d4f; }

/* Niski ekran, czyli typowy laptop z widokiem okolo 720 px. Caly tekst schodzi
   o klase nizej, zeby produkt nadal konczyl sie nad krawedzia pierwszego ekranu. */
@media (min-width: 735px) and (max-height: 870px) {
  [data-hero-variant="keynote"] .static-hero__copy .eyebrow { margin-bottom: 12px; font-size: 19px; }
  [data-hero-variant="keynote"] .static-hero__copy h1 { margin-bottom: 14px; font-size: clamp(42px, 3.4vw, 52px); }
  [data-hero-variant="keynote"] .static-hero__copy .lead { font-size: 17px; }
  [data-hero-variant="keynote"] .hero-actions { margin-top: 14px; }
  [data-hero-variant="keynote"] .static-hero__copy .hero-rating { margin-top: 10px; }
  [data-hero-variant="keynote"] .hero-keynote { margin-top: 14px; }
  [data-hero-variant="keynote"] .hero-keynote__strip { padding-top: 16px; margin-top: 20px; }
}

@media (max-width: 767px) {
  /* Uklad mobilny szablonu wyrownuje hero do lewej, a keynote ma zostac na srodku.
     Rezerwa 520px pod scene z pudelkiem i portretem zostawialaby tu pusty pas,
     bo keynote pokazuje samo pudelko i konczy sie zaraz pod paskiem. */
  [data-hero-variant="keynote"] .static-hero__visual { min-height: 0; }
  [data-hero-variant="keynote"] .static-hero__copy { align-items: center; text-align: center; }
  [data-hero-variant="keynote"] .static-hero__copy h1 em { display: inline; }
  /* Przycisk Apple zostaje pigulka na swoja szerokosc, nie rozciaga sie na caly ekran. */
  [data-hero-variant="keynote"] .hero-actions { width: auto; align-items: center; }
  [data-hero-variant="keynote"] .hero-actions .button { width: auto; }
}

/* Prog 734 px to telefon. Wielkosci jak w hero na stronie www MZG. */
@media (max-width: 734px) {
  [data-hero-variant="keynote"] .static-hero { padding-top: calc(var(--chrome-h) + 18px); padding-bottom: 40px; }
  [data-hero-variant="keynote"] .static-hero__copy .eyebrow { margin-bottom: 12px; font-size: 16px; }
  [data-hero-variant="keynote"] .static-hero__copy h1 { margin-bottom: 22px; font-size: 43px; }
  [data-hero-variant="keynote"] .static-hero__copy .lead { font-size: 15px; line-height: 1.25; }
  [data-hero-variant="keynote"] .hero-actions { margin-top: 24px; }
  [data-hero-variant="keynote"] .hero-keynote { margin-top: 30px; }
  [data-hero-variant="keynote"] .hero-keynote__box { height: clamp(230px, 62vw, 300px); }
  [data-hero-variant="keynote"] .hero-keynote__strip { padding-top: 16px; margin-top: 26px; font-size: 12px; }
}