/* ============================================================
   KORKI U DOKTORKI — style strony
   Paulina Miziak | korepetycje z biologii i chemii

   Ten plik odpowiada za WYGLĄD strony (kolory, czcionki, układ).
   Teksty zmieniasz w pliku index.html, nie tutaj.

   SPIS TREŚCI
    1. Czcionki
    2. Paleta kolorów
    3. Ustawienia podstawowe
    4. Przyciski
    5. Menu u góry
    6. Hero (pierwszy ekran)
    7. Wspólne elementy sekcji
    8. Problem
    9. Jak pracuję
   10. Korepetycje
   11. Kurs + formularz zapisu
   12. O mnie
   13. Opinie
   14. FAQ
   15. Kontakt
   16. Stopka
   17. Strona polityki prywatności
   18. Pojawianie się przy przewijaniu
   19. Telefony i tablety
   20. Wyłączone animacje
   ============================================================ */


/* ------------------------------------------------------------
   1. CZCIONKI
   Pliki czcionek leżą w folderze "czcionki" — strona działa
   bez internetu, nic nie ładuje się z zewnątrz.
   ------------------------------------------------------------ */

/* Fraunces — czcionka nagłówków (elegancka, z szeryfami) */
@font-face {
  font-family: 'Fraunces';
  src: url('czcionki/fraunces-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  /* polskie znaki: ą ć ę ł ń ó ś ź ż */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Fraunces';
  src: url('czcionki/fraunces-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}

/* Inter — czcionka treści (czysta, bardzo czytelna) */
@font-face {
  font-family: 'Inter';
  src: url('czcionki/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('czcionki/inter-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}


/* ------------------------------------------------------------
   2. PALETA KOLORÓW
   Kolory wyciągnięte bezpośrednio z Twojego logo.
   Chcesz zmienić kolor na całej stronie? Zmień tutaj jedną
   wartość — zadziała wszędzie.
   ------------------------------------------------------------ */

:root {
  /* Kolory z logo */
  --granat:          #06304F;
  --granat-mocny:    #0A3D66;
  --niebieski:       #005090;
  --niebieski-jasny: #60A0D0;
  --blekit-tlo:      #EAF2FA;
  --zloto:           #D9A441;
  --zloto-ciemne:    #B8862B;
  --zielen:          #1F8A70;

  /* Kolory neutralne */
  --biel:            #FFFFFF;
  --biel-ciepla:     #FBFCFD;
  --tekst:           #14293C;
  --tekst-jasny:     #55697C;
  --linia:           #DCE6F0;

  /* Czcionki */
  --font-naglowek: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-tresc:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Odstępy i kształty */
  --szerokosc-strony: 1180px;
  --odstep-sekcji: 120px;
  --zaokraglenie: 18px;
  --zaokraglenie-male: 10px;

  /* Cienie — bardzo delikatne, żeby wyglądało drogo, nie tanio */
  --cien-maly:   0 2px 8px rgba(6, 48, 79, 0.06);
  --cien-sredni: 0 12px 32px rgba(6, 48, 79, 0.10);
  --cien-duzy:   0 28px 70px rgba(6, 48, 79, 0.18);
}


/* ------------------------------------------------------------
   3. USTAWIENIA PODSTAWOWE
   ------------------------------------------------------------ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
  /* iPhone w poziomie sam powiększa tekst — to tego zabrania */
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-tresc);
  font-size: 17px;
  line-height: 1.7;
  color: var(--tekst);
  background: var(--biel);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-naglowek);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--granat);
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--zloto);
  outline-offset: 3px;
  border-radius: 4px;
}

.kontener {
  width: 100%;
  max-width: var(--szerokosc-strony);
  margin: 0 auto;
  padding: 0 24px;
}

/* Link "przejdź do treści" — widoczny dopiero po naciśnięciu Tab.
   Dla osób korzystających z klawiatury zamiast myszki. */
.pomin-menu {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 200;
  padding: 12px 20px;
  background: var(--zloto);
  color: var(--granat);
  font-weight: 600;
  border-radius: 0 0 10px 10px;
  transition: top 0.2s ease;
}
.pomin-menu:focus { top: 0; }

