/* 0. Reset box-sizing i usunięcie poziomego scrolla */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}


/* ==== 1. WSZYSTKIE OBRAZY I IFRAME MAKS. DO SZEROKOŚCI KONTERA ==== */
img, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ==== 2. NAPRAWA .onas-container – zamiast padding-left tylko padding boczny ==== */
.onas-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto 60px;
  padding: 0 20px;
}


/* ==== 3. NAPRAWA .video-wrapper W .video-section ==== */
.video-section .video-wrapper {
  max-width: 100% !important;      /* nigdy nie wychodzić poza rodzica */
  margin: 0 !important;
}

/* ==== 4. DODATKOWA RESPONSYWNOŚĆ ==== */
@media (max-width: 768px) {
  .onas-container {
    flex-wrap: wrap;
  }
  .onas-photo,
  .onas-text {
    flex: 1 1 100%;
    margin: 0 0 20px 0;
  }
  .video-section {
    flex-direction: column;
  }
  .video-section .video-wrapper,
  .video-section .video-content {
    flex: 1 1 100%;
  }
}


/* ===========================
   1. Globalny gradient tła
   złoto → fiolet → złoto
   =========================== */
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(
    to bottom,
    #d4af37 0%,
    #d4af37 15%,
    #4a148c 50%,
    #d4af37 85%,
    #d4af37 100%
  );
  color: #333;
  font-family: Arial, sans-serif;
}

/* ===========================
   2. Header ze złotą fakturą
   =========================== */
header {
  background-image: url("images/zlotetlo.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;        /* potrzebne do absolutnego pozycjonowania nav */
}

.logo {
  width: 250px;
}

/* wycentrowane menu niezależnie od logo i selektora języka */
header nav {
 
  display: flex;
  gap: 20px;                /* odstęp między linkami */
}

/* wspólne stylowanie wszystkich linków w nav */
nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: 25px;
}

/* osobny kolor dla linku Premium */
nav a.nav-premium {
  color: #4a148c;
}

nav a.nav-premium:hover {
  color: #6a1b9a;
}


/* ===========================
   3. Selektor języka
   =========================== */
.language-selector {
  position: absolute;
  top: 20px;
  right: 20px;
}
.language-selector select {
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 4px;
  border: none;
  background-color: #fff;
  color: #222;
  font-weight: bold;
}

/* ===========================
   4. Sekcja HOME (hero)
   =========================== */
#home {
  background-image:
    linear-gradient(
      to bottom,
      rgba(74,20,140,0)   0%,
      rgba(74,20,140,0.6) 50%,
      rgba(74,20,140,1)   100%
    ),
    url("images/zlotetlo.png");
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  padding: 40px 20px;
  text-align: center;
}
#welcome-text,
#home .welcome-text {
  color: #fff;
}
.profit-title {
  color: #000;
  text-transform: uppercase;
  font-weight: bold;
}
.highlight-s {
  color: red;
}
#home h1 {
  font-size: 3rem;
  margin-bottom: 0.5em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
#home p.hero-text-red {
  color: #fff !important;
  font-size: 200%;
  font-weight: bold;
  font-family: 'Playfair Display', serif;
}

/* ===========================
   5. Sekcje „O nas” (#services) i „Wiadomości” (#about)
   – jednolity fiolet
   =========================== */
#services,
#about {
  background-color: #4a148c;
  color: white;
  padding: 40px 20px;
  text-align: center;
  border-top: none;
}
section {
  background-color: transparent;
  border-top: none;
}
#services h2, #about h2,
#services h3, #about h3 {
  color: white;
}
#services a, #about a {
  color: #ffeb3b;
}

/* ===========================
   6. Sekcja „O nas” – flex
   =========================== */
.onas-container {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 1200px;
  margin: 0 auto 60px;
  padding-left: 20px;
}
.onas-photo {
  width: 45%;
  max-width: 400px;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  margin-right: 40px;
}
.onas-text {
  width: 55%;
  text-align: left;
}
.onas-text h2 {
  font-size: 42px;
  margin-bottom: 20px;
}
.onas-text p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 15px;
}

.onas-special {
  font-weight: 900; /* super-gruba czcionka */
  color: #e53935 !important;   /* wyrazista czerwień */
}





/* ===========================
   8. Transakcje – wstęp
   =========================== */
