/* Wariant calej strony "keynote". Wlacza go build.mjs atrybutem data-page-variant
   na <html>, na podstawie pola page_variant w tresci site'u. Kazda regula w tym pliku
   siedzi pod tym atrybutem, wiec landing bez tego pola nie pobiera nawet arkusza.

   Jezyk wizualny idzie ze strony www MZG: naglowek lamany na dwie linie, druga linia
   kursywa szeryfowa w kolorze akcentu, duze karty z prawdziwym produktem zamiast siatki
   kafelkow z samym tekstem. Czern Apple zastapiona granatem, bo to nasza kolorystyka.

   Plik ladowany po styles.css, wiec przy tej samej wadze selektora wygrywa. Dlatego
   nadpisania nie potrzebuja !important ani sztucznie wydluzanych selektorow. */

[data-page-variant="keynote"] {
  --kn-bg: #08111F;
  --kn-ink: #F0F5F9;
  --kn-mut: #8296A8;
  --kn-acc: #2FBBD6;
  --kn-line: rgba(240, 245, 249, .12);
  --kn-card: rgba(255, 255, 255, .045);

  --kn-light: #F4F7F9;
  --kn-light-card: #FFF;
  --kn-light-ink: #0D1B26;
  --kn-light-mut: #516573;
  --kn-light-line: rgba(13, 27, 38, .09);
  /* Akcent na jasnym tle musi byc ciemniejszy. #2FBBD6 na #F4F7F9 daje ponizej 3:1. */
  --kn-light-acc: #0E7C92;

  /* Trzeci kolor: zielen ze strony MZG. Nie chodzi po calej stronie, tylko domyka
     dwa ostatnie pasma, o Miloszu i zamkniecie. Reszta zostaje granat plus stal. */
  --kn-green-light: #E9F1EB;
  --kn-green-acc: #1D6533;
  --kn-green-deep: #082617;
  --kn-green-bright: #5FCB86;
  --kn-green-line: rgba(233, 241, 235, .14);

  /* Nadlinia sekcji przy 11 px byla prawie niewidoczna, wiec idzie dwa razy wyzej.
     Odstepy miedzy literami schodza z .16em na .09em, bo rozstrzelone wersaliki
     w tym rozmiarze lamia sie na dwie linie i przestaja byc etykieta. */
  --kn-eyebrow: 21px;
  --kn-eyebrow-track: .09em;

  --kn-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --kn-head: "Manrope", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --kn-serif: Georgia, "Times New Roman", serif;
}

[data-page-variant="keynote"] body {
  background: var(--kn-bg);
  color: var(--kn-ink);
  font-family: var(--kn-sans);
}

[data-page-variant="keynote"] :where(h1, h2, h3, h4) {
  font-family: var(--kn-head);
  font-weight: 700;
  letter-spacing: -.045em;
}

/* Sygnatura wzoru: druga linia naglowka lamana kursywa szeryfowa w akcencie.
   W tresci pisze sie ja gwiazdkami, app.js zamienia je na <em>, wiec dziala
   w kazdym naglowku strony bez dopisywania klas. */
[data-page-variant="keynote"] :where(h1, h2, h3) em,
/* Motywy w styles.css maluja em w hero wlasnym kolorem i prostuja kursywe regula
   o wadze (0,2,2), wiec ta sama waga jest tu potrzebna, zeby ja przebic. */
