/* --- GLOBALNE --- */
:root {
    --accent-pink: #f7d6e0;
    --accent-pink-light: #F3E8F9;
    --accent-blue:   #aadcee;
    --accent-blue-white: #bee8ff;
    --accent-blue-lazur: #66e0ff;
    --accent-blue-mid2: #6de6ff;
    --accent-blue-mid3: #74efff;
    --accent-blue-electric: #7df9ff;
    --accent-gold: #b88f59;
    --accent-gold-dark: #a67c47;
    --accent-gold-light:  #d8b067;
    --accent-gold-glow:  #caa76a; /* mój */
    --accent-gold-shiny:#fff8dd;
    --accent-violet: #C084FC; /* mój */
    --accent-violet2: #D78DF9;
    --accent-violet3: #D891EF; /* mój */
    --accent-violet4: #F5A8E1;
    --accent-violet5: #FBCFE8;
    --accent-violet3-light: #E3A3F4;
    --accent-violet-white: #f9f5fc;
    --accent-violet-white2: #f5d8f8;
    --accent-green: #00e6b0;
    --accent-green-dark:#00e6b0a8;
    --accent-green-white: #d8f6e8;
    --accent-grey: #4e4e4e;
    --text-dark: #222;
    --text-light: #666;
    --bg: #fff;
    --font-main: 'Inter', sans-serif;
    --font-base: 16px;
    --font-size: 1.2rem;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  h6 {
    font-size: 8rem; /* np. hero */
    font-weight: 700;
    margin-bottom: 3rem;
  }

  h1 {
    font-size: 4.5rem; /* np. hero */
    font-weight: 700;
    margin-bottom: 3rem;
  }
  
  h2 {
    font-size: 4rem; /* np. sekcja */
    font-weight: 700;
    margin-bottom: 3rem;
  }
  
  h3 {
    font-size: 3rem; /* ✨ Twój nowy, mniejszy styl */
    font-weight: 600;
    margin-bottom: 2rem;
  }
  h4 {
    font-size: 2.5rem; /* ✨ Twój nowy, mniejszy styl */
    font-weight: 500;
    margin-bottom: 2rem;
  }
  h5 {
    font-size: 1.5rem; /* ✨ Twój nowy, mniejszy styl */
    font-weight: 500;
    margin-bottom: 2rem;
  }
  section:last-of-type {
      margin-bottom: 0;
  }

  /* --- prevention horizontal scrolling --- */
  html, body {
  overflow-x: hidden;
}
/* --- SEKCJA OSTATNIEGO ELEMENTU --- */
  p {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 1.1rem;         /* lub np. 16px */
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-dark);   /* lub po prostu #222 */
    margin-bottom: 1em;
  }
  
  /* --- PODŚWIETLENIE TEKSTU --- */
  .highlight2 {
    background-color: var(--accent-violet3); 
    padding: 0px 3px; /* 6px góra-dół, 12px lewo-prawo */
    display: inline-block;
    color: #222;
    font-weight: 600;
  }
  /* Fioletowy wyróżnik tekstu */
.highlight-alt {
  color: var(--accent-violet3);
}
/** Podkreślenie tekstu */
.underline {
  border-bottom: 4px solid var(--accent-violet3);       /* kolor podkreślenia */
  padding-bottom: 0px;       /* im mniej, tym bliżej tekstu */
  line-height: 1;                   /* usuwa dodatkowy odstęp */
  display: inline-block;
}
/* --- PODŚWIETLENIE TEKSTU Z GRADIENTEM --- */
.outline-text {
  font-size: 5rem; /* zmień w zależności od potrzeb */
  font-weight: 1000;
  color: transparent;
  -webkit-text-stroke: 1px #cccccc; /* kolor obrysu */
  text-align: center;
  letter-spacing: 0.05em;
}

/* GÓRNY PASEK */
.top-bar {
  position: relative;
  background-color: #f5f5f5;
  padding: 7px 0;
  font-size: 12px;
  border-bottom: 1px solid #ddd;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 30px; /* tylko od lewej */
}

.left-buttons {
  display: flex;
  align-items: center;
}

.left-buttons a {
  margin-right: 20px;
  background-color: #D891EF; /* accent-violet3 */
  color: white;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 0;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.left-buttons a i {
  color: #333;
  background: none;
  padding: 0;
  font-size: 16px;
}
.left-buttons a {
  transition: transform 0.2s ease-in-out; /* płynne przejście */
}

.left-buttons a:hover {
  transform: scale(1.05); /* powiększenie o 10% */
}
.social-icons {
  display: flex;
  gap: 6px; /* odstęp między ikonami */
  margin-left: 90px; /* odstęp od przycisków */
}

.social-icons a {
  background: none;
  padding: 0;
  color: #333;
  font-size: 20px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
/* --- IKONA INSTAGRAMA Z GRADIENTEM --- */
.social-icons i.fab.fa-instagram,
.info-strip i.fab.fa-instagram {
  font-size: 1.4rem;
  line-height: 1.4rem;  /* wysokość równa szerokości ikony */
  padding: 2px;         /* minimalny odstęp, żeby nie było „ucięcia” */
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.2s ease-in-out, opacity 0.3s ease;
}

.social-icons i.fab.fa-instagram:hover,
.info-strip i.fab.fa-instagram:hover {
  transform: scale(1.10);
  opacity: 0.7;
}


/* FACEBOOK */
.social-icons i.fab.fa-facebook {
  font-size: 1.4rem;
  color: #4267B2; /* Facebook blue */
  transition: transform 0.2s ease-in-out, opacity 0.3s ease;
}

.social-icons i.fab.fa-facebook:hover {
  transform: scale(1.10);
  opacity: 0.7;
}

/* --- PRZEŁĄCZNIK JĘZYKA PRZY PRAWEJ KRAWĘDZI --- */
.lang-switcher {
  position: absolute;
  top: 50%;
  right: 20px; /* dokładnie przy krawędzi, ale nie klei się do niej */
  transform: translateY(-50%);
  display: flex;
  gap: 0.5rem;
}

.lang-switcher button {
  background: none;
  border: none;
  padding: 0.3rem;
  cursor: pointer;
  border-radius: 4px;
  transition: 0.3s ease;
}

.lang-switcher button img {
  width: 18px;
  height: auto;
  display: block;
  transition: transform 0.2s ease-in-out;
}

.lang-switcher button:hover img {
  transform: scale(1.15);
}
.lang-switcher button:hover {
  background: none;          /* albo background-color: transparent; */
}

 /* PŁYNNE PRZEWIJANIE */
 html {
  scroll-behavior: smooth;
}
body {
  font-family: var(--font-main);
  background-color: var(--bg);
  color: var(--text-dark);
  line-height: 1.6;
  font-size: var(--font-base);
  
}

/* --- HEADER ULEPSZONY --- */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}


.logo img {
  height: 70px;
}
/* --- LINK w logo --- */
.logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: bold;
  font-size: 1.4rem;
  text-decoration: none; /* Usuwamy podkreślenie */
  color: var(--text-dark); /* Ustawiamy kolor zgodny z resztą */
}


.logo:hover {
  color: var(--accent-grey); /* Podświetlenie na hover */
}

.logo span {
  font-family: inherit; /* Przywracamy czcionkę do rodzica (taką samą jak w reszcie strony) */
}

.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav > ul {
  display: flex;
  margin-right: 0cm; /* Added margin from the right side */
  /* Wszystkie linki w jednej linii i tej samej wysokości */
  align-items: center; /* wyrównanie w pionie */
  gap: 0rem;

}

.nav a {
  position: relative;
  text-decoration: none;
  color: var(--text-dark);
  transition: color 0.3s ease;
  line-height: 1.8;
  font-size: 1.3rem;
/* Ujednolicona wysokość dla wszystkich linków */
  display: flex;
  align-items: center;
  padding: 0 1.1rem; /* stały padding poziomy */
  height: 70px; /* taka sama jak logo */
}


.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0%;
  background-color: var(--accent-pink);
  transition: width 0.3s ease;
}

.nav a:hover::after {
  width: 100%;
}