.transakcje {
  max-width: 1200px;
  margin: 0 auto 60px;
  text-align: center;
  padding: 20px;
}
.transakcje h3 {
  font-size: 30px;
  margin: 40px 0 20px;
  color: white;
}
.transakcje-intro {
  color: white;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

/* 9. Siatka i karty transakcji */
.transakcje-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
}

.transakcja-box {
  background-color: #fafafa;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,0,0,0.15);
  padding: 15px;
  width: 300px;
  display: flex;
  flex-direction: column;
}

/* Obrazek z kursorem powiększenia */
.transakcja-image img {
  width: 100%;
  border-radius: 10px;
  cursor: zoom-in;
}

/* ======= OPIS ======= */
/* Usuń wszelkie uppercase ustawienia */
.transakcja-opis-box {
  margin-top: 10px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.transakcja-opis-box p {
  margin: 4px 0;
  color: #000;
  text-transform: none;    /* zachowaj pisownię taką, jak w HTML */
  font-size: 0.95rem;
  line-height: 1.3;
}

/* Kolorowanie części po "ZYSK:" */
.transakcja-opis-box .percent {
  color: #2e7d32;          /* ciemna zieleń */
  font-weight: bold;     /* nie pogrubiać procentów */
}
/* Tekst po procencie – pogrubione */
.transakcja-opis-box .further {
  font-weight: bold;
}

/* Wyróżnienie etykiet */
.transakcja-opis-box strong {
  font-weight: bold;       /* "KWOTA inwestycji", "ZYSK:", "TYP AKTYWA:" */
}

/* ======= ANALIZA ======= */
.transakcja-analiza-box {
  margin-top: 10px;
  text-align: center;
}
.transakcja-analiza-box .analyze-btn {
  display: inline-block;
  padding: 8px 16px;
  background: #fff;
  border: 1px solid #000;
  border-radius: 8px;
  color: #000;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
}
.transakcja-analiza-box .analyze-btn:hover {
  background: #f0f0f0;
}


/* ==================================================
   10. Premium‐box (złote tło + poprawione kolory)
   ================================================== */
.premium-box {
  background-image: url("images/zlotetlo.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
  padding: 30px;
  margin: 60px auto 40px;
  max-width: 900px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  border: 2px solid #d4af37;
}

/* 10.1 Tytuł “Konto PREMIUM” – fioletowy, 50% większy */
.premium-box .premium-title {
  color: #4a148c;        /* fiolet */
  font-size: 150%;
  margin-bottom: 0.5em;
}

/* 10.2 Tekst opisowy i lista – czarny, 50% większy */
.premium-box .premium-text {
  color: #000;           /* czarny */
  font-size: 150%;
  line-height: 1.4;
  margin: 0.75em 0;
}

/* 10.3 Wyróżnienie słowa “kontem premium” – czarne, pogrubione */
.premium-box .premium-keyword {
  color: #000;           /* czarny */
  font-weight: bold;
}

/* 10.4 Pogrubiony PROFIT HUNTER<S> z czerwonym “S” */
.premium-box strong {
  font-weight: bold;
}
.premium-box strong .highlight-s {
  color: red;
}

/* 10.5 Przycisk CTA – stałe fioletowe tło, 50% większy tekst */
.premium-box .premium-button {
  display: inline-block;
  margin-top: 1em;
  background-color: #4a148c;  /* fiolet */
  color: #fff;                /* biały tekst */
  border: 2px solid #4a148c;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 150%;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.premium-box .premium-button:hover {
  background-color: #6a1b9a;  /* jaśniejszy fiolet na hover */
  color: #fff;
}



/* ===========================
   11. Sekcja Kontakt
   odwrócony pół-gradient + złoto
   =========================== */
#contact {
  background-image:
    linear-gradient(
      to top,
      rgba(74,20,140,0)   0%,
      rgba(74,20,140,0.6) 50%,
      rgba(74,20,140,1)   100%
    ),
    url("images/zlotetlo.png");
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  padding: 40px 0;
}
.contact-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: rgba(212,175,55,0.9);
  padding: 20px;
  border-radius: 12px;
  text-align: center;
}
.contact-container h2,
.contact-container p {
  color: #222;
  margin: 10px 0;
  font-size: 20px;
}

/* ===========================
   12. Ikony społecznościowe
   =========================== */
.social {
  margin-top: 20px;
}
.social h3 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #222;
}
.social a {
  display: inline-block;
  margin: 0 8px;
  transition: transform 0.2s;
}
.social a:hover {
  transform: scale(1.1);
}
.social img {
  width: 32px;
  height: 32px;
}