[data-page-variant="keynote"] .static-hero__copy h1 em {
  display: block;
  color: var(--kn-acc);
  font-family: var(--kn-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.05em;
}

/* ============================================================
   Pasek nawigacji
   ============================================================ */

[data-page-variant="keynote"] .site-header,
[data-page-variant="keynote"] .site-header.is-scrolled {
  background: rgba(8, 17, 31, .78);
  border-bottom: 1px solid var(--kn-line);
  box-shadow: none;
}
[data-page-variant="keynote"] .site-header .site-nav a { color: #C7D4DF; font-family: var(--kn-sans); }
[data-page-variant="keynote"] .site-header .site-nav a:hover { color: var(--kn-ink); }
[data-page-variant="keynote"] .offer-bar { background: #061019; border-bottom: 1px solid var(--kn-line); }

/* ============================================================
   Hero: plotno
   ============================================================ */

/* Hero ma wypelnic pierwszy ekran razem z paskiem ruchomym, zeby po wejsciu na strone
   nie wystawala spod niego kolejna sekcja. Stad wysokosc okna minus wysokosc paska.
   To "min-height", nie "height": na nizszych ekranach scena zostaje przy swojej
   naturalnej wysokosci, zamiast sciskac mockupy. */
[data-page-variant="keynote"] .static-hero {
  position: relative;
  display: flex;
  min-height: calc(100svh - 62px);
  padding: calc(var(--chrome-h) + 6px) 0 36px;
  flex-direction: column;
  justify-content: center;
  background: var(--kn-bg);
  font-family: var(--kn-sans);
  overflow: hidden;
  text-align: center;
}

/* Wariant "Mgla": trzy rozmyte plamy swiatla zamiast siatki i krzywych. Turkus wschodzi
   od dolu, spod produktu, indygo i granat trzymaja gorne rogi, zeby naglowek nie lezal
   na plaskiej plamie. Rozmycie 6 px zbija krawedzie elips, ktore inaczej widac. */
[data-page-variant="keynote"] .static-hero::before {
  position: absolute;
  z-index: 0;
  display: block;
  border: 0;
  border-radius: 0;
  inset: -8% -4%;
  background:
    radial-gradient(62% 48% at 50% 96%, rgba(14, 124, 146, .42), transparent 70%),
    radial-gradient(46% 40% at 88% 6%, rgba(72, 86, 190, .32), transparent 72%),
    radial-gradient(52% 44% at 6% 22%, rgba(20, 64, 110, .36), transparent 72%);
  content: "";
  filter: blur(6px);
  opacity: 1;
  transform: none;
}

/* Ziarno. Nie jest ozdoba: bez niego gradient pasmuje na ekranach osmiobitowych,
   a granat pasmuje mocniej niz czern, bo ma mniejszy zakres jasnosci. */
[data-page-variant="keynote"] .static-hero::after {
  position: absolute;
  z-index: 1;
  display: block;
  inset: 0;
  /* Nawiasy w odwolaniu do filtra sa zakodowane jako %28 i %29, zeby wewnatrz tego
     obrazka nie bylo drugiego odwolania w nawiasach. Inaczej czytnik odnosnikow bierze go
     za osobna sciezke do pliku. Przegladarka i tak rozkodowuje adres przed odczytem. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url%28%23n%29' opacity='.5'/%3E%3C/svg%3E");
  content: "";
  mix-blend-mode: overlay;
  opacity: .5;
  pointer-events: none;
  transform: none;
}

/* Scena nie moze sie skurczyc ponizej swojej wysokosci, kiedy okno jest nizsze
   niz hero. Bez tego pudelko, telefon i panel scisnelyby sie na laptopie. */
[data-page-variant="keynote"] .static-hero > * { flex: 0 0 auto; }

[data-page-variant="keynote"] .static-hero__grid { position: relative; z-index: 2; }

/* ============================================================
   Hero: tekst
   ============================================================ */

/* Nadlinia we wzorze to mala wersalikowa etykieta w akcencie, nie zdanie. */
[data-page-variant="keynote"] .static-hero__copy .eyebrow {
  margin-bottom: 18px;
  color: var(--kn-acc);
  font-family: var(--kn-sans);
  font-size: var(--kn-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kn-eyebrow-track);
  text-transform: uppercase;
}
[data-page-variant="keynote"] .static-hero__copy .eyebrow span { color: rgba(47, 187, 214, .5); }

[data-page-variant="keynote"] .static-hero__copy h1 {
  max-width: 15ch;
  margin-bottom: 14px;
  font-size: clamp(38px, 4.4vw, 62px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.04;
}

[data-page-variant="keynote"] .static-hero__copy .lead {
  max-width: 560px;
  color: var(--kn-mut);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.5;
}

/* Glowny przycisk hero i jego blizniak w pasku nawigacji: plynny metal. Pod pigulka kreci sie stozkowy gradient
   z bielami i akcentem, wiec na obwodzie leci swiatlo jak po polerowanym metalu.
   Srodek zostaje pelny akcent, bo to on ma byc czytelny, a nie efekt.
   Warstwy: ::before to wirujacy metal, ::after to wypelnienie na wierzchu,
   napis stoi nad obiema, bo tresc rysuje sie nad potomkami o ujemnym z-index. */
[data-page-variant="keynote"] :is(.hero-actions .button--primary, .site-header .button--nav) {
  position: relative;
  z-index: 0;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow:
    0 0 0 1px rgba(4, 20, 30, .5),
    0 18px 34px rgba(3, 12, 20, .45),
    0 6px 12px rgba(3, 12, 20, .3);
  color: #052330;
  font-family: var(--kn-sans);
  font-weight: 700;
  isolation: isolate;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .12s cubic-bezier(.4, 0, .2, 1);
}
[data-page-variant="keynote"] :is(.hero-actions .button--primary, .site-header .button--nav)::before {
  position: absolute;
  z-index: -2;
  width: 260%;
  height: 700%;
  background: conic-gradient(
    #F4FBFD, #6E93A6 12%, #FFF 24%, #2FBBD6 38%,
    #0A3A48 50%, #FFF 62%, #38C7E2 76%, #7FA6B8 88%, #F4FBFD);
  animation: kn-metal 7s linear infinite;
  content: "";
  inset: -300% -80%;
}
[data-page-variant="keynote"] :is(.hero-actions .button--primary, .site-header .button--nav)::after {
  position: absolute;
  z-index: -1;
  background: linear-gradient(180deg, #45CBE4, var(--kn-acc) 55%, #1E9CB8);
  border-radius: 999px;
  content: "";
  inset: 2px;
}
[data-page-variant="keynote"] :is(.hero-actions .button--primary, .site-header .button--nav):hover {
  box-shadow:
    0 0 0 1px rgba(4, 20, 30, .5),
    0 22px 44px rgba(47, 187, 214, .28),
    0 8px 16px rgba(3, 12, 20, .34);
}
[data-page-variant="keynote"] :is(.hero-actions .button--primary, .site-header .button--nav):active { transform: translateY(1px) scale(.985); }

/* Blizniak w pasku jest o polowe nizszy, wiec ten sam cien co w hero robilby
   z niego klocek. Obwodka metalu tez schodzi, zeby zostalo miejsce na napis. */
[data-page-variant="keynote"] .site-header .button--nav {
  box-shadow:
    0 0 0 1px rgba(4, 20, 30, .5),
    0 8px 18px rgba(3, 12, 20, .4);
}
[data-page-variant="keynote"] .site-header .button--nav::after { inset: 1.5px; }
[data-page-variant="keynote"] .site-header .button--nav:hover {
  box-shadow:
    0 0 0 1px rgba(4, 20, 30, .5),
    0 10px 24px rgba(47, 187, 214, .3);
}

/* Kolo po kliknieciu. Element dokłada app.js w miejscu kursora i sam go sprząta. */
[data-page-variant="keynote"] :is(.hero-actions .button--primary, .site-header .button--nav) .button__ripple {
  position: absolute;
  z-index: -1;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 70%);
  border-radius: 50%;
  animation: kn-ripple .6s ease-out forwards;
  pointer-events: none;
}

@keyframes kn-metal {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes kn-ripple {
  from { opacity: .6; transform: translate(-50%, -50%) scale(0); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}
@media (prefers-reduced-motion: reduce) {
  [data-page-variant="keynote"] :is(.hero-actions .button--primary, .site-header .button--nav)::before { animation: none; }
  [data-page-variant="keynote"] :is(.hero-actions .button--primary, .site-header .button--nav) .button__ripple { display: none; }
}
[data-page-variant="keynote"] .static-hero__copy .hero-rating strong { color: var(--kn-ink); }
[data-page-variant="keynote"] .static-hero__copy .hero-rating small { color: var(--kn-mut); }
[data-page-variant="keynote"] .static-hero__copy .hero-rating > span { color: #E1A400; }

/* ============================================================
   Hero: scena z trzema mockupami
   ============================================================ */

[data-page-variant="keynote"] .hero-actions { margin-top: 16px; }
[data-page-variant="keynote"] .static-hero__copy .hero-rating { margin-top: 10px; }

[data-page-variant="keynote"] .hero-keynote { margin-top: 12px; }
/* Poswiata z szablonu nalezy do sceny z jednym pudelkiem. Tutaj swiatlo daje mgla. */
[data-page-variant="keynote"] .hero-keynote::before { display: none; }

[data-page-variant="keynote"] .hero-stage {
  display: grid;
  width: min(1120px, 100%);
  margin: 0 auto;
  align-items: end;
  gap: 38px;
  grid-template-columns: minmax(280px, 1fr) 232px minmax(320px, 1.05fr);
  text-align: left;
}
/* Schodek jak na scenie produktowej wzoru: telefon najnizej, pudelko wyzej,
   panel wyniku najwyzej. Rowna linia dolna splaszcza scene i odbiera jej glebie. */
[data-page-variant="keynote"] .hero-mock--box { margin-bottom: 14px; }
[data-page-variant="keynote"] .hero-mock--dash { margin-bottom: 34px; }

[data-page-variant="keynote"] .hero-mock { position: relative; }

/* Pudelko kursu. Wysokosc, nie szerokosc, ustawia produkt na scenie, tak samo jak
   we wzorze, gdzie pudelko ma 420 px wysokosci i konczy sie nad krawedzia ekranu. */
/* Kolumna ma szerokosc produktu, nie calej kratki, wiec etykieta nad pudelkiem
   trzyma sie jego krawedzi, zamiast odjechac w lewo i wisiec w prozni. */
[data-page-variant="keynote"] .hero-mock--box {
  display: grid;
  width: fit-content;
  gap: 12px;
  justify-items: start;
  justify-self: center;
}
[data-page-variant="keynote"] .hero-mock--box::before {
  position: absolute;
  z-index: 0;
  bottom: 12%;
  left: 50%;
  width: 108%;
  height: 74%;
  background: radial-gradient(ellipse, rgba(47, 187, 214, .3), transparent 68%);
  content: "";
  filter: blur(26px);
  transform: translateX(-50%);
}
[data-page-variant="keynote"] .hero-keynote__box {
  position: relative;
  z-index: 1;
  width: auto;
  max-width: 100%;
  height: clamp(232px, 22vw, 306px);
  object-fit: contain;
  filter: drop-shadow(0 30px 40px rgba(2, 8, 16, .75));
}
[data-page-variant="keynote"] .hero-mock__label {
  position: relative;
  z-index: 2;
  padding: 6px 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--kn-line);
  border-radius: 999px;
  color: var(--kn-mut);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Telefon. Miary ze sceny produktowej wzoru: obramowanie 6 px, promien 42 px,
   zdjecie przyciemnione, zeby pigulki na wierzchu dalo sie przeczytac. */
[data-page-variant="keynote"] .hero-mock--phone {
  height: 352px;
  padding: 0;
  overflow: hidden;
  background: #101014;
  border: 6px solid #2B2F38;
  border-radius: 40px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 34px 48px rgba(2, 8, 16, .7);
}
[data-page-variant="keynote"] .hero-phone__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(.7) brightness(.78);
}
[data-page-variant="keynote"] .hero-phone__fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 42%, rgba(4, 9, 16, .92));
}
[data-page-variant="keynote"] .hero-phone__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  width: 78px;
  height: 18px;
  background: #050810;
  border-radius: 20px;
  transform: translateX(-50%);
}
[data-page-variant="keynote"] .hero-phone__streak {
  position: absolute;
  top: 40px;
  right: 12px;
  padding: 7px 11px;
  margin: 0;
  background: rgba(10, 18, 30, .82);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  color: #DCE6EE;
  font-size: 10px;
  font-weight: 500;
  backdrop-filter: blur(12px);
}
[data-page-variant="keynote"] .hero-phone__lesson {
  position: absolute;
  right: 12px;
  bottom: 16px;
  left: 12px;
  display: flex;
  padding: 11px;
  margin: 0;
  align-items: center;
  background: rgba(12, 20, 32, .74);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px;
  gap: 10px;
  backdrop-filter: blur(14px);
}
[data-page-variant="keynote"] .hero-phone__play {
  display: grid;
  width: 26px;
  height: 26px;
  background: var(--kn-acc);
  border-radius: 50%;
  color: #052330;
  font-size: 9px;
  place-items: center;
}
[data-page-variant="keynote"] .hero-phone__lesson small { display: block; color: #90A2B2; font-size: 9px; }
[data-page-variant="keynote"] .hero-phone__lesson strong { display: block; margin-top: 2px; font-size: 11px; }

/* Panel wyniku. Rysowany w HTML i CSS, nie obrazek, wiec liczby ida z tresci site'u
   i nie trzeba przerabiac grafiki, gdy klient zmieni wynik.
   Kolory panelu ida wlasnym torem: limonka i zielen zamiast cyjanu ze strony,
   zeby wykres czytalo sie jak wynik, a nie jak kolejny kafel marki. */
[data-page-variant="keynote"] .hero-mock--dash {
  --dash-lime: #C8F14E;
  --dash-green: #4FB877;
  padding: 24px 26px 20px;
  background: linear-gradient(150deg, #141B16, #0A0F0C);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 26px;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06), 0 34px 48px rgba(2, 8, 16, .55);
}
[data-page-variant="keynote"] .hero-dash__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
[data-page-variant="keynote"] .hero-dash__head small {
  display: block;
  margin-bottom: 5px;
  color: #6C8091;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
}
[data-page-variant="keynote"] .hero-dash__head strong { display: block; font-family: var(--kn-head); font-size: 16px; letter-spacing: -.03em; }
[data-page-variant="keynote"] .hero-dash__score { text-align: right; }
[data-page-variant="keynote"] .hero-dash__score b {
  display: block;
  color: var(--dash-lime);
  font-family: var(--kn-head);
  font-size: 38px;
  letter-spacing: -.05em;
  line-height: .9;
}
[data-page-variant="keynote"] .hero-dash__score i {
  display: inline-block;
  padding: 4px 8px;
  margin-top: 7px;
  background: rgba(200, 241, 78, .12);
  border-radius: 999px;
  color: var(--dash-lime);
  font-size: 9px;
  font-style: normal;
}

[data-page-variant="keynote"] .hero-dash__chart {
  display: grid;
  height: 118px;
  margin-top: 18px;
  gap: 8px;
  grid-template-columns: 20px 1fr;
}
[data-page-variant="keynote"] .hero-dash__axis {
  display: flex;
  color: #4E6072;
  flex-direction: column;
  font-size: 8px;
  justify-content: space-between;
}
[data-page-variant="keynote"] .hero-dash__bars {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent 35px, rgba(255, 255, 255, .06) 36px);
  gap: 9px;
}
[data-page-variant="keynote"] .hero-dash__bars i {
  position: relative;
  z-index: 1;
  height: var(--wysokosc);
  background: linear-gradient(to top, #16261C, #26402D);
  border-radius: 5px 5px 1px 1px;
  flex: 1;
}
/* Przedostatni slupek rozjasnia sie w polowie drogi, wiec wzrost widac juz przed
   ostatnim miesiacem, a nie dopiero na nim. */
[data-page-variant="keynote"] .hero-dash__bars i:has(+ i.is-now) { background: linear-gradient(to top, #23663E, #3E9B5F); }
[data-page-variant="keynote"] .hero-dash__bars i.is-now { background: linear-gradient(to top, #2F8B52, #57C07C); }
[data-page-variant="keynote"] .hero-dash__bars i small {
  position: absolute;
  bottom: -16px;
  left: 50%;
  color: #4E6072;
  font-size: 6.5px;
  transform: translateX(-50%);
  white-space: nowrap;
}
[data-page-variant="keynote"] .hero-dash__bars i.is-now small { color: var(--dash-lime); }
/* Linia idzie po wierzcholkach slupkow. viewBox rozciagany do ksztaltu wykresu,
   wiec grubosc kreski trzeba wypiac spod skalowania. */
[data-page-variant="keynote"] .hero-dash__line {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
}
[data-page-variant="keynote"] .hero-dash__line polyline {
  fill: none;
  stroke: var(--dash-lime);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
[data-page-variant="keynote"] .hero-dash__dot {
  position: absolute;
  z-index: 3;
  width: 9px;
  height: 9px;
  margin: 0 0 -4.5px -4.5px;
  background: var(--dash-lime);
  border: 2px solid #0D140F;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(200, 241, 78, .7);
}

[data-page-variant="keynote"] .hero-dash__done {
  display: flex;
  padding-top: 14px;
  margin: 18px 0 0;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, .08);
  color: #90A2B2;
  font-size: 10px;
}
/* Ptaszek dostaje obwodke, zeby przy limonce czytal sie jak odhaczony punkt planu. */
[data-page-variant="keynote"] .hero-dash__done span::before {
  display: inline-grid;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  border: 1px solid var(--dash-lime);
  border-radius: 50%;
  color: var(--dash-lime);
  content: "\2713";
  font-size: 8px;
  place-items: center;
  vertical-align: -3px;
}
[data-page-variant="keynote"] .hero-dash__done i { margin-left: auto; color: #56697A; font-size: 9px; font-style: normal; }

[data-page-variant="keynote"] .hero-keynote__strip {
  width: min(1120px, 100%);
  margin: 34px auto 0;
  border-top-color: var(--kn-line);
  color: var(--kn-mut);
  font-family: var(--kn-sans);
  font-size: 12px;
  font-weight: 400;
  text-align: center;
}
[data-page-variant="keynote"] .hero-keynote__strip span { color: #3E5163; }

/* ============================================================
   Pasek liczb i pasek social
   ============================================================ */

[data-page-variant="keynote"] .results-band {
  padding: 30px 0;
  background: var(--kn-bg);
  border-top: 1px solid var(--kn-line);
  color: var(--kn-ink);
}
[data-page-variant="keynote"] .results-band__grid > div { border-right-color: var(--kn-line); }
[data-page-variant="keynote"] .results-band strong { font-family: var(--kn-head); letter-spacing: -.05em; }
[data-page-variant="keynote"] .results-band span { color: var(--kn-mut); font-weight: 400; }

/* Zasiegi ida na jasna zielen. Dwa powody: pasmo miedzy granatowym hero a granatowym
   wynikiem musi byc jasne, a logo platform maja swoje wlasne barwy i czarny TikTok
   na granacie po prostu znika. */
[data-page-variant="keynote"] .social-band {
  padding: clamp(64px, 7vw, 92px) 0;
  background: var(--kn-green-light);
  border-bottom: 0;
  color: var(--kn-light-ink);
}
[data-page-variant="keynote"] .social-band__title { color: var(--kn-light-ink); font-size: clamp(30px, 3.1vw, 46px); letter-spacing: -.045em; line-height: 1.02; }
[data-page-variant="keynote"] .social-band__channels > * {
  background: var(--kn-light-card);
  border: 1px solid rgba(13, 27, 38, .08);
  border-radius: 22px;
  box-shadow: 0 16px 36px rgba(8, 38, 23, .07);
  color: var(--kn-light-ink);
}

[data-page-variant="keynote"] .social-proof {
  padding: clamp(64px, 7vw, 92px) 0;
  background: var(--kn-bg);
  border-bottom: 1px solid var(--kn-line);
  color: var(--kn-ink);
}
[data-page-variant="keynote"] .social-proof .social-band__title { color: var(--kn-ink); }
[data-page-variant="keynote"] .social-band__stats > div {
  background: var(--kn-card);
  border: 1px solid var(--kn-line);
  border-radius: 22px;
  color: var(--kn-ink);
}
[data-page-variant="keynote"] .social-band__stats strong { color: var(--kn-acc); font-family: var(--kn-head); letter-spacing: -.05em; }
[data-page-variant="keynote"] .social-band__stats span { color: var(--kn-mut); font-weight: 400; }

/* Karta kanalu: znak platformy w jej wlasnych barwach, nazwa, liczba. */
[data-page-variant="keynote"] .social-channel { padding: 28px 24px 26px; gap: 4px; }
[data-page-variant="keynote"] .social-channel__logo { width: 30px; height: 30px; margin-bottom: 10px; }
[data-page-variant="keynote"] .social-channel__name { color: var(--kn-light-mut); font-family: var(--kn-sans); font-size: 11px; letter-spacing: .16em; }
[data-page-variant="keynote"] .social-channel b { color: var(--kn-light-ink); font-family: var(--kn-head); font-size: clamp(26px, 3vw, 38px); letter-spacing: -.05em; }
[data-page-variant="keynote"] .social-channel small { color: var(--kn-light-mut); font-size: 12px; font-weight: 400; }

/* Zestawienie srednich. Slupek krajowy jest stalowy i plaski, slupek po kursie
   swieci akcentem, wiec roznica czyta sie z samego koloru, jeszcze przed liczbami. */
[data-page-variant="keynote"] .social-compare {
  padding: clamp(24px, 3vw, 34px);
  background: var(--kn-card);
  border: 1px solid var(--kn-line);
  border-radius: 22px;
  gap: 18px;
}
[data-page-variant="keynote"] .social-compare__eyebrow { color: var(--kn-acc); font-family: var(--kn-sans); font-size: 11px; letter-spacing: .16em; }
[data-page-variant="keynote"] .social-compare__label { color: var(--kn-mut); font-size: 14px; font-weight: 400; }
[data-page-variant="keynote"] .social-compare__track { height: 16px; background: rgba(255, 255, 255, .06); }
[data-page-variant="keynote"] .social-compare__track i { background: #43596B; }
[data-page-variant="keynote"] .social-compare__row.is-cel .social-compare__track i {
  background: linear-gradient(90deg, #1E7F97, var(--kn-acc));
  box-shadow: 0 0 22px rgba(47, 187, 214, .45);
}
[data-page-variant="keynote"] .social-compare__row b { color: var(--kn-ink); font-family: var(--kn-head); }
[data-page-variant="keynote"] .social-compare__row.is-cel b { color: var(--kn-acc); }
[data-page-variant="keynote"] .social-compare__note { color: var(--kn-mut); font-size: 13px; }

/* ============================================================
   Rytm pasm: ciemne i jasne na zmiane

   Kazda sekcja ma kolor odwrotny do sasiadow, od granatowego hero do granatowego
   zamkniecia. Dwa pasma tego samego koloru pod soba zlewaja sie w jedno, wiec
   lista ponizej jest jedynym miejscem, w ktorym ustawia sie ten porzadek.

   Tlo idzie przez ".static-variant", bo styles.css maluje czesc sekcji regula
   "[data-theme=stal] .static-variant #id" o wadze (1,2,0). Ta sama waga wygrywa
   kolejnoscia plikow, wiec nie trzeba !important.
   ============================================================ */

[data-page-variant="keynote"] .static-variant :is(#transformacja, #program, #oferta, .bonuses, #faq) {
  background: var(--kn-bg);
}
[data-page-variant="keynote"] :is(#transformacja, #program, #oferta, .bonuses, #faq) { color: var(--kn-ink); }
[data-page-variant="keynote"] :is(#transformacja, #program, #oferta, .bonuses, #faq) .eyebrow { color: var(--kn-acc); }
[data-page-variant="keynote"] :is(#transformacja, #program, #oferta, .bonuses, #faq) h2 { color: var(--kn-ink); }

[data-page-variant="keynote"] .static-variant :is(#jak-to-dziala, .manifest, #co-otrzymasz, #opinie, #pakiety) {
  background: var(--kn-light);
}
[data-page-variant="keynote"] :is(#jak-to-dziala, .manifest, #co-otrzymasz, #opinie, #pakiety) { color: var(--kn-light-ink); }
[data-page-variant="keynote"] :is(#jak-to-dziala, .manifest, #co-otrzymasz, #opinie, #pakiety) .eyebrow { color: var(--kn-light-acc); }
[data-page-variant="keynote"] :is(#jak-to-dziala, .manifest, #co-otrzymasz, #opinie, #pakiety) h2 { color: var(--kn-light-ink); }

/* Kursywa w naglowku bierze kolor pasma, na ktorym stoi. */
[data-page-variant="keynote"] :is(#jak-to-dziala, .manifest, #co-otrzymasz, #opinie, #pakiety) :is(h1, h2, h3) em {
  color: var(--kn-light-acc);
}

/* ============================================================
   Wspolna anatomia sekcji
   ============================================================ */

[data-page-variant="keynote"] :is(#jak-to-dziala, #transformacja, #co-otrzymasz, #oferta, #opinie, .bonuses, #pakiety, #faq, .author) {
  padding: clamp(76px, 9vw, 124px) 0;
  font-family: var(--kn-sans);
}

/* Nadlinia we wzorze to mala wersalikowa etykieta, bez kreski z lewej. */
[data-page-variant="keynote"] :is(#jak-to-dziala, #transformacja, #co-otrzymasz, #oferta, #opinie, .bonuses, #pakiety, #faq, .author) .eyebrow {
  margin-bottom: 18px;
  font-family: var(--kn-sans);
  font-size: var(--kn-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kn-eyebrow-track);
  text-transform: uppercase;
}
[data-page-variant="keynote"] :is(#jak-to-dziala, #transformacja, #co-otrzymasz, #oferta, #opinie, .bonuses, #pakiety, #faq, .author) .eyebrow::before { display: none; }

[data-page-variant="keynote"] :is(#jak-to-dziala, #transformacja, #co-otrzymasz, #oferta, #opinie, .bonuses, #pakiety, #faq, .author) h2 {
  font-size: clamp(30px, 3.1vw, 46px);
  letter-spacing: -.045em;
  line-height: 1.03;
}

/* Waskie zwienczenie wysrodkowane: krotka linia tekstu na srodku pasma. Sekcje
   z naglowkiem w kolumnie (opinie, bonusy) trzymaja swoja szerokosc same. */
[data-page-variant="keynote"] :is(#jak-to-dziala, #transformacja, #co-otrzymasz, #oferta, #opinie, .bonuses, #pakiety, #faq, .author) .narrow-head h2 {
  max-width: 18ch;
  margin: 0 auto;
}

[data-page-variant="keynote"] :is(#jak-to-dziala, #transformacja, #co-otrzymasz, #oferta, #opinie, .bonuses, #pakiety, #faq, .author) .narrow-head { margin-bottom: 44px; }

/* Wielki znak "x2" w tle sekcji nalezy do starego jezyka strony. We wzorze tlo jest
   czyste, a jedynym elementem dekoracyjnym jest swiatlo. */
[data-page-variant="keynote"] .motion-symbol { display: none; }

/* ============================================================
   Pasmo 2: film w duzej karcie na jasnym
   ============================================================ */

[data-page-variant="keynote"] #jak-to-dziala {
  position: relative;
  overflow: hidden;
}
/* Ciemna karta z filmem sama robi kontrast, wiec pod nia idzie tylko cien,
   bez plamy swiatla. Swiatlo zostaje na pasmach granatowych. */

/* Zdanie prowadzace schodzi spod naglowka pod film, bo we wzorze miedzy tytulem
   a wizualem nie ma akapitu. Kolejnosc zmieniamy ukladem, nie szablonem:
   "display: contents" wypuszcza dzieci naglowka prosto do siatki sekcji. */
[data-page-variant="keynote"] #jak-to-dziala { display: flex; flex-direction: column; }
[data-page-variant="keynote"] #jak-to-dziala .narrow-head { display: contents; }
[data-page-variant="keynote"] #jak-to-dziala .eyebrow { order: 1; }
/* Margines pod naglowkiem musi byc pisany razem z ".narrow-head", bo wspolna regula
   anatomii sekcji zeruje go swoim "margin: 0 auto" i film wchodzi na kursywe. */
[data-page-variant="keynote"] #jak-to-dziala .narrow-head h2 { order: 2; margin-bottom: 44px; }
[data-page-variant="keynote"] #jak-to-dziala .video-shell { order: 3; }
[data-page-variant="keynote"] #jak-to-dziala #vsl-lead { order: 4; }

[data-page-variant="keynote"] #jak-to-dziala :is(.eyebrow, h2, #vsl-lead) {
  position: relative;
  z-index: 1;
  width: min(820px, 100% - 2 * var(--pad));
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

[data-page-variant="keynote"] #jak-to-dziala .video-shell {
  position: relative;
  z-index: 1;
  width: min(1000px, 100% - 2 * var(--pad));
  background: #04090F;
  border: 1px solid rgba(13, 27, 38, .12);
  border-radius: 26px;
  box-shadow: 0 40px 90px rgba(13, 27, 38, .22);
}

[data-page-variant="keynote"] #jak-to-dziala #vsl-lead {
  max-width: 620px;
  margin-top: 26px;
  color: var(--kn-light-mut);
  font-size: 14.5px;
  line-height: 1.6;
}

/* ============================================================
   Pasmo 3: transformacja, przed i po, na granacie
   ============================================================ */

[data-page-variant="keynote"] #transformacja .narrow-head p:last-child {
  max-width: 560px;
  margin-top: 18px;
  color: var(--kn-mut);
  font-size: 15px;
  line-height: 1.6;
}

[data-page-variant="keynote"] #transformacja .transformation-grid { gap: 22px; }
[data-page-variant="keynote"] #transformacja .transformation-card {
  padding: clamp(26px, 3.2vw, 40px);
  border-radius: 26px;
}
[data-page-variant="keynote"] #transformacja .transformation-card__label {
  margin-bottom: 22px;
  font-family: var(--kn-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
}

/* Lewa karta to stan dzisiejszy: ledwo widoczna na granacie, bez cienia. */
[data-page-variant="keynote"] #transformacja .transformation-card--before {
  background: var(--kn-card);
  border: 1px solid var(--kn-line);
  box-shadow: none;
  color: var(--kn-mut);
}
[data-page-variant="keynote"] #transformacja .transformation-card--before .transformation-card__label { color: var(--kn-mut); }
[data-page-variant="keynote"] #transformacja .transformation-card--before li {
  padding: 14px 0 14px 30px;
  border-bottom-color: var(--kn-line);
  color: var(--kn-mut);
  font-family: var(--kn-sans);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
}
[data-page-variant="keynote"] #transformacja .transformation-card--before li::before {
  top: 14px;
  color: #C0705F;
  font-family: var(--kn-sans);
  font-weight: 700;
}

/* Prawa karta to stan po kursie: jedyna jasna plyta na granatowym pasmie.
   Ta sama roznica, ktora niesie cala strona, sciagnieta do jednego rzedu. */
[data-page-variant="keynote"] #transformacja .transformation-card--after {
  background: var(--kn-light-card);
  border: 1px solid rgba(47, 187, 214, .34);
  box-shadow: 0 34px 70px rgba(2, 8, 16, .5);
  color: var(--kn-light-ink);
}
[data-page-variant="keynote"] #transformacja .transformation-card--after .transformation-card__label { color: var(--kn-light-acc); }
[data-page-variant="keynote"] #transformacja .transformation-card--after .promise-list { border-top-color: var(--kn-light-line); }
[data-page-variant="keynote"] #transformacja .transformation-card--after .promise-item { border-bottom-color: var(--kn-light-line); }
[data-page-variant="keynote"] #transformacja .transformation-card--after .promise-item b {
  color: var(--kn-light-acc);
  font-family: var(--kn-head);
  font-size: 11px;
}
[data-page-variant="keynote"] #transformacja .transformation-card--after .promise-item p {
  color: var(--kn-light-ink);
  font-family: var(--kn-sans);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.55;
}
[data-page-variant="keynote"] #transformacja .transformation-card--after .promise-item span {
  border-color: rgba(14, 124, 146, .34);
  color: var(--kn-light-acc);
}

/* ============================================================
   Pasmo 3: manifest z portretem i program kursu
   ============================================================ */

[data-page-variant="keynote"] .static-variant #program { border-block: 1px solid var(--kn-line); }

/* Wielkie "pi" i "sigma" w rogach sekcji to stary jezyk, tak samo jak znak x2. */
[data-page-variant="keynote"] .static-variant .manifest::after { display: none; }

/* Portret we wzorze stoi w luku: gorne rogi zaokraglone na pelno, dolne lekko.
   Pod nim jedna plama swiatla zamiast plyty w kolorze akcentu. */
[data-page-variant="keynote"] .manifest-photo img {
  max-height: 620px;
  border-radius: 260px 260px 26px 26px;
  object-position: center 22%;
}
[data-page-variant="keynote"] .manifest-photo::before {
  right: -6%;
  bottom: -4%;
  width: 96%;
  height: 70%;
  background: radial-gradient(60% 60% at 50% 60%, rgba(14, 124, 146, .22), transparent 72%);
  border-radius: 0;
  filter: blur(14px);
}

/* Podpis pod portretem zamienia sie w okragla pieczatke, tak jak we wzorze.
   Ten sam tekst z tresci, tylko inny ksztalt, wiec szablon zostaje bez zmian. */
[data-page-variant="keynote"] .manifest-photo > span {
  display: grid;
  width: 132px;
  height: 132px;
  right: -10px;
  bottom: -14px;
  padding: 0 16px;
  background: var(--kn-light-acc);
  border-radius: 50%;
  color: #FFF;
  font-family: var(--kn-sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.35;
  place-items: center;
  text-align: center;
  transform: rotate(-6deg);
}
[data-page-variant="keynote"] .manifest-photo small { color: rgba(255, 255, 255, .74); font-weight: 500; }

/* Karty lekcji stoja tam, gdzie wczesniej byl portret. Numer siedzi w kolku, kolka
   laczy pionowa kreska, wiec kolejnosc krokow widac, zanim ktos przeczyta tytuly. */
[data-page-variant="keynote"] .manifest-cards { gap: 22px; }
[data-page-variant="keynote"] .manifest-cards__head {
  color: var(--kn-green-acc);
  font-family: var(--kn-sans);
  font-size: var(--kn-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kn-eyebrow-track);
}
[data-page-variant="keynote"] .manifest-cards__deck { gap: 14px; }
[data-page-variant="keynote"] .manifest-card {
  position: relative;
  padding: 24px 26px;
  gap: 20px;
  background: var(--kn-green-light);
  border: 1px solid rgba(29, 101, 51, .16);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(8, 38, 23, .09);
}
[data-page-variant="keynote"] .manifest-card:not(:last-child)::after {
  position: absolute;
  top: 66px;
  bottom: -14px;
  left: 44px;
  width: 1px;
  background: rgba(29, 101, 51, .24);
  content: "";
}
[data-page-variant="keynote"] .manifest-card b {
  display: grid;
  width: 37px;
  height: 37px;
  background: var(--kn-green-acc);
  border-radius: 50%;
  color: #FFF;
  font-family: var(--kn-head);
  font-size: 13px;
  letter-spacing: 0;
  place-items: center;
}
[data-page-variant="keynote"] .manifest-card strong {
  margin-bottom: 6px;
  color: var(--kn-green-deep);
  font-family: var(--kn-head);
  font-size: 17px;
  letter-spacing: -.025em;
  line-height: 1.25;
}
/* Opis w karcie to zielen zgaszona do szarosci, zeby nie konkurowala z tytulem,
   ale zostala w tej samej rodzinie co tlo. */
[data-page-variant="keynote"] .manifest-card span { color: #406050; font-size: 14px; line-height: 1.55; }
[data-page-variant="keynote"] .manifest-cards__foot { color: var(--kn-light-mut); font-size: 13px; }

[data-page-variant="keynote"] .manifest-copy .eyebrow {
  margin-bottom: 18px;
  color: var(--kn-light-acc);
  font-family: var(--kn-sans);
  font-size: var(--kn-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kn-eyebrow-track);
  text-transform: uppercase;
}
[data-page-variant="keynote"] .manifest-copy .eyebrow::before { display: none; }
[data-page-variant="keynote"] .manifest-copy h2 {
  max-width: 20ch;
  font-size: clamp(30px, 3.1vw, 46px);
  letter-spacing: -.045em;
  line-height: 1.03;
}
[data-page-variant="keynote"] .manifest-copy .manifest-lead {
  max-width: 54ch;
  color: var(--kn-light-mut);
  font-size: 15.5px;
  line-height: 1.6;
}

[data-page-variant="keynote"] .manifest-copy .check-list li {
  padding: 14px 0 14px 38px;
  border-bottom-color: var(--kn-light-line);
  color: var(--kn-light-ink);
  font-size: 14.5px;
  font-weight: 400;
  line-height: 1.6;
}
[data-page-variant="keynote"] .manifest-copy .check-list li::before {
  top: 15px;
  width: 22px;
  height: 22px;
  background: rgba(14, 124, 146, .12);
  color: var(--kn-light-acc);
  font-size: 10px;
}

/* Program: naglowek po lewej, zdanie prowadzace po prawej, a moduly jako karty,
   nie jako lista z kreskami. Rozwiniety modul podswietla sie akcentem, wiec widac,
   ktory czytasz, bez patrzenia na plusik. */
[data-page-variant="keynote"] #program .split-heading { align-items: end; margin-bottom: 46px; }
[data-page-variant="keynote"] #program .eyebrow {
  margin-bottom: 18px;
  color: var(--kn-green-bright);
  font-family: var(--kn-sans);
  font-size: var(--kn-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kn-eyebrow-track);
  text-transform: uppercase;
}
[data-page-variant="keynote"] #program .eyebrow::before { display: none; }
[data-page-variant="keynote"] #program h2 {
  max-width: 16ch;
  font-size: clamp(30px, 3.1vw, 46px);
  letter-spacing: -.045em;
  line-height: 1.03;
}
[data-page-variant="keynote"] #program .split-heading > p {
  color: var(--kn-mut);
  font-size: 15px;
  line-height: 1.6;
}

[data-page-variant="keynote"] #program .modules { display: grid; gap: 10px; }
[data-page-variant="keynote"] #program .module {
  padding: 0 clamp(18px, 2.2vw, 28px);
  background: var(--kn-card);
  border: 1px solid var(--kn-line);
  border-radius: 22px;
  box-shadow: none;
}
[data-page-variant="keynote"] #program .module::after { display: none; }
[data-page-variant="keynote"] #program .module[open] {
  background: rgba(95, 203, 134, .08);
  border-color: rgba(95, 203, 134, .32);
}
[data-page-variant="keynote"] #program .module summary { padding: 22px 0; grid-template-columns: 44px 1fr auto; }
[data-page-variant="keynote"] #program .module summary::before {
  color: var(--kn-green-bright);
  font-family: var(--kn-head);
  font-size: 12px;
  font-weight: 700;
}
[data-page-variant="keynote"] #program .module summary strong {
  font-family: var(--kn-head);
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: -.03em;
}
[data-page-variant="keynote"] #program .module-toggle { border-color: var(--kn-line); color: var(--kn-mut); }
[data-page-variant="keynote"] #program .module[open] .module-toggle {
  background: var(--kn-green-bright);
  border-color: var(--kn-green-bright);
  color: #05230f;
}
[data-page-variant="keynote"] #program .module-body { padding: 0 0 24px 44px; }
[data-page-variant="keynote"] #program .module-body ul { color: var(--kn-mut); }
[data-page-variant="keynote"] #program .module-body li { padding: 7px 0; font-size: 14.5px; line-height: 1.6; }
[data-page-variant="keynote"] #program .module-body li::before { color: var(--kn-green-bright); font-weight: 700; }

/* ============================================================
   Pasmo 6: co otrzymasz na jasnym, oferta na granacie

   Wzor jasnej polowy to pasmo "Jeden cel, trzy dobre drogi": duze karty produktowe
   na bieli, kazda z delikatnym pastelowym spadem i numerem u gory.
   ============================================================ */

/* Wielka sigma w tle nalezy do starego jezyka strony. */
[data-page-variant="keynote"] .static-variant #co-otrzymasz::after { display: none; }

[data-page-variant="keynote"] #co-otrzymasz .outcome-grid { gap: 18px; }
[data-page-variant="keynote"] #co-otrzymasz .outcome-card {
  display: flex;
  min-height: 300px;
  padding: clamp(26px, 3vw, 38px);
  flex-direction: column;
  background: var(--kn-light-card);
  border: 1px solid var(--kn-light-line);
  border-radius: 28px;
  box-shadow: 0 22px 48px rgba(13, 27, 38, .06);
}

/* Pierwszy rzad dostaje trzy pastelowe spady, tak jak trzy karty we wzorze.
   Dwie szerokie karty pod nim zostaja biale, zeby rzad nie robil sie krzykliwy. */
[data-page-variant="keynote"] #co-otrzymasz .outcome-card:nth-child(1) { background: linear-gradient(168deg, #FFF 42%, #E9F3F7); }
[data-page-variant="keynote"] #co-otrzymasz .outcome-card:nth-child(2) { background: linear-gradient(168deg, #FFF 42%, #EAF4EE); }
[data-page-variant="keynote"] #co-otrzymasz .outcome-card:nth-child(3) { background: linear-gradient(168deg, #FFF 42%, #F5F1E8); }

/* Numer u gory, tekst przy dolnej krawedzi: uklad karty produktowej ze wzoru. */
[data-page-variant="keynote"] #co-otrzymasz .outcome-card b {
  margin-bottom: auto;
  padding-bottom: 44px;
  color: var(--kn-light-acc);
  font-family: var(--kn-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}
[data-page-variant="keynote"] #co-otrzymasz .outcome-card h3 {
  margin-bottom: 12px;
  font-family: var(--kn-head);
  font-size: clamp(19px, 1.9vw, 24px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1.12;
}
[data-page-variant="keynote"] #co-otrzymasz .outcome-card p {
  color: var(--kn-light-mut);
  font-size: 14.5px;
  line-height: 1.6;
}

/* Kursywa jest juz w drugiej linii naglowka, wiec zdanie pod nim zostaje
   spokojne. Dwa szeryfowe bloki pod soba przecialyby sie akcentem. */
[data-page-variant="keynote"] #oferta .offer-pitch__sub {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--kn-mut);
  font-family: var(--kn-sans);
  font-size: 15px;
  line-height: 1.6;
}
[data-page-variant="keynote"] #oferta .offer-pitch__body {
  padding: clamp(28px, 3.6vw, 44px);
  background: var(--kn-card);
  border: 1px solid var(--kn-line);
  border-radius: 28px;
  box-shadow: 0 30px 60px rgba(2, 8, 16, .4);
}
[data-page-variant="keynote"] #oferta .offer-pitch__intro {
  margin-bottom: 22px;
  color: var(--kn-ink);
  font-family: var(--kn-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.02em;
}
[data-page-variant="keynote"] #oferta .offer-pitch__list li {
  color: var(--kn-mut);
  font-size: 14.5px;
  line-height: 1.6;
}
[data-page-variant="keynote"] #oferta .offer-pitch__list li strong { color: var(--kn-ink); font-weight: 700; }
[data-page-variant="keynote"] #oferta .offer-pitch__list li::before {
  background: rgba(47, 187, 214, .12);
  color: var(--kn-acc);
}

