/* Nunito — normal */
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-extralight.woff2') format('woff2'); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-light.woff2')       format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-regular.woff2')     format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-medium.woff2')      format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-semibold.woff2')    format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-bold.woff2')        format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-extrabold.woff2')   format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-black.woff2')       format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }

/* Nunito — italic */
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-extralightitalic.woff2') format('woff2'); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-lightitalic.woff2')       format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-italic.woff2')            format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-mediumitalic.woff2')      format('woff2'); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-semibolditalic.woff2')    format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-bolditalic.woff2')        format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-extrabolditalic.woff2')   format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('https://static.igem.wiki/teams/5865/fonts/nunito/nunito-blackitalic.woff2')       format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }




/* --------------------------------------------------
   VARIABLES
-------------------------------------------------- */
:root {
  --nav-h: 4.5rem;
}

/* --------------------------------------------------
   BASE
-------------------------------------------------- */
html { height: 100%; }

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: column;
  padding-top: var(--nav-h);
  font-family: 'Nunito', sans-serif;
  font-weight: 200; /* light */
  font-size: 14pt;
  line-height: 20pt;
  color: #000; /* czarny tekst */
}

/* PATCH: wyłącz poziomy scroll na całym serwisie */
html, body {
  width: 100%;
  overflow-x: clip;           /* lepsze niż hidden (wydajność, brak paska) */
}

@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }  /* fallback dla starszych przeglądarek */
}

/* (opcjonalnie) docięcie ewentualnych „wystających” pełnoekranowych bloków */
.fullwidth-lottie,
.section-wrapper,
section {
  overflow-x: clip;
}

@supports not (overflow: clip) {
  .fullwidth-lottie,
  .section-wrapper,
  section { overflow-x: hidden; }
}


/* --------------------------------------------------
   LAYOUT HELPERS
-------------------------------------------------- */
main,
main.flex-grow-1,
.page-content {
  flex: 1 0 auto;
}

.page-section {
  margin-bottom: 40px;
}

#screen1 .hero-title {
  margin-top: -50vh; /* przesuwa nagłówek lekko do góry */
}

#screen2, #screen3 {
  justify-content: flex-start; /* elementy przy górze sekcji */
  padding-top: 0;           /* dopasuj odległość od góry */
}


.left-aligned { margin-left: auto; }