/* ===========================
   13. Stopka
   =========================== */
footer {
  background-color: #222;
  color: white;
  text-align: center;
  padding: 10px 0;
}
.footer-link {
  color: #d4af37;
  text-decoration: none;
  font-size: 0.9rem;
}
.footer-link:hover {
  text-decoration: underline;
}

/* ===========================
   14. Polityka prywatności
   =========================== */
.policy-container {
  background-color: #fff;
  max-width: 800px;
  margin: 40px auto 80px;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  color: #333;
  line-height: 1.6;
}
.policy-container h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5em;
}
.policy-container h2 {
  font-size: 1.5rem;
  margin-top: 1.5em;
}
.policy-container ul {
  list-style: disc inside;
  margin: 10px 0 20px 0;
}
.policy-container p {
  margin: 10px 0;
}

/* ===========================
   15. Cookie banner
   =========================== */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,0.85);
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 0.9rem;
  z-index: 1000;
}
.cookie-banner button {
  margin: 0 10px;
  padding: 8px 16px;
  background: #4a148c;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.cookie-banner a {
  color: #ffeb3b;
  text-decoration: underline;
}

/* Etykieta OPIS: tylko jej tekst na czerwono */
.transakcja-opis-box > a,
.transakcja-opis-box > a strong {
  color: #e53935 !important;
}

/* Przycisk ZOBACZ ANALIZĘ – tekst na czerwono */
.transakcja-analiza-box .analyze-btn {
  color: #e53935 !important;
  border-color: #e53935 !important;
}

/* Hover też z delikatnym czerwonym podkładem */
.transakcja-analiza-box .analyze-btn:hover {
  background: rgba(229,57,53,0.1) !important;
}