/* ============================================================
   Pasmo 7 i 8: opinie na jasnym, bonusy na granacie

   Cytaty ida kursywa szeryfowa, a pasmo z bonusami zostaje ciemne, zeby mockup
   ebooka swiecil. Pierwiastek w tle to stary jezyk, tak samo jak sigma i x2.
   ============================================================ */

[data-page-variant="keynote"] .static-variant .bonuses::after { display: none; }

[data-page-variant="keynote"] #opinie .split-heading { margin-bottom: 48px; }
[data-page-variant="keynote"] #opinie .split-heading h2 { max-width: 16ch; color: var(--kn-light-ink); }
[data-page-variant="keynote"] #opinie .split-heading > p {
  color: var(--kn-light-mut);
  font-size: 15px;
  line-height: 1.6;
}
[data-page-variant="keynote"] #opinie .eyebrow--light { color: var(--kn-light-acc); }

/* Cytaty maja bardzo rozne dlugosci. Rownanie kart do najwyzszej zostawia w krotkiej
   duza dziure, wiec kazda konczy sie tam, gdzie konczy sie tekst. */
[data-page-variant="keynote"] #opinie .quote-grid { margin-bottom: 56px; align-items: start; gap: 18px; }
[data-page-variant="keynote"] #opinie .quote-card {
  padding: clamp(24px, 2.6vw, 32px);
  background: var(--kn-light-card);
  border: 1px solid var(--kn-light-line);
  border-radius: 26px;
  box-shadow: 0 22px 48px rgba(13, 27, 38, .06);
  color: var(--kn-light-ink);
}
[data-page-variant="keynote"] #opinie .quote-card__stars { color: var(--kn-light-acc); font-size: 13px; }
/* Cytat kursywa w szeryfach to ten sam akcent, co druga linia naglowkow. */
[data-page-variant="keynote"] #opinie .quote-card blockquote {
  margin: 24px 0 22px;
  color: var(--kn-light-ink);
  font-family: var(--kn-serif);
  font-size: 16px;
  font-style: italic;
  letter-spacing: -.01em;
  line-height: 1.55;
}
[data-page-variant="keynote"] #opinie .quote-card cite {
  color: var(--kn-light-mut);
  font-family: var(--kn-sans);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Naglowek pasa z wideo wraca do ukladu z gory sekcji: etykieta, pod nia zdanie,
   oba do lewej. Rozjazd "etykieta z lewej, tytul do prawej" to stary jezyk. */