.bg-dark  { background-color: #343a40 !important; }
.bg-hero  { background-color: #45b06cff; }


/* --------------------------------------------------
   CAROUSELS
-------------------------------------------------- */

.carousel {
  border-radius: 12px;   /* zaokrąglone rogi karuzeli */
  overflow: hidden;      /* przycina obrazki do kształtu */
  margin-top: 30px;
  margin-bottom: 30px;
}

.carousel img {
  border-radius: 8px;   /* lekko zaokrąglone rogi */
  box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* cień pod zdjęciem */
}

/* --------------------------------------------------
   TYPOGRAPHY
-------------------------------------------------- */
.gradient-text {
  display: block;
  margin: 2rem auto;
  width: 100%;
  text-align: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: clamp(1.8rem, 6vw, 3rem);
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
  background: linear-gradient(89.65deg, #0099FF 0%, #00EF9F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.h1-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;    /* Bold */
  font-size: clamp(2rem, 6vw, 5rem); 
  margin: 0 0 0 0;           /* Możesz dodać własne odstępy */
  text-align: left;
}

.section-heading {
  font-family: 'Nunito', sans-serif;
  font-weight: 400; /* regular */
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 1.2;
  margin-bottom: 20px; 
}

.subsection-heading {
  font-family: 'Nunito', sans-serif;
  font-weight: 400; /* regular */
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  line-height: 1.3;
  margin-bottom: 15px; 
}

.container {
  max-width: 100%;
  padding-left: clamp(1rem, 5vw, 20rem);
  padding-right: clamp(1rem, 5vw, 20rem);
}


/* === wrapper dla kafelków i menu === */
.content-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;        /* pełna szerokość */
  margin: 0 auto;     /* wyśrodkowanie w razie potrzeby */
  padding: 0 1rem;    /* minimalne marginesy po bokach */
  gap: 5rem;          /* odstępy między sekcjami */
}


.content-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  opacity: 0;
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.content-section h2 {
  font-size: clamp(1.5rem, 3vw, 3rem); /* rośnie na dużych ekranach */
  margin-bottom: 1rem;
}

.content-section p {
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  line-height: 1.6;
}

/* ------------------ FONT SIZE & LINE HEIGHT ------------------ */
.content-section h2 {
  font-size: clamp(2rem, 5vw, 3.5rem); /* rośnie wraz z ekranem */
  line-height: 1.3;
  margin-bottom: 1rem;
}

.content-section p,
.text-column p,
.overlay-text {
  font-size: clamp(1.25rem, 3vw, 2rem);
  line-height: 1.5;
  margin: 0 0 1.5rem 0; /* odstęp między paragrafami */
}

/* ------------------ RESPONSYWNE MARGINS I PADDINGI ------------------ */
.fullwidth-lottie,
.section-wrapper,
.section {
  padding: 2rem 1rem;
  margin: 0 auto;
}

.text-column {
  padding: 1rem;
}

/* dla dużych ekranów można zwiększyć padding */
@media (min-width: 1200px) {
  .fullwidth-lottie,
  .section-wrapper {
    padding: 3rem 4rem;
  }
  .text-column {
    padding: 2rem;
  }
}


/* kafelki w rzędzie odstęp od boków */
.tiles-row {
  display: flex;
  gap: 40px;           /* stały odstęp między kafelkami */
  flex-wrap: wrap;     /* jeśli brak miejsca, przechodzi do nowego wiersza */
}

.tile {
  background-color: #D9F1FF;
  flex: 1 1 288px;     /* minimum 288px, rośnie i kurczy się automatycznie */
  padding: 20px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Ikonka w okręgu z gradientem */
.icon-circle {
  width: 80px;
  height: 80px;
  margin: 0 auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #00EF9F, #0099FF);
}

.icon-circle--img {
  background: none !important;
  border-radius: 0;         /* lub 50% jeśli chcesz koło z obrazka */
  overflow: hidden;
}
.icon-circle--img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: inherit;   /* odziedziczy 0 lub 50% z rodzica */
}


/* Tekst pod ikonką */
.tile-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 100; /* Light */
  font-size: 14pt;  /* ~24px */
  line-height: 20px;
  margin-top: 20px;
  color: #000;
}

/* Callouts */
.bd-callout {
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid #e9ecef;
  border-left-width: .25rem;
  border-radius: .25rem;
}
.bd-callout h4 { margin-bottom: 1.25rem; }
.bd-callout p:last-child { margin-bottom: 0; }
.bd-callout code { border-radius: .25rem; }
.bd-callout+.bd-callout { margin-top: -.25rem; }
.bd-callout-info    { border-left-color: #5bc0de; }
.bd-callout-warning { border-left-color: #f0ad4e; }
.bd-callout-danger  { border-left-color: #d9534f; }

details ul {
  margin-top: 0.5em;
}

/* --------------------------------------------------
   NAVBAR
-------------------------------------------------- */
/* -------------------------------
   Navbar ogólny
-------------------------------- */
/* -------------------------------
   Navbar ogólny
-------------------------------- */
.navbar {
  height: auto;
  background-color: white !important;
  font-family: 'Nunito', sans-serif;
  position: relative;
}

.navbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px; /* grubość kreski */
  background: linear-gradient(90deg, #00EF9F, #0099FF);
}

/* linki w menu */
.navbar .nav-link {
  font-family: 'Nunito', sans-serif;
  font-weight: 300;          /* light */
  font-size: 14pt;
  padding: 5px 12px;         /* vertical 5px, horizontal 12px */
  margin-right: 20px;        /* odstęp między tabami */
  color: black !important;
  text-decoration: none;
  transition: all 0.3s ease;
}



/* hover na głównej sekcji */
.navbar .nav-item.dropdown:hover > .nav-link {
  font-weight: 500;           /* medium */
  background: linear-gradient(135deg, #00EF9F, #0099FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Dropdown widoczny również, gdy rodzic dostał klasę .open (z JS) */
.nav-item.dropdown.open > .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
}


.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active > .nav-link {
  background: linear-gradient(90deg, #ff7e5f, #feb47b); /* przykładowy gradient */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700; /* trochę grubsza czcionka */
  transform: scale(1.02 ); /* lekko powiększa tekst */
  transition: all 0.3s ease; /* płynna animacja */
}

/* Reset przy braku hover */
.navbar-nav .nav-link {
  transition: all 0.3s ease;
}


/* usuwamy strzałki dropdownów */
.navbar .dropdown-toggle::after,
.navbar .dropdown-toggle::before {
  display: none !important;
  content: none !important;
}


/* -------------------------------
   Poziome dropdowny
-------------------------------- */
.nav-item.dropdown {
  position: relative;
}

/* dropdown ukryty domyślnie */
/* dropdown ukryty domyślnie */
.navbar .dropdown-menu {
  display: flex;
  flex-direction: row;
  gap: 15px;
  position: absolute;
  top: calc(100% + 18px); /* przesunięcie o dodatkowe 8px w dół */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;

 
  background-color: white;      /* biały prostokąt */
  border-radius: 12px;          /* zaokrąglone rogi */
  padding: 10px 20px;           /* wewnętrzne odstępy */
  box-shadow: none;             /* bez cienia */
  border: none;                 /* brak ramki */
  

  max-width: calc(100vw - 20px);
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
}

.nav-item.dropdown:hover::before {
  content: "";
  position: absolute;
  top: 100%;      /* tuż pod linkiem */
  left: 0;
  width: 100%;
  height: calc(100% + 18px);   /* wysokość luki */
  pointer-events: auto; /* mysz „przechodzi” po tej strefie */
}


/* pokaz dropdown po najechaniu */
.nav-item.dropdown:hover > .dropdown-menu,
.nav-item.dropdown .dropdown-menu:hover {
    opacity: 1;
    pointer-events: auto;
}



/* elementy w dropdownie */
.navbar .dropdown-menu > li {
  flex: 0 0 auto;
  text-align: center;
}

/* dropdown items */
.navbar .dropdown-menu .dropdown-item {
  font-family: 'Nunito', sans-serif;
  font-weight: 300;          /* light */
  font-size: 14pt;
  padding: 5px 12px;         /* vertical 5px, horizontal 12px */
  border-radius: 4px;
  transition: color 0.3s ease, transform 0.2s ease, letter-spacing 0.2s ease;
}

/* hover na elementach dropdown */
.navbar .dropdown-menu .dropdown-item:hover {
  background: transparent !important; /* brak tła */
  color: #0099FF !important;          /* niebieski tekst */
  transform: scale(1.05);
  letter-spacing: 0.2px;                 /* medium – trochę grubszy */
}


/* Drobne poprawki dla małych ekranów */
@media (max-width: 991px) {
  .navbar .dropdown-menu {
    position: static;
    flex-direction: column;
    display: none; /* bootstrap collapse nadal działa */
  }
  .nav-item.dropdown:hover > .dropdown-menu {
    display: block;
  }
}

@media (max-width: 576px) {
  .navbar .dropdown-menu {
    left: 0;
    transform: none;
    max-width: 100%;
    flex-wrap: wrap;
    gap: 10px;
  }
}

@media (max-width: 992px) {
  .content-layout {
    flex-direction: column;
  }
  .side-menu {
    position: relative;
    top: 0;
    flex: 1 1 auto;
    margin-bottom: 1rem;
  }
}


@media (max-width: 768px) {
  .tiles-row {
    gap: 20px;
  }
  .tile {
    flex: 1 1 100%; /* jeden kafelek na wiersz */
  }
}
/* --------------------------------------------------
   SIDE MENU
-------------------------------------------------- */
/* === układ: menu + treść === */
/* układ menu + treść obok siebie */
@media (max-width: 992px), (max-height: 800px) {
  .content-layout {
    flex-direction: column; /* menu nad treścią */
  }
  .side-menu {
    position: relative; /* już nie sticky */
    max-height: none;
    margin-bottom: 2rem; /* odstęp od treści */
  }
}
.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu li {
  position: relative;
}

/* strzałka tylko dla linków z submenu */
.menu-list > li > a.has-submenu::after {
  content: "\f285"; /* ikona bootstrap: chevron-right */
  font-family: "bootstrap-icons";
  float: right;
  font-size: 0.9em;
  color: #0099FF;
  transition: transform 0.3s ease;
}

/* po rozwinięciu obracamy w dół */
.menu-list > li > a.has-submenu.submenu-open::after {
  transform: rotate(90deg);
}

.content-layout {
  display: flex;
  flex-direction: row;
  gap: 40px;
  min-height: 100vh; /* sekcja wysoka na cały ekran */
}

.side-menu {
  position: relative;
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  max-height: calc(100vh - 24px);
  overflow: hidden; /* hide overflow, scroll on menu-list instead */
  box-sizing: border-box;
  padding-bottom: 20px;
}

.side-menu .menu-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto; /* scrolls inside the frame */
}


/* Gradientowa ramka */
.side-menu::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 14px;
  padding: 2px;
  background: linear-gradient(135deg, #00EF9F, #0099FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: -1;
}

/* Treść obok menu */
.content-area {
  flex: 1; 
  min-width: 0;
}


/* sticky menu poniżej navbara */
.sticky-top {
  position: sticky;
  top: 89px;
  z-index: 1000;
}

/* menu listy bez kropek */
.menu-list,
.menu-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.menu-list li ul li a {
  font-weight: 300; /* light */
}

.menu-list ul {
  max-height: 0;
  overflow: auto;
  transition: max-height 0.3s ease;
}
.menu-list ul.open {
  max-height: 500px; /* lub auto, ale z animacją lepiej działa max-height */
}


/* Główne li – odstęp między głównymi sekcjami */
.side-menu .menu-list > li {
  margin-bottom: 15px;
}

/* Podsekcje – li w ul w li – odstęp między podsekcjami */
.side-menu .menu-list li ul li {
  margin-bottom: 15px; /* taki sam jak główne li */
}

/* Odstęp między linkiem głównej sekcji a ul z podsekcjami */
.side-menu .menu-list li > ul {
  margin-top: 15px;    /* taki sam jak odstęp między głównymi sekcjami */
  padding-left: 20px;  /* wcięcie podsekcji */
}

.side-menu .has-children > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.side-menu .arrow {
  margin-left: 0.5em;
  transition: transform 0.3s;
}

.side-menu .has-children.collapsed .arrow {
  transform: rotate(0deg);
}

.side-menu .has-children.open .arrow {
  transform: rotate(90deg);
}

.side-menu .submenu, .side-menu li ul {
  display: none;
  padding-left: 1em;
}

/* elementy menu */
.menu-list > li {
  margin-bottom: 15px;
}

.menu-list a {
  font-family: inherit;       /* dziedziczy font z body */
  font-size: inherit;         /* dziedziczy rozmiar z body */
  font-weight: inherit;       /* dziedziczy wagę z body (nie bold) */
  color: inherit;             /* dziedziczy kolor z body */
  text-decoration: none;
  display: block;
  position: relative;
  transition: all 0.3s ease;
}

/* gradientowy hover */
.menu-list a:hover {
  background: linear-gradient(135deg, #00EF9F, #0099FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* gradientowa kreska pod tekstem */
.menu-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px; 
  width: 0;
  background: linear-gradient(135deg, #00EF9F, #0099FF);
  transition: width 0.3s ease;
}

.menu-list a.active {
  color: #0099FF;      /* niebieski dla aktywnej sekcji */
  font-weight: 600;    /* trochę pogrubiony */
}

.menu-list a:hover::after {
  width: 100%;
}

.content-area {
  margin: 0;
  padding: 0;
}



/* subchaptery */
.menu-list ul {
  margin: 5px 0 0 15px;
}

.menu-list ul li {
  margin-bottom: 8px;
  font-weight: 400; /* lżejszy font dla subchapterów */
}


.menu-list li.has-children ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* submenu rozwinięte, kiedy rodzic ma klasę .open */
.menu-list li.has-children.open > ul {
  max-height: 1000px; /* wystarczająco duże, żeby pokazać całość */
}



/* --------------------------------------------------
MARGINS
-------------------------------------------------- */
/* Podstawowe marginesy */
:root {
  --indent-x: 2rem; /* x */
}

/* Section heading: margines 0 */
.page-section > .section-heading {
  margin-left: 0;
}

/* Subsection heading: margines x */
.subsection-heading {
  margin-left: var(--indent-x);
}

/* Treść (p, ul, ol, details) zawsze 2x */
.page-section p,
.page-section ul,
.page-section ol,
.page-section details {
  margin-left: calc(2 * var(--indent-x));
}

/* Karuzele i inne divy wewnątrz subsections wyrównane do treści */
.page-section .carousel {
  margin-left: calc(2 * var(--indent-x));
  margin-right: 0;
}

/* Obrazki w karuzeli pozostają wycentrowane w swojej kolumnie */
.page-section .carousel img {
  margin-left: auto;
  margin-right: auto;
}


/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */
footer {
  flex: 0 0 auto;
  margin-top: 2rem;
  padding: 0;
}

.footer-row .col-12.col-lg-9 {
  flex: 0 0 100%;
  max-width: 100%;
}

.footer-row .col-12.col-lg-auto {
  display: flex;
  width: 100%;
  justify-content: center;  /* środek w poziomie */
  gap: 1rem;
}


/* License & repo links */
.subfoot {
  color: white;
  text-decoration: none;
}
.subfoot:hover {
  color: #66d9ef;
  text-decoration: none;
}

/* footer wrapper */
.footer-content,
.footer-box {
  background: linear-gradient(83.4deg, #0099FF 0%, #00EF9F 100%);
  border-radius: 20px;
  padding: 1rem;
}

/* generic footer links */
footer a {
  color: white;
  font-weight: bold;
  text-decoration: none;
}
footer a:hover {
  color: #66d9ef;
  text-decoration: none;
}


/* --------------------------------------------------
   SPONSOR SCROLLER  (NEW CAROUSEL)
-------------------------------------------------- */
.logo-scroller {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: flex-start;

  margin-inline: 8px;          /* mały margines po bokach */
}


.logo-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 2rem;
  width: max-content;            /* % w keyframes liczy się od TU */
  will-change: transform;
}


.logo-track a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;                 /* JEDNAKOWA wysokość tła */
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0,0,0,.12);
}


.logo-track img {
  max-height: 50px;
  width: auto;
  object-fit: contain;
  display: block;
}


.important-logos {
  display: flex;
  align-items: center;
  justify-content: center;   /* wyśrodkowanie */
  gap: 1rem;
}

.important-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;              /* taka sama „karta” jak w scrollerze */
  background: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  box-shadow: 0 0 4px rgba(0,0,0,.12);
}

.important-logos img {
  max-height: 80px;          /* jak w .logo-track img */
  width: auto;
  object-fit: contain;
  display: block;
}

/* SOCIAL: bez przycinania i z oddechem */
.footer-icons{
  overflow: visible;
  flex-wrap: wrap;
  gap: 1.1rem 0.1rem;
  align-items: center;
  /* usuń: height/min-height/padding-block */
}



.footer-icons a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 80px;      /* NOWE: taka sama wysokość jak important-logos a */
  width: 60px;       /* NOWE: kwadrat – zero optycznego „zjeżdżania” */
  padding: 0;        /* było 6px – niepotrzebne */
  border-radius: 8px;/* opcjonalnie spójnie z kartami */
}


.footer-icons .bi{
  font-size: 1.6rem;
  line-height: 1;
  display: block;           /* NOWE: usuwa baseline-bleed */
  vertical-align: middle;   /* NOWE */
}


/* Desktop: social „przytulone” z lewej, important-logos idealnie w środku */
@media (min-width: 992px) {
  .footer-row .col-12.col-lg-auto{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
    padding-block: 4px;
  }
  .footer-icons{ justify-self: end; align-self: center; } /* już masz */
  .important-logos{ justify-self: center; }
}





/* Animation defined via JS variable --scroll-offset */
@keyframes logo-scroll {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(var(--scroll-offset),0,0); }
}





/* --------------------------------------------------
   UTILITIES
-------------------------------------------------- */

.word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  margin-right: 0.3em; /* odstęp między słowami */
}

.word.show {
  opacity: 1;
  transform: translateY(0);
}

/* Legacy rule – kept if other pages still reference it */
.carousel-img {
  max-height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  margin: 0 auto;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.5));
}