.transakcja-analiza-box .analyze-btn {
  background-image: url("images/zlotetlo.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #222 !important;        /* ciemny tekst czytelny na złocie */
  border: 1px solid #d4af37 !important; /* złota ramka dla spójności */
}

/* Hover: przyciemnij lekko, żeby było czuć interakcję */
.transakcja-analiza-box .analyze-btn:hover {
  filter: brightness(0.9);
}

/* -----------------------------
   Podsumowanie pod transakcjami
   ----------------------------- */
.transakcje-conclusion {
  margin-top: 40px;
  text-align: center;
}

.transakcje-conclusion p {
  color: #fff;               /* cały tekst biały */
  font-size: 1.1rem;
  line-height: 1.5;
  max-width: 800px;
  margin: 0 auto;
}

/* PROFIT HUNTER  – czarny + czerwone „S” */
.transakcje-conclusion .profit-title {
  color: #000;               /* PROFIT HUNTER na czarno */
  text-transform: uppercase;
  font-weight: bold;
}

.transakcje-conclusion .highlight-s {
  color: red;                /* czerwone „S” */
}

/* ==============================
   Podsumowanie w złotej ramce
   ============================== */
.transakcje-conclusion-box {
  background-image: url("images/zlotetlo.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
  padding: 20px;
  margin-top: 40px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.transakcje-conclusion-text {
  color: #fff;            /* cały tekst biały */
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
  margin: 0;
}

/* PROFIT HUNTER – czarne + czerwone „S” */
.transakcje-conclusion-text .profit-title {
  color: #000;
}

.transakcje-conclusion-text .highlight-s {
  color: red;
}

/* słowo “premium” w podsumowaniu na fioletowo */
.premium-word {
  color: #4a148c;  /* ten sam fiolet co w headerze/sekcjach */
  font-weight: bold;
}

/* większa przerwa nad i pod disclaimer */
.disclaimer {
  margin-top: 1cm;    /* przerwa przed */
  margin-bottom: 3cm; /* przerwa po */
}

/* 0. Box-sizing dla auth */
.auth-container,
.auth-container *,
.auth-container *::before,
.auth-container *::after {
  box-sizing: border-box;
}

/* 2. Formularz logowania */
.auth-container {
  position: absolute;
  top: 60px;           
  right: 20px;
  width: 250px;              /* zwiększone o 30px */
  background: rgba(255,255,255,0.95);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  padding: 16px;
  text-align: center;
  z-index: 10;
}

.auth-form input {
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9rem;
}

.auth-form button {
  width: 100%;
  padding: 8px;
  background-color: #4a148c;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.2s;
}

.auth-form button:hover {
  background-color: #6a1b9a;
}

.auth-register {
  margin-top: 8px;
  font-size: 0.85rem;
}

.auth-register a {
  color: #4a148c;
  font-weight: bold;
  text-decoration: none;
}

.auth-register a:hover {
  text-decoration: underline;
}


/* ==================================================
   Premium‐box – złote tło + wymuszone kolory
   ================================================== */
.premium-box {
  background-image: url("images/zlotetlo.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
  padding: 30px;
  margin: 60px auto 40px;
  max-width: 900px;
  box-shadow: 0 0 15px rgba(0,0,0,0.1);
  border: 2px solid #d4af37;
}

/* 1. Nagłówek “Konto PREMIUM” – fioletowy, powiększony, nie pogrubiony */
.premium-box > h2.premium-title {
  color: #4a148c !important;  /* wymuszenie fioletu */
  font-size: 150%;            /* 50% większy */
  font-weight: normal;
  margin-bottom: 0.5em;
}

/* 2. Tekst opisowy i lista – czarne, powiększone, bez pogrubienia */
.premium-box .premium-text {
  color: #000 !important;     /* wymuszenie czerni */
  font-size: 150%;
  line-height: 1.4;
  margin: 0.75em 0;
  font-weight: normal;
}

/* 3. Wyróżnienie “kontem premium” – też czarne, normalne */
.premium-box .premium-keyword {
  color: #000 !important;
  font-weight: normal;
}

/* 4. PROFIT HUNTER<S> – pogrubione całe, z czerwonym “S” */
.premium-box li strong {
  font-weight: bold;
}
.premium-box li strong .highlight-s {
  color: red;
}

/* 5. Przycisk CTA – fioletowe tło na stałe, powiększony, pogrubiony */
.premium-box .premium-button {
  display: inline-block;
  margin-top: 1em;
  background-color: #4a148c;  /* fioletowe tło */
  color: #fff;
  border: 2px solid #4a148c;
  border-radius: 8px;
  padding: 12px 28px;
  font-size: 150%;
  font-weight: bold;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}
.premium-box .premium-button:hover {
  background-color: #6a1b9a;
  color: #fff;
}


/* Lightbox overlay */
.lightbox-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  cursor: zoom-out;
}
.lightbox-overlay img {
  max-width: 90%;
  max-height: 90%;
  box-shadow: 0 0 20px rgba(0,0,0,0.5);
  border-radius: 8px;
}


/* 2cm odstępu pod pierwszą siatką transakcji */
.transakcje-grid.first-grid {
  margin-bottom: 2cm;
}


 /* Flex layout for full-height body */
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      background: linear-gradient(
        to bottom,
        #d4af37 0%, #d4af37 15%, #4a148c 50%, #d4af37 85%, #d4af37 100%
      );
    }
    main {
      flex: 1; /* pozwala głównej zawartości rozciągnąć się i wypchnąć stopkę w dół */
      display: flex;
      flex-direction: column;
    }

    /* Portfolio w 5 kolumnach */
   @media (min-width: 415px) { .transakcje-grid { display: flex; justify-content: space-between; flex-wrap: nowrap; gap: 10px; margin: 0 auto; max-width: 1200px; padding: 20px 0; }
    .transakcje-grid.first-grid { margin-bottom: 2cm; }
    .transakcja-box { flex: 0 0 18%; width: 18%; }
    /* Na stronie głównej (first-grid) – 3 w wierszu, większe */
    .transakcje-grid.first-grid .transakcja-box {
     flex: 0 0 30%;
     width: 30%;
     } }


    /* Tytuł PORTFEL */
    .premium-title { font-size: 4.5em !important; margin-bottom: 3cm; text-align: center; }
    .premium-title .white { color: #fff; }
    .premium-title .profit-text { color: #000; }

    /* Nagłówki */
    h3 { text-align: center; margin: 0.5cm 0; font-size: 1.2em; }
    .hyphen { color: #000; }
    .rise { color: #4CAF50; }
    .fall { color: red; }

    /* Podsumowanie portfela */
    .summary { max-width: 600px; margin: 0 auto; }
    .percent { color: #4CAF50; }

    /* Sekcja wideo i kursów */
    .analysis-title { font-size: 200%; text-align: center; margin-bottom: 1rem; }
    .video-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin: 0 auto 2cm; max-width: 1200px; }
    .video-item { flex: 0 0 calc(33.333% - 10px); text-align: center; }
    .video-wrapper iframe { width: 100%; height: 360px; }
    .courses-title { font-size: 200%; text-align: center; margin: 2cm 0 1cm; }
    .course-title { font-size: 1rem; margin: 1cm 0 0.5cm; text-align: center; }

    /* Sekcja Kontakt – pełna szerokość z gradientem i złotym tłem */
    #contact {
      background-image:
        linear-gradient(
          to top,
          rgba(74,20,140,0) 0%,
          rgba(74,20,140,0.6) 50%,
          rgba(74,20,140,1) 100%
        ), url("images/zlotetlo.png");
      background-size: cover, cover;
      background-repeat: no-repeat, no-repeat;
      background-position: center, center;
      padding: 40px 0;
      width: 100vw;
      position: relative;
      left: 50%; margin-left: -50vw;
    }
    .contact-container {
      max-width: 1200px;
      margin: 0 auto;
      background-color: rgba(212,175,55,0.9);
      padding: 20px;
      border-radius: 12px;
      text-align: center;
    }
    .contact-container h2,
    .contact-container p { color: #222; margin: 10px 0; font-size: 1.1rem; }

    /* Stopka – przyklejona do dołu */
    footer {
      background-color: #222;
      color: white;
      text-align: center;
      padding: 10px 0;
      margin-top: auto;
      width: 100vw;
      position: relative;
      left: 50%; margin-left: -50vw;
    }
    footer p { margin: 5px 0; }
    footer a { color: #d4af37; text-decoration: none; }
    footer a:hover { text-decoration: underline; }


.dash {
  color: #000; /* czarny myślnik */
}

.rise {
  color: #4CAF50; /* zielony tekst – możesz zmienić na inny odcień */
}

.fall {
  color: red;       /* czerwony tekst dla „ZAGRANE NA SPADKI” */
}


/* Tylko na stronie Premium */
.premium h3 {
  font-size: 2.4em;
}


/* Tylko na stronie Premium: 2 cm odstępu przed pierwszym h3 po siatce */
.premium .transakcje-grid + h3 {
  margin-top: 3cm !important;
}



/* Premium: przyklej stopkę do dołu */
.premium footer {
  margin-top: auto;
}



/* Premium: obudowa i wyrównanie podsumowania portfela */
.premium .summary {
  background: #fff;                  /* biały box */
  border-radius: 12px;               /* zaokrąglone rogi */
  padding: 20px;                     /* odstęp wewnątrz */
  max-width: 600px;                  /* szerokość pudełka */
  margin: 20px auto;                 /* wycentrowanie i odstęp */
}

.premium .summary-text {
  display: flex;
  justify-content: space-between;   /* tekst przed i po dwukropku */
  font-size: 1.5rem;                 /* powiększona czcionka */
  margin: 8px 0;                     /* odstęp między wierszami */
}

.premium .summary-text .percent {
  color: #2e7d32;                    /* zielone procenty */
  font-weight: bold;
}
/* Premium: wymuś czarny tekst w summary tylko dla tej sekcji */
.premium .summary-text {
  color: #000 !important;
}

/* Premium: procenty niech nadal zostaną zielone */
.premium .summary-text .percent {
  color: #2e7d32 !important;
}

/* Premium: styl nagłówka PODSUMOWANIE */
.premium .summary > .summary:first-child .summary-text:first-child {
  text-align: center;          /* wyśrodkuj */
  margin-top: 0;               /* przyklej blisko górnej krawędzi pudełka */
  margin-bottom: 1rem;         /* odstęp pod nim */
  font-size: 3rem !important; /* powiększ o 30% w stosunku do normalnej wielkości h2/p */
}


/* Premium: unieś i wyśrodkuj tylko pierwszy wiersz „PODSUMOWANIE” */
.premium .summary > .summary:first-child .summary-text:first-child {
  position: relative;
  top: -0.5cm;                     /* uniesienie w górę o 0,5 cm */
  left: 50%;
  transform: translateX(-50%);     /* wyśrodkowanie poziome */
  margin: 0 0 0.5rem !important;   /* odstęp pod spodem */
  font-size: 3rem !important;      /* duża czcionka */
  text-align: center;              /* na wszelki wypadek */
}

/* Premium: styl nagłówka „PODSUMOWANIE” */
.premium .summary-header {
  display: block;
  text-align: center !important;      /* wyśrodkowanie poziome */
  margin: 0 0 1rem !important;         /* 1rem odstępu pod spodem */
  font-size: 3rem !important;          /* Twoja duża czcionka */
  line-height: 1;                      /* żeby było bliżej góry */
}

.premium-box .highlight-red {
  color: #ff0000 !important;
  font-weight: bold !important;
}


/* —— Blok prezentacji inwestora —— */
.investor-profile {
  text-align: center;
  margin: 40px auto 60px;
  max-width: 1400px;
  padding: 0 20px;
}

.investor-profile img {
  display: block;
  margin: 0 auto 20px;
  max-width: 100%;
  height: auto;
}

.investor-name {
  color: #fff;
  font-weight: bold;
  font-size: 2.3rem;
  margin: 0;
  text-transform: uppercase;
}

.investor-title {
  color: #fff;
  font-size: 1.625rem;
  margin: 8px 0 0;
  line-height: 1.4;
}

/* Ponowne użycie istniejącej klasy profit-title i highlight-s */
.investor-profile .profit-title {
  color: #000;              /* czarne PROFIT HUNTER */
  font-weight: bold;
  text-transform: uppercase;
}

.investor-profile .highlight-s {
  color: red;               /* czerwone „S” */
}


/* ——— Wyrównanie podpisów do prawej krawędzi kontenera ——— */
.investor-profile .investor-name,
.investor-profile .investor-title {
  margin: 0;             /* zerujemy wszelkie marginesy */
  text-align: right;     /* wyrównanie tekstu do prawej */
}

/* ============================================
   1) WIADOMOŚCI DNIA – dwie kolumny w jednym wierszu
   ============================================ */
.video-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;               /* odstęp między kolumnami */
  justify-content: center; /* wycentrowanie obu bloków */
  margin-bottom: 40px;
}

.video-row .video-block {
  flex: 1 1 calc(50% - 20px); /* każda kolumna ~50% szerokości minus gap */
  max-width: calc(50% - 20px);
}

.video-block h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 1.5rem;
  margin-bottom: 0.5em;
}

.video-time {
  font-size: 1.2rem;
  color: #ffeb3b;  /* żółty, jak linki w sekcjach */
  margin-left: 0.5em;
}

/* ============================================
   2) POJEDYNCZE SEKCJE (PROFITOWY WEEKEND, ANALIZY, RAPORTY)
      – wycentrowane wideo i tytuł
   ============================================ */
.video-section.center {
  text-align: center;
  margin-bottom: 40px;
}

.video-section.center h3 {
  font-size: 1.75rem;
  margin-bottom: 0.75em;
}

.video-section.center .video-wrapper {
  margin: 0 auto;
  max-width: 75%;  /* zajmuje 75% szerokości kontenera */
}

/* ============================================
   3) RESPONSYWNOŚĆ – kolumny pod siebie na mobilkach
   ============================================ */
@media (max-width: 768px) {
  .video-row .video-block {
    flex: 1 1 100%;
    max-width: 100%;
  }
  .video-section.center .video-wrapper {
    max-width: 100%;
  }
}


/* 1) Usuń efekt transform:scale z filmów */
.video-wrapper {
  transform: none !important;
}

/* 2) Blok WIADOMOŚCI DNIA – dwa filmy obok siebie */
.daily-news {
  display: flex;
  justify-content: space-between;
  gap: 1rem;                /* odstęp między blokami */
  margin-bottom: 2rem;      /* odstęp pod całą sekcją */
}
.daily-news .video-block {
  width: calc(50% - 0.5rem);
}
.daily-news .video-block.poranny h3 {
  text-align: left;
  padding-left: 1cm;        /* 1 cm od lewej */
}
.daily-news .video-block.wieczorne h3 {
  text-align: right;
  padding-right: 1cm;       /* 1 cm od prawej */
}
/* dodatkowy odstęp pod każdym filmem */
.daily-news .video-wrapper {
  margin-bottom: 1rem;
}

/* wszystkie trzy sekcje: pojedyncze wideo o max-szerokości 600px i wycentrowane */
.weekly-summary .video-block,
.company-analyses .video-block,
.special-reports .video-block {
  max-width: 600px;        /* taka sama maks. szerokość jak w „Podsumowaniu tygodnia” */
  margin: 0 auto 1rem;     /* auto-wyśrodkowanie + 1rem odstępu pod filmem */
}

/* 4) Upewnij się, że każdy blok ma właściwą strukturę */
/* Przykład dla bloku tygodniowego */
.weekly-summary .video-block {
  max-width: 600px;         /* wycentrowanie jednego filmu */
  margin: 0 auto 1rem;      /* auto centrowanie + przerwa pod filmem */
}
.weekly-summary .video-block h3 {
  text-align: center;
}


/* ——— Duże, wyraźne nagłówki bloków w sekcji „Wiadomości” ——— */
#about h2 {
  font-size: 2.5rem;      /* możesz podkręcić do 3rem lub więcej */
  font-weight: bold;
  margin: 2rem 0 1rem;    /* odstęp nad i pod nagłówkiem */
  color: #fff;            /* jeśli chcesz zostawić biały kolor */
  text-align: center;     /* wyśrodkowane */
}

/* Jeśli masz jeszcze inne h2 poza #about i chcesz zostawić je mniejsze,
   to możesz ograniczyć selektor tylko do tej sekcji: */
section#about > h2 {
  font-size: 2.5rem;
}


/* ——— Powiększenie tekstu w sekcji „Wiadomości Dnia” ——— */
#about > p {
  font-size: 1.3rem;     /* lub inna wartość, której potrzebujesz */
  line-height: 1.5;      /* dla lepszej czytelności */
}

/* ——— Dodatkowe wyróżnienie pogrubionych tytułów w cudzysłowie ——— */
#about > p > em > strong {
  font-size: 1.5rem;     /* możesz podbić, by mocniej się wyróżniały */
}


.wieczorne-title {
  text-align: right;
  justify-content: flex-end !important;
  padding-right: 1cm;
}



/* ——— 1) OGÓLNE USTAWIENIA VIDEO-SECTION ——— */
.video-section {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 40px;
}
.video-section .video-wrapper {
  flex: 1 1 100%;
  max-width: 100%;
  position: static;
  height: auto;
  padding-bottom: 0;
  margin: 0 auto 40px;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  border-radius: 10px;
  overflow: hidden;
}
.video-section .video-wrapper iframe {
  width: 100% !important;
  height: auto !important;
}

/* ——— 2) WIADOMOŚCI DNIA (DAILY-NEWS) – dwa filmy obok siebie ——— */
#about .daily-news {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
#about .daily-news .video-block {
  flex: 1 1 calc(50% - 1rem);
  max-width: calc(50% - 1rem);
}
#about .daily-news .video-block .video-wrapper {
  width: 100%;
  margin: 0 0 1rem;
}