.nav a:hover {
  color: var(--accent-violet);
}

.nav > ul > li {
  display: flex;
  align-items: center;
}


/* Erasmus jako przycisk */
.erasmus-button {
  font-weight: bold;
  border-radius: 1;
}

.erasmus-button:hover {
  background-color: #1e3a8a;
  color: white !important;

  transition: background-color 0.3s ease, transform 0.2s ease;

}

.erasmus-button::after {
  display: none;
}

/* --- MENU ROZWIJANE --- */
.dropdown {
  position: relative;
}

.dropdown-link {
  position: relative;
  z-index: 2;
}

.dropdown-menu {
  pointer-events: auto;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  z-index: 10;
  border-radius: 6px;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li a {
  display: block;
  padding: 0.75rem 1rem;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 1.2rem;
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background-color: #f5f5f5;
  color: var(--accent-violet);
}


/* --- STRZAŁKA W ROZWIJANYM MENU --- */
.dropdown > a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.arrow {
  pointer-events: none;
  font-size: 0.7rem;
  color: var(--text-light);
  transition: transform 0.3s ease, color 0.3s ease;
  pointer-events: none; /* ← kluczowe! */
}

/* Strzałka obraca się przy klasie .hover */
.dropdown:hover .arrow {
  transform: rotate(180deg);
  color: var(--accent-gold);
}


.nav i.fab.fa-instagram {
  font-size: 1.4rem;
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: transform 0.2s ease-in-out, opacity 0.3s ease;
}

.nav i.fab.fa-instagram:hover {
  transform: scale(1.10);
  opacity: 0.7;
}
.nav a.no-underline::after {
  display: none;
}

.nav a.no-underline:hover {
  color: inherit; /* zapobiega zmianie koloru linku na hover, jeśli nie chcesz */
}
/* --- PRZYCISK WESPRZYJ FUNDACJJĘ --- */
.donate-button {
  font-weight: bold;
  border-radius: 1;
  color: var(--accent-violet3) !important;
}

.donate-button:hover {
  background-color: var(--accent-green);
  color: white !important;
  transition: background-color 0.3s ease, transform 0.2s ease;

}

.erasmus-button::after {
  display: none;
}
/* --- HERO --- */
.hero-fullscreen {
  position: relative;
  height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -1;
}

.hero-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10rem 2rem 2rem;
}

/* --- HERO OVERLAY BLUE --- */
.hero-overlay-blue {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(31, 151, 208, 0.80); /* np. 0.5 */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10rem 2rem 2rem;
  z-index: 1;
}

.hero-content {
  color: white;
  text-align: center;
  max-width: 90%;
}

.hero-content p {
  font-size: 1.25rem;
  margin-bottom: 3rem;
}

.hero-btn {
  background-color: #4F46E5;
  color: white;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.3s ease;
}

.hero-btn:hover {
  background-color: #4338ca;
}
/* wyjątek: czarny tekst na jasnym tle */
.hero-dark-text .hero-content {
  color: var(--text-dark); /* np. #222 */
}

.hero-dark-text .hero-content h1,
.hero-dark-text .hero-content h4,
.hero-dark-text .hero-content p {
  color: var(--text-dark);
}
/* Kolorowe warianty hero */
.hero-colored {
  position: relative;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* tła */
.bg-pink {
  background-color: var(--accent-pink-light);
}

/* gradientowe tło */
.bg-soft-glow {
  background: linear-gradient(145deg, var(--accent-violet-white), var(--accent-violet-white2));
}

/* --- ROZSZERZENIE DO HERO Z OBRAZKIEM PO PRAWEJ --- */
.hero-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  width: 100%;
  gap: 2rem; /* zamiast 4rem */
  flex-wrap: wrap;
}

.hero-side-image {
  margin-right: 8cm; /* Picture 10 cm from the right margin */
}

.hero-side-image img {
  max-width: 100%;
  height: auto;
  max-height: 300px;
}

.hero-content {
  flex: 1 1 55%;
}

.hero-colored.hero-short {
  height: 60vh; /* lub 50vh, albo nawet auto */
}

.hero-colored.hero-short .hero-overlay {
  padding-top: 3rem;
  align-items: center;
}

@media (max-width: 768px) {
  .hero-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .hero-content,
  .hero-side-image {
    flex: 1 1 100%;
    text-align: center;
    margin-right: 0; /* Reset margin for smaller screens */
  }

  .hero-side-image img {
    max-height: 200px;
    margin-top: 2rem;
  }
}

/* Wspólny styl bazowy dla wszystkich przycisków */
.btn-round {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  border-radius: 9999px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
@media (max-width: 768px) {
  .btn-round {
    min-width: unset;
    width: 100%;
    text-align: center;
  }
}

/* Złoty przycisk */

/* Fioletowy przycisk */
.btn-violet {
  position: relative;
  overflow: hidden;
  display: inline-block; /* ważne przy <a> */
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-violet2), var(--accent-violet3), var(--accent-violet4));
  color: white;
  text-decoration: none;
  box-shadow: 0 2px 6px rgba(128, 90, 213, 0.3);
  border: none;
  border-radius: 4px;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  z-index: 0; /* dla bezpieczeństwa */
}

/* Zawartość nad overlayem */
.btn-violet span {
  position: relative;
  z-index: 2;
}

/* Overlay */
.btn-violet::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--accent-green); /* np. #00e6b0 */
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  border-radius: 4px; /* dopasuj do przycisku */
}

/* Hover efekt */
.btn-violet:hover::after {
  opacity: 0.8;
}

.btn-violet:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 18px rgba(128, 90, 213, 0.4);
}

/* przycisk bardziej prostokątny */
.btn-outline {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  background: linear-gradient(135deg, var(--accent-violet3), var(--accent-violet4));
  border: none;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Added shadow */
}

.btn-outline:hover {
  background: linear-gradient(135deg, var(--accent-violet3), var(--accent-violet5));
  color: #fff;
  box-shadow: 0 4px 14px rgba(128, 0, 128, 0.2);
  transform: scale(1.1); /* Makes the button slightly bigger on hover */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition */
}




/* --- SEKCJA OBSZAR --- */
  .section-heading {
    text-align: center;
  }

.obszar-row {
  display: flex;
  flex-wrap: nowrap;
  height: 500px; /* zwiększono wysokość sekcji */
}

.obszar-row.reverse {
  flex-direction: row-reverse;
}

.obszar-text,
.obszar-image {
  width: 50%;
  margin: 0;
  padding: 0;
}

.obszar-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 60px;
  box-sizing: border-box;
  background-color: #ffffff; /* tło pod tekst */
}

.obszar-text .obszar-numer {
  font-size: 30px;
  font-weight: 700;
  color: var(--accent-violet3);
  margin-bottom: 1px;
}

.obszar-text h2 {
  font-size: 24px;
  font-weight: 700;
  color: #2f3b4c; /* ciemny tekst */
  margin: 0;
  position: relative;
  padding-bottom: 10px;
}

.obszar-text h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 2.5px;
  background-color: var(--accent-violet3);
  margin-top: 10px;
}

.obszar-text p {
  font-size: 18px;
  line-height: 1.8;
  color: #4d4d4d;
  margin-top: 20px;
}
.obszar-image {
  height: 100%;
}

.obszar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}

/* Responsive fallback */
@media (max-width: 767px) {
  .obszar-row {
    flex-direction: column;
    height: auto;
  }

  .obszar-row.reverse {
    flex-direction: column;
  }

  .obszar-text,
  .obszar-image {
    width: 100%;
  }

  .obszar-image {
    height: auto;
  }

  .obszar-image img {
    height: auto;
  }
}


/* --- SEKCJA KONTAKT Z MAPĄ --- */
.contact-map {
  display: grid;
  grid-template-columns: 1.5fr 1.5fr 1.5fr;
  gap: 3rem;
  padding: 1rem 2rem;
  align-items: start;
  background-color: white;
  font-size: 2rem;
  margin-bottom: 0; /* Removed space between section and footer */
  padding-bottom: 0; /* Ensure no padding at the bottom */
  text-align: left;
  border-top: 1px solid #ddd;
}

