/* Montserrat jako zmienny woff2, w dwoch podzbiorach. Wczesniej szly stad pelne
   pliki TTF z katalogu dyplomow: 396 kB na kazde wejscie zamiast 36 kB, bo
   przegladarka i tak pobiera oba kroje z gory. Pelne TTF zostaja w dyplomy/fonts,
   sa potrzebne jsPDF do osadzenia fontu w gotowym dyplomie. */
@font-face {
  font-family: Montserrat;
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Montserrat-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Montserrat;
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/Montserrat-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --navy: #06265d;
  --navy-deep: #031a42;
  --ink: #14213d;
  --green: #2f9d7e;
  --green-dark: #237a64;
  --mint: #dff7ee;
  --paper: #ffffff;
  --warm: #fbfaf7;
  --surface: #f4f7f8;
  --muted: #697688;
  --soft: #8c96a5;
  --line: #e1e6eb;
  --line-strong: #d2d9e1;
  --shadow: 0 18px 60px rgba(8, 35, 74, .1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 400 14px/1.6 Montserrat, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
svg { display: block; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(225, 230, 235, .85);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(16px);
}
.nav-shell {
  width: min(1180px, calc(100% - 40px));
  height: 76px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
}
.brand { justify-self: start; }
.brand img { width: auto; height: 44px; display: block; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
  padding: 9px 13px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s ease, background .18s ease;
}
.nav-links a:hover { color: var(--navy); background: var(--surface); }
/* Webinar ma date w etykiecie, wiec sam mowi, ze jest terminowy. Kropka i kolor
   wystarcza za wyroznienie, zeby menu nie zamienilo sie w drugi przycisk CTA. */
.nav-links .nav-webinar { display: inline-flex; align-items: center; gap: 7px; color: var(--green-dark); }
.nav-links .nav-webinar i { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px var(--mint); }
.nav-links .nav-webinar:hover { color: var(--green-dark); background: var(--mint); }
.nav-cta {
  justify-self: end;
  padding: 9px 14px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--navy);
  background: white;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(8, 35, 74, .05);
}
.nav-cta svg, .button svg, .card-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.nav-cta:hover svg, .button:hover svg, .generator-card-active:hover .card-link svg { transform: translateX(3px); }

.first-fold {
  min-height: calc(100svh - 76px);
  display: flex;
  flex-direction: column;
}
.hero { position: relative; flex: 1 1 auto; display: flex; overflow: hidden; }
.hero-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 56% at 50% 0%, rgba(6, 38, 93, .09), transparent 72%),
    radial-gradient(30% 40% at 78% 38%, rgba(47, 157, 126, .07), transparent 75%),
    radial-gradient(34% 44% at 14% 82%, rgba(47, 157, 126, .05), transparent 78%);
}
/* Kratka jak w zeszycie: motyw, ktory sam mowi, o czym jest ta strona, a nie
   kosztuje ani jednego pobranego pliku. Maska wygasza ja w srodku, wiec linie
   nie wchodza pod naglowek i tekst zostaje na czystym tle. */
.hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(6, 38, 93, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(6, 38, 93, .07) 1px, transparent 1px);
  background-size: 46px 46px;
  background-position: center;
  -webkit-mask-image: radial-gradient(64% 68% at 50% 44%, transparent 34%, #000 92%);
  mask-image: radial-gradient(64% 68% at 50% 44%, transparent 34%, #000 92%);
}
.hero-frame {
  position: relative;
  width: min(1280px, calc(100% - 56px));
  min-height: 610px;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
.hero-content {
  position: relative;
  z-index: 1;
  width: min(960px, calc(100% - 88px));
  padding: 75px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero-pill {
  padding: 5px 8px 5px 7px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.88);
  box-shadow: 0 5px 18px rgba(8, 35, 74, .07);
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  animation: rise .55s .1s both ease-out;
}
.pill-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--green-dark); background: var(--mint); }
.pill-icon svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pill-separator { width: 1px; height: 18px; background: var(--line); }
.pill-arrow { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero h1 {
  margin: 29px 0 20px;
  color: var(--navy-deep);
  font-size: clamp(46px, 5.8vw, 78px);
  line-height: 1.06;
  letter-spacing: -.055em;
  text-wrap: balance;
  text-shadow: 0 15px 50px rgba(6, 38, 93, .12);
  animation: rise .6s .18s both ease-out;
}
.hero h1 span { color: var(--green); }
.hero-content > p {
  max-width: 650px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  text-wrap: balance;
  animation: rise .6s .26s both ease-out;
}
.hero-actions {
  margin-top: 31px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px;
  animation: rise .6s .34s both ease-out;
}
.button {
  min-height: 48px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { color: white; background: linear-gradient(105deg, var(--navy), #0c477c 55%, var(--green)); box-shadow: 0 12px 30px rgba(6, 38, 93, .2); }
.button-primary:hover { box-shadow: 0 16px 36px rgba(6, 38, 93, .25); }
.button-secondary { border-color: var(--line-strong); color: var(--navy); background: white; box-shadow: 0 7px 20px rgba(8, 35, 74, .06); }

/* Webinar w hero: waski pasek z miniatura zrzutu, zeby nauczycielka od razu
   widziala, dokad prowadzi link. Celowo nie jest to drugi przycisk: glowne
   zadanie hero to wpuscic ja do generatorow, webinar ma byc obok, nie zamiast. */
.hero-webinar {
  max-width: 100%;
  margin-top: 26px;
  padding: 8px 16px 8px 8px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 30px rgba(8, 35, 74, .09);
  text-align: left;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: rise .6s .42s both ease-out;
}
.hero-webinar:hover, .hero-webinar:focus-visible { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(8, 35, 74, .16); }
.hero-webinar img { flex: 0 0 96px; width: 96px; height: 56px; border-radius: 10px; object-fit: cover; object-position: left top; background: var(--warm); }
.hero-webinar-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hero-webinar-copy strong { display: flex; align-items: center; gap: 7px; color: var(--navy-deep); font-size: 11px; font-weight: 700; }
.hero-webinar-copy strong i { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--mint); }
.hero-webinar-copy > span { color: var(--muted); font-size: 11px; line-height: 1.45; }
.hero-webinar-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; color: var(--green-dark); font-size: 11px; font-weight: 700; }
.hero-webinar-cta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.trust-strip { flex: 0 0 auto; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--warm); }
.trust-shell { width: min(1280px, calc(100% - 56px)); min-height: 94px; margin: 0 auto; display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: center; }
.trust-shell > p { margin: 0; padding-right: 28px; color: var(--muted); font-size: 11px; font-weight: 700; }
.trust-marquee { min-width: 0; overflow: hidden; border-left: 1px solid var(--line); mask-image: linear-gradient(to right, transparent, black 7%, black 93%, transparent); }
.trust-track { width: max-content; display: flex; animation: trustMove 24s linear infinite; }
.trust-marquee:hover .trust-track { animation-play-state: paused; }
.trust-shell ul { width: max-content; margin: 0; padding: 0; display: flex; flex: 0 0 auto; list-style: none; }
.trust-shell li { min-width: 220px; padding: 8px 26px; display: flex; align-items: center; justify-content: center; gap: 9px; border-left: 1px solid var(--line); color: var(--ink); font-size: 10px; font-weight: 700; text-align: center; }
.trust-shell li span { color: var(--green); font-size: 8px; letter-spacing: .08em; }

.generators-section { padding: 108px 0 118px; background: white; }
.section-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section-heading { margin-bottom: 43px; display: grid; grid-template-columns: 1.05fr .8fr; align-items: end; gap: 80px; }
.eyebrow { margin: 0 0 11px; display: flex; align-items: center; gap: 8px; color: var(--green-dark); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
/* flex: 0 0 pilnuje, zeby kropka nie zwezila sie do zera przy dluzszym podpisie. */
.eyebrow span { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--mint); }
.section-heading h2, .how-shell h2 { margin: 0; color: var(--navy-deep); font-size: clamp(32px, 3.5vw, 48px); line-height: 1.12; letter-spacing: -.04em; }
.section-heading > p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

.generator-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
/* Dziesiec kart w trzech kolumnach zostawia ostatnia sama w rzedzie. Siada
   wtedy w srodkowej kolumnie, zeby rzad nie wisial przy lewej krawedzi. */
.generator-grid > :last-child { grid-column: 2; }
.generator-card {
  min-height: 390px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--paper);
  text-decoration: none;
}
/* Klasa gotowego narzedzia: po niej chodzi tez js/karty-zamek.js. Sama nie
   maluje karty, skore daje generator-card-tool, zeby wszystkie dziesiec
   wygladalo tak samo. */