/* Oznaczenie miejsca, które Paulina musi jeszcze uzupełnić.
   Po wpisaniu prawdziwych danych po prostu usuń klasę "brakuje". */
.brakuje {
  display: inline-block;
  padding: 2px 10px;
  font-family: var(--font-tresc);
  font-size: 0.92em;
  font-weight: 500;
  font-style: normal;
  color: var(--zloto-ciemne);
  background: rgba(217, 164, 65, 0.10);
  border: 1px dashed rgba(217, 164, 65, 0.6);
  border-radius: 6px;
}


/* ------------------------------------------------------------
   4. PRZYCISKI
   ------------------------------------------------------------ */

.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 34px;
  font-family: var(--font-tresc);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease,
              background-color 0.25s ease, color 0.25s ease,
              border-color 0.25s ease;
}

/* Przycisk główny — złoty, najważniejsza akcja na stronie */
.przycisk--glowny {
  background: var(--zloto);
  color: var(--granat);
  box-shadow: 0 8px 24px rgba(217, 164, 65, 0.32);
}
.przycisk--glowny:hover {
  background: var(--zloto-ciemne);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(217, 164, 65, 0.42);
}

/* Przycisk drugi na ciemnym tle — sama obwódka */
.przycisk--obwodka {
  background: transparent;
  color: var(--biel);
  border-color: rgba(255, 255, 255, 0.45);
}
.przycisk--obwodka:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: var(--biel);
  transform: translateY(-2px);
}

/* Przycisk drugi na jasnym tle */
.przycisk--jasny {
  background: transparent;
  color: var(--granat);
  border-color: var(--linia);
}
.przycisk--jasny:hover {
  background: var(--blekit-tlo);
  border-color: var(--niebieski);
  transform: translateY(-2px);
}

.przycisk--maly {
  padding: 12px 24px;
  font-size: 15px;
}

.przycisk--szeroki { width: 100%; }


/* ------------------------------------------------------------
   5. MENU U GÓRY (przyklejone)
   ------------------------------------------------------------ */

.menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 18px 0;
  transition: background-color 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}

.menu.menu--przewiniete {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--cien-maly);
  padding: 10px 0;
}

.menu__srodek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.menu__marka { display: flex; align-items: center; gap: 12px; }

.menu__logo {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--biel);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
  transition: box-shadow 0.35s ease;
}
.menu--przewiniete .menu__logo { box-shadow: 0 0 0 1px var(--linia); }

.menu__nazwa {
  font-family: var(--font-naglowek);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--biel);
  transition: color 0.35s ease;
  white-space: nowrap;
}
.menu--przewiniete .menu__nazwa { color: var(--granat); }

.menu__linki {
  display: flex;
  align-items: center;
  gap: 30px;
  list-style: none;
}

.menu__link {
  position: relative;
  font-size: 15.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  transition: color 0.3s ease;
}
.menu--przewiniete .menu__link { color: var(--tekst); }

.menu__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--zloto);
  transition: width 0.3s ease;
}
.menu__link:hover::after,
.menu__link.menu__link--aktywny::after { width: 100%; }
.menu__link:hover,
.menu__link.menu__link--aktywny { color: var(--zloto); }

.menu__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.menu__hamburger span {
  display: block;
  width: 26px;
  height: 2px;
  margin: 0 auto;
  background: var(--biel);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.35s ease;
}
.menu--przewiniete .menu__hamburger span { background: var(--granat); }

.menu--otwarte .menu__hamburger span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu--otwarte .menu__hamburger span:nth-child(2) { opacity: 0; }
.menu--otwarte .menu__hamburger span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ------------------------------------------------------------
   6. HERO — pierwszy ekran strony
   ------------------------------------------------------------ */