/* Formularz kontaktowy */

.contact-form-box {
  max-width: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center; /* lub flex-end jeśli chcesz na dole */
  height: 100%;

}

.form-heading {
  text-align: center;
  color: var(--accent-violet3);
  margin-bottom: 2rem;
  font-size: 1.8rem;
  font-weight: 700;
}

/* Informacje kontaktowe */
.contact-info {
  margin-top: 4rem;
  margin-left: 1.5rem;
}

.contact-info h3 {
  font-size: 1.5rem;
  color: var(--accent-violet);
  margin-bottom: 1rem;
}

.contact-info p {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-dark);
}

/* Mapa */
.contact-map-frame {
  margin-top: 1rem; /* Zmniejszono odstęp od góry */
  margin-left: -2cm; /* Przesunięto mapę o 2 cm w lewo */
}

.contact-map-frame iframe {
  width: 100%;
  height: 100%;
  min-height: 300px; /* Zmniejszono minimalną wysokość */
  border-radius: 1px; /* Zaokrąglono bardziej rogi */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Zwiększono cień */
}

/* Responsywność */
@media (max-width: 1000px) {
  .contact-map {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}
 /* --- SEKCJA CTA --- */
.cta {
    text-align: center;
    padding: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin: 4rem auto 0;
    background-color: transparent;
  }
  
  .footer {
    text-align: center;
    padding: 2rem;
    font-size: 0.9rem;
    color: var(--text-light);
  }
  
  /* --- SEKCJA CTA ALTERNATYWNA --- */
.cta-alt {
    padding: 5rem 2rem;
    text-align: center;
    background-color: #F7EFFB;
  }
  
  .cta-alt h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
  }
  
  .cta-alt p {
    font-size: 1.3rem;
    margin-bottom: 2rem;
    color: var(--text-light);
  }
  
  .cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
  }
  
  .btn-round {
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1.1rem;
    text-decoration: none;
    font-weight: 600;
    text-align: center;
    min-width: 260px;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  
  /* Kolory przycisków */
  .btn-blue {
    background-color: var(--accent-violet);
    color: #fff;
  }
  
  .btn-blue:hover {
    background-color: var(--accent-violet2);
  }
  
  .btn-pink {
    background-color: var(--accent-violet);
    color: #fff;
  }
  
  .btn-pink:hover {
    background-color: var(--accent-violet2);
  }
  
  @media (min-width: 600px) {
    .cta-buttons {
      flex-direction: row;
    }
  }
  
  /* --- SEKCJA ZAANGAŻUJ SIĘ --- */
.engage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 4rem 2rem;
    max-width: 1200px;
    margin: auto;
    text-align: center;
  }
  
  .engage-box {
    background-color: #fafafa;
    padding: 2rem;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  }
  
  .engage-box h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-dark);
  }
  
  .engage-box p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
  }
  
  .engage-link {
    color: var(--accent-violet);
    text-decoration: none;
    font-weight: bold;
    font-size: 1rem;
  }
  
  .engage-link:hover {
    text-decoration: underline;
    font-weight: 600;
    transform: scale(1.03);
    display: inline-block;
    transition: all 0.2s ease;
  }
  
  @media (min-width: 800px) {
    .engage {
      grid-template-columns: repeat(3, 1fr);
    }
  }
  
  /* --- PODSTRONA ABOUT --- */
/* --- SEKCJA CO NAS WYRÓŻNIA --- */
.unique {
  background-color: var(--bg);
  color: var(--text-dark);
  padding: 0;
}

.unique-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 100%;
  margin: 0 2cm; /* Added margin left and right of 2 cm */
  box-sizing: border-box;
  padding: 2rem; /* <- tu redukujemy margines wewnętrzny sekcji */
}

.unique-text {
  flex: 1 1 55%;
  text-align: left;
  margin-right: 2rem; /* Added space between text and photo */
}

.unique-text h1,
.unique-text h2 {
  text-align: left;
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

.unique-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  max-width: 100%;
}

.unique-image {
  flex: 1 1 40%;
  max-width: 500px;
}

.unique-image img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
}

  
/* --- SEKCJA CZYM SIĘ ZAJMUJEMY --- */
.activities {
  padding: 4rem 2rem;
  text-align: center;
  background-color: var(--bg);
}

.activities h2 {
  font-size: 2.5rem;
  margin-bottom: 2.5rem;
  color: var(--text-dark);
}

.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.activity-box {
  background-color: var(--accent-violet-white);
  border-radius: 4px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: left;
}

.activity-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

.activity-box h3 {
  font-size: 1.5rem;
  color: var(--text-dark);
  margin-bottom: 1rem;
  margin-left: 1rem; /* Added left margin for text */
}

.activity-box p {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-left: 1rem; /* Added left margin for text */
}

.activity-box img {
  width: 140px;
  height: 140px;
  margin-bottom: 1rem;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.activity-box.centered {
  text-align: center;
  align-items: center;
  justify-content: center;
}

/* --- SEKCJA MISJA --- */
.mission {
  background-color: var(--bg);
  color: var(--text-dark);
  padding: 0;
}

.mission-inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center; /* Center text vertically with the photo */
  justify-content: center;
  max-width: 100%; /* Ustalona szerokość kontenera */
  margin: 0 1cm; /* Zmniejszono marginesy po bokach do 1 cm */
  gap: 7rem; /* Zwiększono odstęp między zdjęciem a tekstem */
  padding: 2rem;
  box-sizing: border-box;
}

.mission-image {
  flex: 0 0 40%;
  max-width: 500px;
}

.mission-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

.mission-text {
  flex: 1;
  text-align: left;
}

.mission-text h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.mission-text p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}

/* Responsywność dla mobilnych */
@media (max-width: 768px) {
  .mission-inner {
    flex-direction: column;
    margin: 0 1cm; /* Zmniejszono marginesy po bokach do 1 cm */
  }

  .mission-image,
  .mission-text {
    max-width: 100%;
  }

  .mission-text h2 {
    font-size: 2rem;
  }

  .mission-text p {
    font-size: 1rem;
  }
}

/* --- SEKCJA FUNDACJA --- */
.foundation-section {
  padding: 50px 16px;
  background-color: #f9f9f9;
  color: var(--text-light);
  margin-left: 1cm; /* Added margin left of 1 cm */
  margin-right: 1cm; /* Added margin right of 1 cm */
}

.foundation-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 36px;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
}

.foundation-text {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.foundation-text h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
  color: var(--text-dark);
}
.foundation-text p {
  font-family: var(--font-main);
  font-size: var(--font-size);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-light);
  margin-bottom: 1em;
}

.foundation-image {
  flex: 1 1 40%;
  max-width: 500px;
  display: flex;
  justify-content: center;
}

.foundation-image img {
  width: 100%;
  max-width: 550px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.foundation-cta {
  max-width: 1000px;
  margin: 50px auto 0;
  text-align: center;
}

.foundation-cta p {
  margin-bottom: 24px;
  font-size: 2rem;
  color: var(--text-dark);
}

.foundation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.foundation-button {
  background-color: var(--accent-green);
  color: white;
  padding: 16px 36px; /* większe przyciski */
  font-size: 1.2rem;   /* większy tekst */
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px; /* pełne zaokrąglenie (pigułka) */
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* lekki cień */
}

.foundation-button:hover {
  background-color: var(--accent-green-dark);
  transform: translateY(-2px); /* lekki efekt „podniesienia” */
}


@media (max-width: 768px) {
  .foundation-inner {
    flex-direction: column;
  }

  .foundation-text {
    text-align: center;
    order: 2;
  }

  .foundation-image {
    order: 1;
  }
}



/* --- SEKCJA ZESPÓŁ --- */
.team {
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--bg);
  }
  
  .team h2 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
  }
  
  .team-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
  }
  
  .member {
    background-color: #fafafa;
    padding: 2rem;
    border-radius: 6px;
    border: 1px solid #eee;
    width: 280px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  }
  
  .member img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 1rem;
  }
  
  .member h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
  }
  
  .member p {
    font-size: 1.1rem;
    color: var(--text-light);
  }
  
  /* --- SEKCJA DOKUMENTY --- */
  .documents {
    padding: 4rem 2rem;
    text-align: center;
    background-color: var(--bg);
  }
  
  .documents h2 {
    font-size: 1rem;
    margin-bottom: 2rem;
    color: var(--text-dark);
  }
  
  .documents ul {
    list-style: none;
    padding: 0;
  }
  
  .documents li {
    margin-bottom: 1rem;
  }
  
  .documents a {
    font-size: 1.1rem;
    text-decoration: none;
    color: var(--accent-grey);
    padding: 0.3rem 1.5rem;
    border: 1px solid var(--accent-violet3);
    border-radius: 6px;
    transition: all 0.3s ease;
    display: inline-block;
  }
  
  .documents a:hover {
    background-color: var(--accent-violet3);
    color: #fff;
  }
 