[data-page-variant="keynote"] #opinie .testimonial-subheading {
  display: block;
  margin-bottom: 36px;
}
[data-page-variant="keynote"] #opinie .testimonial-subheading span {
  display: block;
  margin-bottom: 18px;
  color: var(--kn-light-acc);
  font-family: var(--kn-sans);
  font-size: var(--kn-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kn-eyebrow-track);
}
/* Pas z wideo otwiera osobny rozdzial sekcji, wiec jego tytul idzie w tym samym
   stopniu pisma co naglowki pozostalych sekcji. */
[data-page-variant="keynote"] #opinie .testimonial-subheading h3 {
  max-width: 20ch;
  color: var(--kn-light-ink);
  font-family: var(--kn-head);
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: 1.03;
  text-align: left;
}
[data-page-variant="keynote"] #opinie .testimonial-video {
  background: #04090F;
  border-color: rgba(13, 27, 38, .12);
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(13, 27, 38, .18);
}

/* We wzorze nic nie jest przekrzywione, wiec zrzuty opinii stoja prosto. */
[data-page-variant="keynote"] #opinie .opinion-strip img {
  border-color: var(--kn-light-line);
  border-radius: 18px;
  transform: none;
}
[data-page-variant="keynote"] #opinie .opinion-arrow {
  background: var(--kn-light-card);
  border: 1px solid var(--kn-light-line);
  color: var(--kn-light-ink);
}
[data-page-variant="keynote"] #opinie .opinion-arrow:hover { background: var(--kn-light-acc); color: #FFF; }

