@charset "UTF-8";
/* ==========================================================================
   Cognito — strona główna v6
   Port designu z pracowni Lovable (podstrona /matematyka) do statycznego HTML.
   WSZYSTKO jest zakresowane na .home-v6, żeby nie dotknąć pozostałych podstron.
   Ładowany PO cognito-shared.css.
   ========================================================================== */

.home-v6 {
  --h6-navy-900: #0b1c3d;
  --h6-navy-800: #12285a;
  --h6-blue-700: #1d4ed8;
  --h6-blue-600: #2563eb;
  --h6-blue-500: #3b82f6;
  --h6-indigo-600: #4f46e5;
  --h6-violet-600: #7c3aed;
  --h6-violet-100: #f1ecfe;
  --h6-mint-600: #0e9f6e;
  --h6-mint-100: #e3f7ef;
  --h6-sky-100: #e4edff;
  --h6-sky-50: #f2f6ff;
  --h6-paper: #fff;
  --h6-bg: #f8faff;
  --h6-bg-2: #eef2ff;
  --h6-ink: #13233f;
  --h6-ink-soft: #54648a;
  --h6-line: #e8eef9;

  --h6-grad-cta: linear-gradient(135deg, var(--h6-blue-600), var(--h6-indigo-600));
  --h6-grad-cta-hover: linear-gradient(135deg, var(--h6-blue-700), #4338ca);
  --h6-grad-text: linear-gradient(100deg, var(--h6-blue-600), var(--h6-violet-600));
  --h6-grad-soft: linear-gradient(180deg, var(--h6-paper), var(--h6-bg-2));
  --h6-grad-band: linear-gradient(120deg, var(--h6-blue-600), var(--h6-violet-600));
  --h6-sh-cta: 0 8px 24px rgba(37, 99, 235, .28);

  --h6-r-sm: 10px;
  --h6-r-md: 12px;
  --h6-r-lg: 18px;
  --h6-r-xl: 24px;

  --h6-sh-1: 0 1px 2px rgba(11, 28, 61, .04), 0 2px 8px rgba(11, 28, 61, .05);
  --h6-sh-2: 0 2px 4px rgba(11, 28, 61, .04), 0 8px 20px rgba(11, 28, 61, .07);
  --h6-sh-3: 0 4px 8px rgba(11, 28, 61, .05), 0 18px 40px rgba(11, 28, 61, .1);

  --h6-ease: cubic-bezier(.22, .61, .36, 1);

  background: var(--h6-bg);
  color: var(--h6-ink);
}

/* --- typografia sekcji ------------------------------------------------- */

.home-v6 .h6-sec {
  padding: 34px 0 46px;
}

.home-v6 .h6-sec.tone-paper {
  background: var(--h6-paper);
}

.home-v6 .h6-sec.tone-bg {
  background: var(--h6-grad-soft);
}

.home-v6 .h6-head {
  max-width: 46rem;
  margin: 0 0 22px;
}

.home-v6 .h6-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--h6-line);
  border-radius: 999px;
  background: var(--h6-paper);
  color: var(--h6-ink-soft);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
}

.home-v6 .h6-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--h6-mint-600);
  flex: none;
}

.home-v6 .h6-eyebrow.no-dot::before {
  display: none;
}

.home-v6 h1 {
  font-family: 'Sora', Inter, sans-serif;
  font-weight: 800;
  font-size: clamp(1.85rem, 1.35rem + 2.1vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--h6-ink);
  margin: 14px 0 12px;
}

.home-v6 h2 {
  font-family: 'Sora', Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--h6-ink);
  margin: 10px 0 8px;
}

.home-v6 h3 {
  font-family: 'Sora', Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  line-height: 1.25;
  color: var(--h6-ink);
  margin: 0 0 6px;
}

.home-v6 .h6-grad {
  background: var(--h6-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.home-v6 .h6-lead {
  font-size: clamp(1rem, .96rem + .25vw, 1.12rem);
  line-height: 1.6;
  color: var(--h6-ink-soft);
  margin: 0;
  max-width: 40rem;
}

.home-v6 .h6-note {
  font-size: .86rem;
  color: var(--h6-ink-soft);
  margin: 14px 0 0;
}

/* --- przyciski --------------------------------------------------------- */

.home-v6 .h6-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--h6-ease) .18s, box-shadow var(--h6-ease) .18s, background .18s;
  white-space: normal;
}

