/* =================================================================
   PLIK CSS - WERSJA FINALNA, ZOPTMALIZOWANA I RESPONSYWNA
   ================================================================= */

/* =================================
   1. STYLE OGÓLNE I ZMIENNE
   ================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    --primary-color: #E85598;
    --primary-color-light: #ee6ca9;
    --dark-color: #231934;
    --dark-color-alt: #1a1229;
    --light-color: #FFFFFF;
}

html { scroll-behavior: smooth; }
body { font-family: 'Poppins', sans-serif; background-color: var(--dark-color); color: var(--light-color); }
h1, h2, h3, h4, h5, h6 { font-weight: 600; }

/* =================================
   2. MENU KURTYNA
   ================================= */
body.menu-open { overflow: hidden; }
.hamburger-button { position: fixed; top: 30px; right: 30px; z-index: 200; width: 40px; height: 30px; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.hamburger-button .line { display: block; width: 100%; height: 3px; background-color: white; transition: all 0.3s ease; }
body.menu-open .hamburger-button .line:nth-child(1) { transform: translateY(13px) rotate(45deg); }
body.menu-open .hamburger-button .line:nth-child(2) { opacity: 0; }
body.menu-open .hamburger-button .line:nth-child(3) { transform: translateY(-14px) rotate(-45deg); }
.curtain-menu-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 150; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.curtain-panel { position: absolute; left: 0; width: 100%; height: 50%; background: var(--dark-color-alt); transition: transform 1s cubic-bezier(0.8, 0, 0.2, 1); }
.top-panel { top: 0; transform: translateY(-100%); }
.bottom-panel { bottom: 0; transform: translateY(100%); }
body.menu-open .curtain-menu-container { pointer-events: auto; }
body.menu-open .top-panel { transform: translateY(0); }
body.menu-open .bottom-panel { transform: translateY(0); }
.fullscreen-nav { display: flex; flex-direction: column; text-align: center; opacity: 0; transition: opacity 0.5s ease 0.6s; position: relative; z-index: 10; }
body.menu-open .fullscreen-nav { opacity: 1; }
.fullscreen-nav a { color: white; text-decoration: none; font-size: 2.5rem; font-weight: 600; margin: 15px 0; display: flex; align-items: center; transition: color 0.3s ease; }
.fullscreen-nav a i { font-size: 2.5rem; color: var(--primary-color); margin-right: 20px; transition: color 0.3s ease; }
.fullscreen-nav a:hover, .fullscreen-nav a:hover i { color: var(--primary-color); }
.fullscreen-nav a:hover i { color: white; }
.fullscreen-nav a.nav-link-disabled { color: #888; cursor: not-allowed; }
.fullscreen-nav a.nav-link-disabled i { color: #666; }
.fullscreen-nav a.nav-link-disabled:hover, .fullscreen-nav a.nav-link-disabled:hover i { color: #888; }
.fullscreen-nav a.nav-link-disabled:hover i { color: #666; }

/* =================================
   3. SEKCJA HERO
   ================================= */
.hero-section { height: 70vh; background-image: linear-gradient(rgba(26, 18, 41, 0.7), rgba(26, 18, 41, 0.7)), url('images/hero-background.png'); background-size: cover; background-position: center; background-attachment: fixed; display: flex; align-items: center; }
.hero-divider { width: 80px; margin: 0 auto 1.5rem auto; border-top: 2px solid var(--light-color); opacity: 1; }
.btn-hero-outline { background-color: transparent; border: 2px solid var(--light-color); color: var(--light-color); padding: 12px 30px; font-weight: 600; border-radius: 5px; transition: all 0.3s ease; }
.btn-hero-outline:hover { background-color: var(--primary-color); border-color: var(--primary-color); }

/* =================================
   4. EFEKT PODZIAŁU TŁA
   ================================= */
.split-section-left { position: relative; overflow: hidden; }
.split-section-left::before { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: var(--dark-color-alt); background-image: linear-gradient(to bottom right, #1a1229, #231934); z-index: 0; }
.split-section-left > .container > .row { position: relative; z-index: 1; }

/* =================================
   5. SEKCJA USŁUGI
   ================================= */
#services { padding-top: 100px; padding-bottom: 100px; }
.services-link { color: var(--primary-color); font-weight: 600; text-decoration: none; letter-spacing: 1px; transition: color 0.3s ease; }
.services-link:hover { color: var(--light-color); }
.service-box { background-color: var(--primary-color); color: var(--light-color); padding: 40px 30px; height: 100%; display: flex; flex-direction: column; justify-content: center; border-radius: 0; transition: transform 0.3s ease-in-out; }
.service-box:hover { transform: scale(1.05); z-index: 10; }
.col-lg-8 .row > .col-md-4:nth-child(2) .service-box { background-color: var(--primary-color-light); }
.service-box h4 { font-size: 1.3rem; font-weight: 700; }
.service-box p { font-size: 0.95rem; margin-bottom: 0; }
.short-divider { border: none; border-top: 2px solid var(--light-color); width: 40px; opacity: 1; margin: 1.2rem 0; }

/* =================================
   6. SEKCJA AI
   ================================= */
#ai-services-v1 { padding-top: 120px; padding-bottom: 120px; background-color: var(--dark-color-alt); }
.image-collage { position: relative; min-height: 450px; }
.collage-panel { position: absolute; background-color: #231934; border: 2px solid #3c2d5f; box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.3); padding: 1.5rem; }
.collage-panel img { width: 100%; height: 100%; object-fit: contain; }
.collage-img-1 { width: 70%; height: 70%; top: 0; left: 0; z-index: 1; }
.collage-img-2 { width: 60%; height: 60%; bottom: 0; right: 0; z-index: 2; }
.ai-feature-box { background-color: var(--dark-color-alt); padding: 1.5rem; margin-bottom: 1.5rem; border-left: 4px solid var(--primary-color); transition: all 0.3s ease; }
.ai-feature-box:hover { background-color: #231934; border-left-width: 8px; transform: translateX(10px); }
.ai-feature-box:last-child { margin-bottom: 0; }
.ai-feature-box h4 { color: var(--primary-color); font-weight: 700; }
.ai-feature-box p { margin-bottom: 0; }

/* =================================
   7. SEKCJA DRUK 3D
   ================================= */
#druk3d { background-color: var(--dark-color); padding-top: 100px; padding-bottom: 100px; }

/* =================================
   8. SEKCJA CENNIK
   ================================= */
#cennik { padding-top: 100px; padding-bottom: 120px; background-color: var(--dark-color-alt); }
.pricing-card { background-color: var(--dark-color); padding: 2.5rem 2rem; border: 2px solid #3c2d5f; text-align: center; height: 100%; display: flex; flex-direction: column; transition: transform 0.3s ease, border-color 0.3s ease; }
.pricing-card:hover { transform: translateY(-10px); border-color: var(--primary-color); }
.pricing-card h3 { font-weight: 700; font-size: 1.5rem; }
.pricing-card .price { font-size: 3.5rem; font-weight: 700; color: var(--primary-color); margin: 1.5rem 0; }
.pricing-card .price span { font-size: 1rem; font-weight: 400; color: var(--light-color); }
.pricing-card .price small { font-size: 1rem; font-weight: 400; }
.pricing-card ul { list-style: none; padding: 0; margin-bottom: 2rem; flex-grow: 1; text-align: left; }
.pricing-card ul li { margin-bottom: 0.8rem; display: flex; align-items: center; }
.pricing-card ul li i { color: var(--primary-color); margin-right: 10px; }
.pricing-card.popular { position: relative; border-color: var(--primary-color); transform: scale(1.05); }
.pricing-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: var(--dark-color); padding: 5px 15px; font-size: 0.8rem; font-weight: 700; border-radius: 20px; }

/* =================================
   9. SEKCJA O NAS
   ================================= */
#about {
    padding-top: 120px;
    padding-bottom: 120px;
    background-color: var(--dark-color); /* Spójne tło */
}

/* Przyciski (jeśli jeszcze nie ma go w tym miejscu) */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 5px; /* Przywracamy zaokrąglenie dla przycisków */
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: #d14281;
    border-color: #d14281;
}

/* =================================================================
   10. ROZBUDOWANA SEKCJA KONTAKT
   ================================================================= */
.contact-section { background-color: var(--primary-color); padding-top: 100px; padding-bottom: 100px; }
.contact-section h2, .contact-section p, .contact-section .form-label { color: var(--dark-color) !important; }
.contact-section .form-label { font-weight: 600; }
.contact-section .form-control { background-color: transparent; border: none; border-radius: 0; border-bottom: 2px solid rgba(0, 0, 0, 0.3); padding: 0.5rem 0; color: var(--dark-color); transition: border-color 0.3s ease; }
.contact-section .form-control:focus { background-color: transparent; box-shadow: none; border-bottom-color: var(--dark-color); }
textarea.form-control { background-color: rgba(255, 255, 255, 0.1); border: 2px solid rgba(0, 0, 0, 0.3); }
textarea.form-control:focus { border-color: var(--dark-color); }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 1rem; }
.checkbox-item { display: flex; align-items: center; }
.checkbox-item input[type="checkbox"] { display: none; }
.checkbox-item label { cursor: pointer; display: flex; align-items: center; }
.checkbox-item label::before { content: ''; display: inline-block; width: 22px; height: 22px; border: 2px solid var(--dark-color); margin-right: 10px; transition: background-color 0.2s ease; }
.checkbox-item input[type="checkbox"]:checked + label::before { background-color: var(--dark-color); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23E85598' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"); background-size: 60%; background-repeat: no-repeat; background-position: center; }
.contact-details-box { background-color: rgba(0, 0, 0, 0.1); border: 2px solid var(--dark-color); padding: 2rem; height: 100%; }
.contact-details-box h4 { font-weight: 700; color: var(--dark-color); }
.contact-details-box .contact-item { display: flex; align-items: start; margin-bottom: 1rem; font-size: 1.1rem; color: var(--dark-color); text-decoration: none; transition: color 0.3s ease; }
.contact-details-box .contact-item i { font-size: 1.5rem; margin-right: 15px; margin-top: 3px; }
.contact-details-box a.contact-item:hover { color: white; }
.contact-details-box .contact-item.non-clickable { cursor: default; }
.map-container iframe { border-radius: 0; }
.btn-dark-outline { background-color: transparent; border: 2px solid var(--dark-color); color: var(--dark-color); padding: 12px 30px; font-weight: 600; border-radius: 0; transition: all 0.3s ease; }
.btn-dark-outline:hover { background-color: var(--dark-color); color: var(--light-color); }

/* =================================
   11. STOPKA
   ================================= */
.main-footer { background-color: var(--dark-color-alt); padding: 4rem 0; color: rgba(255, 255, 255, 0.7); }
.footer-brand { font-weight: 700; font-size: 1.5rem; color: var(--light-color); }
.main-footer h5 { color: var(--light-color); margin-bottom: 1.5rem; }
.footer-links { list-style: none; padding: 0; }
.footer-links li a { color: rgba(255, 255, 255, 0.7); text-decoration: none; padding: 5px 0; display: inline-block; transition: color 0.3s ease; }
.footer-links li a:hover { color: var(--primary-color); }
.social-icons a { color: var(--light-color); font-size: 1.5rem; margin-right: 15px; transition: color 0.3s ease; }
.social-icons a:hover { color: var(--primary-color); }
.footer-bottom-text { border-top: 1px solid #3c2d5f; padding-top: 1.5rem; margin-top: 2rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.5); }

/* =================================
   12. OKNO MODALNE (POP-UP)
   ================================= */
.modal-content { background-color: var(--dark-color-alt); border: 2px solid #3c2d5f; border-radius: 0; color: var(--light-color); }
.modal-header { border-bottom: 1px solid #3c2d5f; }
.modal-header .modal-title { color: var(--primary-color); font-weight: 700; }
.modal-body .lead { color: rgba(255, 255, 255, 0.8); }
.szkolenie-modul { margin-bottom: 2rem; padding-left: 1rem; border-left: 3px solid var(--dark-color); }
.szkolenie-modul h4 { color: var(--primary-color); font-size: 1.3rem; margin-bottom: 1rem; }
.szkolenie-modul h4 i { margin-right: 15px; font-size: 1.2rem; }
.szkolenie-modul ul { list-style: none; padding-left: 0; }
.szkolenie-modul ul li { margin-bottom: 0.5rem; color: rgba(255, 255, 255, 0.9); }
.modal-footer { border-top: 1px solid #3c2d5f; }

/* =================================================================
   13. OPTYMALIZACJA MOBILNA (RESPONSIVE DESIGN)
   ================================================================= */
@media (max-width: 992px) {
    .hero-section h1.display-3 { font-size: 2.8rem; }
    h2.display-3 { font-size: 2.5rem; }
    h2.display-5 { font-size: 2.2rem; }
    .split-section-left::before { display: none; }
    #services, #about, #druk3d { background-color: var(--dark-color-alt) !important; }
    section { padding-top: 80px; padding-bottom: 80px; }
    .image-collage { min-height: auto; margin-top: 40px; }
    .row > [class^="col-"] { margin-bottom: 2rem; } /* Lepsze odstępy na mobilnych */
}

@media (max-width: 768px) {
    .hero-section h1.display-3 { font-size: 2.2rem; }
    h2.display-3 { font-size: 2.1rem; }
    h2.display-5 { font-size: 1.9rem; }
    .fullscreen-nav a { font-size: 2rem; }
    .fullscreen-nav a i { font-size: 2rem; }
    .service-box { padding: 30px 20px; }
    .service-box h4 { font-size: 1.1rem; }
    .pricing-card.popular { transform: scale(1); } /* Wyłączenie powiększenia na telefonach */
    .checkbox-group { gap: 0.5rem; }
    .checkbox-item { width: 48%; } /* Checkboxy w dwóch kolumnach */
}
/* =================================================================
   14. DODATKOWE STYLE DLA FORMULARZA (POLITYKA I reCAPTCHA)
   ================================================================= */

/* Styl dla linku w polityce prywatności */
.checkbox-item label a {
    color: var(--dark-color);
    text-decoration: underline;
    font-weight: 700;
    transition: color 0.3s ease;
}

.checkbox-item label a:hover {
    color: white;
}

/* Kontener dla reCAPTCHA, aby wyśrodkować widżet */
.g-recaptcha-container {
    display: flex;
    justify-content: center;
}
/* =================================================================
   15. STYLE DLA PODSTRONY "POLITYKA PRYWATNOŚCI"
   ================================================================= */

.privacy-header {
    background-color: var(--dark-color-alt);
    padding: 1.5rem 0;
    border-bottom: 1px solid #3c2d5f;
}

.privacy-content h1, .privacy-content h2 {
    color: var(--primary-color);
}

.privacy-content h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    border-left: 3px solid var(--primary-color);
    padding-left: 1rem;
}

.privacy-content p, .privacy-content li {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.8;
}

.privacy-content ul {
    list-style-type: '✓ '; /* Niestandardowy punktor dla spójności */
    padding-left: 2rem;
}

.privacy-content a {
    color: var(--primary-color);
    text-decoration: underline;
}

.privacy-content a:hover {
    color: var(--light-color);
}

.disclaimer {
    background-color: rgba(232, 85, 152, 0.1);
    border: 1px solid var(--primary-color);
    padding: 1.5rem;
    margin-bottom: 3rem;
}
/* =================================================================
   16. STYLE DLA LINKÓW PRAWNYCH W STOPCE
   ================================================================= */

.footer-bottom-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Pozwala na zawijanie na małych ekranach */
    gap: 1rem;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-legal-links a:hover {
    color: var(--primary-color);
}

.footer-legal-links span {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.3);
}

/* Poprawka dla urządzeń mobilnych */
@media (max-width: 768px) {
    .footer-bottom-text {
        flex-direction: column; /* Układ pionowy na telefonach */
        justify-content: center;
    }
}