/* --- PODSTRONA WSPÓŁPRACY --- */
/* --- SEKCJA POWODY --- */
.section-reasons {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 6rem auto 0;
  padding: 0 1rem;
  position: relative;
  box-sizing: border-box;
  padding-bottom: 6rem;
}

.reasons-left,
.reasons-right {
  flex: 1 1 50%;
  padding: 4rem 3rem;
  box-sizing: border-box;
  color: #111;
}

.reasons-left {
  background-color: #F3E8F9;
  margin-right: -70px;    /* ✨ mocniejsze nachodzenie */
  margin-top: -75px;      /* ✨ bardziej uniesiona */
  position: relative;
  z-index: 2;
}

.reasons-right {
  background-color: var(--accent-violet3);
  margin-bottom: -75px;
  position: relative;
  z-index: 1;
  padding-top: 10rem
}

.section-reasons h2 {
  text-align: center;
}

.reason {
  display: flex;
  align-items: flex-start;
  margin-bottom: 4rem;
}

.reason .number {
  font-size: 4rem;         /* ✨ znacznie większe numerki */
  font-weight: bold;
  margin-right: 1.5rem;
  flex-shrink: 0;
  line-height: 1;          /* ✨ lepsze wyrównanie w pionie */
}

.reason p {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-left: 0.5rem;     /* ✨ tekst lekko od numerka */
}
.reasons-right .reason {
  padding-left: 6rem; /* ✨ przesunięcie całego bloku tekstowego */
}

.reasons-right .reason p {
  margin-left: 1rem;       /* ✨ jeszcze dalej od krawędzi */
}

.reasons-left .number,
.reasons-right .number {
  color: #111;
}

.reasons-left strong,
.reasons-right strong {
  color: #111;
}

@media (max-width: 768px) {
  .section-reasons {
    flex-direction: column;
    padding: 0 1rem;
  }

  .reasons-left,
  .reasons-right {
    margin: 0;
    padding: 2rem 1.5rem;
  }

  .reason .number {
    font-size: 3rem;
  }

  .reasons-right .reason p {
    margin-left: 0.5rem;
  }
}

/* Karty współpracy */
.collab-modern {
  padding: 4rem 5rem;
  background-color: var(--bg);
  text-align: center;
}

.collab-modern h2 {
  font-size: 2.5rem;
  margin-bottom: 3rem;
  color: var(--text-dark);
}

.modern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  justify-items: center;
}

.modern-card {
  background-color: var(--accent-violet-white); /* Changed to violet-white */
  border-radius: 1px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  padding: 3rem;
  max-width: 750px;
  width: 100%;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.modern-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.modern-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}

.modern-icon.blue,
.modern-icon.pink {
  background: linear-gradient(90deg, var(--accent-violet), var(--accent-violet5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.modern-card h3 {
  font-size: 1.6rem;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.modern-card p {
  font-size: 1.2rem;
  color: var(--text-light);
  margin-bottom: 2rem;
  line-height: 1.8;
}

.modern-btn {
  display: inline-block;
  font-size: 2.5rem;
  font-weight: bold;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
  margin: 0 auto;
  margin-top: auto;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.modern-btn.blue {
  background-color: var(--accent-violet3);
}

.modern-btn.pink {
  background-color: var(--accent-gold);
}

.modern-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(135deg, var(--accent-violet), var(--accent-violet3), var(--accent-violet4));
  color: var(--accent-gold);
}

.modern-card-link {
  text-decoration: none;
  display: block;
  transition: transform 0.3s ease;
}

.modern-card-link:hover {
  transform: scale(1.02);
}

.plus-icon {
  display: inline-block;
  font-size: 1.5rem;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 50%;
  background-color: var(--accent-violet);
  color: #fff;
  font-weight: bold;
  transition: transform 0.3s ease, background-color 0.3s ease;
  margin: 0 auto;
}

.plus-icon.pink {
  background-color: var(--accent-violet);
}

.modern-card:hover .plus-icon {
  transform: scale(1.25);
  background-color: var(--accent-violet4); /* Changed hover color to accent violet4 */
}

@media (min-width: 600px) {
  .modern-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (min-width: 1000px) {
  .modern-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Center the last card */
.modern-grid > .modern-card-link:last-child {
  grid-column: 1 / -1;
  justify-self: center;
}

/* --- PODSTRONA OFERTA – DODATKI --- */
.oferta-paths .collab-box {
  max-width: 1000px;
  margin: 2rem auto;
  padding: 2rem;
  text-align: center;
}

/* --- JAK DZIAŁAMY – NOWOCZESNY STYL --- */
.jak-dzialamy {
  background-color: var(--accent-violet-white);
  padding: 5rem 2rem;
  text-align: center;
}

.jak-dzialamy h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

.jak-dzialamy p {
  font-size: 1.3rem;
  margin-bottom: 3rem;
  color: var(--text-light);
}

.dzialamy-steps {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.dzialamy-step {
  text-align: left;
}

.step-number {
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent-violet3);
  margin-bottom: 0.5rem;
  display: inline-block;
}

.step-line {
  width: 50px;
  height: 3px;
  background-color: var(--accent-violet3);
  margin-bottom: 1rem;
}

.dzialamy-step h3 {
  font-size: 2rem;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.dzialamy-step p {
  font-size: 1.1rem;
  color: var(--text-light);
  line-height: 1.8;
  max-width: 700px;
}

/* MEDIA */
@media (max-width: 900px) {
  .dzialamy-steps {
    padding: 0 1rem;
  }

  .dzialamy-step {
    text-align: center;
  }

  .dzialamy-step p {
    max-width: 100%;
  }

  .step-number {
    margin: 0 auto 0.5rem;
  }

  .step-line {
    margin: 0 auto 1rem;
  }
}

@media (max-width: 768px) {
  .jak-dzialamy {
    padding: 3rem 1rem;
  }

  .jak-dzialamy h2 {
    font-size: 2rem;
  }

  .jak-dzialamy p {
    font-size: 1.1rem;
  }

  .dzialamy-step h3 {
    font-size: 1.6rem;
  }

  .dzialamy-step p {
    font-size: 1rem;
  }
}

@media (max-width: 500px) {
  .dzialamy-steps {
    gap: 3rem;
  }

  .step-number {
    font-size: 2.5rem;
  }

  .step-line {
    width: 40px;
    height: 2px;
  }
}
@media (max-width: 768px) {
  .oferta-paths .collab-box {
    padding: 1.5rem 1rem;
  }

  .oferta-paths .collab-box h3 {
    font-size: 1.5rem;
  }

  .oferta-paths .collab-box p {
    font-size: 1rem;
  }
}
.faq-clean {
  max-width: 800px;
  margin: 4rem auto;
  padding: 2rem;
}

.faq-heading {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 2.5rem;
  color: #222;
}

.faq-item {
  border-top: 1px solid #e0e0e0;
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 1.5rem 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #222;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: color 0.3s ease;
}

.faq-question:hover {
  color: var(--accent-violet3); /* subtelny fiolet przy hoverze */
  background: none;
}

.faq-icon {
  font-size: 1.5rem;
  color: #666;
  transition: transform 0.3s ease;
}

.faq-question[aria-expanded=\"true\"] .faq-icon {
  transform: rotate(45deg);
  color: var(--accent-violet3);
}
.faq-question:hover .faq-icon {
  color: var(--accent-violet3);
  background: none;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-answer p {
  padding: 0 0 1.5rem 0;
  margin: 0;
  color: #444;
  line-height: 1.6;
}
/* --- SEKCJA FAQ i CTA razem--- */
.faq-cta-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr; /* zmiana z 2fr 1fr */
  gap: 0rem;
  align-items: start;
  margin: 4rem 0;
  max-width: 1200px;
  padding: 0 2rem;
}

.faq-section {
  width: 600px;
  margin-left: 1rem; /* Aligns the FAQ section to the left margin */
}

.cta-section {
  text-align: center;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  align-self: center;
  width: 600px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-section:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}



/* --- PODSTRONA DLA NAUKOWCA --- */
/* HERO dla podstrony DLA NAUKOWCA (czysto i profesjonalnie) */
.researcher-hero {
  background-color: #f5f5f5;
  padding: 3rem 2rem;
  text-align: center;
  color: var(--text-dark);
}

.researcher-hero .hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--text-dark);
}

.researcher-hero .hero-subtitle {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-dark);
  margin-bottom: 1rem;
}

.researcher-hero .hero-description {
  font-size: 1.2rem;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.6;
  color: var(--text-light);
}

 /* --- STOPKA PROFESJONALNA --- */
 .footer {
  background: rgb(252, 252, 252);
  backdrop-filter: blur(6px);
  border-top: 1px solid #e0e0e0;
  padding: 2rem 1rem 1rem; /* Reduced padding to make footer less high */
  font-size: 0.95rem;
  color: var(--text-dark);
  }
  
  .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  }
  
  .footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3rem; /* Adjusted gap for better spacing */
  padding-top: 0.5rem; /* Reduced top padding */
  }
  
  .footer-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--text-dark);
  text-decoration: none;
  flex: 0 0 auto;
  margin-left: -1rem;
  margin-top: 0.5rem; /* Reduced top margin */
  }
  
  .footer-brand img {
  height: 50px; /* Reduced image height */
  width: auto;
  }
  
  .footer-columns {
  display: flex;
  gap: 4rem; /* Adjusted gap for better spacing */
  flex-wrap: wrap;
  justify-content: flex-start;
  text-align: left;
  flex: 1;
  max-width: 800px;
  }
  
  .footer-column h4 {
  margin-bottom: 1rem; /* Reduced margin */
  font-size: 1rem;
  }
  
  .footer-column h4 a {
  color: var(--text-dark);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.3s ease;
  }
  
  .footer-column h4 a:hover {
  color: var(--accent-gold);
  }
  
  .footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
  
  .footer-column li {
  margin-bottom: 0.5rem; /* Reduced margin */
  }
  
  .footer-column a {
  color: var(--text-light);
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease;
  }
  
  .footer-column h4 a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  height: 2px;
  width: 0%;
  background-color: var(--accent-pink);
  transition: width 0.3s ease;
  }
  
  .footer-column h4 a:hover::after {
  width: 100%;
  }
  
  .footer-column a:hover {
  color: var(--accent-gold);
  }
  
  .footer-copy {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 1.5rem; /* Reduced margin */
  }
  
  .footer-bottom {
  text-align: center;
  margin-top: 1.5rem; /* Reduced margin */
  }
  
  .footer-privacy a {
  font-size: 0.85rem;
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.2s ease;
  }
  
  .footer-privacy a:hover {
  color: var(--accent-gold);
  }