[data-page-variant="keynote"] .bonuses .bonus-grid { gap: clamp(40px, 7vw, 96px); }
/* Plyta w kolorze pod ebookiem ustepuje miejsca plamie swiatla, tak jak w hero. */
[data-page-variant="keynote"] .bonuses .bonus-glow {
  width: 88%;
  background: radial-gradient(circle, rgba(47, 187, 214, .28), rgba(47, 187, 214, 0) 68%);
  filter: blur(6px);
}
[data-page-variant="keynote"] .bonuses .eyebrow { color: var(--kn-acc); }
[data-page-variant="keynote"] .bonuses h2 { max-width: 15ch; color: var(--kn-ink); }
[data-page-variant="keynote"] .bonuses .bonus-list { margin-top: 34px; border-top-color: var(--kn-line); }
[data-page-variant="keynote"] .bonuses .bonus-item { padding: 20px 0; border-bottom-color: var(--kn-line); }
[data-page-variant="keynote"] .bonuses .bonus-item strong {
  font-family: var(--kn-head);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.025em;
}
[data-page-variant="keynote"] .bonuses .bonus-item span { color: var(--kn-mut); font-size: 13px; }
[data-page-variant="keynote"] .bonuses .bonus-total {
  padding: 18px 22px;
  margin-top: 26px;
  background: var(--kn-card);
  border: 1px solid var(--kn-line);
  border-radius: 18px;
  color: var(--kn-mut);
  font-size: 13px;
}
[data-page-variant="keynote"] .bonuses .bonus-total b {
  color: var(--kn-acc);
  font-family: var(--kn-head);
  font-size: 17px;
  letter-spacing: -.03em;
}

