/* Agencja.css - Specyficzne style dla agencja.html */

/* Pełnoekranowe tło cząsteczkowe */
#tsparticles-fullpage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
  background-color: black; /* Upewnij się, że tło jest czarne dla cząsteczek */
}

/* Przezroczyste tło dla body, aby tło cząsteczkowe było widoczne */
body.agency-page {
  background: transparent;
}

/* Przezroczyste tło dla main, aby tło cząsteczkowe było widoczne */
body.agency-page main {
  background: transparent;
}

/* Stylizacja sekcji agency-hero */
body.agency-page #agency-hero { /* Dodaję stylizację bezpośrednio do #agency-hero */
    max-width: 980px; /* Dopasuj do szerokości main */
    margin: 0 auto; /* Wyśrodkuj sekcję hero */
    padding: 2.4rem 1.4rem 3.2rem; /* Dopasuj padding do paddingu w main */
    box-sizing: border-box; /* Zapewnij, że padding nie zwiększa szerokości */
}


/* Przezroczyste tło dla sekcji agency-hero-split */
body.agency-page .agency-hero-split {
  background: transparent; /* Zmieniono na transparent */
  flex-direction: column; /* Utrzymujemy kolumnę dla małych ekranów */
  align-items: center; /* Wyśrodkowanie w pionie dla układu kolumnowego */
  text-align: center; /* Dodano, aby wyśrodkować tekst globalnie w tej sekcji */
  gap: 2.5rem; /* Zachowaj odstęp */
  padding: 0; /* Usuń wewnętrzne paddingi, kontrolujemy je na #agency-hero */
  border: none; /* Usuń ramkę */
  box-shadow: none; /* Usuń cień */
  margin-top: 0; /* Usuń margines, kontrolujemy go na #agency-hero */
}

/* Zmiana koloru tekstu dla hero-kicker */
body.agency-page .hero-kicker {
  color: var(--bg-subtle); /* Jasny kolor tekstu na ciemnym tle */
}

/* Zmiana koloru tekstu dla przycisku primary w sekcji hero */
body.agency-page .agency-hero-split .hero-ctas .btn-primary {
  color: var(--bg-subtle); /* Jasny kolor tekstu */
}

/* Przezroczyste tło dla sekcji services */
body.agency-page #services {
  background: transparent;
}

/* Przezroczyste tło dla sekcji kontakt */
body.agency-page #kontakt.contact-section {
  background: transparent;
}

/* Półprzezroczyste tło dla wewnętrznego kontenera kontaktu */
body.agency-page .contact-inner {
  background: rgba(2, 5, 2, 0.8); /* Półprzezroczyste ciemne tło */
}

/* Półprzezroczyste tło dla elementów case study video */
body.agency-page .case-study-video-item {
    background-color: rgba(255, 255, 255, 0.8); /* Półprzezroczyste białe tło */
}

/* Dostosowanie nagłówków do ciemnego tła */
body.agency-page h1,
body.agency-page h2,
body.agency-page h3,
body.agency-page h4 {
  color: var(--bg-subtle); /* Jasny kolor dla wszystkich nagłówków na ciemnym tle */
}

/* Dostosowanie tekstu paragrafów */
body.agency-page p {
  color: var(--border-soft); /* Jasny kolor dla tekstu paragrafów */
}

/* Wyśrodkowanie akapitów w sekcji hero */
body.agency-page .agency-hero-content p {
  margin: 0 auto; /* Wyśrodkuj akapit, jeśli ma max-width */
}

/* Wyśrodkowanie wiersza tagów */
body.agency-page .hero-tag-row {
  justify-content: center; /* Wyśrodkowanie elementów flex */
}

/* Wyśrodkowanie sekcji CTA (przycisków) */
body.agency-page .hero-ctas {
  justify-content: center; /* Wyśrodkowanie elementów flex */
}

/* Dostosowanie kolorów linków w nawigacji */
body.agency-page .nav-links a {
  color: var(--text-main); /* Czarny tekst, jak na innych stronach */
}

body.agency-page .nav-links a:hover {
  color: var(--accent-blue); /* Ciemniejszy kolor na hover */
}

/* Zapewnienie widoczności ikon i innych elementów */
body.agency-page .icon,
body.agency-page .bullet {
  color: var(--bg-subtle); /* Jasne ikony na ciemnym tle */
}

body.agency-page .system-eyebrow {
  color: #b6ff7a; /* Jasny, neonowy zielony dla wyróżnienia */
}

body.agency-page .hero-tag {
  color: #b6ff7a;
  background: rgba(0, 255, 65, 0.1); /* Lekko przezroczyste zielone tło dla tagów */
  border: 1px solid var(--accent-neon);
}

body.agency-page .hero-tag::before {
  background: var(--accent-neon);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.28);
}

body.agency-page .hero-meta {
  color: #cbd5e1; /* Jasny szary dla meta informacji */
}

/* Dostosowanie kart benefitów w sekcji "DLA KOGO?" */
body.agency-page .benefits-grid--problem .module-card.benefit-card {
  background: rgba(2, 5, 2, 0.7); /* Ciemniejsze, półprzezroczyste tło */
  border: 1px solid rgba(123, 255, 59, 0.4); /* Neonowa ramka */
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.2); /* Delikatny neonowy cień */
}

body.agency-page .benefits-grid--problem .module-card.benefit-card .module-body {
  background: transparent; /* Upewnij się, że body karty jest przezroczyste */
  color: var(--bg-subtle); /* Jasny tekst */
}

body.agency-page .benefits-grid--problem .module-card.benefit-card h3 {
  color: #b6ff7a; /* Jasny, neonowy zielony dla nagłówków */
}

body.agency-page .benefits-grid--problem .module-card.benefit-card p {
  color: var(--border-soft); /* Jasny kolor dla tekstu akapitów */
}

body.agency-page .benefits-grid--problem .module-card.benefit-card .icon {
  color: #b6ff7a; /* Jasny, neonowy zielony dla ikon */
}

/* Dostosowanie hover, aby nadal był widoczny */
body.agency-page .benefits-grid--problem .module-card.benefit-card:hover {
  transform: translateY(-5px) scale(1.02); /* Lekkie podniesienie i powiększenie */
  box-shadow:
    0 25px 50px rgba(0, 255, 65, 0.4), /* Silniejszy neonowy cień na hover */
    0 0 0 2px var(--accent-neon); /* Neonowa ramka na hover */
  border-color: var(--accent-neon);
}


/* Dostosowanie dla większych ekranów */
@media (min-width: 768px) {
  body.agency-page .agency-hero-split {
    flex-direction: row; /* Układaj elementy obok siebie na większych ekranach */
    /* text-align: left; - USUNIĘTO, aby zachować globalne text-align: center */
    align-items: center; /* Zmieniono na center, aby pionowo wyśrodkować na desktopie */
  }
  body.agency-page .agency-hero-content {
      margin: 0 auto; /* Wyśrodkuj content, jeśli jest blokiem flex */
  }
}