.home-v6 .h6-btn-primary {
  background-image: var(--h6-grad-cta);
  color: #fff;
  box-shadow: var(--h6-sh-cta);
}

.home-v6 .h6-btn-primary:hover {
  background-image: var(--h6-grad-cta-hover);
  transform: translateY(-1px);
}

.home-v6 .h6-btn-ghost {
  background: var(--h6-paper);
  color: var(--h6-ink);
  border-color: var(--h6-line);
  box-shadow: var(--h6-sh-1);
}

.home-v6 .h6-btn-ghost:hover {
  border-color: #cfdcf3;
  transform: translateY(-1px);
}

.home-v6 .h6-btn-white {
  background: #fff;
  color: var(--h6-blue-700);
}

.home-v6 .h6-btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .55);
}

.home-v6 .h6-btn svg {
  flex: none;
}

.home-v6 .h6-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0 0;
}

.home-v6 .h6-center {
  text-align: center;
  margin-top: 22px;
}

/* Risk reversal tuz pod przyciskiem — najlepiej czytane miejsce na stronie.
   Ta sama tresc jest nizej na liscie, ale tam trafia dopiero po decyzji. */
.home-v6 .h6-risk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: .88rem;
  color: var(--h6-ink-soft);
}

.home-v6 .h6-risk li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.home-v6 .h6-risk li + li::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  opacity: .5;
  margin-right: 4px;
}

.home-v6 .h6-textlink {
  display: inline-flex;
  /* Bez `wrap` element flex trzyma caly tekst w jednej linii niezaleznie od
     szerokosci ekranu. "Zobacz zweryfikowane opinie na e-korepetycje.net"
     mialo 367px na ekranie 320px i rozpychalo cala strone. */
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  color: var(--h6-blue-600);
  font-weight: 600;
  text-decoration: none;
  font-size: .95rem;
}

.home-v6 .h6-textlink:hover {
  text-decoration: underline;
}

/* --- hero -------------------------------------------------------------- */

.home-v6 .h6-hero {
  padding: 28px 0 34px;
  background:
    radial-gradient(58% 46% at 82% 8%, rgba(37, 99, 235, .10), transparent 62%),
    linear-gradient(180deg, var(--h6-paper), var(--h6-bg));
}

/* Kolejnosc na telefonie: copy -> extra -> table.
   Do 15.08 tabela "Co dostajesz po kazdej lekcji" stala miedzy przyciskiem
   a dowodami, przez co przy 375x812 ocena 5,0 i lista "bez karty, bez umowy"
   ladowaly dopiero na 860 i 1041 px, czyli POD zgieciem. Zmierzone w przegladarce.
   Tabela jest ciekawa, ale nie zdejmuje ryzyka — dowod i risk reversal ida wyzej. */
.home-v6 .h6-hero-grid {
  display: grid;
  gap: 22px;
  grid-template-areas:
    "copy"
    "extra"
    "table";
}

.home-v6 .h6-hero-copy {
  grid-area: copy;
}

.home-v6 .h6-hero-grid > .h6-table-wrap {
  grid-area: table;
}

.home-v6 .h6-hero-extra {
  grid-area: extra;
}

.home-v6 .h6-check {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.home-v6 .h6-check li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .97rem;
  line-height: 1.45;
  color: var(--h6-ink);
}

.home-v6 .h6-check li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--h6-sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E") center/12px 12px no-repeat;
}

.home-v6 .h6-hero-proof {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 0;
  flex-wrap: wrap;
}

.home-v6 .h6-faces {
  display: flex;
}

.home-v6 .h6-faces img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  margin-left: -10px;
  background: var(--h6-sky-100);
}

.home-v6 .h6-faces img:first-child {
  margin-left: 0;
}

.home-v6 .h6-hero-proof span {
  font-size: .92rem;
  color: var(--h6-ink-soft);
}

.home-v6 .h6-hero-proof b {
  color: var(--h6-ink);
}

.home-v6 .h6-nowrap {
  white-space: nowrap;
}