.generator-card-active { position: relative; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; }
.generator-card-active::before { content: ''; position: absolute; width: 220px; height: 220px; right: -100px; top: -100px; border-radius: 50%; background: var(--green); opacity: .28; }
.generator-card-active:hover { transform: translateY(-5px); box-shadow: 0 25px 70px rgba(8, 35, 74, .18); }
.card-topline { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.card-number { color: #89a1c1; font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.card-status { padding: 5px 9px; border-radius: 999px; color: var(--green-dark); background: var(--mint); font-size: 8px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.card-art { position: relative; z-index: 1; height: 171px; margin: 8px 0 7px; display: block; }
.card-art-mockup { display: grid; place-items: center; }
.card-art-mockup img {
  width: min(100%, 270px);
  height: 171px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 18px 20px rgba(8, 35, 74, .14));
  transform: scale(.98) rotate(-1deg);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.generator-card-active:hover .card-art-mockup img { filter: drop-shadow(0 23px 24px rgba(8, 35, 74, .2)); transform: scale(1.045) rotate(0); }
/* Nazwa i opis ida srodkiem, pod wysrodkowanym mockupem. Link idzie za nimi,
   bo sam przy lewej krawedzi wygladalby jak przeoczenie. Gorna belka zostaje
   rozpieta: numer i status maja siedziec w rogach. */
.card-copy { position: relative; z-index: 2; display: block; text-align: center; }
.card-copy strong { display: block; margin-bottom: 8px; font-size: 20px; line-height: 1.25; letter-spacing: -.025em; }
.card-copy small { display: block; max-width: 30ch; margin: 0 auto; color: inherit; opacity: .69; font-size: 11px; line-height: 1.6; }
.card-link { position: relative; z-index: 2; margin-top: auto; padding-top: 19px; display: flex; align-items: center; justify-content: center; gap: 6px; color: #91e0c8; font-size: 10px; font-weight: 700; }
.generator-card-tool {
  --card-accent: #2fa581;
  --card-accent-dark: #14725d;
  --card-tint: #eaf8f3;
  color: var(--navy-deep);
  background: linear-gradient(145deg, #fff 15%, var(--card-tint));
  border-color: color-mix(in srgb, var(--card-accent) 22%, white);
  box-shadow: 0 15px 45px rgba(8, 35, 74, .075);
}
.generator-card-tool::before { background: var(--card-accent); opacity: .11; }
.generator-card-tool .card-number { color: color-mix(in srgb, var(--card-accent-dark) 65%, #91a0b3); }
.generator-card-tool .card-link { color: var(--card-accent-dark); }
.card-luki { --card-accent: #28a984; --card-accent-dark: #14745d; --card-tint: #e9f9f3; }
/* Dyplomy trzymaja sie granatu marki, ale na jasnej karcie jak pozostale
   dziewiec. Wczesniej byly jedyna ciemna kafla i wypadaly z rytmu siatki. */
.card-dyplomy { --card-accent: #06265d; --card-accent-dark: #031a42; --card-tint: #eef2f8; }
.card-karty { --card-accent: #ff9e55; --card-accent-dark: #b85d21; --card-tint: #fff4e9; }
.card-krzyzowki { --card-accent: #6f7ee8; --card-accent-dark: #4452b4; --card-tint: #eef0ff; }
.card-wykreslanki { --card-accent: #e85f93; --card-accent-dark: #ad3563; --card-tint: #fff0f5; }
.card-jeopardy { --card-accent: #35a7d8; --card-accent-dark: #176f95; --card-tint: #ecf8fd; }
.card-bingo { --card-accent: #e7b62f; --card-accent-dark: #926f0e; --card-tint: #fff8df; }
.card-testy { --card-accent: #e2664e; --card-accent-dark: #a83f2b; --card-tint: #fff1ec; }
.card-memory { --card-accent: #9b6ade; --card-accent-dark: #6a3fb0; --card-tint: #f5efff; }
.card-labirynty { --card-accent: #12a5a5; --card-accent-dark: #0a6f6f; --card-tint: #e8f8f8; }
.generator-card-soon { color: var(--muted); background: linear-gradient(145deg, #fbfcfd, #f4f7f8); border-style: dashed; }
.generator-card-soon .card-status { color: #788493; background: #e8edf1; }

/* Klodki na kartach, tak jak przy nagraniach w landingu darmowych webinarow.
   Klasa `karty-zamkniete` na `body` przychodzi z js/karty-zamek.js, wiec bez
   JavaScriptu strona zostaje otwarta. */
/* Panel nad siatka: adres mozna zostawic tutaj, bez wchodzenia w zadna karte.
   Wychodzi z serwera schowany i pokazuje go dopiero skrypt, tak samo jak
   klodki, zeby brak JavaScriptu nie zostawil martwego formularza. */
.zamek-panel {
  margin: 0 0 26px;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 22px 34px;
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(140deg, #fff 45%, var(--mint));
  box-shadow: 0 15px 45px rgba(8, 35, 74, .06);
}
.zamek-panel[hidden], .zamek-gotowe[hidden] { display: none; }
.zamek-panel-nad { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; color: var(--green-dark); font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.zamek-panel-ikona { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--green-dark); background: var(--mint); }
.zamek-panel-ikona svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zamek-panel h3 { margin: 0 0 9px; color: var(--navy-deep); font-size: 21px; line-height: 1.25; letter-spacing: -.03em; }
.zamek-panel-info p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.zamek-panel label[for] { display: block; margin-bottom: 6px; color: var(--ink); font-size: 11px; font-weight: 700; }
.zamek-panel input[type=email] { width: 100%; min-height: 48px; padding: 0 15px; border: 1px solid var(--line-strong); border-radius: 12px; background: white; color: var(--ink); font: inherit; font-size: 14px; }
.zamek-panel input[type=email]:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 157, 126, .18); }
.zamek-zgoda { margin: 13px 0 0; display: flex; align-items: flex-start; gap: 10px; }
.zamek-zgoda input { flex: 0 0 16px; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--green); }
.zamek-zgoda span { color: var(--muted); font-size: 10px; line-height: 1.55; }
.zamek-zgoda a { color: var(--green-dark); }
.zamek-pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.zamek-panel button { width: 100%; min-height: 48px; margin-top: 16px; padding: 0 20px; border: 0; border-radius: 999px; color: white; background: linear-gradient(105deg, var(--navy), #0c477c 55%, var(--green)); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.zamek-panel button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(6, 38, 93, .25); }
.zamek-panel button:disabled { opacity: .6; cursor: progress; transform: none; }
.zamek-stopka { margin: 12px 0 0; color: #8c96a5; font-size: 10px; line-height: 1.5; text-align: center; }
.zamek-blad { margin: 13px 0 0; padding: 11px 13px; border-radius: 11px; background: #fdecec; color: #a8323b; font-size: 11px; line-height: 1.55; }
.zamek-blad[hidden] { display: none; }
.zamek-gotowe { margin: 0 0 26px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; border: 1px solid color-mix(in srgb, var(--green) 30%, white); border-radius: 14px; color: var(--green-dark); background: var(--mint); font-size: 12px; line-height: 1.55; }
.zamek-gotowe-ikona { flex: 0 0 30px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); }
.zamek-gotowe-ikona svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.card-lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: white;
  /* Rozmycie ma dawac do zrozumienia, ze materialu jeszcze nie ma, ale nie
     chowac go calkiem: podglad jest tu zacheta. */
  background: rgba(3, 26, 66, .28);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: none;
}
.card-lock svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 3px 10px rgba(3,26,66,.5)); }
/* Grafika pod klodka traci nasycenie, zeby od razu bylo widac, ze to zapowiedz,
   a nie gotowy material. */
.karty-zamkniete .card-art-mockup img { filter: saturate(.55) drop-shadow(0 18px 20px rgba(8, 35, 74, .12)); }
.karty-zamkniete .generator-card-active:hover .card-art-mockup img { filter: saturate(.75) drop-shadow(0 23px 24px rgba(8, 35, 74, .18)); }
/* Tylko karty gotowych narzedzi. Karty "Wkrotce" maja wlasny, szary status. */
.karty-zamkniete .generator-card-active .card-status { color: #7a6a2f; background: #fdf3d6; }
.placeholder-mark { width: 78px; height: 78px; margin: 54px auto 49px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 22px; color: #a4adb8; background: rgba(255,255,255,.7); font-size: 32px; font-weight: 400; box-shadow: inset 0 0 0 8px rgba(244,247,248,.7); }
.generator-card-soon .card-copy strong { color: #6c7888; }

.how-section { padding: 98px 0 104px; color: white; background: var(--navy-deep); }
.how-shell { display: grid; grid-template-columns: .72fr 1.45fr; gap: 100px; }
.eyebrow-light { color: #8fd8c3; }
.eyebrow-light span { background: #6fd2b4; box-shadow: 0 0 0 4px rgba(111, 210, 180, .14); }
.how-shell h2 { max-width: 300px; color: white; }
.steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; }
.steps li { padding: 9px 27px 8px; border-left: 1px solid rgba(255,255,255,.14); }
.steps li > span { display: block; margin-bottom: 32px; color: #69c9ad; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.steps strong { display: block; margin-bottom: 10px; font-size: 14px; }
.steps p { margin: 0; color: rgba(255,255,255,.6); font-size: 11px; line-height: 1.65; }

.courses-section { padding: 84px 0; background: #eff8f5; border-top: 1px solid #d9ebe5; }
/* Rowne kolumny, bo zrzut hero jest tu drugim glownym elementem, nie ozdoba. */
.courses-shell { display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,1fr); align-items: center; gap: 56px; }
.courses-copy h2 { max-width: 720px; margin: 0; color: var(--navy); font-size: clamp(30px,3.2vw,46px); line-height: 1.06; letter-spacing: -.045em; }
.courses-copy > p:not(.eyebrow) { max-width: 650px; margin: 22px 0 30px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.courses-copy .courses-note { margin: 14px 0 0; color: var(--muted); font-size: 12px; }

/* Karta z prawej to zrzut hero ze strony webinaru, wiec nauczycielka widzi
   dokladnie to, co ja czeka po kliknieciu. Ramka udaje okno przegladarki. */
.courses-card { display: block; border-radius: 20px; overflow: hidden; background: white; border: 1px solid #d3e6df; box-shadow: 0 24px 70px rgba(4,31,76,.18); transition: transform .18s ease, box-shadow .18s ease; }
.courses-card img { display: block; width: 100%; height: auto; }
.courses-card:hover, .courses-card:focus-visible { transform: translateY(-3px); box-shadow: 0 30px 80px rgba(4,31,76,.24); }

.site-footer { border-top: 1px solid var(--line); background: white; }
.footer-shell { width: min(1180px, calc(100% - 40px)); min-height: 110px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; }
.footer-shell img { height: 36px; }
.footer-links { display: flex; align-items: center; justify-content: center; gap: 22px; }
.footer-links a,.back-to-top { color: var(--navy); font-size: 10px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.footer-links a:hover,.back-to-top:hover { color: var(--green-dark); }
.back-to-top { justify-self: end; }
.back-to-top span { margin-left: 5px; color: var(--green); }

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes trustMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 900px) {
  .nav-shell { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .hero-frame { width: calc(100% - 40px); min-height: 610px; }
  .trust-shell { width: calc(100% - 40px); grid-template-columns: 1fr; padding: 16px 0; }
  .trust-shell > p { margin-bottom: 12px; padding: 0; text-align: center; }
  .trust-marquee { border-left: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 20px; }
  .section-heading > p { max-width: 620px; }
  .generator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* W dwoch kolumnach dziesiata karta i tak konczy rzad, wiec wraca do siebie. */
  .generator-grid > :last-child { grid-column: auto; }
  .zamek-panel { grid-template-columns: 1fr; gap: 20px; }
  .how-shell { grid-template-columns: 1fr; gap: 48px; }
  .how-shell h2 { max-width: none; }
  .courses-shell { grid-template-columns: 1fr; gap: 38px; }
  .footer-shell { grid-template-columns: 1fr auto; }
  .footer-links { grid-column: 1 / -1; grid-row: 2; padding-bottom: 22px; }
}

@media (max-width: 640px) {
  .nav-shell { width: min(100% - 28px, 1180px); height: 66px; }
  .brand img { height: 34px; }
  /* Na telefonie przycisk byl samym kolkiem ze strzalka, wiec nic nie mowil.
     Zostaje wezszy, ale z podpisem. */
  .nav-cta { height: 38px; padding: 0 14px; gap: 6px; font-size: 11px; letter-spacing: 0; }
  .nav-cta svg { width: 13px; height: 13px; }
  .first-fold { min-height: calc(100svh - 66px); }
  .hero-frame { width: calc(100% - 28px); min-height: 590px; }
  .hero-content { width: calc(100% - 46px); padding: 82px 0 91px; }
  .hero h1 { margin-top: 25px; font-size: clamp(38px, 12vw, 54px); }
  .hero h1 br { display: block; }
  .hero-pill { font-size: 8px; }
  .pill-separator, .pill-arrow { display: none; }
  .hero-actions { width: 100%; flex-direction: column; }
  .button { width: 100%; }
  /* Na telefonie menu chowa sie calkiem, wiec ten pasek jest jedynym miejscem,
     w ktorym webinar widac nad zgiecie. Dlatego dostaje pelna szerokosc. */
  .hero-webinar { width: 100%; margin-top: 18px; padding: 10px 12px; gap: 11px; }
  .hero-webinar img { flex: 0 0 72px; width: 72px; height: 44px; }
  .hero-webinar-cta { display: none; }
  /* Podpis lamie sie tu na dwie linie, wiec kropka idzie do pierwszej z nich,
     zamiast wisiec w pionowym srodku calego bloku. */
  .hero-webinar-copy strong { align-items: flex-start; }
  .hero-webinar-copy strong i { margin-top: 5px; }
  .trust-shell { width: 100%; }
  .trust-shell li { min-width: 190px; }
  .generators-section { padding: 76px 0 82px; }
  .section-shell { width: calc(100% - 28px); }
  .generator-grid { grid-template-columns: 1fr; }
  .generator-card { min-height: 370px; }
  .how-section { padding: 73px 0 78px; }
  .courses-section { padding: 64px 0; }
  /* Zrzut hero ma wlasne proporcje, wiec zadnej sztywnej wysokosci. */
  .eyebrow { flex-wrap: wrap; }
  .steps { grid-template-columns: 1fr; }
  .steps li { padding: 24px 0; display: grid; grid-template-columns: 40px 1fr; border-top: 1px solid rgba(255,255,255,.14); border-left: 0; }
  .steps li > span { margin: 2px 0 0; }
  .footer-shell { width: calc(100% - 28px); min-height: 90px; }
  .footer-shell img { height: 30px; }
  .footer-links { justify-content: flex-start; gap: 10px 18px; flex-wrap: wrap; }
  .footer-links a { font-size: 9px; }
}