/* ============================================================
   Pasmo 9 i 10: pakiety na jasnym, FAQ na granacie

   Polecany pakiet dostaje granat na jasnym pasmie, ta sama roznica,
   ktora niesie karta "po kursie" w transformacji.
   ============================================================ */

[data-page-variant="keynote"] #pakiety .narrow-head p:last-child {
  max-width: 560px;
  margin-top: 18px;
  color: var(--kn-light-mut);
  font-size: 15px;
  line-height: 1.6;
}

[data-page-variant="keynote"] #pakiety .pricing-trust {
  margin-bottom: 28px;
  background: transparent;
  border: 1px solid var(--kn-light-line);
  border-radius: 22px;
}
[data-page-variant="keynote"] #pakiety .pricing-trust > div { border-right-color: var(--kn-light-line); }
[data-page-variant="keynote"] #pakiety .pricing-trust strong {
  color: var(--kn-light-ink);
  font-family: var(--kn-head);
  letter-spacing: -.05em;
}
[data-page-variant="keynote"] #pakiety .pricing-trust span { color: var(--kn-light-mut); font-weight: 500; }

/* Kafel sprzedazowy jest ostatnim ekranem przed platnoscia, wiec ma byc najmocniej
   pokolorowanym miejscem na jasnym pasmie: naglowek na pelnym akcencie, cena w
   akcencie, rabat na zieleni, ptaszki w kolkach, przycisk z poswiata. */