.no-dots {
  list-style-type: none;
  padding-left: 0;
  margin-left: 0;
}

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230066CC' stroke-width='2' viewBox='0 0 16 16'><path d='M11.354 1.646L5.707 8l5.647 5.646'/></svg>");
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%230066CC' stroke-width='2' viewBox='0 0 16 16'><path d='M4.646 1.646L10.293 8 4.646 14.354'/></svg>");
}


.carousel-indicators button {
  background-color: #0099FF;   /* niebieskie kropki */
}

.carousel-indicators .active {
  background-color: rgb(138, 198, 247);   /* aktywna kropka jaśniejsza */
}

/* Sponsor page header logo */
.logo-img {
  width: 27px;
  height: 30px;
  object-fit: contain; /* zachowa proporcje obrazka */
}


/* --------------------------------------------------
   MEDIA QUERIES
-------------------------------------------------- */
@media (max-width: 992px) {
  .footer-row > div {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .footer-icons { flex-wrap: wrap; }
}

@media (max-width: 576px) {
  .logo-img { height: 2rem; }
}
/* --- SIDE MENU (docelowe: obok treści, pionowo wycentrowane w sekcji) --- */


/* Lista menu */
.menu-list,
.menu-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.menu-list > li {
  margin-bottom: 15px;
}

.menu-list a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: none;
  display: block;
  position: relative;
  transition: all 0.3s ease;
}