/* wyrównanie tytułów */
#about .daily-news .video-block.poranny h3 {
  text-align: left;
  padding-left: 3cm;
}
#about .daily-news .video-block.wieczorne h3 {
  text-align: right;
  padding-right: 3cm;
}
/* przesunięcie samego wideo wieczornego pod tytuł */
#about .daily-news .video-block.wieczorne .video-wrapper {
  margin-left: auto;
  margin-right: 1cm;
}

/* ——— 3) PODSUMOWANIE TYGODNIA, ANALIZY, RAPORTY — pozostawiasz dotychczasowe odstępy ——— */
.weekly-summary,
.company-analyses,
.special-reports {
  margin-bottom: 2rem;
}
/* (ew. możesz tam dodać max-width/centrowanie jak było wcześniej) */


#current-date {
  /* po dacie wstawiamy 2em odstępu */
  margin-right: 2em;
}

.time {
  /* ewentualnie wyrównanie lub inne style */
}


/* ——— Wariant A: prosta karta z białą ramką ——— */
.news-intro.card-A {
  background-color: rgba(255,255,255,0.95);
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 1.5rem 2rem;
  margin: 1rem auto;
  max-width: 95%;        /* było 800px, teraz zajmuje 95% szerokości ekranu */
  /* opcjonalnie wymuś też minimalną szerokość: */
  /* min-width: 300px; */
  color: #4a148c;            /* podkreślamy fiolet tłem */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  text-align: left;
  line-height: 1.6;
}
.news-intro.card-A p + p {
  margin-top: 1rem;         /* odstęp między wierszami */
}
.news-intro.card-A strong {
  font-size: 1.3rem;
}