.hero {
  position: relative;
  /* dwie linijki: starsze iPhone'y rozumieją tylko pierwszą */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 124px 0 84px;
  background:
    radial-gradient(1000px 620px at 78% 18%, rgba(0, 80, 144, 0.55), transparent 62%),
    radial-gradient(760px 520px at 8% 88%, rgba(31, 138, 112, 0.22), transparent 60%),
    linear-gradient(160deg, #06304F 0%, #0A3D66 52%, #052A44 100%);
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.032) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(closest-side at 50% 42%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(closest-side at 50% 42%, #000 55%, transparent 100%);
  pointer-events: none;
}

.hero__siatka {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  align-items: center;
  gap: 72px;
}

.hero__nadtytul {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 9px 18px 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--niebieski-jasny);
  background: rgba(96, 160, 208, 0.12);
  border: 1px solid rgba(96, 160, 208, 0.28);
  border-radius: 100px;
}
.hero__kropka {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--zielen);
  box-shadow: 0 0 0 4px rgba(31, 138, 112, 0.22);
}

.hero__tytul {
  font-size: clamp(38px, 4.4vw, 58px);
  font-weight: 600;
  color: var(--biel);
  letter-spacing: -0.025em;
  margin-bottom: 22px;
}
.hero__akcent {
  color: var(--zloto);
  font-style: italic;
  position: relative;
  white-space: nowrap;
}
.hero__akcent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.06em;
  height: 3px;
  background: rgba(217, 164, 65, 0.34);
  border-radius: 3px;
}

.hero__opis {
  max-width: 545px;
  font-size: clamp(17px, 1.35vw, 19.5px);
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.80);
  margin-bottom: 34px;
}

.hero__przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 38px;
}

.hero__atuty {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  list-style: none;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hero__atut {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}
.hero__ptaszek {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--zloto);
}

.hero__wizual { position: relative; display: flex; justify-content: center; }

.hero__poswiata {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 118%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(96, 160, 208, 0.30) 0%, transparent 66%);
  filter: blur(18px);
  pointer-events: none;
}

.hero__karta {
  position: relative;
  width: 100%;
  max-width: 396px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  box-shadow: var(--cien-duzy);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: unoszenie 7s ease-in-out infinite;
}
.hero__logo { width: 100%; border-radius: 18px; }

@keyframes unoszenie {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.hero__plakietka {
  position: absolute;
  right: -28px;
  bottom: -32px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px 14px 18px;
  background: var(--biel);
  border-radius: 100px;
  box-shadow: var(--cien-sredni);
  animation: unoszenie 7s ease-in-out infinite 0.6s;
}
.hero__plakietka-ikona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: var(--blekit-tlo);
  border-radius: 50%;
  font-size: 18px;
}
.hero__plakietka-tekst { font-size: 13px; line-height: 1.35; color: var(--tekst-jasny); }
.hero__plakietka-tekst strong {
  display: block;
  font-family: var(--font-naglowek);
  font-size: 16px;
  font-weight: 700;
  color: var(--granat);
}

.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 30px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  transition: color 0.3s ease;
}
.hero__scroll:hover { color: var(--zloto); }
.hero__scroll span {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.42), transparent);
  animation: opadanie 2.2s ease-in-out infinite;
}
@keyframes opadanie {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  45%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  55%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}


/* ------------------------------------------------------------
   7. WSPÓLNE ELEMENTY SEKCJI
   ------------------------------------------------------------ */

.sekcja { padding: var(--odstep-sekcji) 0; }
.sekcja--jasna  { background: var(--blekit-tlo); }
.sekcja--biala  { background: var(--biel); }
.sekcja--ciepla { background: var(--biel-ciepla); }

/* Sekcja na ciemnym granacie — używana przy kursie */
.sekcja--ciemna {
  position: relative;
  color: rgba(255, 255, 255, 0.82);
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(0, 80, 144, 0.55), transparent 60%),
    radial-gradient(700px 500px at 92% 100%, rgba(31, 138, 112, 0.20), transparent 62%),
    linear-gradient(158deg, #06304F 0%, #0A3D66 55%, #052A44 100%);
  overflow: hidden;
}
.sekcja--ciemna h2,
.sekcja--ciemna h3 { color: var(--biel); }

/* ...ale białe karty leżące na ciemnym tle mają ciemne nagłówki */
.sekcja--ciemna .zapis h3,
.sekcja--ciemna .karta h3 { color: var(--granat); }