.home-v6 .h6-stars,
.home-v6 .h6-hero-proof .h6-stars {
  color: #dfa008;
  letter-spacing: .08em;
  font-size: .95rem;
  margin: 0;
}

/* --- tabela danych ----------------------------------------------------- */

.home-v6 .h6-table-wrap {
  background: var(--h6-paper);
  border: 1px solid var(--h6-line);
  border-radius: var(--h6-r-lg);
  box-shadow: var(--h6-sh-2);
  /* Bylo `overflow:hidden` (dla zaokraglonych rogow). Gdy tabela przekraczala
     kontener — przy powiekszonej czcionce albo waskim ekranie — nadmiar byl
     obcinany i nie dalo sie do niego dojsc. Zmierzone przy 22px na 320px:
     tabela 311px w kontenerze 298px, 13px znikalo bezpowrotnie.
     `auto` zostawia przycinanie do promienia, ale pozwala przewinac. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.home-v6 table.h6-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
}

.home-v6 .h6-table caption {
  text-align: left;
  padding: 14px 16px 0;
  font-weight: 700;
  font-family: 'Sora', Inter, sans-serif;
  color: var(--h6-ink);
}

.home-v6 .h6-table th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--h6-ink-soft);
  background: var(--h6-sky-50);
  font-size: .88rem;
  letter-spacing: .01em;
}

.home-v6 .h6-table td {
  padding: 12px 16px;
  border-top: 1px solid var(--h6-line);
  vertical-align: top;
  line-height: 1.4;
}

.home-v6 .h6-table td:first-child {
  color: var(--h6-ink-soft);
  width: 45%;
}

.home-v6 .h6-table td:last-child {
  color: var(--h6-ink);
  font-weight: 600;
}

.home-v6 .h6-table.h6-table-compare td:first-child,
.home-v6 .h6-table.h6-table-compare td:last-child {
  width: 50%;
  font-weight: 500;
}

/* --- pasek zaufania ---------------------------------------------------- */

.home-v6 .h6-trust {
  background: var(--h6-paper);
  border: 1px solid var(--h6-line);
  border-radius: var(--h6-r-lg);
  box-shadow: var(--h6-sh-2);
  display: grid;
  /* `1fr` to `minmax(auto, 1fr)` — sciezka nie schodzi ponizej szerokosci
     tresci. Przy powiekszonej czcionce "Pierwsza godzina" rozpychalo kolumne,
     pasek wychodzil poza kontener, a `overflow:hidden` obcinal go bezpowrotnie
     (zmierzone przy 22px na 320px: 332px tresci w 298px kontenera).
     `minmax(0, 1fr)` pozwala kolumnie sie zwezic, a tekst zawija sie normalnie. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
}

.home-v6 .h6-trust > div {
  padding: 16px 14px;
  border-top: 1px solid var(--h6-line);
  border-left: 1px solid var(--h6-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.home-v6 .h6-trust > div:nth-child(-n+2) {
  border-top: 0;
}

.home-v6 .h6-trust > div:nth-child(odd) {
  border-left: 0;
}

/* nieparzysta ostatnia komórka zajmuje cały wiersz, żeby nie wisiała w połowie */
.home-v6 .h6-trust > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.home-v6 .h6-trust i {
  width: 38px;
  height: 38px;
  border-radius: var(--h6-r-md);
  background: var(--h6-sky-100);
  display: grid;
  place-items: center;
  color: var(--h6-blue-600);
}

.home-v6 .h6-trust strong {
  font-family: 'Sora', Inter, sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--h6-ink);
  font-variant-numeric: tabular-nums;
}

.home-v6 .h6-trust span {
  font-size: .84rem;
  color: var(--h6-ink-soft);
  line-height: 1.35;
  /* "Ocena e-korepetycje.net" mialo 155px w komorce 148px i bylo przycinane.
     Samo `break-word` nie wystarcza: nie wplywa na wyliczanie min-content,
     wiec element flex dalej trzymal szerokosc calego slowa. `anywhere` liczy
     sie juz przy rozmiarze wewnetrznym, a `width:100%` przypina span do
     szerokosci komorki. Normalny tekst dalej lamie sie na spacjach. */
  width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: none;
}

/* `.h6-nowrap` trzyma "e-korepetycje.net" w jednym kawalku, zeby adres nie
   pekal w polowie. W kafelkach paska zaufania komorka ma ~120px, wiec przy
   powiekszonej czcionce ten sam zapis mial 155px i chowal sie pod krawedz.
   Tutaj lamanie jest mniej zlym rozwiazaniem niz niewidoczny tekst. */
.home-v6 .h6-trust .h6-nowrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --- karty ------------------------------------------------------------- */

.home-v6 .h6-card {
  background: var(--h6-paper);
  border: 1px solid var(--h6-line);
  border-radius: var(--h6-r-lg);
  box-shadow: var(--h6-sh-1);
  padding: 20px;
  transition: transform .28s var(--h6-ease), box-shadow .28s var(--h6-ease);
}

.home-v6 a.h6-card,
.home-v6 .h6-card.lift {
  text-decoration: none;
  color: inherit;
}

.home-v6 a.h6-card:hover,
.home-v6 .h6-card.lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--h6-sh-3);
}