/* --- SEKCJA DLA KOGO --- */
  .dla-kogo {
    padding: 5rem 2rem;
    background-color: #faf7ff;
    text-align: center;
  }
  
  .dla-kogo h2 {
    font-size: 2.8rem;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
  }
  
  .dla-kogo-intro {
    max-width: 750px;
    margin: 0 auto 3rem;
    font-size: 1.2rem;
    color: var(--text-light);
    line-height: 1.7;
  }
  
  .dla-kogo-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
  }
  
  .dla-kogo-item {
    background: white;
    border-radius: 4px;
    padding: 2rem 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .dla-kogo-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  }
  
  .dla-kogo-item .icon {
    font-size: 2rem;
    color: var(--accent-violet3);
    margin-bottom: 1rem;
  }
  
  .dla-kogo-item p {
    font-size: 1.1rem;
    color: var(--text-dark);
    line-height: 1.6;
  }
  
 /* --- PODSTRONA FORMULARZ --- */
 body.form-page {
  font-family: 'Inter', sans-serif;
  background: #f4f4f8;
  padding: 0px;
  color: #333;
}

.form-container {
  max-width: 700px;
  margin: 0 auto;
  margin-top: 170px;
  background: #fff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  font-weight: 600;
}

label {
  font-weight: 500;
  margin-bottom: 6px;
  display: block;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font-weight: 500;
  font-size: 0.8rem;
  cursor: pointer;
}

.checkbox-inline input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: #D891EF;
  border-radius: 4px;
}
.checkbox-rodo {
  width: 20px;
  height: 20px;
  margin: 0;
  margin-top: 3px;
  accent-color: #D891EF;
  border-radius: 4px;
  appearance: auto; /* zostawiamy domyślny wygląd */
  transform: scale(1.3);
}

.dynamic-section {
  margin-bottom: 20px;
}

button {
  background-color: #6C63FF;
  color: white;
  padding: 14px 20px;
  border: none;
  font-weight: bold;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: var(--accent-violet3);
}

input:focus,
select:focus,
textarea:focus {
  border-color: #D891EF;
  box-shadow: 0 0 0 3px rgba(216, 145, 239, 0.3);
  outline: none;
}

.hidden {
  display: none;
}

.social-connect {
  text-align: center;
  margin-top: 30px;
  margin-bottom: 20px;
  font-size: 0.95rem;
  color: #444;
}

.social-connect .social-icons-form {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin: 10px 0;
}

.social-connect .social-icons-form i {
  font-size: 1.6rem;
  transition: transform 0.2s ease-in-out, opacity 0.3s ease;
}

.social-connect .fab.fa-instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.social-connect .fab.fa-facebook {
  color: #4267B2;
}

.social-connect .social-icons-form i:hover {
  transform: scale(1.15);
  opacity: 0.75;
}

.social-connect .social-text {
  margin-top: 8px;
  font-size: 0.85rem;
  color: #666;
}

.phone-inline {
  display: flex;
  gap: 10px;
}

.phone-inline input {
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  flex: 1;
}
body.form-page .header {
  position: fixed;
  top: 40px; /* wysokość .top-bar */
  left: 0;
  width: 100%;
  z-index: 1000;
  transition: top 0.3s ease-in-out;
}

body.form-page .header.hidden {
  top: -130px; /* dopasuj do wysokości headera */
}
body.form-page .top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
}




/* --- KONIEC FORMULARZA --- */  

/* --- SEKCJA KONTAKT --- */
.contact-section {
  background-color: #f5f5f5;
  padding: 20px 20px;
  border-top: 1px solid #ddd;
  margin-top: 40px;
  margin-bottom: 0px;
}

.contact-two-columns {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 20px;
  align-items: center;
}

.contact-info-box,
.contact-map-box {
  flex: 1;
  margin-left: 100px;
}

.contact-info-box h3 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #222;
}

.contact-info-box p {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.contact-info-box a {
  color: var(--accent-violet3);
  text-decoration: none;
}

.contact-map-box iframe {
  width: 700px;
  height: 250px;
  border: none;
}

@media (max-width: 768px) {
  .contact-two-columns {
    flex-direction: column;
  }

  .contact-map-box iframe {
    height: 250px;
  }
}

.confirmation-fullscreen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* usuń rozciąganie na pełen ekran */
  height: auto;
  min-height: auto;
  text-align: center;
  padding: 2rem;
  margin: 2rem auto;
  max-width: 600px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.confirmation-fullscreen h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.confirmation-fullscreen p {
  font-size: 1.5rem;
  margin-bottom: 2rem;
}

.confirmation-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-confirm {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--accent-violet3);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: transform 0.2s, background-color 0.3s;
}