/* Domyślna wielkość tytułu sekcji — także poza blokiem .naglowek
   (np. w kolumnie tekstu przy korepetycjach czy kontakcie) */
.sekcja h2 {
  font-size: clamp(28px, 3vw, 38px);
  margin-bottom: 18px;
}

/* Nagłówek sekcji: mały napis + duży tytuł + zdanie wprowadzające */
.naglowek {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}
.naglowek--lewy { margin-left: 0; text-align: left; }

.nadtytul {
  display: inline-block;
  margin-bottom: 18px;
  padding: 7px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--niebieski);
  background: rgba(0, 80, 144, 0.08);
  border-radius: 100px;
}
.sekcja--ciemna .nadtytul {
  color: var(--niebieski-jasny);
  background: rgba(96, 160, 208, 0.14);
  border: 1px solid rgba(96, 160, 208, 0.26);
}

.sekcja .naglowek h2 {
  font-size: clamp(31px, 3.5vw, 45px);
  margin-bottom: 20px;
}

.naglowek__opis {
  font-size: 18px;
  line-height: 1.72;
  color: var(--tekst-jasny);
}
.sekcja--ciemna .naglowek__opis { color: rgba(255, 255, 255, 0.72); }

/* Wspólna karta */
.karta {
  padding: 34px 32px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--zaokraglenie);
  box-shadow: var(--cien-maly);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.karta:hover {
  transform: translateY(-4px);
  box-shadow: var(--cien-sredni);
  border-color: rgba(0, 80, 144, 0.22);
}


/* ------------------------------------------------------------
   8. PROBLEM
   ------------------------------------------------------------ */

.problem__siatka {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.problem__karta { display: flex; gap: 20px; align-items: flex-start; }

.problem__ikona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  font-size: 24px;
  background: var(--blekit-tlo);
  border-radius: 14px;
}

.problem__karta h3 { font-size: 21px; margin-bottom: 10px; }
.problem__karta p  { color: var(--tekst-jasny); font-size: 16px; }

/* Zdanie podsumowujące pod kafelkami */
.problem__puenta {
  max-width: 760px;
  margin: 56px auto 0;
  padding: 32px 38px;
  text-align: center;
  font-family: var(--font-naglowek);
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.45;
  color: var(--granat);
  background: var(--biel);
  border-left: 4px solid var(--zloto);
  border-radius: var(--zaokraglenie);
  box-shadow: var(--cien-maly);
}


/* ------------------------------------------------------------
   9. JAK PRACUJĘ — trzy kroki
   ------------------------------------------------------------ */

.kroki {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* Cienka linia łącząca trzy kroki */
.kroki::before {
  content: '';
  position: absolute;
  top: 34px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--linia) 12%, var(--linia) 88%, transparent);
  z-index: 0;
}

.krok { position: relative; z-index: 1; text-align: center; }

.krok__numer {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  margin: 0 auto 26px;
  font-family: var(--font-naglowek);
  font-size: 23px;
  font-weight: 700;
  color: var(--biel);
  background: linear-gradient(150deg, var(--niebieski) 0%, var(--granat) 100%);
  border: 5px solid var(--blekit-tlo);
  border-radius: 50%;
  box-shadow: var(--cien-sredni);
}
.sekcja--biala .krok__numer { border-color: var(--biel); }

.krok h3 { font-size: 22px; margin-bottom: 12px; }
.krok p  { color: var(--tekst-jasny); font-size: 16px; }


/* ------------------------------------------------------------
   10. KOREPETYCJE
   ------------------------------------------------------------ */

.oferta {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 64px;
  align-items: center;
}

.oferta__lista { list-style: none; margin: 30px 0 36px; }

.oferta__lista li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 15px 0;
  border-bottom: 1px solid var(--linia);
}
.oferta__lista li:last-child { border-bottom: none; }

.oferta__ptaszek {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 3px;
  color: var(--zielen);
}

.oferta__lista strong {
  display: block;
  font-weight: 600;
  color: var(--granat);
}
.oferta__lista span { font-size: 15.5px; color: var(--tekst-jasny); }