/* Gradientowy hover i aktywna sekcja */
.menu-list a:hover {
  background: linear-gradient(135deg, #00EF9F, #0099FF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.menu-list a.active {
  color: #0099FF;
  font-weight: 600;
}
.menu-list a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px; 
  width: 0;
  background: linear-gradient(135deg, #00EF9F, #0099FF);
  transition: width 0.3s ease;
}
.menu-list a:hover::after {
  width: 100%;
}

/* Podmenu */
.side-menu .has-children > a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.side-menu .arrow {
  margin-left: 0.5em;
  transition: transform 0.3s ease;
}
.side-menu .has-children.collapsed .arrow { transform: rotate(0deg); }
.side-menu .has-children.open .arrow { transform: rotate(90deg); }

.menu-list li.has-children ul {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding-left: 1em;
}
.menu-list li.has-children.open > ul {
  max-height: 1000px;
}

.menu-list ul li {
  margin-bottom: 8px;
  font-weight: 400;
}

/* === FIX: stałe menu po lewej, wycentrowane na ekranie === */
.content-wrapper { position: relative; }

/* Szerokość menu — jak wcześniej: 260px */
:root { --side-w: 260px; --side-gap: 40px; }

/* Układ sekcji z menu obok treści */
.content-layout {
  display: block;              /* odpinamy flex głównego wrappera */
  min-height: 100vh;
}

.side-menu {
  position: fixed;
  left: clamp(16px, 5vw, 48px);     /* bezpieczny odstęp od lewej */
  top: 50%;
  transform: translateY(-50%);
  width: var(--side-w);
  max-height: none;     /* usuwa limit wysokości */
  height: auto;         /* ramka dopasuje się do treści */
  /* max-height: calc(100vh - 24px);
  overflow: auto;                   przewijanie, gdy treść menu długa */
  z-index: 1001;
  background: #fff;
  border-radius: 12px;
  padding: 20px;
}

/* gradientowa ramka działa poprawnie przy position:relative */
.side-menu { position: fixed; }
.side-menu::before { position: absolute; }

/* Treść przesunięta w prawo tak, by nie wchodziła pod menu */
.content-area {
  margin-left: calc(var(--side-w) + var(--side-gap) + clamp(16px, 5vw, 48px));
  min-width: 0;
}

/* Dostrajanie elementu przełącznika, jeśli używany */
.menu-toggle {
  position: fixed;
  left: calc(clamp(16px, 5vw, 48px) + var(--side-w) + 8px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 1002;
}

/* Na węższych ekranach menu wraca nad treść (układ mobilny) */
@media (max-width: 992px) {
  .side-menu {
    position: relative;
    top: 0;
    transform: none;
    width: auto;
    max-height: none;
    left: 0;
  }
  .content-area {
    margin-left: 0;
  }
  .menu-toggle {
    position: static;
    transform: none;
    margin: .5rem 0;
  }
}

/* Gdy wysokość okna bardzo mała — również tryb „nad treścią” */
@media (max-height: 700px) and (min-width: 993px) {
  .side-menu {
    top: 16px;
    transform: none;
    bottom: 16px;               /* rozciągnięte między top/bottom */
  }
}

/* Treść – bez dodatkowych marginesów w lewo (układ robi grid) */
.content-wrapper .content-area { margin-left: 0; }  :contentReference[oaicite:2]{index=2}

/* 4) (jeśli używasz jeszcze gdzieś .sticky-top) – nie na sztywno 89px */
.sticky-top { top: calc(var(--nav-h, 4.5rem) + 12px) !important; }


.content-wrapper { position: relative; } /* kontener „graniczny” */ :contentReference[oaicite:1]{index=1}

/* Dwukolumnowy układ tylko dla tej sekcji */
.content-wrapper .content-layout {
  display: grid;                               
  grid-template-columns: var(--side-w) 1fr;      
  column-gap: var(--side-gap);
  align-items: start;
  min-height: auto;                             
}

/* Sticky, wycentrowane względem viewportu, ale TYLKO w kontenerze */
.content-wrapper .side-menu {
  position: sticky;
  top: 50vh;                       
  transform: translateY(-50%);   
  max-height: calc(100vh - 24px);  
  overflow: auto;
  align-self: start;
  width: var(--side-w);
}


/* Mobile: menu nad treścią jak wcześniej */
@media (max-width: 992px) {
  .content-wrapper .content-layout {
    display: block;
  }
  .content-wrapper .side-menu {
    position: relative;
    top: 0;
    transform: none;
    max-height: none;
    width: auto;
    margin-bottom: 1rem;
  }
}
.side-menu .has-children.open > .submenu,
.side-menu .has-children.open > ul {
  display: block;
}
/* Menu domyślnie niewidoczne, aż do startu sekcji #ch1 */


.content-wrapper .side-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}

/* Po aktywacji — normalnie widoczne i klikalne */
.content-wrapper .side-menu.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}




/* === SIDE MENU: widoczne dopiero od About us + centrowanie w obrębie sekcji === */
.content-wrapper {
  --menu-stick: calc(var(--nav-h, 4.5rem) + 16px);
  --menu-half: 220px;
}




/* Grid tylko w tej sekcji: kolumna menu + kolumna treści */
.content-wrapper .content-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  column-gap: 40px;
  align-items: start;
  min-height: auto;
}


/* Domyślnie menu ukryte (do czasu aż About us dojedzie do góry) */
.content-wrapper .side-menu {
  position: sticky;

  top: max(var(--menu-stick), calc(50vh - var(--menu-half)));
  max-height: calc(100vh - max(var(--menu-stick), calc(50vh - var(--menu-half))) - 16px);
  overflow: auto;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}



/* Po aktywacji (JS doda .is-active) – normalnie widoczne i klikalne */
.content-wrapper .side-menu.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}


/* Mobile: zwykły stos, bez sticky/centrowania */
@media (max-width: 992px) {
  .content-wrapper .content-layout { display: block; }
  .content-wrapper .side-menu {
    position: relative;
    top: 0;
    max-height: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: none;
  }
}
/* =========================================================
   EDUCATION — pełny styl sekcji (scoped; bez zmian font-family/weight)
   ========================================================= */

.education-page{
  /* kolory / gradienty */
  --c-blue: #0099FF;
  --c-grad: linear-gradient(135deg,#00EF9F,#0099FF);

  /* szerokości / kontenery */
  --edu-maxw: 1100px;

  /* pas + koło */
  --edu-pad: clamp(20px, 4vw, 48px); /* padding niebieskiego pasa */
  --ps-nav: 28px;                    /* szerokość kolumny z kropkami */
  --ps-gap: clamp(28px, 5vw, 72px);  /* odstęp między kolumnami w pasie */
}

/* ——— HARD RESET WCIĘĆ dla h4, h5, p w CAŁEJ sekcji ——— */
.education-page :where(h4,h5,p){
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}
/* kasuje globalne wcięcia treści w .page-section (p/ul/ol/details) */
.education-page .page-section :where(p,ul,ol,details){ margin-left:0 !important; }

/* zero przerwy pod h4/h5 gdy zaraz po nim jest akapit */
.education-page :is(h4,h5){ margin-top:0; margin-bottom:0; }
.education-page :is(h4,h5) + p{ margin-top:0 !important; }

/* ——— spójna szerokość sekcji ——— */
.education-page .tiles-row,
.education-page .page-section,
.education-page .numbers,
.education-page .report-tabs,
.education-page .reels{
  width: min(var(--edu-maxw), 92vw);
  margin-left: auto;
  margin-right: auto;
}

/* =========================================================
   FIX: H4 + P PRZED niebieskim pasem (#ch2)
   — mają startować w tej samej kolumnie co tekst w pasie
========================================================= */
.education-page #ch2 { width: 100%; }

/* mobile: tylko padding pasa */
.education-page #ch2 > .section-heading,
.education-page #ch2 > .edu-text{
  margin-left: var(--edu-pad) !important;
  margin-right: auto !important;
  max-width: 52ch;
  width: 100%;
  padding: 0 !important;
}
/* desktop: padding pasa + kolumna nav + gap */
@media (min-width: 992px){
  .education-page #ch2 > .section-heading,
  .education-page #ch2 > .edu-text{
    margin-left: calc(var(--edu-pad) + var(--ps-nav) + var(--ps-gap)) !important;
  }
}

/* upewnij się, że sam pas ma ten sam padding po bokach */
.education-page .edu-band--ps{
  padding-left: var(--edu-pad) !important;
  padding-right: var(--edu-pad) !important;
}

/* =========================================================
   TIMELINE (górny pasek) — JS układa tor i kropki; CSS robi hover
========================================================= */
.education-page .edu-tl-wrap{
  position: static;
  margin: 8px auto 32px;
  width: min(var(--edu-maxw), 92vw);
}
.education-page .edu-tl{ display:flex; justify-content:center; }