.home-v6 .h6-card p {
  margin: 0;
  color: var(--h6-ink-soft);
  font-size: .95rem;
  line-height: 1.55;
}

.home-v6 .h6-grid-2 {
  display: grid;
  gap: 16px;
}

.home-v6 .h6-grid-3,
.home-v6 .h6-grid-4 {
  display: grid;
  gap: 14px;
}

.home-v6 .h6-tile {
  width: 44px;
  height: 44px;
  border-radius: var(--h6-r-md);
  display: grid;
  place-items: center;
  margin-bottom: 12px;
  background: var(--h6-sky-100);
  color: var(--h6-blue-600);
}

.home-v6 .h6-tile.violet {
  background: var(--h6-violet-100);
  color: var(--h6-violet-600);
}

.home-v6 .h6-tile.mint {
  background: var(--h6-mint-100);
  color: var(--h6-mint-600);
}

/* --- rozdzielacz person ------------------------------------------------ */

.home-v6 .h6-persona {
  border-radius: var(--h6-r-xl);
  padding: 22px;
  border: 1px solid var(--h6-line);
  background: linear-gradient(135deg, #f5f7ff, #eef2ff);
}

.home-v6 .h6-persona.student {
  background: linear-gradient(135deg, var(--h6-navy-900), var(--h6-navy-800));
  border-color: rgba(255, 255, 255, .1);
}

.home-v6 .h6-persona.student h3,
.home-v6 .h6-persona.student .h6-eyebrow {
  color: #eaf0ff;
}

.home-v6 .h6-persona.student .h6-eyebrow {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .18);
}

.home-v6 .h6-persona.student p,
.home-v6 .h6-persona.student .h6-check li {
  color: #c6d3ee;
}

.home-v6 .h6-persona.student .h6-check li::before {
  background-color: rgba(255, 255, 255, .12);
}

.home-v6 .h6-persona-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.home-v6 .h6-persona-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--h6-paper);
  border: 1px solid var(--h6-line);
  color: var(--h6-ink);
  font-weight: 600;
  font-size: .92rem;
  text-decoration: none;
}

.home-v6 .h6-persona-links a:hover {
  border-color: var(--h6-blue-500);
  color: var(--h6-blue-700);
}

.home-v6 .h6-persona.student .h6-persona-links a {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .22);
  color: #eaf0ff;
}

.home-v6 .h6-persona.student .h6-persona-links a:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

/* --- kroki ------------------------------------------------------------- */

.home-v6 .h6-step {
  position: relative;
}

.home-v6 .h6-step .num {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--h6-grad-cta);
  color: #fff;
  font-family: 'Sora', Inter, sans-serif;
  font-weight: 700;
  font-size: .95rem;
  margin-bottom: 10px;
}

/* --- ścieżka wyniku ---------------------------------------------------- */

.home-v6 .h6-score {
  background: var(--h6-paper);
  border: 1px solid var(--h6-line);
  border-radius: var(--h6-r-lg);
  box-shadow: var(--h6-sh-2);
  padding: 20px;
}

.home-v6 .h6-score-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: 'Sora', Inter, sans-serif;
  font-weight: 700;
}