/* Karta z boku — forma zajęć */
.oferta__karta {
  padding: 40px 38px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: 24px;
  box-shadow: var(--cien-sredni);
}
.oferta__karta h3 { font-size: 23px; margin-bottom: 26px; }

.oferta__wiersz {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px dashed var(--linia);
}
.oferta__wiersz:last-of-type { border-bottom: none; margin-bottom: 26px; }
.oferta__wiersz dt { font-size: 15px; color: var(--tekst-jasny); }
.oferta__wiersz dd {
  font-weight: 600;
  color: var(--granat);
  text-align: right;
}
/* dopisek pod główną wartością, mniejszy i szary */
.oferta__drobne {
  font-size: 13px;
  font-weight: 400;
  color: var(--tekst-jasny);
}

/* Pasek "zostało mało miejsc" */
.oferta__miejsca {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 14px 18px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--granat);
  background: rgba(217, 164, 65, 0.12);
  border: 1px solid rgba(217, 164, 65, 0.34);
  border-radius: 12px;
}
.oferta__kropka {
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  background: var(--zloto);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(217, 164, 65, 0.25);
  animation: pulsowanie 2.4s ease-in-out infinite;
}
@keyframes pulsowanie {
  0%, 100% { box-shadow: 0 0 0 4px rgba(217, 164, 65, 0.25); }
  50%      { box-shadow: 0 0 0 9px rgba(217, 164, 65, 0.05); }
}


/* ------------------------------------------------------------
   11. KURS + FORMULARZ ZAPISU
   Najważniejsza sekcja strony — dlatego ciemne tło i złoty akcent.
   ------------------------------------------------------------ */

.kurs__siatka {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 0.92fr;
  gap: 64px;
  align-items: start;
}

.kurs__etykieta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  padding: 8px 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--granat);
  background: var(--zloto);
  border-radius: 100px;
}

.kurs__tytul { font-size: clamp(31px, 3.5vw, 44px); margin-bottom: 20px; }

.kurs__opis {
  font-size: 18px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.76);
  margin-bottom: 34px;
}

.kurs__moduly { display: grid; gap: 14px; list-style: none; }

.kurs__moduly li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 14px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.kurs__moduly li:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(96, 160, 208, 0.4);
}
.kurs__moduly strong {
  display: block;
  font-family: var(--font-naglowek);
  font-size: 18px;
  font-weight: 600;
  color: var(--biel);
  margin-bottom: 3px;
}
.kurs__moduly span { font-size: 15px; color: rgba(255, 255, 255, 0.66); }
.kurs__ikona { flex-shrink: 0; font-size: 20px; line-height: 1.3; }

/* --- formularz zapisu --- */

.zapis {
  padding: 40px 38px;
  background: var(--biel);
  border-radius: 24px;
  box-shadow: var(--cien-duzy);
}
.zapis h3 { font-size: 25px; margin-bottom: 10px; }
.zapis__wstep {
  font-size: 15.5px;
  color: var(--tekst-jasny);
  margin-bottom: 28px;
}

.zapis__korzysci {
  list-style: none;
  margin-bottom: 28px;
  padding: 20px 22px;
  background: var(--blekit-tlo);
  border-radius: 14px;
}
.zapis__korzysci li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 15px;
  color: var(--tekst);
}
.zapis__korzysci li + li { margin-top: 11px; }
.zapis__gwiazdka { flex-shrink: 0; color: var(--zloto); font-weight: 700; }

.pole { margin-bottom: 18px; }

.pole label {
  display: block;
  margin-bottom: 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--granat);
}