.btn-confirm:hover {
  transform: scale(1.05);
  background-color: var(--accent-violet2);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* ================================================================= */
/* HAMBURGER – domyślnie ukryty (desktop)                            */
/* ================================================================= */
.hamburger { 
  display:none; 
  background:none; 
  border:0; 
  font-size:1.9rem; 
  cursor:pointer; 
  z-index:1001; 
}
.hamburger:hover {
  background: none;
}
.nav > ul  { display:flex; }         /* menu poziome na desktopie   */

/* ================================================================= */
/*  MOBILE  (≤ 768 px) — WERSJA UJEDNOLICONA                         */
/* ================================================================= */
@media (max-width:768px){

  /* ---------- HEADER + BURGER ---------------------------------- */
  .header{
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    padding:0rem 0rem 0rem;
  }
  .logo           { margin-bottom:.25rem; }
  .logo img       { height:48px; }
  .hamburger{
    display:block;
    position:static;
    font-size:1.8rem;
    color:#222;
    margin:.0rem 0 0rem;
  }

  .nav > ul > li{
    display: block;                 /* albo: flex-direction: column; */
    align-items: stretch;           /* (opcjonalnie) */
  }

  /* (opcjonalnie, żeby ładnie się rozciągało) */
  .dropdown-link{ width: 100%; }
  .dropdown-menu{ width: 100%; }    /* już masz position: static */

  /* ---------- FIOLETOWE KAFELKI -------------------------------- */
  .left-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:nowrap;
    gap:.5rem;
  }
  .left-buttons a{
    font-size:.6rem;
    padding:.2rem .6rem;
    white-space:nowrap;
    margin:0;
  }

  /* ---------- SOCIAL + FLAGA ----------------------------------- */
  .social-icons{
    display: flex;
    gap: 0;
    margin: 0 100px 0 .5rem; /* odstęp od kafelków + prawe wyrównanie */

  }
  .social-icons a i {
    font-size: 0.4rem;
    line-height: 1;
  }


  .lang-switcher{
    display:flex;
    gap:0;
    margin-left:22rem;
  }
  .lang-switcher button img{ width:16px; height:auto; }

  /* ---------- MENU (slide-down) -------------------------------- */
  .nav{
    position:static !important;   /* <— przesuwa treść w dół */
    max-height:0;
    overflow:hidden;
    padding:0;
    background:#fff;;
    transition:max-height .35s ease;
    width:100%;
  }
  .nav.open{ max-height:40rem; }

  .nav>ul{
    display:flex;
    flex-direction:column;
    gap: 0rem;       /* mniejsze odstępy między pozycjami */
    padding: 0rem 1.5rem;
    align-items: flex-start !important;  
  }
  .nav a{ font-size:.9rem; line-height:1.3; text-align:left; padding:.4rem 0; }
  
  .dropdown-menu li a{ font-size:0.85rem; }
  .dropdown-menu{
    position: static !important;   /* zamiast absolute -> przesuwa treść w dół */
    top: auto; left: 0;
    box-shadow: none;              /* opcjonalnie usuń cień */
    border-radius: 0;              /* opcjonalnie wyrównaj narożniki */
    display: none;                 /* domyślnie schowane */
    padding: .1rem 0 .1rem .1rem; /* lekkie wcięcie pod-punktów */
  }

  .nav .donate-button{
    font-size:.8rem;
    padding:.45em .9em;
    max-width:220px;
  }

  /* ---------- TYPOGRAFIA GLOBALNA ------------------------------ */
  html{font-size:14px;}
  p,li{font-size:1rem;line-height:1.55;}
  h1{font-size:2rem;} h2{font-size:1.7rem;}
  h3{font-size:1.4rem;} h4{font-size:1.25rem;} h5{font-size:1.1rem;}

  /* ---------- HERO & CTA --------------------------------------- */
  .hero-fullscreen,.hero-colored,.hero-colored.hero-short{
    position:relative;min-height:60vh;height:auto;
  }
  .hero-overlay{
    position:absolute;
    padding:4rem 1rem;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .hero-content{max-width:90%;margin:0 auto;text-align:center;}
  .hero-content h1,.hero-content h2,.hero-content h3{
    font-size:1.8rem;margin-bottom:1rem;
  }
  .outline-text{font-size:2.5rem;-webkit-text-stroke:.5px #ccc;}

  .cta-alt{
    margin-top:2rem;
    padding:2.5rem 1rem;
    text-align:center;
    background:#F7EFFB;
  }
  .cta-buttons{flex-direction:column;gap:1rem;align-items:center;}

  /* ---------- BLOKI / GRIDY ------------------------------------ */
  .obszar-row,.obszar-row.reverse{flex-direction:column!important;height:auto;}
  .obszar-text,.obszar-image{width:100%;padding:2rem;}
  .obszar-text .obszar-numer{font-size:2.2rem;margin-bottom:.25rem;}
  .obszar-text h2{font-size:1.5rem;line-height:1.3;margin-bottom:.75rem;}
  .obszar-text p{font-size:.9rem;line-height:1.55;}

  .activities-grid{grid-template-columns:1fr;}
  .foundation-inner,.dzialamy-steps{flex-direction:column;}
  .modern-grid{grid-template-columns:1fr!important;}
  .contact-map{grid-template-columns:1fr!important;padding:2rem;gap:1.5rem;}
  .team-members{flex-direction:column;align-items:center;}

  .dla-kogo h2{font-size:1.6rem;margin-top:2rem;}
  .dla-kogo-intro{font-size:.95rem;}
  .dla-kogo-item p{font-size:.9rem;}

  .btn-round{font-size:.95rem;padding:.8rem 1rem;width:100%;max-width:280px;}

  /* ---------- KONTAKT + MAPA ----------------------------------- */
  .contact-two-columns{display:flex;flex-direction:column;gap:2rem;padding:2rem 1rem;}
  .contact-info-box,.contact-map-box{width:100%;padding:0;}
  .contact-info-box h3{font-size:.9rem;margin-bottom:.5rem;}
  .contact-info-box p,.contact-info-box a{font-size:.8rem;line-height:1.55;}

  .contact-map-box iframe,
  .contact-map-frame iframe{
    width:100%;height:150px;min-height:0;max-height:150px;
    border:0;border-radius:8px;display:block;
  }
  .contact-map-frame{margin:0;}

  /* ---------- STOPKA NA MOBILE -------------------------------- */
  .footer{display:none;}
}
/* ================================================================= */


/***************  KONIEC BLOKU  ************************************/
/* ================= ULTIMATE NAV OVERRIDE (≤768px) =============== */
@media (min-width: 1025px){
  html{ font-size: 70%; }   /* rem-y i em-y maleją same */
}

/* ——— PRELOADER ———————————————————————————————— */
#preloader{
  position: fixed;
  z-index: 9999;             /* nad wszystkim */
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  background:#fff;           /* kolor tła – możesz zmienić */
  display:flex;
  justify-content:center;
  align-items:center;
  transition: opacity .4s ease, visibility .4s;
}

#preloader.hide{             /* klasa dokładana w JS */
  opacity:0;
  visibility:hidden;
}

/* kręcące się kółeczko */
.spinner{
  width:56px;
  height:56px;
  border:5px solid rgba(0,0,0,.15);
  border-top-color: var(--accent-violet3-light);
  border-radius:50%;
  animation: spin 1s linear infinite;
}

@keyframes spin{
  to{ transform: rotate(360deg); }
}



/* --- PODSTRONA ERASMUS --- */
.dla-kogo-hero {
  position: relative;
  margin-top: -120px; /* nachodzenie na hero */
  margin-bottom: 6rem;;
  z-index: 5;
}

.dla-kogo-hero-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 5rem;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 1rem;
}