/* ——— Powiększenie pierwszego akapitu w karcie ——— */
.news-intro.card-A > p:first-of-type {
  font-size: 1.5rem;   /* dopasuj wartość do potrzeb */
  margin-bottom: 1.2rem; /* opcjonalnie więcej odstępu pod nim */
  text-align: center;     /* dodaj to, by wycentrować */
}


/* ====== Data (większa czcionka, złoty kolor) ====== */
#about .daily-news .video-block p span#current-date {
  font-size: 1.6rem;      /* zwiększona czcionka tylko dla daty */
  color: #ffd700;         /* złoty odcień */
  font-weight: bold;
}

/* ====== Godzina (standardowa czcionka, też złota) ====== */
#about .daily-news .video-block p span.time {
  font-size: 1.2rem;        /* przywrócone domyślne lub Twoje normalne rozmiary */
  color: #ffd700;         /* ten sam złoty odcień */
  font-weight: bold;
}


/* zachowaj odstęp między datą a godziną */
#about .daily-news .video-block p {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}


/* ——— Powiększenie drugiego i trzeciego paragrafu w .news-intro.card-A ——— */
.news-intro.card-A p:not(:first-of-type) {
  font-size: 1.2rem;  /* zmodyfikuj wartość wg potrzeb */
  line-height: 1.6;   /* zachowaj dobrą czytelność */
}