.pole input,
.pole textarea {
  width: 100%;
  padding: 15px 18px;
  font-family: var(--font-tresc);
  font-size: 16px;
  color: var(--tekst);
  background: var(--biel);
  border: 1.5px solid var(--linia);
  border-radius: 12px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.pole textarea { min-height: 130px; resize: vertical; }

.pole input:focus,
.pole textarea:focus {
  outline: none;
  border-color: var(--niebieski);
  box-shadow: 0 0 0 4px rgba(0, 80, 144, 0.10);
}

.pole input::placeholder,
.pole textarea::placeholder { color: #9AABBC; }

/* Zgoda RODO */
.zgoda {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.zgoda input {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--niebieski);
  cursor: pointer;
}
.zgoda label {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--tekst-jasny);
  cursor: pointer;
}
.zgoda a { color: var(--niebieski); text-decoration: underline; }

/* Komunikat po wysłaniu formularza */
.komunikat {
  margin-top: 18px;
  padding: 16px 20px;
  font-size: 15px;
  line-height: 1.6;
  border-radius: 12px;
}
.komunikat[hidden] { display: none; }
.komunikat--info {
  color: var(--granat);
  background: rgba(217, 164, 65, 0.12);
  border: 1px solid rgba(217, 164, 65, 0.36);
}


/* ------------------------------------------------------------
   12. O MNIE
   ------------------------------------------------------------ */

.o-mnie {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}

.o-mnie__wizual { position: relative; }

/* Kadr pionowy — pod zdjęcie portretowe.
   Dopóki nie ma prawdziwego zdjęcia, przycina tymczasową grafikę. */
.o-mnie__zdjecie {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
  box-shadow: var(--cien-sredni);
}

/* Plakietka z liczbą na zdjęciu */
.o-mnie__plakietka {
  position: absolute;
  right: -22px;
  bottom: -26px;
  padding: 20px 26px;
  text-align: center;
  background: var(--biel);
  border-radius: 18px;
  box-shadow: var(--cien-sredni);
}
.o-mnie__liczba {
  display: block;
  font-family: var(--font-naglowek);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--niebieski);
}
.o-mnie__podpis {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tekst-jasny);
}

.o-mnie__tresc h2 { font-size: clamp(30px, 3.3vw, 42px); margin-bottom: 22px; }
.o-mnie__tresc p  { color: var(--tekst-jasny); margin-bottom: 18px; }
.o-mnie__tresc p strong { color: var(--granat); font-weight: 600; }

.o-mnie__podpis-imie {
  margin-top: 28px;
  font-family: var(--font-naglowek);
  font-size: 22px;
  font-weight: 700;
  color: var(--granat);
}


/* ------------------------------------------------------------
   13. OPINIE
   ------------------------------------------------------------ */

.opinie__siatka {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.opinia { display: flex; flex-direction: column; }

/* Plakietka z wynikiem matury — najmocniejszy element opinii */
.opinia__wynik {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 7px 15px;
  font-size: 13px;
  font-weight: 600;
  color: var(--granat);
  background: rgba(31, 138, 112, 0.12);
  border: 1px solid rgba(31, 138, 112, 0.32);
  border-radius: 100px;
}
.opinia__wynik b {
  font-family: var(--font-naglowek);
  font-size: 17px;
  font-weight: 700;
  color: var(--zielen);
}

.opinia__cudzyslow {
  font-family: var(--font-naglowek);
  font-size: 52px;
  line-height: 0.8;
  color: var(--zloto);
  opacity: 0.42;
  margin-bottom: 12px;
}

.opinia__tresc {
  flex: 1;
  font-size: 16px;
  line-height: 1.72;
  color: var(--tekst);
  margin-bottom: 22px;
}

.opinia__autor {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 20px;
  border-top: 1px solid var(--linia);
}
.opinia__inicjal {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  font-family: var(--font-naglowek);
  font-size: 17px;
  font-weight: 700;
  color: var(--niebieski);
  background: var(--blekit-tlo);
  border-radius: 50%;
}
.opinia__kto { font-weight: 600; font-size: 15px; color: var(--granat); }
.opinia__kto span {
  display: block;
  font-weight: 400;
  font-size: 13.5px;
  color: var(--tekst-jasny);
}

/* Karta czekająca na prawdziwą opinię */
.opinia--pusta {
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 240px;
  color: var(--tekst-jasny);
  background: transparent;
  border-style: dashed;
  border-color: rgba(0, 80, 144, 0.28);
  box-shadow: none;
}
.opinia--pusta:hover { transform: none; box-shadow: none; }
.opinia--pusta p { font-size: 15px; }
.opinia--pusta strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-naglowek);
  font-size: 18px;
  color: var(--granat);
}