[data-page-variant="keynote"] #pakiety .pricing-grid { gap: 20px; }
[data-page-variant="keynote"] #pakiety .price-card {
  --kn-card-pad: clamp(28px, 3.4vw, 42px);
  padding: var(--kn-card-pad);
  background: var(--kn-light-card);
  border: 1px solid rgba(14, 124, 146, .22);
  border-radius: 28px;
  box-shadow: 0 26px 56px rgba(14, 124, 146, .16);
}

/* Naglowek wychodzi na krawedzie kafla, stad ujemne marginesy o szerokosc wysciolki.
   Kafel ma "overflow: hidden", wiec gradient sam przycina sie do zaokraglenia. */
[data-page-variant="keynote"] #pakiety .price-card__top {
  padding: 30px var(--kn-card-pad) 26px;
  margin: calc(-1 * var(--kn-card-pad)) calc(-1 * var(--kn-card-pad)) 28px;
  background:
    radial-gradient(80% 120% at 82% 0%, rgba(255, 255, 255, .26), transparent 62%),
    linear-gradient(134deg, #0A6076 0%, #0E7C92 42%, #2FBBD6 100%);
  border-bottom: 0;
  color: #FFF;
}
[data-page-variant="keynote"] #pakiety .price-card__top h3 {
  margin: 8px 0 0;
  color: #FFF;
  font-family: var(--kn-head);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -.04em;
}
[data-page-variant="keynote"] #pakiety .price-card__top p {
  color: rgba(255, 255, 255, .74);
  font-family: var(--kn-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.4;
  text-transform: uppercase;
}
[data-page-variant="keynote"] #pakiety .price-card__price strong {
  color: var(--kn-light-acc);
  font-family: var(--kn-head);
  font-size: clamp(38px, 4.4vw, 58px);
  letter-spacing: -.06em;
}
[data-page-variant="keynote"] #pakiety .price-card__price :is(small, s) { color: var(--kn-light-mut); }

/* Rabat idzie na zielen, nie na akcent, bo to inna wiadomosc niz cena. */
[data-page-variant="keynote"] #pakiety .price-save { gap: 12px; }
[data-page-variant="keynote"] #pakiety .price-save b {
  padding: 7px 13px;
  background: var(--kn-green-acc);
  border-radius: 999px;
  font-family: var(--kn-head);
  font-size: 15px;
  letter-spacing: -.02em;
}
[data-page-variant="keynote"] #pakiety .price-save span { color: var(--kn-green-acc); font-family: var(--kn-sans); font-size: 14px; font-weight: 700; }

[data-page-variant="keynote"] #pakiety .price-card li { padding-left: 38px; font-size: 14.5px; line-height: 1.55; }
[data-page-variant="keynote"] #pakiety .price-card li::before {
  display: grid;
  width: 24px;
  height: 24px;
  top: 6px;
  background: rgba(14, 124, 146, .12);
  border-radius: 50%;
  color: var(--kn-light-acc);
  font-size: 12px;
  place-items: center;
}
[data-page-variant="keynote"] #pakiety .price-card .button--primary {
  background: linear-gradient(180deg, #45CBE4, #2FBBD6 55%, #1E9CB8);
  border: 0;
  color: #04222B;
  box-shadow: 0 16px 34px rgba(47, 187, 214, .38);
}
[data-page-variant="keynote"] #pakiety .price-micro { color: var(--kn-light-mut); }
[data-page-variant="keynote"] #pakiety .price-installments { color: var(--kn-light-acc); }

/* Polecany pakiet to jedyny granatowy element na jasnym pasmie, wiec wzrok
   idzie do niego bez ramki w kolorze i bez blysku po karcie. */
[data-page-variant="keynote"] #pakiety .price-card--recommended {
  background: linear-gradient(168deg, #0C1A2B, #08111F);
  border: 1px solid rgba(47, 187, 214, .3);
  box-shadow: 0 30px 60px rgba(8, 17, 31, .22);
  color: var(--kn-ink);
}
[data-page-variant="keynote"] #pakiety .price-card--recommended::after { display: none; }
/* Plakietka lezy na cyjanowym naglowku, wiec idzie w granat z cyjanowym napisem.
   Na akcencie stalaby kolor w kolor i znikala. */