.home-v6 .h6-score-top .from {
  color: var(--h6-ink-soft);
  font-size: 1rem;
}

.home-v6 .h6-score-top .to {
  color: var(--h6-blue-600);
  font-size: 1.5rem;
}

.home-v6 .h6-score .progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--h6-bg-2);
  margin: 12px 0 18px;
  overflow: hidden;
}

.home-v6 .h6-score .progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--h6-grad-cta);
  width: 0;
  transition: width 1.1s var(--h6-ease);
}

.home-v6 .h6-score ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: sp;
}

.home-v6 .h6-score ol li {
  counter-increment: sp;
  display: grid;
  grid-template-columns: 26px 1fr;
  grid-template-areas:
    "num  title"
    ".    desc";
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  font-size: .95rem;
  color: var(--h6-ink-soft);
  line-height: 1.5;
}

.home-v6 .h6-score ol li::before {
  content: counter(sp);
  grid-area: num;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--h6-sky-100);
  color: var(--h6-blue-700);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: .8rem;
}

.home-v6 .h6-score ol li b {
  grid-area: title;
  color: var(--h6-ink);
  align-self: center;
}

.home-v6 .h6-score ol li span {
  grid-area: desc;
}

/* --- cennik ------------------------------------------------------------ */

.home-v6 .h6-price {
  display: grid;
  gap: 14px;
}

.home-v6 .h6-price-card {
  background: var(--h6-paper);
  border: 1px solid var(--h6-line);
  border-radius: var(--h6-r-lg);
  padding: 20px;
  box-shadow: var(--h6-sh-1);
}

.home-v6 .h6-price-card.featured {
  border-color: var(--h6-blue-500);
  box-shadow: var(--h6-sh-3);
  position: relative;
}

.home-v6 .h6-price-card.featured::after {
  content: "Najczęściej wybierane";
  position: absolute;
  top: -11px;
  left: 20px;
  background: var(--h6-grad-cta);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}

.home-v6 .h6-amount {
  font-family: 'Sora', Inter, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: var(--h6-ink);
  line-height: 1;
  margin: 6px 0 2px;
  font-variant-numeric: tabular-nums;
}

.home-v6 .h6-amount small {
  font-size: .9rem;
  font-weight: 500;
  color: var(--h6-ink-soft);
}

.home-v6 .h6-permonth {
  font-size: .88rem;
  color: var(--h6-ink-soft);
  margin: 0 0 10px;
}

/* --- opinie ------------------------------------------------------------ */

.home-v6 .h6-quote {
  position: relative;
}

.home-v6 .h6-quote blockquote {
  margin: 0 0 14px;
  font-size: .97rem;
  line-height: 1.6;
  color: var(--h6-ink);
}

.home-v6 .h6-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-v6 .h6-author img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--h6-sky-100);
}

.home-v6 .h6-author strong {
  display: block;
  font-size: .95rem;
}

.home-v6 .h6-author small {
  color: var(--h6-ink-soft);
  font-size: .84rem;
}

/* --- zespół ------------------------------------------------------------ */

.home-v6 .h6-tutor img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--h6-r-md);
  margin-bottom: 12px;
  background: var(--h6-sky-100);
}

.home-v6 .h6-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
}

.home-v6 .h6-tags span {
  font-size: .74rem;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--h6-sky-50);
  border: 1px solid var(--h6-line);
  color: var(--h6-ink-soft);
}

/* --- miasta (GEO) ------------------------------------------------------ */

.home-v6 .h6-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.home-v6 .h6-cities a {
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--h6-paper);
  border: 1px solid var(--h6-line);
  color: var(--h6-ink-soft);
  font-size: .88rem;
  text-decoration: none;
}

.home-v6 .h6-cities a:hover {
  border-color: var(--h6-blue-500);
  color: var(--h6-blue-700);
}

/* --- FAQ --------------------------------------------------------------- */

.home-v6 .h6-faq {
  display: grid;
  gap: 10px;
}

.home-v6 .h6-faq .faq-item {
  background: var(--h6-paper);
  border: 1px solid var(--h6-line);
  border-radius: var(--h6-r-md);
  overflow: hidden;
}