.education-page .edu-tl__bar{
  position: relative;
  width: min(1030px, 92vw);
  height: 50px;
  border-radius: 50px;
  background: #fff;
  padding: 0 16px;
}
.education-page .edu-tl__bar::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background: var(--c-grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.education-page .edu-tl__label{
  position:absolute; left:24px; top:50%; transform:translateY(-50%);
  white-space:nowrap;
}
.education-page .edu-tl__track{
  position:absolute; top:50%; transform:translateY(-50%);
  /* JS ustawia left/right (dynamicznie wg szerokości labelki); fallback: */
  left: 260px; right: 32px;
  height: 4px;
  background: linear-gradient(90deg,#00EF9F,#0099FF);
  border-radius: 999px;
}
.education-page .edu-tl__track::after{
  content:""; position:absolute; right:-1px; top:50%; transform:translateY(-50%);
  border-left:10px solid var(--c-blue);
  border-top:6px solid transparent; border-bottom:6px solid transparent;
}
.education-page .edu-tl__dot{
  --size:18px;
  position:absolute; top:50%;
  left: 0; /* JS nadpisze px */
  transform: translate(-50%, -50%);
  width:var(--size); height:var(--size); border-radius:50%;
  background: var(--c-grad);
  border:2px solid #fff; box-shadow:0 0 0 2px rgba(0,0,0,.05);
  cursor:pointer; transition:transform .18s ease, box-shadow .18s ease;
  z-index:2;
}

/* powiększa hit–area bez zmiany wyglądu */
.education-page .edu-tl__dot::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:44px; height:44px;      /* ~48px też ok jeśli chcesz jeszcze wygodniej */
  transform:translate(-50%,-50%);
  border-radius:50%;
  /* tło niepotrzebne — pseudo-element poszerza pole trafienia */
}
.education-page .edu-tl__dot { -webkit-tap-highlight-color: transparent; }


.education-page .edu-tl__dot.is-active{ box-shadow:0 0 0 3px rgba(0,153,255,.25); }
/* hover: kropka wyżej */
.education-page .edu-tl__dot:is(:hover,:focus-visible){ transform: translate(-50%, calc(-50% - 12px)); }
/* podpowiedź */
.education-page .edu-tl__hint{
  position:absolute; top:50%; left:0; transform:translate(-50%,-50%);
  text-align:center; opacity:0; pointer-events:none; white-space:nowrap;
  transition:opacity .18s ease, transform .18s ease; z-index:1;
}
.education-page .edu-tl__hint.show{ opacity:1; }
/* gdy cokolwiek hoverowane — podpis w dół */
.education-page .edu-tl__bar.is-hovering .edu-tl__hint.show{
  transform: translate(-50%, calc(-50% + 12px));
}

/* pływający klon na dole */
.education-page .edu-tl-float{
  position:fixed; left:0; right:0; bottom:10px; display:none; z-index:50; padding:0 12px;
}
.education-page .edu-tl-float.is-visible{ display:block; }
.education-page .edu-tl-float .edu-tl__bar{ width:min(1030px,92vw); margin:0 auto; }

/* =========================================================
   KAFELKI (górny rząd)
========================================================= */
.education-page .tiles-row{
  display:flex; gap:40px; flex-wrap:wrap;
}
.education-page .tile{
  flex:1 1 288px; padding:20px; border-radius:12px; box-sizing:border-box;
  background:#D9F1FF; display:flex; flex-direction:column; align-items:center;
}
.education-page .icon-circle{
  width:80px; height:80px; border-radius:50%; background:var(--c-grad);
}
.education-page .icon-circle--img{ background:none; border-radius:0; overflow:hidden; }
.education-page .icon-circle--img img{ width:100%; height:100%; object-fit:contain; display:block; }

/* =========================================================
   Primary School — PAS + KOŁO
========================================================= */
.education-page .edu-band--ps{
  background:#DAF1FF; border-radius:20px;
  padding:48px var(--edu-pad); margin-bottom:40px;
}

.education-page .edu-ps-grid{
  display:grid; max-width:min(1400px,96vw); margin:0 auto;
  grid-template-columns: 28px minmax(38ch,52ch) minmax(460px, min(50vw, 600px));
  grid-template-areas: "nav text wheel";
  gap: var(--ps-gap);
  align-items:center;
}
.education-page .edu-wheel-nav{ grid-area:nav; display:flex; flex-direction:column; align-items:center; gap:12px; user-select:none; }
.education-page .nav-arrow{ width:16px; height:16px; background:transparent; border:0; cursor:pointer; position:relative; }
.education-page .nav-arrow::before{
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px;
  border-right:2px solid var(--c-blue); border-bottom:2px solid var(--c-blue); transform-origin:center;
}
.education-page .nav-arrow--up::before{ transform:translate(-50%,-50%) rotate(-135deg); }
.education-page .nav-arrow--down::before{ transform:translate(-50%,-50%) rotate(45deg); }
.education-page .nav-dot{
  width:12px; height:12px; border-radius:50%;
  background:var(--c-grad); border:2px solid #DAF1FF; box-shadow:0 0 0 2px rgba(0,0,0,.06);
  cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.education-page .nav-dot:hover{ transform:scale(1.08); }
.education-page .nav-dot.is-active{ box-shadow:0 0 0 3px rgba(0,153,255,.28); }

.education-page .edu-ps-text{ grid-area:text; max-width:52ch; place-self:center start; }
.education-page .edu-ps-wheel{ grid-area:wheel; justify-self:center; min-width:460px; max-width:min(50vw,600px); }

@media (max-width: 992px){
  .education-page .edu-ps-grid{
    max-width:900px;
    grid-template-columns: 1fr;
    grid-template-areas: "text" "wheel" "nav";
  }
  .education-page .edu-ps-text{ max-width:100%; }
  .education-page .edu-ps-wheel{ min-width:0; max-width:100%; }
  .education-page .edu-wheel-nav{ place-self:center; }
}

/* Koło */
.education-page .edu-wheel{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  margin:28px 0 48px; width:100%;
}
.education-page .edu-wheel__stage{
  --ratio:.788; --back-size:min(594px,92vw); --front-size:calc(var(--back-size) * var(--ratio));
  --back-zero:0deg; --front-zero:-135deg; --rot:0deg;
  --back-ox:0px; --back-oy:0px; --front-ox:25px; --front-oy:0px;
  width:var(--back-size); height:var(--back-size); position:relative; display:grid; place-items:center; border-radius:50%; isolation:isolate;
}
.education-page .edu-wheel__img-base,
.education-page .edu-wheel__img-overlay{
  position:absolute; left:50%; top:50%; object-fit:contain; user-select:none; pointer-events:none; display:block;
}
.education-page .edu-wheel__img-base{
  width:var(--back-size); height:var(--back-size);
  transform:translate(calc(-50% + var(--back-ox)),calc(-50% + var(--back-oy))) rotate(var(--back-zero)); z-index:1;
}
.education-page .edu-wheel__img-overlay{
  width:var(--front-size); height:var(--front-size);
  transform:translate(calc(-50% + var(--front-ox)),calc(-50% + var(--front-oy))) rotate(calc(var(--front-zero) + var(--rot)));
  transform-origin:50% 50%; transition:transform 1.1s cubic-bezier(.2,.8,.2,1); z-index:2;
}
/* Naprawa przycisku SPIN */
.education-page .edu-wheel__btn{
  position:relative; z-index:3;
  display:inline-block;
  padding:10px 36px;
  border:0;
  border-radius:24px;
  background:#fff;
  cursor:pointer;
}
.education-page .edu-wheel__btn::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:var(--c-grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.education-page .edu-wheel__btn:hover{ filter:drop-shadow(0 2px 6px rgba(0,0,0,.18)); }
.education-page .edu-wheel__btn:focus-visible{ outline:2px solid var(--c-blue); outline-offset:2px; }

/* Dwa obrazki pod tekstem koła */
.education-page .edu-ps-images{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
  max-width: 52ch;
}
.education-page .edu-ps-images img{
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
@media (max-width: 720px){
  .education-page .edu-ps-images{ grid-template-columns: 1fr; }
}

/* =========================================================
   High School — karty
========================================================= */
.education-page #ch3 .hs-tiles{
  display:grid; grid-auto-flow:column; gap:180px; justify-content:center;
  width:min(var(--edu-maxw), 92vw); margin:0 auto 24px;
}
@media (max-width: 899px){
  .education-page #ch3 .hs-tiles{ grid-auto-flow:row; justify-items:center; gap:40px; }
}
.education-page #ch3 .tile--hs{
  width:352px; max-width:100%; position:relative; padding:20px;
  border-radius:20px; background:#fff; text-align:left;
}
.education-page #ch3 .tile--hs::before{
  content:""; position:absolute; inset:0; border-radius:20px; padding:2px; background:var(--c-grad);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.education-page #ch3 .tile--hs .icon-circle{ margin:6px 0 14px; }
.education-page #ch3 .tile--hs .tile-list{
  margin:6px 0 0; padding-left:1.2rem; text-align:left; list-style:disc;
}
.education-page #ch3 .tile--hs .tile-list li + li{ margin-top:.35rem; }

/* =========================================================
   Gamification — media idealnie na środku; akordeon po prawej
========================================================= */
.education-page .gamify{
  width: min(var(--edu-maxw), 92vw);
  margin: 10px auto 8px;
}

.education-page .ga-layout{
  display: grid;
  /* 1fr | (niewidoczny spacer 206) | MEDIA | AKORDEON 206 | 1fr  */
  grid-template-columns: 1fr 206px minmax(0, 66ch) 206px 1fr;
  column-gap: 24px;
  align-items: center; /* akordeon w pionie na środku względem MEDIA */
}

/* lewy "spacer" 206px (bez zmiany HTML) */
.education-page .ga-layout::before{
  content: "";
  grid-column: 2;      /* zajmuje kolumnę-spacer */
  display: block;
}

/* MEDIA – dokładnie w środku strony */
.education-page .ga-media{
  grid-column: 3;
  justify-self: center;
  width: 100%;
  max-width: 66ch;
  background: #d9d9d9;
  border-radius: 20px;
  min-height: 200px;
  aspect-ratio: 4/3;
}

/* AKORDEON – po prawej, pionowo wyśrodkowany */
.education-page .ga{
  grid-column: 4;
  width: 206px;
  display: grid;
  gap: 10px;
  justify-items: stretch;
  justify-self: start;
  align-self: center;
}

.education-page .ga-item{ display:grid; gap:6px; }
.education-page .ga-pill{
  display:inline-flex; align-items:center; justify-content:center; width:100%;
  padding:5px 16px; min-height:39px; white-space:nowrap; line-height:1;
  border:0; border-radius:999px;
  color:#fff; background: var(--c-grad);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  cursor:pointer; transition: transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.education-page .ga-pill:hover{ transform:translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.education-page .ga-panel{
  width:100%; background:transparent; border:0; overflow:hidden; text-align:center;
  max-height:0; opacity:0; padding-block:0;
  transition:max-height .32s ease, opacity .22s ease, padding .22s ease;
}
.education-page .ga-panel.is-open{ padding-block:8px; opacity:1; }

/* RWD – gdy za wąsko, układ się stackuje, ale MEDIA dalej jest centralnie */
@media (max-width: 980px){
  .education-page .ga-layout{
    grid-template-columns: 1fr minmax(0, 92vw) 1fr;
  }
  .education-page .ga-layout::before{ content: none; }
  .education-page .ga-media{
    grid-column: 2; max-width: 92vw;
  }
  .education-page .ga{
    grid-column: 2; justify-self: center; width: min(360px, 92vw); margin-top: 12px;
  }
}

/* =========================================================
   Mini slider — kompaktowa wysokość (mniej góra/dół)
========================================================= */
.education-page .mini-slider{
  --ms-bg:#DAF1FF;
  --ms-radius:20px;
  --ms-pad-x:32px;                 /* było 50px */
  --ms-pad-y:40px;                 /* było 100px — główny winowajca */
  --ms-maxw:720px;
  --ms-arrow-gap:22px;
  --ms-dots-gap:12px;
  --ms-arrow-size:18px;
  --ms-arrow-thick:3px;
  --ms-accent:var(--c-blue);

  position:relative;
  max-width:var(--ms-maxw);
  margin:12px auto 16px;           /* ciaśniej wokół slidera */
  background:var(--ms-bg);
  border-radius:var(--ms-radius);
  padding:var(--ms-pad-y) var(--ms-pad-x);
}

.education-page .mini-slider .ms-viewport{
  overflow:hidden;
  width:100%;
  border-radius:0 !important;      /* zero wewn. zaokrąglenia → nie tnie tekstu */
}

.education-page .mini-slider .ms-track{
  display:flex;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}

.education-page .mini-slider .ms-slide{ min-width:100%; }
.education-page .mini-slider .ms-slide p{ margin:0 0 8px; line-height:1.6; }
/* brak „ogona” na dole slajdu */
.education-page .mini-slider .ms-slide > *:last-child{ margin-bottom:0; }

.education-page .mini-slider .ms-slide img{
  width:100%; height:auto; border-radius:12px; display:block;
}

/* strzałki — bez zmian w poziomie; mniejsze „gapy” */
.education-page .mini-slider .ms-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:calc(var(--ms-arrow-size) + 18px);
  height:calc(var(--ms-arrow-size) + 18px);
  background:transparent; border:0; cursor:pointer; padding:0;
}
.education-page .mini-slider .ms-prev{ left:calc(-1*var(--ms-arrow-gap) - var(--ms-arrow-size)); }
.education-page .mini-slider .ms-next{ right:calc(-1*var(--ms-arrow-gap) - var(--ms-arrow-size)); }
.education-page .mini-slider .ms-arrow::after{
  content:""; position:absolute; left:50%; top:50%;
  width:var(--ms-arrow-size); height:var(--ms-arrow-size);
  border-right:var(--ms-arrow-thick) solid var(--ms-accent);
  border-bottom:var(--ms-arrow-thick) solid var(--ms-accent);
  transform-origin:center;
}
.education-page .mini-slider .ms-prev::after{ transform:translate(-35%,-50%) rotate(135deg); }
.education-page .mini-slider .ms-next::after{ transform:translate(-65%,-50%) rotate(-45deg); }