[data-page-variant="keynote"] #pakiety .price-card--recommended .price-badge {
  background: #04222B;
  border-radius: 0 0 12px 12px;
  color: var(--kn-acc);
  font-family: var(--kn-sans);
  letter-spacing: .14em;
}
/* Ciemna zielen rabatu gubi sie na granacie, wiec na polecanym kaflu jasnieje. */
[data-page-variant="keynote"] #pakiety .price-card--recommended .price-save b { background: var(--kn-green-bright); color: #062B16; }
[data-page-variant="keynote"] #pakiety .price-card--recommended .price-save span { color: var(--kn-green-bright); }
[data-page-variant="keynote"] #pakiety .price-card--recommended .price-card__top { border-bottom-color: var(--kn-line); }
[data-page-variant="keynote"] #pakiety .price-card--recommended :is(h3, .price-card__price strong, li) { color: var(--kn-ink); }
[data-page-variant="keynote"] #pakiety .price-card--recommended :is(p, small, s, .price-micro) { color: var(--kn-mut); }
[data-page-variant="keynote"] #pakiety .price-card--recommended :is(li::before, .price-installments) { color: var(--kn-acc); }
[data-page-variant="keynote"] #pakiety .pricing-note { color: var(--kn-light-mut); font-size: 13px; }
[data-page-variant="keynote"] #pakiety .pricing-note a { color: var(--kn-light-acc); }

[data-page-variant="keynote"] #faq .faq-grid { gap: clamp(40px, 8vw, 110px); }
[data-page-variant="keynote"] #faq .faq-intro p:last-child {
  margin-top: 16px;
  color: var(--kn-mut);
  font-size: 15px;
  line-height: 1.6;
}
[data-page-variant="keynote"] #faq .faq-item { border-bottom-color: var(--kn-line); }
[data-page-variant="keynote"] #faq .faq-item:first-child { border-top-color: var(--kn-line); }
[data-page-variant="keynote"] #faq .faq-item summary {
  padding: 24px 0;
  font-family: var(--kn-head);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.025em;
}
[data-page-variant="keynote"] #faq .faq-item summary::after { color: var(--kn-acc); font-weight: 400; }
[data-page-variant="keynote"] #faq .faq-item p { color: var(--kn-mut); font-size: 14.5px; line-height: 1.65; }

/* ============================================================
   Pasmo 11 i 12: prowadzacy i zamkniecie w zieleni
   ============================================================ */

/* Zielen wchodzi dopiero tutaj i tylko na dwa ostatnie pasma: jasne o Miloszu
   i ciemne zamkniecie. Rytm jasne-ciemne zostaje, zmienia sie sam odcien. */
[data-page-variant="keynote"] .static-variant .author { background: var(--kn-green-light); }
[data-page-variant="keynote"] .author { color: var(--kn-light-ink); }
[data-page-variant="keynote"] .author h2 { color: var(--kn-light-ink); }
[data-page-variant="keynote"] .author h2 em { color: var(--kn-green-acc); }
[data-page-variant="keynote"] .author .eyebrow { color: var(--kn-green-acc); }
[data-page-variant="keynote"] .author .author-copy > p:not(.eyebrow) {
  max-width: 46ch;
  color: var(--kn-light-mut);
  font-size: 15px;
  line-height: 1.7;
}
[data-page-variant="keynote"] .author .achievement-list { margin-top: 34px; }
[data-page-variant="keynote"] .author .achievement {
  padding: 17px 0;
  border-bottom-color: rgba(29, 101, 51, .16);
  font-family: var(--kn-sans);
  font-size: 14.5px;
  font-weight: 500;
}
[data-page-variant="keynote"] .author .achievement span { color: var(--kn-green-acc); font-family: var(--kn-head); }

/* Portret w luku ma juz manifest, wiec tutaj zdjecie zostaje prostokatne,
   tylko z pelniejszym zaokragleniem i spokojnym podpisem. */
[data-page-variant="keynote"] .author .author-card { border-radius: 30px; }
[data-page-variant="keynote"] .author .author-card > div {
  right: 18px;
  bottom: 18px;
  left: 18px;
  padding: 20px 22px;
  background: rgba(8, 38, 23, .86);
  border: 1px solid var(--kn-green-line);
  border-radius: 20px;
  color: #EAF3EC;
  font-family: var(--kn-serif);
  font-size: 15px;
  font-style: italic;
  line-height: 1.5;
}
[data-page-variant="keynote"] .author .author-card > div b { color: var(--kn-green-bright); font-weight: 400; }

[data-page-variant="keynote"] .final-cta {
  padding: clamp(96px, 12vw, 150px) 0 40px;
  background: var(--kn-green-deep);
  color: #EAF3EC;
  font-family: var(--kn-sans);
}
/* Dwa grube pierscienie w rogach to stary jezyk. Zamiast nich jedna plama swiatla,
   ta sama, ktora otwiera strone w hero. */
[data-page-variant="keynote"] .final-cta .final-shape { display: none; }
[data-page-variant="keynote"] .final-cta::before {
  position: absolute;
  z-index: 0;
  inset: -10% -10% 20%;
  background: radial-gradient(52% 46% at 50% 32%, rgba(40, 138, 69, .42), transparent 70%);
  content: "";
  filter: blur(8px);
}
[data-page-variant="keynote"] .final-cta .eyebrow {
  margin-bottom: 18px;
  color: var(--kn-green-bright);
  font-family: var(--kn-sans);
  font-size: var(--kn-eyebrow);
  font-weight: 700;
  letter-spacing: var(--kn-eyebrow-track);
  text-transform: uppercase;
}
[data-page-variant="keynote"] .final-cta .eyebrow::before { display: none; }
[data-page-variant="keynote"] .final-cta h2 {
  max-width: 16ch;
  margin: 0 auto;
  color: #EAF3EC;
  font-size: clamp(38px, 5vw, 68px);
  letter-spacing: -.05em;
  line-height: 1.02;
}
[data-page-variant="keynote"] .final-cta .timer--large { margin: 40px auto 34px; }
[data-page-variant="keynote"] .final-cta .timer--large b {
  color: #EAF3EC;
  font-family: var(--kn-head);
  font-size: clamp(34px, 5.5vw, 60px);
  letter-spacing: -.05em;
}
[data-page-variant="keynote"] .final-cta .timer--large small { color: rgba(234, 243, 236, .62); letter-spacing: .12em; }
[data-page-variant="keynote"] .final-cta .timer i { color: var(--kn-green-line); }
[data-page-variant="keynote"] .final-cta .button--light {
  background: var(--kn-green-bright);
  border-radius: 999px;
  color: #06210F;
}
[data-page-variant="keynote"] .final-cta .secure-note {
  margin-bottom: 64px;
  color: rgba(234, 243, 236, .62);
  font-size: 12px;
}
[data-page-variant="keynote"] .final-cta .legal-nav { border-top-color: var(--kn-green-line); }
[data-page-variant="keynote"] .final-cta .legal-nav a { color: rgba(234, 243, 236, .62); font-size: 12px; }

/* ============================================================
   Wezsze ekrany
   ============================================================ */

/* Trzy mockupy w rzedzie potrzebuja okolo 1120 px. Ponizej tego progu wchodzi uklad
   dwukolumnowy: pudelko obok telefonu, panel wyniku na calej szerokosci pod nimi. */
@media (max-width: 1100px) {
  [data-page-variant="keynote"] .hero-stage {
    gap: 28px;
    grid-template-columns: minmax(0, 1fr) 200px;
  }
  [data-page-variant="keynote"] .hero-mock--dash { grid-column: 1 / -1; }
  [data-page-variant="keynote"] .hero-mock--phone { height: 384px; border-radius: 36px; }
}

@media (max-width: 734px) {
  [data-page-variant="keynote"] .static-hero { padding-top: calc(var(--chrome-h) + 18px); padding-bottom: 40px; }
  [data-page-variant="keynote"] .static-hero__copy h1 { margin-bottom: 16px; font-size: 38px; }
  [data-page-variant="keynote"] .static-hero__copy .lead { font-size: 15px; }
  [data-page-variant="keynote"] .hero-keynote { margin-top: 26px; }
  /* Jedna kolumna, mockupy jeden pod drugim i wysrodkowane, kazdy do 470 px. */
  [data-page-variant="keynote"] .hero-stage {
    gap: 26px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  [data-page-variant="keynote"] .hero-mock { width: min(470px, 100%); }
  /* Kolumna pudelka ma na telefonie szerokosc calej kratki, wiec justify-items: start
     z ukladu na szeroki ekran zostawialo pudelko przy lewej krawedzi i pusta polowe
     obok. Na jednej kolumnie produkt nalezy na srodek, razem ze swoja etykieta. */
  [data-page-variant="keynote"] .hero-mock--box { justify-items: center; }
  [data-page-variant="keynote"] .hero-mock--phone { width: 212px; height: 408px; }
  [data-page-variant="keynote"] .hero-keynote__box { height: clamp(230px, 58vw, 300px); }
  [data-page-variant="keynote"] .hero-keynote__strip { margin-top: 26px; }
}