.home-v6 .h6-faq .faq-question {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: none;
  border: 0;
  font: inherit;
  font-weight: 600;
  color: var(--h6-ink);
  text-align: left;
  cursor: pointer;
}

.home-v6 .h6-faq .faq-question span:last-child {
  color: var(--h6-blue-600);
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
}

.home-v6 .h6-faq .faq-answer {
  display: none;
  padding: 0 16px 16px;
  color: var(--h6-ink-soft);
  font-size: .95rem;
  line-height: 1.6;
}

.home-v6 .h6-faq .faq-item.open .faq-answer {
  display: block;
}

.home-v6 .h6-faq .faq-item.open .faq-question span:last-child {
  transform: rotate(45deg);
  display: inline-block;
}

/* --- pas domykający ---------------------------------------------------- */

.home-v6 .h6-band {
  background: var(--h6-grad-band);
  color: #fff;
  border-radius: var(--h6-r-xl);
  padding: 26px 22px;
  margin: 0 0 40px;
  text-align: center;
}

.home-v6 .h6-band h2 {
  color: #fff;
  margin-top: 0;
}

.home-v6 .h6-band p {
  color: rgba(255, 255, 255, .88);
  margin: 0 auto 18px;
  max-width: 34rem;
  font-size: 1rem;
}

.home-v6 .h6-band .h6-btn-row {
  justify-content: center;
}

.home-v6 .h6-band-micro {
  margin: 14px 0 0;
  font-size: .86rem;
  color: rgba(255, 255, 255, .8);
}

.home-v6 .h6-band-micro a {
  color: #fff;
  font-weight: 600;
}

/* --- ujawnianie sekcji (JS tylko dodaje .is-visible) -------------------- */

.has-js .home-v6 [data-reveal] {
  /* opacity zostaje 1 celowo — patrz cognito-shared.css linia ~1051:
     tekst nie może zależeć od tego, czy IntersectionObserver zdąży odpalić. */
  opacity: 1;
  transform: translateY(14px);
  transition: opacity .52s var(--h6-ease), transform .52s var(--h6-ease);
}