/* kropki bliżej slidera, mniejsza przerwa na dole */
.education-page .mini-slider .ms-dots{
  position:absolute; left:50%; bottom:calc(-1*var(--ms-dots-gap));
  transform:translateX(-50%);
  display:flex; gap:10px;
}
.education-page .mini-slider .ms-dots button{
  width:8px; height:8px; border-radius:50%; background:#8ad0ff; border:0; cursor:pointer;
}
.education-page .mini-slider .ms-dots button.is-active{ background:var(--ms-accent); }

/* RWD — jeszcze ciaśniej na mobile */
@media (max-width:768px){
  .education-page .mini-slider{
    --ms-pad-x:16px;
    --ms-pad-y:40px;               /* było 60px */
    --ms-maxw:92vw;
    --ms-arrow-gap:14px;
    --ms-dots-gap:10px;
    --ms-arrow-size:16px;
  }
}


/* =========================================================
   Report tabs
========================================================= */
.education-page .report-tabs{
  --rt-bw:2px; --rt-radius:18px; --rt-blue:#0099FF;
  --rt-underline:linear-gradient(90deg,#00EF9F,#0099FF);
  margin:16px auto 10px;
}
.education-page .report-tabs .rt-tablist{
  display:inline-flex; align-items:flex-end; gap:0;
  margin:0 0 calc(-1*var(--rt-bw)); position:relative; z-index:3;
}
.education-page .report-tabs .rt-tab{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:10px 18px; background:#fff; cursor:pointer;
  border:var(--rt-bw) solid var(--rt-blue); border-radius:0; z-index:2; box-sizing:border-box;
}
.education-page .report-tabs .rt-tab + .rt-tab{ margin-left:calc(-1*var(--rt-bw)); }
.education-page .report-tabs .rt-tab:first-child{ border-top-left-radius:var(--rt-radius); }
.education-page .report-tabs .rt-tab:last-child{  border-top-right-radius:var(--rt-radius); }
.education-page .report-tabs .rt-tab.is-active{ z-index:4; border-bottom-color:transparent; }
.education-page .report-tabs .rt-tab.is-active::after{
  content:""; position:absolute; left:16px; right:16px; bottom:-2px;
  height:3px; border-radius:3px; background:var(--rt-underline);
}
.education-page .report-tabs .rt-panels{
  position:relative; z-index:1;
  border:var(--rt-bw) solid var(--rt-blue); background:#fff; padding:16px;
  border-top-left-radius:0; border-top-right-radius:var(--rt-radius);
  border-bottom-right-radius:var(--rt-radius); border-bottom-left-radius:var(--rt-radius);
}
.education-page .report-tabs .rt-panel{ display:none; }
.education-page .report-tabs .rt-panel.is-active{ display:block; }

/* Placeholder (gdy nie ma jeszcze pliku) */
.education-page .report-tabs .rt-placeholder{
  width:88%; max-width:min(640px,96%); margin:12px auto;
  aspect-ratio:16/10; background:#6d6d6d; border-radius:20px;
  display:grid; place-items:center; color:#fff; text-align:center; user-select:none;
}

/* PDF embed w rozmiarze placeholdera */
.education-page .report-tabs .rt-embed{
  width:88%; max-width:min(640px,96%); margin:12px auto;
  border-radius:20px; background:#f0f0f0; box-shadow:0 2px 8px rgba(0,0,0,.08);
  overflow:hidden;
}
.education-page .report-tabs .rt-embed__frame{
  position:relative; width:100%; aspect-ratio:16/10; background:#eaeaea;
}
.education-page .report-tabs .rt-embed__frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block;
}