/* ——— Zmniejszenie czcionki tylko w tym fragmencie ——— */
.news-intro.card-A .intro-small {
  font-size: 1.2rem;    /* dostosuj wedle uznania */
  line-height: 1.4;     /* możesz nieco bardziej skompaktować */
}


.transakcje-zloty-box {
  background-image: url("images/zlotetlo.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 12px;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  margin: 1rem auto;
  max-width: 95%; 
  line-height: 1.6;
}

/* Tylko dla tego tytułu: */
.special-title {
  font-size: 2rem;        /* nowy rozmiar czcionki */
  line-height: 1.2;         /* skompaktuj wiersz, jeśli trzeba */
  /* kolory i marginesy nadal odziedziczone z h3 */
}


/* Usuń domyślne marginesy, które dodają pustą przestrzeń nad/poniżej h3 */
.transakcje-zloty-box > h3 {
  margin-top:    0 !important;
  margin-bottom: 0 !important;
}



  


/* ——————— WYMUSZENIE PIONOWEGO LAYOUTU NA SMARTFONACH ≤ 414px ——————— */
@media (max-width: 414px) {
  /* 1) Uniwersalnie ograniczamy wszelkie szerokości do 100% */
  html, body {
    width: 100% !important;
    overflow-x: hidden !important;
  }
  *, *::before, *::after {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2) Wymuszamy, by wszelkie kontenery oparte na flexie przechodziły w flex-direction: column */
  .video-section,
  .company-analyses,
  .video-block,
  .video-wrapper,
  .header,
  .nav,
  .main-content,
  .sidebar,
  .footer {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* 3) Jeśli masz inne kontenery (np. .container, .row, .col), również je wymuszamy w 100% szerokości */
  .container,
  .row,
  .col,
  .box,
  .card {
    width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* 4) Obrazki czy wideo wypełniają całą szerokość */
  img,
  video,
  iframe {
    width: 100% !important;
    height: auto !important;
  }

  /* 5) Przyciski, formularze i typografia */
  button,
  input,
  textarea,
  select,
  label {
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    font-size: 1rem !important;
  }

  /* 6) Menu: wymuszamy pionowy układ i pełną szerokość */
  nav ul,
  .navigation,
  .menu {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    padding: 0 !important;
  }
  nav li,
  .navigation li,
  .menu li {
    width: 100% !important;
    margin: 0 !important;
  }

  /* 7) Ukrywamy/lub zmieniamy elementy, które były wcześniej w sidebarze */
  .sidebar {
    display: none !important;
  }

  /* 8) Naprawa ewentualnego overflow w rodzicach */
  .wrapper,
  .layout,
  .site {
    overflow-x: visible !important;
  }
}






/* 5) (Opcjonalnie) na wąskich ekranach – logo w jednym rzędzie, menu poniżej */
@media (max-width: 414px) {
  header {
    flex-direction: column;
    align-items: center;
  }
  header .logo {
    margin-bottom: 8px;
    max-height: 60px;
  }
  header nav {
    flex-direction: column;
    gap: 10px;
  }
  header nav a {
    width: 100%;
    text-align: center;
    font-size: 30px;
  }
}



@media (max-width: 414px) {
  .transakcje-grid.first-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .transakcja-box {
    width: 100% !important;
    margin: 0 !important;
  }
  .transakcja-box + .transakcja-box {
    margin-top: 20px !important;
  }
}