.dla-kogo-hero-card {
  position: relative;
  background: white;
  padding: 2rem 1.5rem 1.5rem;
  box-shadow: 0 15px 35px rgba(0,0,0,0.08);
  border-radius: 1px;
  text-align: left; /* <-- wyrównanie do lewej */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dla-kogo-hero-card-content {
  margin-left: 2rem; /* zwiększony margines tekstu od lewej ściany karty */
}

.dla-kogo-hero-card:hover {
  transform: translateY(-3px); /* zmniejszone powiększenie */
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.dla-kogo-hero-badge {
  position: absolute;
  top: -70px;
  left: 4rem; /* odległość od lewej krawędzi karty */
  width: 130px;
  height: 120px;
  background-color: #0056A4;
  clip-path: polygon(0 0, 75% 0, 100% 25%, 100% 100%, 0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  transition: background-color 0.3s ease;
}

.dla-kogo-hero-card:hover .dla-kogo-hero-badge {
  background-color: var(--accent-violet3);
}

.dla-kogo-hero-card h5 {
  margin-top: 60px; /* miejsce na badge */
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent-violet3);
  text-align: left; /* <-- wyrównanie do lewej */
  margin-left: 2rem; /* zwiększony margines tekstu od lewej ściany karty */
  position: relative;
}

/* Dodaj linię pod nagłówkiem jak w obszar-row */
.dla-kogo-hero-card h5::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--accent-violet3);
  margin-top: 20px;
  margin-bottom: 30px;
}

.dla-kogo-hero-card p {
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--text-light);
  text-align: left; /* <-- wyrównanie do lewej */
  margin-left: 2rem; /* zwiększony margines tekstu od lewej ściany karty */
}

@media (max-width: 768px) {
  .dla-kogo-hero {
    margin-top: -80px;
  }
}



/* ======= ERASMUS+ (styl profesjonalny) ======= */
:root{
  --eu-blue:#1246a7;       /* zbliżone do palety UE */
  --eu-blue-ink:#0e3783;
  --eu-blue-10:#eef3fb;    /* bardzo delikatne tło */
  --eu-gold:#ffcc00;
}

/* Blok sekcji */
.info-erasmus{
  --card-radius:1px;
  margin:5rem auto;
  max-width: 1040px;
  background:#fff;
  border:1px solid #e6eaf2;
  border-left:6px solid var(--eu-blue);
  border-radius: var(--card-radius);
  padding:2.25rem 2rem;
}

/* Pasek tytułu jak „banner” instytucji */
.info-erasmus .erasmus-header{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.25rem;
  padding-bottom:1.3rem;
  padding-top: 2rem;;
  border-bottom:4px solid #e9edf5;
}

/* „Plakietka” z gwiazdami UE */
.info-erasmus .eu-badge{
  width:60px;height:40px;border-radius:4px;

  display:grid;place-items:center;

}


/* Tytuł i podtytuł */
.info-erasmus h2{
  margin:0;
  font-size:2rem;
  color:var(--eu-blue-ink);
  letter-spacing: .2px;
}
.info-erasmus .lead{
  margin:.5rem 0 0 3rem;
  color:#4a5568;
  font-size:1.3rem;
  line-height:1.65;
}

/* Lista w układzie kart, responsywna siatka */
.info-erasmus .points{
  list-style:none;
  padding:0;margin:1.5rem 0 0 0;
  display:grid;
  grid-template-columns: 1fr;
  gap:.75rem;
}
@media (min-width: 768px){
  .info-erasmus .points{
    grid-template-columns: 1fr 1fr; /* dwie kolumny na desktopie */
    gap: .9rem 1rem;
  }
}


.info-erasmus .point{
  display:flex; align-items:flex-start; gap:.75rem;
  padding:.85rem 1rem;
  border:1px solid #e9edf5;
  border-radius:1px;
  background: #fff;
}

/* Ikona punktu jako akcent, bez „kreskówki” */
.info-erasmus .point .icon{
  flex:0 0 22px; height:22px; width:22px;
  border-radius:4px;
  display:grid; place-items:center;
  background: var(--eu-blue-10);
  color: var(--eu-blue);
  font-size:1rem;
}

/* Tekst punktu */
.info-erasmus .point p{
  margin:0;
  color:#2b2f38;
  font-size:1.2rem;
  line-height:1.6;
}

/* Link do strony oficjalnej – styl urzędowy */
.info-erasmus a{
  color: var(--eu-blue-ink);
  text-underline-offset: 1px;
  font-weight:600;
}
.info-erasmus a:hover{ color: var(--eu-blue); }

/* Pasek informacyjny (opcjonalnie) */
.info-erasmus .info-strip{
  margin-top:1.25rem;
  background: var(--eu-blue-10);
  border:1px solid #e0e7f3;
  padding:.75rem 1rem;
  border-radius:1px;
  font-size:1.2rem;
  color:#3a4252;
}


.role-wall {
  position: relative;
  padding: 0;
  min-height: 800px;
  overflow: hidden;
  margin-top: 6rem;
}

.role-wall-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  clip-path: polygon(0 0, 92% 0, 100% 10%, 100% 100%, 0% 100%);
  z-index: 0;
  overflow: hidden;
}

.role-wall-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 86, 164, 0.9);
}

.role-wall-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.role-wall-inner {
  position: absolute;
  top: 80px; /* było 2cm */
  left: 64px; /* było 1.6cm */
  right: 800px; /* było 20cm */
  z-index: 1;
  color: white;
  text-align: left;
  align-items: flex-start;
  justify-content: flex-start;
  display: flex;
  flex-direction: column;
}

/* Dodaj linię pod nagłówkiem jak w obszar-row */
.role-wall-inner h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--accent-violet3);
  margin-top: 20px;
  margin-bottom: 30px;
}

.role-wall-inner,
.role-wall-inner * {
  color: #fff !important;
}

.role-wall-inner h2,
.role-wall-inner h5 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: left;
}

.role-wall-inner p {
  font-size: 1.1rem;
  line-height: 1.6;
  text-align: justify;
}

.role-wall-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
  max-width: 1000px;
  height: 550px; /* wysokość siatki */
  position: relative;
  z-index: 1; /* nad ścianą */
  margin-top: -55rem;
  margin-left: 4.5cm; /* wyrównanie do lewej */
  margin-bottom: 10rem; /* margines dolny */
}

.role-wall-card {
  background: white;
  color: #222;
  padding: 2rem;
  border-radius: 1px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.1);
  position: relative;
  text-align: left;
  z-index: 1; /* pewność że jest nad ścianą */
}

/* Pozycjonowanie kafli */
.role-wall-card:nth-child(1) { grid-column: 2; grid-row: 1; }
.role-wall-card:nth-child(2) { grid-column: 3; grid-row: 1; }
.role-wall-card:nth-child(3) { grid-column: 1; grid-row: 2; }
.role-wall-card:nth-child(4) { grid-column: 2; grid-row: 2; }
.role-wall-card:nth-child(5) { grid-column: 3; grid-row: 2; }


.role-wall-icon {
  font-size: 2rem;
  color: #0056A4;
  margin-bottom: 1rem;
}

.role-wall-card h3 {
  margin-bottom: 1rem;
  font-size: 1.6rem;
}

.role-wall-card p {
  font-size: 1.rem;
  line-height: 1.6;
  color: #444;
}