/* (opcjonalne) drobny link pod embedem */
.education-page .report-tabs .rt-open{
  width:88%; max-width:min(640px,96%); margin:6px auto 0; text-align:right;
  font-size:.95rem;
}
.education-page .report-tabs .rt-open a{ text-decoration:underline; }

@media (max-width: 720px){
  .education-page .report-tabs .rt-embed,
  .education-page .report-tabs .rt-placeholder,
  .education-page .report-tabs .rt-open{
    width:96%; max-width:96%;
  }
}

/* Report tabs: centrowanie linku pod iframe (wewnątrz .rt-embed) */
.education-page .report-tabs .rt-embed{
  display: grid;
}
.education-page .report-tabs .rt-embed .rt-open{
  margin: 8px 0 0;
  justify-self: center;   /* twarde wyśrodkowanie niezależnie od text-align rodzica */
}
.education-page .report-tabs .rt-embed .rt-open a{
  display: inline-block;
}


/* =========================================================
   Reels
========================================================= */
.education-page .reels{ margin:8px auto 26px; }
.education-page .reels-kpi{ margin:8px 0 18px; text-align:center; }
.education-page .reels-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; width:100%; max-width:var(--edu-maxw); margin:0 auto;
}
@media (max-width:1100px){ .education-page .reels-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){  .education-page .reels-grid{ grid-template-columns:1fr; } }
.education-page .reel{ width:100%; }
.education-page .reel-outer{
  position:relative; width:100%; aspect-ratio:9/16; border-radius:12px; overflow:hidden; background:#e2e2e2;
  display:grid; place-items:center; box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.education-page .reel-outer iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* =========================================================
   Numbers
========================================================= */
.education-page .numbers{ margin:28px auto 16px; }
.education-page .numbers-grid{
  width: min(var(--edu-maxw), 92vw);
  margin: 0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:32px;
}
.education-page .numbers-card{
  position:relative; border-radius:16px; background:#dedede; overflow:hidden; aspect-ratio:4/3;
  display:grid; place-items:center;
}
.education-page .numbers-card .ph{ padding:16px 18px; text-align:center; }
.education-page .numbers-card iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:900px){ .education-page .numbers-grid{ grid-template-columns:1fr; } }

/* ——— reduced motion ——— */
@media (prefers-reduced-motion:reduce){
  .education-page .edu-wheel__img-overlay,
  .education-page .edu-tl__dot,
  .education-page .edu-tl__hint{ transition:none; }
}



/* ==================================================
   HUMAN PRACTICES
================================================== */

/* CONTAINER */

.timeline-container {
  position: sticky;
  top: 80px; /* odległość od góry ekranu */
  height: calc(100vh - 80px);
  overflow-y: hidden;
  overflow-x: visible
}