/* ------------------------------------------------------------
   14. FAQ — pytania rozwijane
   ------------------------------------------------------------ */

.faq { max-width: 820px; margin: 0 auto; }

.faq__pozycja {
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: var(--zaokraglenie);
  box-shadow: var(--cien-maly);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq__pozycja + .faq__pozycja { margin-top: 14px; }
.faq__pozycja--otwarta {
  border-color: rgba(0, 80, 144, 0.3);
  box-shadow: var(--cien-sredni);
}

.faq__pytanie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 24px 28px;
  font-family: var(--font-naglowek);
  font-size: 19px;
  font-weight: 600;
  text-align: left;
  color: var(--granat);
  background: none;
  border: none;
  cursor: pointer;
}

.faq__znak {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
}
.faq__znak::before,
.faq__znak::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--niebieski);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.faq__znak::before { width: 15px; height: 2px; }
.faq__znak::after  { width: 2px; height: 15px; }
.faq__pozycja--otwarta .faq__znak::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

/* Odpowiedź rozwija się płynnie */
.faq__odpowiedz {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}
.faq__pozycja--otwarta .faq__odpowiedz { grid-template-rows: 1fr; }
.faq__odpowiedz > div { overflow: hidden; }
.faq__odpowiedz p {
  padding: 0 28px 26px;
  font-size: 16px;
  color: var(--tekst-jasny);
}
.faq__odpowiedz p + p { padding-top: 0; }


/* ------------------------------------------------------------
   15. KONTAKT
   ------------------------------------------------------------ */

.kontakt {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 64px;
  align-items: start;
}

.kontakt__kanaly { display: grid; gap: 14px; margin-top: 32px; }

.kontakt__kanal {
  display: flex;
  align-items: center;
  gap: 17px;
  padding: 19px 22px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: 14px;
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.kontakt__kanal:hover {
  transform: translateX(4px);
  border-color: var(--niebieski);
  box-shadow: var(--cien-maly);
}

.kontakt__ikona {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  font-size: 21px;
  background: var(--blekit-tlo);
  border-radius: 12px;
}
.kontakt__etykieta {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tekst-jasny);
}
.kontakt__wartosc { font-weight: 600; color: var(--granat); }

.kontakt__formularz {
  padding: 40px 38px;
  background: var(--biel);
  border: 1px solid var(--linia);
  border-radius: 24px;
  box-shadow: var(--cien-sredni);
}
.kontakt__formularz h3 { font-size: 24px; margin-bottom: 26px; }


/* ------------------------------------------------------------
   16. STOPKA
   ------------------------------------------------------------ */

.stopka {
  /* dolny odstęp uwzględnia pasek gestów na iPhonie */
  padding: 64px 0 calc(34px + env(safe-area-inset-bottom));
  color: rgba(255, 255, 255, 0.62);
  background: var(--granat);
}

.stopka__gora {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.stopka__marka { display: flex; align-items: center; gap: 14px; }
.stopka__logo {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--biel);
}
.stopka__nazwa {
  font-family: var(--font-naglowek);
  font-size: 21px;
  font-weight: 700;
  color: var(--biel);
}
.stopka__podpis { font-size: 14px; }

.stopka__linki { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; }
.stopka__linki a { font-size: 15px; transition: color 0.25s ease; }
.stopka__linki a:hover { color: var(--zloto); }

.stopka__dol {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
  font-size: 13.5px;
}
.stopka__dol a { text-decoration: underline; }
.stopka__dol a:hover { color: var(--zloto); }
.stopka__prawne { display: flex; flex-wrap: wrap; gap: 8px 22px; }


/* ------------------------------------------------------------
   17. STRONA POLITYKI PRYWATNOŚCI
   ------------------------------------------------------------ */