.role-wall-plus {
  position: absolute;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 35px;
  height: 35px;
  background: #0056A4;
  color: white;
  font-weight: bold;
  text-align: center;
  line-height: 35px;
  border-radius: 50%;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.role-wall-card:hover .role-wall-plus {
  transform: scale(1.2);
  background-color: #003f7d;
}

@media (max-width: 768px) {
  /* Sekcja Role Wall – tło na całą szerokość */
  .role-wall-bg {
    width: 100%;
    clip-path: none;
  }

  /* Treść pod zdjęciem, nie obok */
  .role-wall-inner {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    padding: 1.5rem;
  }

  /* Siatka kafli – jedna kolumna, automatyczna wysokość */
  .role-wall-grid {
    grid-template-columns: 1fr;
    margin: 2rem auto;
    height: auto;
  }

  /* Reset pozycji dla kafli */
  .role-wall-card {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Dostosowanie tekstu w kartach, żeby marginesy były proporcjonalne */
  .role-wall-card h3,
  .role-wall-card p {
    margin-left: 0;
  }
}


/* DODATKI tylko dla strony darowizn (lekko, bez naruszania istniejącego designu) */
    .trust-bar {display:flex; gap:1.5rem; justify-content:center; align-items:center; flex-wrap:wrap; padding:1rem 2rem;}
    .trust-bar i {font-size:1.2rem; color:#2b2b2b}
    .donate-wrap {max-width:1100px; margin: 0 auto; padding: 3rem 1rem 5rem; display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem}
    .donate-card {background:#fff; border:1px solid #eee; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,.06); padding:2rem}
    .donate-card h3 {margin-bottom:1rem}
    .amount-grid {display:grid; grid-template-columns: repeat(4, minmax(90px,1fr)); gap:.75rem}
    .amount-btn {border:1.5px solid var(--accent-green); background:#fff; color:#222; padding:.9rem 1rem; border-radius:3px; font-weight:600; cursor:pointer; transition:.2s; font-size: 1.5rem; color: var(--accent-green);}
    .amount-btn.active, .amount-btn:hover {background: linear-gradient(135deg, var(--accent-green-white), var(--accent-green-white)); border:1.5px solid var(--accent-green); transform: translateY(-1px)}
    .amount-custom {display:flex; gap:.6rem; align-items:center; margin-top:.75rem}
    .amount-custom input {flex:1; padding:.85rem 1rem; border:1px solid #ddd; border-radius:8px; font-size:1rem}
    .purpose-grid {display:grid; grid-template-columns: 1fr; gap:.5rem}
    .purpose-option {display:flex; gap:.75rem; align-items:center; padding:.8rem 1rem; border:1px solid #eee; border-radius:8px; background:#fcfcff}
    .purpose-option input {accent-color: var(--accent-violet3)}
    .freq-toggle {display:flex; gap:.75rem; margin:.25rem 0 1rem}
    .freq-toggle button {flex:1; border:1.5px solid #ddd; background:#fff; padding:.75rem 1rem; border-radius:999px; cursor:pointer; font-weight:600; color: darkslategrey; font-size:1.2rem; transition:.2s}
    .freq-toggle button.active {border-color: var(--accent-violet3); background: var(--accent-violet-white)}
    .methods {display:grid; grid-template-columns: repeat(4,1fr); gap:.6rem}
    .method {border:1px solid #eee; border-radius:8px; padding:.9rem .6rem; display:flex; align-items:center; justify-content:center; gap:.5rem; background:#fff; cursor:pointer; transition:.2s}
    .method.active, .method:hover {border-color: var(--accent-violet3); box-shadow:0 6px 16px rgba(128,90,213,.15)}
    .method img {height:20px}
    .divider {height:1px; background:#eee; margin:1.25rem 0}
    .inline-two {display:grid; grid-template-columns:1fr 1fr; gap:.75rem}
    .donate-submit {width:100%; padding:1rem 1.25rem; border:none; border-radius:10px; font-size:1.1rem; font-weight:700; cursor:pointer; background: linear-gradient(135deg, var(--accent-violet), var(--accent-violet2), var(--accent-violet3)); color:#fff; transition:.2s}
    .donate-submit:hover {transform: translateY(-1px); box-shadow:0 10px 24px rgba(128,90,213,.25)}
    .summary {position:sticky; top:96px; align-self:start}
    .summary .row {display:flex; justify-content:space-between; margin:.5rem 0; font-size:1rem}
    .summary .total {font-weight:800; font-size:1.2rem}
    .secure-note {display:flex; gap:.5rem; align-items:center; font-size:.95rem; color:#444}
    .secure-note i {color:#38a169}
    .bank-box {background:#f8f8f8; border:1px dashed #ccc; padding:1rem; border-radius:8px; font-size:.95rem}
    .badge {display:inline-flex; align-items:center; gap:.35rem; background:#f5f5ff; color:#333; border:1px solid #e6e6ff; border-radius:999px; padding:.35rem .6rem; font-size:.85rem; font-weight:600}
    .hero-colored.hero-short .hero-content h1 {margin-bottom:.5rem}
    .mini {font-size:.9rem; color:#666}
    .legal-links {display:flex; gap:1rem; flex-wrap:wrap; font-size:.95rem; margin-top:1rem}
    .legal-links a {color:var(--accent-grey); text-decoration:underline}
    .test-banner {display:none; background:#fffbe6; border:1px solid #ffe58f; color:#614700; border-radius:8px; padding:.75rem 1rem; margin-bottom:1rem; font-size:.95rem}

    @media (max-width: 980px){ .donate-wrap{grid-template-columns:1fr} .summary{position:static} .methods{grid-template-columns: repeat(2,1fr)} .amount-grid{grid-template-columns: repeat(3,1fr)} }

    /* Mini dodatki pod tryb kompaktowy (bez ruszania Twojego CSS) */
    .donate-wrap { display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; padding: 2rem; }
    .donate-card { background:#fff; border:1px solid #eee; border-radius:8px; padding:1.25rem 1.25rem 1.5rem; box-shadow: 0 4px 12px rgba(0,0,0,.04); }
    .amount-grid {display:grid; grid-template-columns: repeat(4, minmax(90px,1fr)); gap:.75rem}
    .amount-btn {border:1.5px solid var(--accent-green); background:#fff; color:#222; padding:.9rem 1rem; border-radius:3px; font-weight:600; cursor:pointer; transition:.2s; font-size: 1.5rem; color: var(--accent-green);}
    .amount-btn.active, .amount-btn:hover {background: linear-gradient(135deg, var(--accent-green-white), var(--accent-green-white)); border:1.5px solid var(--accent-green); transform: translateY(-1px)}
    .amount-custom { display:flex; align-items:center; gap:.5rem; margin-top:.25rem; }
    .amount-custom input { width:100%; padding:.7rem .9rem; border:1px solid #ddd; border-radius:8px; font-size:1rem; }
    .divider{ height:1px; background:#eee; margin:1.25rem 0; }
    .donate-submit, .expand-btn { width:100%; display:inline-flex; justify-content:center; align-items:center; gap:.5rem; padding:1rem 1.1rem; border:0; border-radius:999px; background: var(--accent-green, #00e6b0); color:#fff; font-weight:800; cursor:pointer; }
    .expand-btn.secondary { background:#111; }
    .compact-note { font-size:.9rem; color:#555; margin-top:.5rem; }
    /* ukrywanie rozbudowanej części */
    .advanced-fields[hidden] { display:none !important; }
    /* podsumowanie po prawej – ukryte w trybie kompaktowym, pokaże się po rozwinięciu */
    aside.summary.compact-hidden { opacity:.35; filter:grayscale(20%); }
    @media (max-width: 900px){ .donate-wrap{ grid-template-columns:1fr; } aside.summary{ order:2; } }
    /* pasek „demo” */
    .test-banner { background:#fff8d7; border:1px dashed #e2cf7f; color:#6b5b1a; padding:.6rem .8rem; border-radius:8px; font-size:.9rem; margin-bottom:1rem; }
    .methods { display:grid; grid-template-columns: repeat(4, minmax(90px,1fr)); gap:.6rem; }
    .method { background:#fafafa; border:1px solid #e7e7ee; border-radius:10px; padding:.9rem; display:flex; justify-content:center; align-items:center; gap:.5rem; cursor:pointer; }
    .method.active{ outline:2px solid var(--accent-violet3, #D891EF); background:#fff; }
    .purpose-grid { display:grid; grid-template-columns:1fr; gap:.5rem; }
    .purpose-option{ display:flex; gap:.6rem; background:#fafafa; border:1px solid #eee; padding:.7rem .9rem; border-radius:10px; align-items:center; }
    .freq-toggle{ display:flex; gap:.5rem; }
    .freq-toggle button{ flex:1; padding:.7rem .9rem; border:1px solid #e7e7ee; border-radius:10px; background:#fafafa; cursor:pointer; }
    .freq-toggle button.active{ outline:2px solid var(--accent-violet3, #D891EF); background:#fff; }
    .inline-two{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
    @media (max-width:700px){ .inline-two{ grid-template-columns:1fr; } .methods{ grid-template-columns: repeat(3,minmax(90px,1fr)); } .amount-grid{ grid-template-columns: repeat(3,minmax(80px,1fr)); } }