/* timeline wewnątrz ma naturalną wysokość */
.timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.timeline-line {
  position: absolute;
  left: 25px;
  width: 4px;
  top: 0;
  height: 100%;
  background: linear-gradient(to bottom, #00EF9F, #0099FF);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  padding-left: 56px;
  margin: 28px 0;
}

.timeline-marker {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ccc;
  transition: background-color .2s ease, transform .2s ease;
}

.timeline-item.active .timeline-marker {
  background: #0099FF;
  transform: translate(-50%, -50%) scale(1.2);
}

.timeline-item.major .timeline-marker {
  width: 22px;
  height: 22px;
}

/* marker is absolute so it doesn't change layout when scaled */
.timeline-marker {
  position: absolute;
  left: 8px;                          /* same x as .timeline-line */
  top: 50%;
  transform: translate(-50%, -50%);    /* center on the line horizontally & vertically */
  transform-origin: center center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ccc;
  transition: transform 0.22s ease, width 0.22s ease, height 0.22s ease, background-color 0.2s;
}

/* label stays inline — don't need big left margin because item has padding-left */
.timeline-label {
  margin-left: 0;
  color: #000;
  text-decoration: none;
  max-width: 180px;
  line-height: 1.4;
  transition: transform 0.18s ease, font-weight 0.18s;
}

.timeline-item:hover .timeline-marker {
  transform: translate(-50%, -50%) scale(1.22);
}
.timeline-item:hover .timeline-label {
  transform: translateX(4px) scale(1.1);
  transition: transform 0.18s ease, font-weight 0.18s;
}

@media (max-width: 992px) {
  .timeline {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

  .hp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    gap: 20px; /* pionowy odstęp */
    max-width: 400px; /* opcjonalnie ograniczenie szerokości karty */
  }

  .circle {
    width: 151px;
    height: 151px;
    border-radius: 50%;
    background-color: #01C5CD;
    overflow: hidden;
  }

  .circle img {
  width: 100%;       /* dopasowuje obrazek do szerokości kółka */
  height: 100%;      /* dopasowuje wysokość */
  object-fit: cover; /* zachowuje proporcje i wypełnia całe kółko */
  border-radius: 50%; /* opcjonalnie — dla bezpieczeństwa */
}

  .name {
    font-size: 18px;
    text-align: center;
  }

    .read-more-container {
    position: relative;
    width: 151px;
    height: 39px;
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #000;
    overflow: hidden;
  }

  /* gradientowa ramka */
  .read-more-container::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(to right, #00EF9F, #0099FF);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .btn-text {
    position: relative;
    z-index: 1;
    font-weight: normal;
    font-size: 1rem;
  }

  /* --- MODAL --- */
.modal {
  display: none; /* domyślnie ukryty */
  position: fixed;
  inset: 0; /* top:0; bottom:0; left:0; right:0 */
  justify-content: center;
  align-items: center;
  background-color: rgba(0,0,0,0.5); /* półprzezroczyste tło */
  z-index: 9999;
}

.modal-content {
  position: relative;
  background: linear-gradient(to bottom, #00EF9F, #0099FF);
  border-radius: 16px;
  width: 90vw;
  max-width: 900px;
  overflow-y: auto;
  padding: 2rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: auto;
  max-height: none;
  /* align-items: flex-start; */
  /* justify-content: flex-start; */
}

.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: #fff;
  cursor: pointer;
}

.modal-inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.top-section {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-section .circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #01C5CD;
  flex-shrink: 0;
}

.top-section .name {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}

/* Tekst w dwóch kolumnach */
.text-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  color: #fff;
  text-align: left;
  font-size: 1rem;
}

.text-columns div {
  break-inside: avoid;
}

  @media(max-width: 700px){
    .modal-inner .text-columns {
      grid-template-columns: 1fr; /* jedna kolumna na małych ekranach */
    }
  }


/* ===== MODAL, ramki itd. (bez zmian funkcjonalnych) ===== */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.4);
  display: none; align-items: center; justify-content: center;
  z-index: 1000; transition: background 0.3s;
}
.modal.show { display: flex; }
.modal-content.gradient-border {
  background: white; border-radius: 20px; padding: 0; position: relative;
  width: calc(100vw - 100px); height: calc(100vh - 100px);
  max-width: none; max-height: none; box-sizing: border-box;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(white, white), linear-gradient(90deg, #00EF9F, #0099FF);
  overflow-y: auto;
}
.modal-content {
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: auto; transition: transform 0.3s cubic-bezier(.6,.2,.2,1);
  transform: translateX(100%);
}
.modal.show .modal-content { transform: translateX(100%); }
.modal.show.slide-in .modal-content { transform: translateX(0); }
.modal-close {
  position: absolute; top: 16px; right: 24px; font-size: 2rem;
  color: #0099FF; cursor: pointer; z-index: 10000;
  border-radius: 50%; line-height: 1;
}
.modal-inner {
  height: 100%; display: flex; flex-direction: column;
  justify-content: center; padding: 40px; box-sizing: border-box;
}
.modal-columns { display: flex; height: 100%; gap: 0; }
.modal-col {
  flex: 1 1 0; padding: 0 50px; display: flex; flex-direction: column;
  justify-content: center; overflow-y: auto; min-width: 0; gap: 20px;
}
.modal-col-right { min-width: 0; align-items: flex-start; overflow-y: auto;}
.modal-label { font-weight: normal; margin: 15px 0; font-size: 1.4rem; }
.modal-label, .modal-why, .modal-rest { text-align: left; }
.name { font-size: 1.2rem; text-align: center; margin-bottom: 10px; }
.modal-col-left .modal-label, .modal-col-left .name { text-align: left; }

@media (max-width: 768px) {
  .modal-columns {
    flex-direction: column;       /* kolumny jedna pod drugą */
  }

  .modal-col {
    padding: 20px 30px;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .modal-content.gradient-border {
    width: calc(100vw - 40px);
    max-height: 90vh;
  }

  .modal-inner {
    padding: 20px;
  }
}

/* --- TEKSTOWA RAMKA --- */
.text-frame {
  border: linear-gradient(135deg, #00EF9F, #0099FF);
  position: relative; background: #fff; border-radius: 12px; padding: 20px;
  margin-bottom: 2rem; box-sizing: border-box;
  margin-left: calc(2 * var(--indent-x)); z-index: 1;
}
.text-frame::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 14px; padding: 1px;
  background: linear-gradient(135deg, #00EF9F, #0099FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1;
}
.text-frame-strong {
  border: linear-gradient(135deg, #00EF9F, #0099FF);
  position: relative; background: #fff; border-radius: 12px; padding: 20px;
  margin-bottom: 2rem; box-sizing: border-box;
  margin-left: calc(2 * var(--indent-x)); margin-right: calc(2 * var(--indent-x));
  z-index: 1; align-self: center;
}
.text-frame-strong::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 2px;
  background: linear-gradient(135deg, #00EF9F, #0099FF);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1;
}
.text-frame-title {
  font-size: 1.2rem; margin: 0 0 1rem 0; position: relative; display: inline-block;
  padding-bottom: 2px; font-weight: 100;
}
.text-frame-title::after {
  content: ""; position: absolute; bottom: 0; left: -1px; right: -1px; height: 1px;
  background: linear-gradient(90deg, #00EF9F, #0099FF); border-radius: 1px;
}
.text-frame-title-no-underline {
  font-size: 1.1rem; margin: 0 0 1rem 0; position: relative; display: inline-block;
  padding-bottom: 2px; font-weight: 100;
}
.text-frame-body { color: #333; line-height: 1.6; font-size: 1rem; }

@media (max-width: 992px) {
  .text-frame { padding: 16px; }
  .text-frame-title { font-size: 1.1rem; }
}

.circle-container-left,
.circle-container-right{
  display: flex; flex-direction: column; justify-content: center;
  width: 290px; gap: 20px; padding-top: 20px; padding-bottom: 12px;
}
.circle-container-left  { align-items: flex-start;  margin-left:  calc(2 * var(--indent-x)); }
.circle-container-right { align-items: flex-end;    margin-left:  calc(2 * var(--indent-x)); }
/* usuń globalny padding z body */
body { padding-top: 0; }  /* albo skasuj tę deklarację */

/* daj odsunięcie tylko treści (gdy jest fixed nav) */
main { padding-top: var(--nav-h); }
/* ewentualnie: .page-content { padding-top: var(--nav-h); } */
/* stan domyślny */
.side-menu li.has-children > a .arrow{
  display:inline-block;
  transition: transform .2s ease;
  transform: rotate(0deg);
}

/* obróć TYLKO strzałkę tej pozycji, która ma klasę .open */
.side-menu li.has-children.open > a .arrow{
  transform: rotate(90deg);
}

/* (opcjonalnie) gdy zwiniete – upewnij się, że wraca do 0° */
.side-menu li.has-children.collapsed > a .arrow{
  transform: rotate(0deg);
}
/* Ukryj scrollbary, ale zostaw przewijanie */
.content-wrapper .side-menu{
  overflow: auto;                 /* włącz przewijanie */
  -ms-overflow-style: none;       /* IE/Edge (stare) – ukryj pasek */
  scrollbar-width: none;          /* Firefox – ukryj pasek */
  -webkit-overflow-scrolling: touch; /* iOS – płynne przewijanie */
}
.content-wrapper .side-menu::-webkit-scrollbar{
  width: 0;
  height: 0;                      /* też ukrywa poziomy, jeśli się pojawi */
}

/* Jeśli chcesz ukryć TYLKO poziomy pasek, ale nadal pozwolić przewijać w bok: */
.content-wrapper .side-menu{
  overflow-x: auto;
  overflow-y: auto;
}
.content-wrapper .side-menu::-webkit-scrollbar:horizontal{ height: 0; }
.content-wrapper .side-menu{
  overflow-wrap: anywhere;   /* łamie bardzo długie wyrazy/linki */
  word-break: break-word;
}
.content-wrapper .side-menu ul{
  margin-right: 0;           /* upewnij się, że nic nie wyjeżdża */
}
/* === Side menu: ukryj paski przewijania, ale zostaw scroll === */
.side-menu {
  overflow: hidden;                 /* ramka menu bez pasków */
}

.side-menu .menu-list {
  /* przewijanie tylko wewnątrz listy */
  overflow-y: auto;
  overflow-x: hidden;               /* nie pokazuj poziomego */
  max-height: calc(100vh - 24px);   /* już masz podobne ograniczenie; zostawiamy bezpieczeństwo */

  /* HIDE SCROLLBARS cross-browser */
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE/Edge legacy */
}
.side-menu .menu-list::-webkit-scrollbar { /* Chrome/Safari/Edge */
  width: 0;
  height: 0;
}

/* Submenu: animuj wysokość, ale nie generuj własnych pasków */
.side-menu .menu-list ul {
  overflow: hidden;        /* było: auto => powodowało wewn. pasek */
}

/* (opcjonalnie) zarezerwuj stabilne wnętrze, by nic nie „podskakiwało” przy rozwoju */
.side-menu .menu-list {
  scrollbar-gutter: stable both-edges;
}

/* Delikatny fade na górze/dole, sugerujący scroll */
.side-menu .menu-list {
  /* …twoje poprzednie reguły… */
  /* mask-clip potrzebne w Safari */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 24px), transparent 100%);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

/* Dymek „Scroll for more” – domyślnie ukryty */
.menu-scroll-hint {
  position: absolute;
  left: 0; right: 0; bottom: 6px;
  margin-inline: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  background: linear-gradient(135deg, #00EF9F, #0099FF);
  box-shadow: 0 8px 18px rgba(0,0,0,.15);
  opacity: 0; transform: translateY(6px);
  pointer-events: none;           /* żeby nie zasłaniał kliknięć */
  transition: opacity .25s ease, transform .25s ease;
}

/* pokazywany tylko, gdy JS doda klasę .is-visible */
.menu-scroll-hint.is-visible {
  opacity: 1; transform: translateY(0);
}

/* delikatna animacja strzałki */
.menu-scroll-hint .chev {
  display: inline-block;
  margin-right: .4rem;
  animation: chev-bounce 1.2s infinite;
}
@keyframes chev-bounce {
  0%, 100% { transform: translateY(-1px); opacity: .9; }
  50%      { transform: translateY(1px);  opacity: 1;  }
}

/* po najechaniu/scrollu można lekko wygasić */
.side-menu .menu-list:active ~ .menu-scroll-hint,
.side-menu .menu-list:focus-visible ~ .menu-scroll-hint {
  opacity: .8;
}