.dokument {
  max-width: 800px;
  margin: 0 auto;
  padding: 160px 24px 100px;
}
.dokument h1 { font-size: clamp(32px, 4vw, 44px); margin-bottom: 14px; }
.dokument__data { font-size: 14.5px; color: var(--tekst-jasny); margin-bottom: 48px; }
.dokument h2 {
  font-size: 24px;
  margin: 42px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--linia);
}
.dokument p, .dokument li { color: var(--tekst-jasny); margin-bottom: 14px; }
.dokument ul, .dokument ol { padding-left: 24px; margin-bottom: 20px; }
.dokument a { color: var(--niebieski); text-decoration: underline; }
.dokument__powrot { display: inline-block; margin-top: 40px; }


/* ------------------------------------------------------------
   18. POJAWIANIE SIĘ ELEMENTÓW PRZY PRZEWIJANIU
   ------------------------------------------------------------ */

.pojaw {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.pojaw.pojaw--widoczny { opacity: 1; transform: translateY(0); }

/* Elementy w rzędzie pojawiają się jeden po drugim */
.pojaw--2 { transition-delay: 0.10s; }
.pojaw--3 { transition-delay: 0.20s; }
.pojaw--4 { transition-delay: 0.30s; }


/* ------------------------------------------------------------
   19. TELEFONY I TABLETY
   ------------------------------------------------------------ */

@media (max-width: 1080px) {
  .oferta, .kurs__siatka, .o-mnie, .kontakt { gap: 44px; }
  .opinie__siatka { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  :root { --odstep-sekcji: 84px; }

  .menu__hamburger { display: flex; }

  .menu__linki {
    position: fixed;
    top: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 26px;
    width: min(320px, 84vw);
    height: 100vh;
    height: 100svh;
    padding: 90px 34px;
    /* żeby menu dało się przewinąć na niskich ekranach */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--granat);
    box-shadow: var(--cien-duzy);
    transform: translateX(105%);
    transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .menu--otwarte .menu__linki { transform: translateX(0); }
  .menu__linki .menu__link { font-size: 19px; color: rgba(255, 255, 255, 0.9); }
  .menu__linki .przycisk { margin-top: 10px; }

  .hero { padding: 128px 0 80px; }
  .hero__siatka { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero__wizual { order: -1; }
  .hero__karta { max-width: 300px; padding: 14px; }
  .hero__opis { margin-left: auto; margin-right: auto; }
  .hero__przyciski { justify-content: center; }
  .hero__atuty { justify-content: center; }
  .hero__scroll { display: none; }

  /* na telefonie plakietka znika — imię i tak jest w logo */
  .hero__plakietka { display: none; }

  .naglowek { margin-bottom: 44px; }

  .problem__siatka { grid-template-columns: 1fr; }

  .kroki { grid-template-columns: 1fr; gap: 36px; }
  .kroki::before { display: none; }

  .oferta, .kurs__siatka, .o-mnie, .kontakt { grid-template-columns: 1fr; }
  .o-mnie__wizual { max-width: 400px; margin: 0 auto; }
  .o-mnie__plakietka { right: 0; }

  .zapis, .kontakt__formularz, .oferta__karta { padding: 32px 26px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .kontener { padding: 0 18px; }

  .hero__przyciski { flex-direction: column; align-items: stretch; }
  .hero__przyciski .przycisk { width: 100%; }
  .menu__nazwa { font-size: 17px; }
  .hero__atuty { flex-direction: column; align-items: center; gap: 12px; }

  .karta, .problem__karta { padding: 26px 22px; }
  .problem__karta { flex-direction: column; gap: 16px; }
  .problem__puenta { padding: 26px 24px; }

  .zapis, .kontakt__formularz, .oferta__karta { padding: 28px 22px; }
  .faq__pytanie { padding: 20px 22px; font-size: 17px; }
  .faq__odpowiedz p { padding: 0 22px 22px; }

  .o-mnie__plakietka { position: static; margin-top: 16px; }

  .stopka__gora { flex-direction: column; gap: 28px; }
}


/* ------------------------------------------------------------
   20. DLA OSÓB, KTÓRE WYŁĄCZYŁY ANIMACJE W SYSTEMIE
   ------------------------------------------------------------ */

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