.has-js .home-v6 [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Pierwszy ekran nie animuje się nigdy. */
.has-js .home-v6 .h6-hero [data-reveal],
.has-js .home-v6 .h6-hero [data-reveal].is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .has-js .home-v6 [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .home-v6 .h6-score .progress-fill {
    transition: none !important;
  }
}

/* --- układy szerokie --------------------------------------------------- */

@media (min-width: 700px) {
  .home-v6 .h6-trust {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  /* Regula "ostatnia nieparzysta komorka na caly wiersz" jest po to, zeby przy
     dwoch kolumnach piata kafelka nie wisiala w polowie. Przy pieciu kolumnach
     ta sama regula wypychala "od 99 zl" do osobnego wiersza szerokiego na 1178 px
     i podnosila pasek z 130 na 263 px. Zdjete zmierzone na 1440x900. */
  .home-v6 .h6-trust > div:last-child:nth-child(odd) {
    grid-column: auto;
  }

  .home-v6 .h6-trust > div {
    border-top: 0;
  }

  .home-v6 .h6-trust > div:nth-child(odd) {
    border-left: 1px solid var(--h6-line);
  }

  .home-v6 .h6-trust > div:first-child {
    border-left: 0;
  }

  .home-v6 .h6-grid-2,
  .home-v6 .h6-price {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-v6 .h6-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-v6 .h6-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .home-v6 .h6-price {
    grid-template-columns: repeat(3, 1fr);
  }

  .home-v6 .h6-band {
    padding: 34px;
  }
}

@media (min-width: 980px) {
  .home-v6 .h6-sec {
    padding: 54px 0 66px;
  }

  .home-v6 .h6-hero {
    padding: 46px 0 52px;
  }

  .home-v6 .h6-hero-grid {
    grid-template-columns: 1.05fr .95fr;
    grid-template-areas:
      "copy  table"
      "extra table";
    align-items: start;
    column-gap: 40px;
    row-gap: 20px;
  }

  .home-v6 .h6-hero-grid > .h6-table-wrap {
    align-self: center;
  }

  .home-v6 .h6-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .home-v6 .h6-tutors {
    grid-template-columns: repeat(5, 1fr);
  }

  .home-v6 .h6-head {
    margin-bottom: 28px;
  }
}

/* ==========================================================================
   KONTRAST — 15.08.2026
   Strona glowna nie laduje cognito-v6.css (ma wlasny motyw), wiec poprawki
   kontrastu z tamtego pliku jej nie obejmuja. Te same dwa problemy, osobno.
   ========================================================================== */

/* CTA w nawigacji: granatowy tekst na niebieskim gradiencie, kontrast 2.63.
   `.btn-nav-cta{color:#fff!important}` z cognito-shared.css przegrywa
   z `.nav-links a` — potrzebny selektor z pelna sciezka nawigacji. */
.site-nav .nav-links a.btn-nav-cta,
.home-v6 .site-nav .nav-links a.btn-nav-cta,
.home-v6 .mobile-menu a.btn-nav-cta {
  color: #fff !important;
  background: linear-gradient(135deg, #1e5fd0, #2563eb) !important;
}

/* Gwiazdki w opiniach to <p> w karcie, wiec `.home-v6 .h6-card p` (0,2,1)
   przebijalo zwykly selektor klasy i barwilo je na szary tekst karty. */
.home-v6 p.h6-stars,
.home-v6 .h6-card p.h6-stars,
.home-v6 .h6-hero-proof .h6-stars,
.home-v6 .stars { color: #dfa008; }

/* Bialy z alfa .88 na niebieskim pasie #2563eb = 4.37 przy progu 4.5.
   home-v6.css laduje sie po cognito-shared.css, wiec regula musi byc tutaj. */
.home-v6 .h6-band p,
.home-v6 .h6-band .microcopy,
.home-v6 .h6-band li { color: #fff; }

/* Na waskim ekranie 16px odstepu po obu stronach kazdej komorki (razem 64px
   na dwie kolumny) wypychalo tabele poza kontener. Przy 320px i powiekszonej
   czcionce brakowalo 13px — kontener jest teraz przewijalny, ale lepiej zeby
   tabela po prostu sie miescila. */
@media (max-width: 420px) {
  .home-v6 .h6-table th,
  .home-v6 .h6-table td { padding: 10px 10px; }
  .home-v6 .h6-table caption { padding-left: 10px; padding-right: 10px; }
}

/* Pasek zaufania ma inline `margin-top:-26px`, zeby wsuwac sie w dolna
   krawedz hero. Efekt byl jednak odwrocony: `.h6-hero` ma `position:relative`,
   a pasek byl `static`, wiec w tym samym kontekscie ukladania tlo hero
   malowalo sie NAD paskiem i zjadalo jego gorne 26px razem z gorna krawedzia
   ramki. Pasek musi byc pozycjonowany, zeby wyladowac na wierzchu. */
.home-v6 .h6-trust {
  position: relative;
  z-index: 1;
}

/* === WYROWNANIE KART NA STRONIE GLOWNEJ ===================================
   To samo, co w cognito-shared.css: zmienny tekst rosnie, stopka karty
   przykleja sie do dolu. Bez tego plakietki korepetytorow rozjezdzaly sie
   o 49 px, a podpisy pod cytatami o 25 px (zmierzone na 1280 px). */
.home-v6 .h6-tutor { display: flex; flex-direction: column; height: 100% }
.home-v6 .h6-tutor p { flex: 1 1 auto }
.home-v6 .h6-tags { margin-top: auto }

.home-v6 .h6-quote { display: flex; flex-direction: column; height: 100% }
.home-v6 .h6-quote blockquote { flex: 1 1 auto }
.home-v6 .h6-author { margin-top: auto }

@media (min-width: 700px) {
  /* jak wyzej: imie w jednej linii vs w dwoch przesuwalo opis o 25 px */
  .home-v6 .h6-tutor h3 { min-height: calc(2em * 1.3) }
}

/* Kroki na stronie glownej: akapity roznej dlugosci rozjezdzaly sie o 23 px
   przy 768 px. Karta rosnie na pelna wysokosc rzedu, tekst wypelnia reszte. */
.home-v6 .h6-step { display: flex; flex-direction: column; height: 100% }
.home-v6 .h6-step p { flex: 1 1 auto }