/* ==========================================================================
   1. ZMIENNE I PARAMETRY BAZOWE (JASNY PROJEKT)
   ========================================================================== */
:root {
    --bg-color: #ffffff;
    --bg-subtle: #f8f9fa;
    --bg-card: #ffffff;
    --border-color: #e9ecef;
    --text-main: #000000;
    --text-muted: #6c757d;
    
    /* Akcent jasnozielony / neonowy */
    --accent: #22c55e; 
    --accent-hover: #16a34a;
    --accent-light: #dcfce7;
    
    --max-width: 1600px;
    --transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: var(--transition);
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

section {
    padding: 6rem 0;
}

.bg-subtle-section {
    background-color: var(--bg-subtle);
}

.center-button-wrapper {
    text-align: center; 
    margin-top: 4rem;
}

.section-title {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3rem;
    position: relative;
    display: inline-block;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 40px;
    height: 3px;
    background-color: var(--accent);
}

/* Boksy zastępcze dla fotografii */
.placeholder-img {
    background: #f1f3f5;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 0.75rem;
    transition: var(--transition);
    border: 1px solid var(--border-color);
}

/* ==========================================================================
   2. NAWIGACJA (HEADER)
   ========================================================================== */
header {
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
}

.logo {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.logo span {
    color: var(--accent);
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 2rem;
    align-items: center;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-main);
    padding: 0.5rem 0;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent);
    transition: var(--transition);
}

.nav-link:hover::after {
    width: 100%;
}

/* Dropdown */
.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-top: 2px solid var(--accent);
    min-width: 180px;
    list-style: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

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

.dropdown-item a {
    display: block;
    padding: 0.75rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}

.dropdown-item a:hover {
    background-color: var(--bg-subtle);
    color: var(--text-main);
}

.btn-login {
    background-color: var(--text-main);
    color: var(--bg-color);
    border: none;
    padding: 0.6rem 1.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: var(--transition);
}

.btn-login:hover {
    background-color: var(--accent);
    color: var(--text-main);
}

/* Wskaźnik zalogowanego użytkownika w menu (zamiast przycisku "Zaloguj się") —
   wspólny dla wszystkich podstron, żeby nie duplikować tego samego CSS w każdym
   pliku z osobna. Nie korzysta z .nav-link, żeby uniknąć pogrubienia/uppercase
   narzuconego innym pozycjom menu. */
.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem 0.35rem 0.35rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    text-decoration: none;
    transition: var(--transition);
}
.user-menu-trigger:hover { border-color: var(--accent); }
.user-menu-item .nav-link::after { display: none; } /* na wypadek dziedziczenia podkreślenia */

.user-avatar-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--accent-light, #e6f9ee);
    color: var(--accent-hover, #00994b);
    font-size: 0.68rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.user-menu-name {
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-item { position: relative; }
.user-menu-item .dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: auto;
    right: 0;
    transform: none;
    background: var(--bg-color, #fff);
    border: 1px solid var(--border-color);
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    z-index: 100;
    padding: 0.4rem 0;
}
.user-menu-item:hover .dropdown-menu,
.user-menu-item.open .dropdown-menu { display: block; }
.user-menu-item .dropdown-menu .dropdown-item a {
    display: block;
    padding: 0.6rem 1.1rem;
    font-size: 0.85rem;
    color: var(--text-main);
    text-decoration: none;
    transition: var(--transition);
}
.user-menu-item .dropdown-menu .dropdown-item a:hover { background: var(--bg-subtle); color: var(--accent); }
@media (max-width: 768px) {
    .user-menu-item .dropdown-menu { position: static; box-shadow: none; border: none; margin-top: 0; }
}

.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--text-main);
    transition: var(--transition);
}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================== */
.hero {
    min-height: clamp(400px, 50vh, 600px);
    display: flex;
    align-items: center;
    background-color: var(--bg-subtle);
    border-bottom: 1px solid var(--border-color);
}

.hero-content {
    max-width: 850px;
}

.hero h1 {
    font-family: 'Syncopate', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    letter-spacing: -1px;
}

.hero p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 2.5rem;
    font-weight: 400;
    max-width: 650px;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
}

.btn-primary {
    background-color: var(--accent);
    color: #000;
    padding: 0.8rem 2rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    border: none;
    display: inline-block;
    transition: var(--transition);
}

.btn-primary:hover {
    background-color: var(--text-main);
    color: var(--bg-color);
    cursor: pointer;
}

.btn-secondary {
    border: 1px solid var(--text-main);
    background: transparent;
    color: var(--text-main);
    padding: 0.8rem 2rem;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    display: inline-block;
    transition: var(--transition);
}

.btn-secondary:hover {
    background-color: rgba(0,0,0,0.04);
}

/* ==========================================================================
   4. SEKCJA: GALERIE
   ========================================================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2.5rem;
}

.gallery-card {
    background-color: var(--bg-card);
    transition: var(--transition);
}

.gallery-img-wrapper {
    height: 270px;
    overflow: hidden;
    position: relative;
}

.gallery-card:hover .placeholder-img {
    transform: scale(1.02);
    background: #e9ecef;
    border-color: var(--accent);
}

.gallery-info {
    padding: 1.5rem 0;
}

.gallery-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.gallery-meta span {
    color: var(--accent);
}

.gallery-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    letter-spacing: -0.5px;
}

.gallery-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ==========================================================================
   5. SEKCJA: WSZYSTKIE ZDJĘCIA (SIATKA)
   ========================================================================== */
.photos-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.photo-thumb {
    height: 220px;
    overflow: hidden;
    transition: var(--transition);
}

.photo-thumb:hover .placeholder-img {
    border-color: var(--text-main);
    color: var(--text-main);
}

/* ==========================================================================
   6. SEKCJA: ARTYKUŁY
   ========================================================================== */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 3rem;
}

.article-card {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.article-img {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
}

.article-content {
    display: flex;
    flex-direction: column;
}

.article-date {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.article-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    line-height: 1.3;
    letter-spacing: -0.3px;
}

.article-title:hover {
    color: var(--accent);
}

.article-excerpt {
    font-size: 0.9rem;
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ==========================================================================
   7. ZAAWANSOWANA STOPKA (ZGODNIE Z PROJEKTEM)
   ========================================================================== */
footer {
    background-color: var(--bg-subtle);
    border-top: 1px solid var(--border-color);
    padding: 5rem 0 2rem 0;
    font-size: 0.85rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(5, 1fr);
    gap: 2.5rem;
    margin-bottom: 4rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.footer-brand .logo {
    font-size: 1.15rem;
}

.footer-brand p {
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    max-width: 240px;
}

.footer-col-title {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.footer-links-list a {
    color: var(--text-main);
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-links-list a:hover {
    color: var(--accent);
}

.footer-links-list svg {
    color: var(--text-muted);
    transition: var(--transition);
}

.footer-links-list a:hover svg {
    color: var(--accent);
}

.footer-bottom-bar {
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.footer-legal-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

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

/* ==========================================================================
   8. MEDIA QUERIES (RESPONSYWNOŚĆ)
   ========================================================================== */
@media (max-width: 1200px) {
    .footer-grid {
        grid-template-columns: 1fr repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .gallery-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    section {
        padding: 4rem 0;
    }

    /* Mniejszy margines nagłówka na telefonie — bez tego przycisk menu był
       odsunięty od krawędzi ekranu o pełne 2rem (tyle samo co na desktopie).
       Prawa strona zmniejszona mocniej niż lewa, żeby przycisk menu był jak
       najbliżej samej krawędzi (przy zachowaniu minimalnego marginesu na tap). */
    header .container {
        padding-left: 1rem;
        padding-right: 0.25rem;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 70px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 70px);
        background-color: var(--bg-color);
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        gap: 1.5rem;
        transition: var(--transition);
        border-top: 1px solid var(--border-color);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-item {
        width: 100%;
    }

    .nav-item:hover .dropdown-menu {
        position: relative;
        top: 0;
        left: 0;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--accent);
        display: block;
        margin-top: 0.5rem;
        padding-left: 0.5rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    .article-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .article-img {
        width: 100%;
        height: 180px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }

    .footer-brand {
        grid-column: span 2;
        margin-bottom: 1rem;
    }

    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .footer-legal-links {
        flex-direction: column;
        gap: 0.8rem;
    }
}

@media (max-width: 550px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .footer-brand {
        grid-column: span 1;
    }
}
/* ==========================================================================
   9. PODSTRONA KONTAKTOWA (STYLE DEDYKOWANE)
   ========================================================================== */
.page-header {
    background-color: var(--bg-subtle);
    padding: 5rem 0 4rem 0;
    border-bottom: 1px solid var(--border-color);
}

.page-title {
    font-family: 'Syncopate', sans-serif;
    font-size: 2.2rem;
    text-transform: uppercase;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}

.page-subtitle {
    font-size: 1.05rem;
    color: var(--text-muted);
    max-width: 700px;
}

.contact-section {
    padding: 5rem 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
}

/* Informacje kontaktowe */
.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.info-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-title {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}

.info-text {
    font-size: 0.95rem;
    color: var(--text-main);
}

.contact-link {
    font-weight: 600;
    border-bottom: 1px solid transparent;
}

.contact-link:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Formularz kontaktowy */
.contact-form-block {
    background-color: var(--bg-card);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-main);
}

.form-input {
    width: 100%;
    padding: 0.8rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    background-color: var(--bg-subtle);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: var(--transition);
}

.form-input:focus {
    outline: none;
    border-color: var(--text-main);
    background-color: var(--bg-card);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    padding-right: 2.5rem;
    cursor: pointer;
}

.form-textarea {
    min-height: 150px;
    resize: vertical;
}

.form-checkbox-group {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.form-checkbox {
    margin-top: 0.25rem;
    cursor: pointer;
    accent-color: var(--accent);
}

.checkbox-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.checkbox-label a {
    text-decoration: underline;
    color: var(--text-main);
}

.form-submit-btn {
    align-self: flex-start;
    cursor: pointer;
}

/* Sekcja mapy */
.map-section {
    padding: 0 0 6rem 0;
}

.map-placeholder {
    height: 450px;
    width: 100%;
}

/* Responsywność dla podstrony kontaktowej */
@media (max-width: 968px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
}

@media (max-width: 600px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .map-placeholder {
        height: 300px;
    }
    
    .form-submit-btn {
        width: 100%;
        text-align: center;
    }
}
/* ==========================================================================
   10. PODSTRONA O NAS (STYLE DEDYKOWANE)
   ========================================================================== */
.about-section {
    padding: 6rem 0;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text-block h2 {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.4rem;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    letter-spacing: -0.5px;
}

.about-text-block p {
    font-size: 1rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.7;
}

.about-image-block {
    height: 400px;
    width: 100%;
}

/* Sekcja liczników / statystyk */
.stats-section {
    padding: 5rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-number {
    font-family: 'Syncopate', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-main);
    line-height: 1;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

/* Responsywność dla O nas */
@media (max-width: 968px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .about-image-block {
        height: 300px;
        order: -1; /* Obrazek wskakuje nad tekst na mniejszych ekranach */
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
}
/* ==========================================================================
   11. PODSTRONA DLA FIRM (STYLE DEDYKOWANE)
   ========================================================================== */
.business-offers {
    padding: 6rem 0;
}

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.offer-card {
    background: #111; /* dopasuj do tła swojej strony, np. ciemny grafit */
    padding: 3rem 2rem;
    border-radius: 8px;
    border: 1px solid var(--border-color, #222);
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.offer-card:hover {
    transform: translateY(-5px);
    border-color: #ff0055; /* Twój kolor akcentowy, np. róż/czerwień */
}

.offer-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.offer-card h3 {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.offer-card p {
    font-size: 0.95rem;
    color: var(--text-muted, #888);
    line-height: 1.6;
}

/* Sekcja Wezwania do Działania (CTA) */
.cta-section {
    padding: 5rem 0;
    text-align: center;
}

.cta-content h2 {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.8rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.cta-content p {
    max-width: 600px;
    margin: 0 auto 2rem auto;
    color: var(--text-muted, #888);
}

.btn-cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: #ff0055; /* Kolor przycisku */
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.btn-cta:hover {
    opacity: 0.9;
}

/* Responsywność */
@media (max-width: 968px) {
    .offers-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* ==========================================================================
   OSTATECZNA NAPRAWA MENU: LIKWIDACJA DZIURY I WYŚRODKOWANIE
   ========================================================================== */

/* 1. Element nadrzędny staje się punktem odniesienia */
.nav-item {
    position: relative;
}

/* 2. Idealne pozycjonowanie i wyśrodkowanie okienka */
.nav-item .dropdown-menu {
    position: absolute;
    top: 100%;             /* Przykleja menu idealnie pod napisem */
    left: 50%;             /* Przesuwa początek menu na środek napisu */
    transform: translateX(-50%); /* Centruje menu idealnie w osi pionowej */
    margin-top: 0;         /* Kasuje przerwę, która wyłączała menu */
    
    /* Bezpieczny mostek dla kursora */
    padding-top: 12px;     
    background-clip: padding-box;
    
    /* Reset ewentualnych przesunięć z innych stylów */
    right: auto;
}

/* 3. Upewniamy się, że wewnętrzna lista i cienie wyglądają dobrze */
.dropdown-menu th, 
.dropdown-menu td,
.dropdown-menu li {
    text-align: left;     /* Tekst wewnątrz menu zostaje do lewej */
}
/* ==========================================================================
   11. PODSTRONA DLA FIRM - ODŚWIEŻONA JASNA KOLORYSTYKA Z ZIELENIĄ
   ========================================================================== */
.business-offers {
    padding: 6rem 0;
}

.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

/* Kafelki: teraz są jasne, pasujące do reszty szablonu */
.offer-card {
    background: #ffffff; 
    padding: 3rem 2rem;
    border-radius: 8px;
    border: 1px solid #e2e8f0; /* Bardzo delikatne, estetyczne obramowanie */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Subtelny cień nadający nowoczesności */
    transition: all 0.3s ease;
}

/* Efekt po najechaniu myszką: zielony akcent z Twojego logo */
.offer-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent); /* Podmiana na zieleń TrybunaFoto przy hoverze */
    box-shadow: 0 10px 15px -3px rgba(34, 197, 94, 0.1); /* Delikatna zielona poświata */
}

.offer-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

/* Napisy są teraz ciemne i doskonale czytelne */
.offer-card h3 {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.1rem;
    color: #1a1a1a; 
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.offer-card p {
    font-size: 0.95rem;
    color: #555555; /* Czytelny, ciemnoszary odcień tekstu */
    line-height: 1.6;
}

/* Przycisk pod kafelkami (CTA) również w kolorze zielonym */
.btn-cta {
    display: inline-block;
    padding: 1rem 2.5rem;
    background: var(--accent); /* Zielony kolor dopasowany do akcentów strony */
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.btn-cta:hover {
    background: #00b359; /* Ciemniejszy odcień zieleni po najechaniu */
}

/* Responsywność */
@media (max-width: 968px) {
    .offers-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* ==========================================================================
   12. NOWA SEKCJA WIZERUNKOWA DLA FIRM & ANIMACJE SCROLLOWANIA
   ========================================================================== */

.business-showcase {
    padding: 6rem 0;
    background: #ffffff;
    overflow: hidden; /* Zabezpiecza przed wysuwaniem się elementów z boków */
}

.showcase-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 5rem;
    align-items: center;
}

.showcase-text h2 {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.6rem;
    color: #1a1a1a;
    text-transform: uppercase;
    margin-bottom: 2rem;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.showcase-text p {
    font-size: 1rem;
    color: #555555;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.showcase-image-wrapper {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.showcase-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Subtelny zoom zdjęcia po najechaniu */
.showcase-image-wrapper:hover .showcase-img {
    transform: scale(1.04);
}

/* --- SYSTEM ANIMACJI SCROLLOWANIA --- */

/* Stan wyjściowy (ukryty) */
.scroll-anim {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity;
}

/* Warianty kierunków wyjściowych */
.fade-up {
    transform: translateY(40px);
}

.fade-left {
    transform: translateX(-50px);
}

.fade-right {
    transform: translateX(50px);
}

/* Stan końcowy (pojawienie się elementu po wjechaniu w widok) */
.scroll-anim.appeared {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* Responsywność dla nowej sekcji */
@media (max-width: 968px) {
    .showcase-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .showcase-image-wrapper {
        order: 2; /* Na telefonie tekst najpierw, potem zdjęcie */
    }
}
/* ==========================================================================
   13. NOWY MODUŁ ZAUFALI NAM - MINIMALIZM I ELEGANCJA
   ========================================================================== */

.trust-showcase {
    padding: 5rem 0 8rem 0;
    background: #ffffff;
}

/* Typografia w stylu prasy/agencji */
.section-tag {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #888888;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.section-heading {
    font-family: 'Inter', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #000000;
    letter-spacing: -0.03em;
    margin-bottom: 3.5rem;
}

/* Pasek z logotypami - Stonowane, szare, bez obramowań */
.logos-ticker {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin-bottom: 4rem;
}

.logo-item {
    filter: grayscale(100%);
    opacity: 0.4;
    transition: opacity 0.3s ease, filter 0.3s ease;
    max-height: 35px;
    display: flex;
    align-items: center;
}

.logo-item img {
    max-height: 30px;
    width: auto;
    object-fit: contain;
}

/* Alternatywa dla logotypów klubowych w formie czystego tekstu */
.club-text-logo {
    font-family: 'Syncopate', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #000000;
    letter-spacing: 2px;
}

.logo-item:hover {
    opacity: 0.9;
    filter: grayscale(0%); /* Subtelny powrót do koloru na hover */
}

.section-divider {
    border: 0;
    height: 1px;
    background: #eaeaea;
    margin: 2rem 0;
}

/* Nowa, czysta siatka projektów (Zdjęcia klubów i portali) */
.projects-light-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem 2.5rem;
    margin-top: 2rem;
}

.project-light-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #f7f7f7;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.15, 1, 0.3, 1);
}

/* Bardzo delikatna, nowoczesna nakładka zamiast czarnego bloku */
.project-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-overlay span {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.6rem 1.2rem;
    backdrop-filter: blur(4px);
    transform: translateY(10px);
    transition: transform 0.4s cubic-bezier(0.15, 1, 0.3, 1);
}

.project-details {
    padding: 0 0.2rem;
}

.project-client {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent); /* Delikatny akcent kolorystyczny Twojej marki */
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}

.project-details h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111111;
    line-height: 1.4;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

/* --- EFEKTY HOVER DLA CAŁEJ KARTY --- */
.project-light-card:hover .project-media img {
    transform: scale(1.03); /* Bardzo delikatny, luksusowy zoom */
}

.project-light-card:hover .project-overlay {
    opacity: 1;
}

.project-light-card:hover .project-overlay span {
    transform: translateY(0);
}

.project-light-card:hover .project-details h3 {
    color: #000000;
}

/* RWD */
@media (max-width: 768px) {
    .projects-light-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .logos-ticker {
        justify-content: center;
        gap: 2rem;
    }
    .section-heading {
        font-size: 2rem;
        margin-bottom: 2rem;
    }
}
/* Nowa, czysta, zmniejszona siatka projektów (3 kolumny) */
.projects-light-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem 1.8rem;
    margin-top: 2rem;
}

.project-light-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

.project-media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* Zmniejszona wysokość kafelka */
    background: #f7f7f7;
    overflow: hidden;
    margin-bottom: 1rem;
}

.project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.15, 1, 0.3, 1);
}

.project-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.project-overlay span {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 0.5rem 1rem;
    backdrop-filter: blur(4px);
    transform: translateY(10px);
    transition: transform 0.4s cubic-bezier(0.15, 1, 0.3, 1);
}

.project-details {
    padding: 0 0.1rem;
}

.project-client {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
}

.project-details h3 {
    font-size: 1.05rem; /* Subtelniejszy, mniejszy font nagłówka */
    font-weight: 600;
    color: #111111;
    line-height: 1.35;
    letter-spacing: -0.01em;
    transition: color 0.3s ease;
}

/* --- EFEKTY HOVER --- */
.project-light-card:hover .project-media img {
    transform: scale(1.03);
}

.project-light-card:hover .project-overlay {
    opacity: 1;
}

.project-light-card:hover .project-overlay span {
    transform: translateY(0);
}

.project-light-card:hover .project-details h3 {
    color: #000000;
}

/* RWD dla 3 kolumn */
@media (max-width: 992px) {
    .projects-light-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .projects-light-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* ==========================================================================
   15. PORTAL KAFELKOWY / WIADOMOŚCI - STYLE FLASHSCORE
   ========================================================================== */

.portal-news-section {
    padding: 3rem 0 6rem 0;
    background: #0b1118; /* Ciemne, nowoczesne tło sportowe jak na screenie */
    color: #ffffff;
}

/* Główny kontener dzielący na siatkę newsów i pasek boczny */
.portal-grid-layout {
    display: flex;
    gap: 2rem;
}

.main-news-column {
    flex: 2.3;
}

.sidebar-news-column {
    flex: 1;
}

/* Nagłówki sekcji blokowych */
.portal-block-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.2rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #1a2430;
}

/* --- DUŻY KAFELEK GŁÓWNY (HERO TILE) --- */
.news-tile-main {
    background: #141f2d;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    display: flex;
    transition: transform 0.3s ease, background-color 0.2s ease;
}

.tile-img-wrapper {
    position: relative;
    flex: 1.2;
    aspect-ratio: 4 / 3;
}

.tile-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile-badge-main {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: #000000;
    color: #ffffff;
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 0.05em;
}

.tile-content-main {
    flex: 1;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tile-title-link {
    text-decoration: none;
    color: inherit;
}

.tile-content-main h3 {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 1rem;
    color: #ffffff;
    transition: color 0.2s ease;
}

.tile-meta {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.tile-time {
    font-size: 0.8rem;
    color: #8899a6;
}

.tile-status-tag {
    font-size: 0.7rem;
    font-weight: 700;
    background: #e92929;
    color: #ffffff;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    text-transform: uppercase;
}

/* --- TRZY DOLNE KAFELKI --- */
.sub-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
}

.news-tile-sub {
    background: #141f2d;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.tile-sub-img {
    width: 100%;
    aspect-ratio: 16 / 10;
}

.tile-sub-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tile-sub-content {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.tile-sub-content a {
    text-decoration: none;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.8rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tile-sub-time {
    font-size: 0.75rem;
    color: #8899a6;
}

/* --- PRAWA KOLUMNA (LISTA WIADOMOŚCI) --- */
.sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sidebar-row-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    padding: 0.5rem 0;
    border-bottom: 1px solid #1a2430;
    transition: background-color 0.2s ease;
}

.sidebar-row-img {
    width: 70px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
}

.sidebar-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-row-txt h4 {
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1.4;
    color: #e2e8f0;
}

/* --- EFEKTY NAJAZDU (HOVER) --- */
.news-tile-main:hover, .news-tile-sub:hover {
    background: #1c2b3e;
    transform: translateY(-2px);
}

.tile-content-main h3:hover, .tile-sub-content a:hover, .sidebar-row-item:hover h4 {
    color: var(--accent); /* Zmiana koloru linku na zielony akcent w stylu agencji */
}

/* --- DOPASOWANIE EKRANÓW (RWD) --- */
@media (max-width: 992px) {
    .portal-grid-layout {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .news-tile-main {
        flex-direction: column;
    }
    .sub-news-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================================
   16. ELEGANCKI UKŁAD MAGAZYNOWY (KAFELKOWY ASYMETRYCZNY)
   ========================================================================== */

.articles-magazine-section {
    padding: 4rem 0 6rem 0;
    background: #ffffff;
}

/* Główna siatka magazynu: lewa strona (wyróżniony), prawa strona (mniejsze kafelki) */
.magazine-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-flow: dense;
    gap: 2.5rem 2rem;
    align-items: start;
}

/* Duży, wyróżniony kafelek — zajmuje lewe 2 z 4 kolumn, na wysokość 2 rzędów,
   żeby po prawej zmieściły się dokładnie 4 mniejsze kafelki w układzie 2x2. */
.magazine-tile.tile-featured {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
}

/* Kafelki "szerokie" — para artykułów pod spodem, na pełną szerokość (każdy 2 z 4 kolumn). */
.magazine-tile.tile-wide {
    grid-column: span 2;
}

/* Kolejne artykuły (poza pierwszymi 1+4+2) — domyślnie schowane, bez udziału w
   układzie strony. "display: contents" po odkryciu sprawia, że stają się zwykłymi
   uczestnikami tej samej siatki (a nie osobnym blokiem czy kolejnym wierszem). */
.magazine-hidden-articles {
    display: none;
}
.magazine-hidden-articles.is-visible {
    display: contents;
}

/* Pojedynczy kafelek artykułu */
.magazine-tile {
    display: flex;
    flex-direction: column;
}

.tile-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f4f4f4;
    margin-bottom: 1.2rem;
}

.tile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.15, 1, 0.3, 1);
}

/* Mała kategoria na zdjęciu */
.tile-category {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: #ffffff;
    color: #111111;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.3rem 0.6rem;
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Meta informacje pod zdjęciem */
.tile-meta {
    margin-bottom: 0.5rem;
}

.tile-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: #8c8c8c;
    letter-spacing: 0.03em;
}

/* Linki i tytuły */
.tile-title-link {
    text-decoration: none;
    color: inherit;
}

.magazine-tile h4 {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    color: #111111;
    margin: 0;
    transition: color 0.2s ease;
}

/* --- DETALE DLA WYRÓŻNIONEGO (DUŻEGO) KAFELKA --- */
.tile-featured .tile-image {
    aspect-ratio: 16 / 10;
}

.tile-featured h3 {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111111;
    margin: 0 0 0.8rem 0;
    letter-spacing: -0.02em;
    transition: color 0.2s ease;
}

.tile-excerpt {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #555555;
    margin: 0;
}

/* --- EFEKTY HOVER (NAJAZD MYSZKĄ) --- */
.magazine-tile:hover .tile-image img {
    transform: scale(1.02);
}

.magazine-tile:hover h3, 
.magazine-tile:hover h4 {
    color: var(--accent); /* Twój firmowy zielony akcent */
}

/* Paginacja / Przycisk na dole */
.magazine-pagination {
    text-align: center;
    margin-top: 5rem;
    border-top: 1px solid #eeeeee;
    padding-top: 3rem;
}

.btn-load-more {
    background: transparent;
    border: 1px solid #111111;
    color: #111111;
    padding: 0.9rem 2.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-load-more:hover {
    background: #111111;
    color: #ffffff;
}

/* --- RESPONSYWNOŚĆ (RWD) --- */
@media (max-width: 992px) {
    .magazine-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem 1.5rem;
    }
    .magazine-tile.tile-featured {
        grid-column: 1 / 3;
        grid-row: auto;
    }
    .magazine-tile.tile-wide {
        grid-column: 1 / 3;
    }
}

@media (max-width: 576px) {
    .magazine-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .magazine-tile.tile-featured,
    .magazine-tile.tile-wide {
        grid-column: 1;
    }
    .tile-featured h3 {
        font-size: 1.4rem;
    }
}
/* ==========================================================================
   17. PODSTRONA GALERIE - UKŁAD PREMIUM
   ========================================================================== */

.gallery-showcase-section {
    padding: 4rem 0 6rem 0;
    background: #ffffff;
}

/* Filtry u góry */
.gallery-filters {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 3.5rem;
}

.filter-btn {
    background: transparent;
    border: 1px solid #e0e0e0;
    color: #666666;
    padding: 0.6rem 1.6rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    border-radius: 1px;
}

.filter-btn:hover, 
.filter-btn.active {
    border-color: #111111;
    color: #111111;
    background: #fdfdfd;
}

/* Magazynowa Asymetria Kafelków */
.gallery-composite-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3.5rem;
    align-items: start;
}

.gallery-sub-composite-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
}

/* Pojedynczy kafelek galerii */
.gallery-tile {
    display: flex;
    flex-direction: column;
}

.tile-image-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f7f7f7;
    margin-bottom: 1.2rem;
}

.tile-image-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.15, 1, 0.3, 1);
}

.tile-tag-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.95);
    color: #111111;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.6rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Detale i Teksty */
.tile-info-block {
    display: flex;
    flex-direction: column;
}

.tile-meta-data {
    display: flex;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.tile-count {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent); /* Zielony akcent liczby zdjęć */
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.tile-date-info {
    font-size: 0.75rem;
    color: #8c8c8c;
}

.tile-title-anchor {
    text-decoration: none;
    color: inherit;
}

.gallery-tile h4 {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: #111111;
    margin: 0;
    transition: color 0.2s ease;
}

/* Wyróżniony duży kafelek */
.gallery-tile-featured .tile-image-cover {
    aspect-ratio: 16 / 9.5;
}

.gallery-tile-featured h3 {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.3;
    color: #111111;
    margin: 0 0 0.7rem 0;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.tile-desc-text {
    font-size: 0.95rem;
    line-height: 1.55;
    color: #555555;
    margin: 0;
}

/* Hover Efekty */
.gallery-tile:hover .tile-image-cover img {
    transform: scale(1.03);
}

.gallery-tile:hover h3,
.gallery-tile:hover h4 {
    color: var(--accent);
}

/* Dolna sekcja */
.gallery-pagination-box {
    text-align: center;
    margin-top: 5rem;
    border-top: 1px solid #eeeeee;
    padding-top: 3rem;
}

/* RWD responsywność */
@media (max-width: 992px) {
    .gallery-composite-layout {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

@media (max-width: 576px) {
    .gallery-sub-composite-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .gallery-tile-featured h3 {
        font-size: 1.35rem;
    }
}
/* ==========================================================================
   18. BANK ZDJĘĆ / PODSTRONA WSZYSTKIE ZDJĘCIA
   ========================================================================== */

.photos-control-section {
    padding: 3rem 0 2rem 0;
    background: #ffffff;
    border-bottom: 1px solid #f0f0f0;
}

/* Wyszukiwarka i zaawansowany pasek narzędzi */
.photos-toolbar {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.search-box {
    display: flex;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}

.search-box input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: 1px solid #dddddd;
    border-right: none;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    outline: none;
    transition: border-color 0.2s;
}

.search-box input:focus {
    border-color: #111111;
}

.btn-search {
    background: #111111;
    color: #ffffff;
    border: none;
    padding: 0 2rem;
    font-weight: 600;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    transition: background 0.2s;
}

.btn-search:hover {
    background: var(--accent);
}

.photos-filters {
    display: flex;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.p-filter-btn {
    background: #f7f7f7;
    border: none;
    color: #555555;
    padding: 0.5rem 1.4rem;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.p-filter-btn:hover,
.p-filter-btn.active {
    background: #111111;
    color: #ffffff;
}

/* Siatka masonry/columns dla dynamicznych kadrów */
.photos-grid-section {
    padding: 4rem 0 6rem 0;
    background: #ffffff;
}

.photos-dynamic-grid {
    column-count: 3;
    column-gap: 2rem;
}

.photo-card {
    break-inside: avoid;
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    background: #ffffff;
}

.photo-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fdfdfd;
}

.photo-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s ease;
}

/* Nakładka z akcjami */
.photo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.2rem;
    transition: opacity 0.3s ease;
}

.photo-id {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    font-weight: 500;
}

.photo-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

.action-icon-btn {
    background: #ffffff;
    color: #111111;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 2px;
    transition: transform 0.2s, background 0.2s, color 0.2s;
}

.action-icon-btn:hover {
    transform: translateY(-2px);
    background: var(--accent);
    color: #ffffff;
}

.photo-wrapper:hover .photo-overlay {
    opacity: 1;
}

.photo-wrapper:hover img {
    transform: scale(1.02);
}

/* Teksty pod fotografią */
.photo-details {
    padding: 1rem 0;
}

.photo-details h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111111;
    margin: 0 0 0.3rem 0;
    line-height: 1.4;
}

.photo-details p {
    font-size: 0.75rem;
    color: #777777;
    margin: 0;
}

/* Stronicowanie cyfrowe */
.photos-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid #eeeeee;
}

.page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid #e0e0e0;
    text-decoration: none;
    color: #111111;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s;
}

.page-link:hover,
.page-link.active {
    background: #111111;
    border-color: #111111;
    color: #ffffff;
}

.page-link.disabled {
    color: #cccccc;
    border-color: #eeeeee;
    pointer-events: none;
}

/* RWD */
@media (max-width: 992px) {
    .photos-dynamic-grid {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .photos-dynamic-grid {
        column-count: 1;
    }
    .search-box {
        flex-direction: column;
        gap: 0.5rem;
    }
    .search-box input {
        border-right: 1px solid #dddddd;
        padding: 0.8rem 1rem;
    }
    .btn-search {
        padding: 0.8rem;
    }
}
/* ==========================================================================
   19. PODSTRONA INTERFEJSU API (DEVELOPER & ENTERPRISE)
   ========================================================================== */

.api-main-section {
    padding: 5rem 0 6rem 0;
    background: #ffffff;
}

/* Siatka zalet / korzyści */
.api-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-bottom: 6rem;
}

.api-feature-card {
    background: #fafafa;
    padding: 2.5rem 2rem;
    border-radius: 2px;
    border: 1px solid #eeeeee;
    transition: transform 0.2s, box-shadow 0.2s;
}

.api-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

.api-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.api-feature-card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111111;
    margin: 0 0 0.8rem 0;
}

.api-feature-card p {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.6;
    margin: 0;
}

/* Dokumentacja i Okno Kodu */
.api-docs-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 7rem;
}

.api-docs-text h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.api-docs-text p {
    font-size: 1rem;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 2rem;
}

.docs-endpoints-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem 0;
}

.docs-endpoints-list li {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    color: #333333;
}

.docs-endpoints-list code {
    background: #f0f0f0;
    padding: 0.2rem 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    border-radius: 2px;
}

.btn-api-primary {
    display: inline-block;
    background: #111111;
    color: #ffffff;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background 0.2s;
}

.btn-api-primary:hover {
    background: var(--accent);
}

/* Okno terminala / edytora kodu */
.api-code-window {
    background: #1e1e1e;
    border-radius: 6px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
}

.code-window-header {
    background: #2d2d2d;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #3c3c3c;
}

.code-window-header .dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.window-title {
    color: #8e8e8e;
    font-size: 0.8rem;
    margin-left: 1rem;
}

.api-code-window pre {
    margin: 0;
    padding: 1.5rem;
    overflow-x: auto;
}

.api-code-window code {
    color: #d4d4d4;
    font-size: 0.85rem;
    line-height: 1.6;
}

/* Kolorowanie składni w oknie kodu */
.code-keyword { color: #569cd6; }
.code-string { color: #ce9178; }
.code-function { color: #dcdcaa; }

/* Cennik / Pakiety */
.api-pricing-zone {
    padding-top: 4rem;
    border-top: 1px solid #eeeeee;
}

.section-center-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 4rem;
    font-weight: 700;
}

.pricing-tables-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: stretch;
}

.pricing-card {
    border: 1px solid #e0e0e0;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #ffffff;
}

.pricing-card.featured {
    border: 2px solid #111111;
    transform: scale(1.03);
    box-shadow: 0 15px 35px rgba(0,0,0,0.06);
}

.pricing-card .ribbon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    letter-spacing: 0.05em;
}

.pricing-card h4 {
    font-size: 1.2rem;
    margin: 0 0 1.5rem 0;
    font-weight: 600;
}

.pricing-card .price {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 2rem;
}

.pricing-card .price span {
    font-size: 1rem;
    font-weight: 400;
    color: #777777;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
    flex: 1;
}

.pricing-features li {
    font-size: 0.9rem;
    color: #555555;
    margin-bottom: 1rem;
    padding-left: 1.2rem;
    position: relative;
}

.pricing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.btn-pricing {
    display: block;
    text-align: center;
    border: 1px solid #111111;
    color: #111111;
    padding: 0.8rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    transition: all 0.2s;
}

.btn-pricing:hover {
    background: #111111;
    color: #ffffff;
}

.btn-pricing-featured {
    background: #111111;
    color: #ffffff;
}

.btn-pricing-featured:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Responsywność API */
@media (max-width: 992px) {
    .api-features-grid,
    .api-docs-layout,
    .pricing-tables-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .pricing-card.featured {
        transform: none;
    }
}
/* ==========================================================================
   20. SEKCJA DLA WYDAWCÓW / ROZWIĄZANIA ENTERPRISE
   ========================================================================== */

.ent-hero {
    background: linear-gradient(135deg, #111111 0%, #222222 100%);
    color: #ffffff;
    padding: 6rem 0;
}

.ent-hero .page-title {
    color: #ffffff;
}

.ent-hero .page-subtitle {
    color: #cccccc;
    max-width: 800px;
}

.ent-badge {
    display: inline-block;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    border-radius: 2px;
}

/* Wiersze z układem tekst + grafika */
.ent-features-section {
    padding: 6rem 0;
    background: #ffffff;
}

.ent-row {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 5rem;
    align-items: center;
    margin-bottom: 6rem;
}

.ent-row.reverse {
    grid-template-columns: 0.8fr 1.2fr;
}

.ent-row.reverse .ent-col-text {
    grid-column: 2;
}

.ent-row.reverse .ent-col-visual {
    grid-column: 1;
}

.ent-col-text h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.ent-col-text p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 2rem;
}

.ent-bullet-list {
    list-style: none;
    padding: 0;
}

.ent-bullet-list li {
    font-size: 0.95rem;
    color: #222222;
    margin-bottom: 1rem;
    font-weight: 500;
    padding-left: 1.5rem;
    position: relative;
}

.ent-bullet-list li::before {
    content: "▪";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 1.2rem;
    top: -2px;
}

/* Wizualne ramki i statystyki */
.ent-stats-box {
    background: #fafafa;
    border: 1px solid #eeeeee;
    padding: 3rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    text-align: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-number {
    font-family: 'Syncopate', sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    color: #111111;
}

.stat-label {
    font-size: 0.85rem;
    color: #666666;
    margin-top: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ent-shield-graphic {
    background: #111111;
    color: #ffffff;
    padding: 4rem 3rem;
    text-align: center;
    border-radius: 2px;
}

.shield-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.ent-shield-graphic h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}

.ent-shield-graphic p {
    color: #aaaaaa;
    font-size: 0.9rem;
    margin: 0;
}

/* Strefa kontaktu biznesowego */
.ent-contact-zone {
    padding: 6rem 0;
    background: #f7f7f7;
    border-top: 1px solid #eeeeee;
}

.ent-contact-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 4rem;
}

.ent-contact-info h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 1rem;
}

.ent-contact-info p {
    font-size: 1rem;
    color: #555555;
    line-height: 1.6;
    margin-bottom: 3rem;
}

.direct-contact-channels {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.channel strong {
    display: block;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #777777;
    margin-bottom: 0.3rem;
}

.channel p {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111111;
    margin: 0;
}

/* Formularz kontaktowy */
.ent-contact-form-container {
    background: #ffffff;
    padding: 3rem;
    border: 1px solid #e5e5e5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}

.ent-contact-form-container h4 {
    font-size: 1.25rem;
    margin: 0 0 2rem 0;
    font-weight: 600;
}

.ent-b2b-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #444444;
}

.form-group input,
.form-group textarea {
    padding: 0.8rem 1rem;
    border: 1px solid #cccccc;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #111111;
}

.btn-ent-submit {
    background: #111111;
    color: #ffffff;
    border: none;
    padding: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 1rem;
}

.btn-ent-submit:hover {
    background: var(--accent);
}

/* RWD */
@media (max-width: 992px) {
    .ent-row, 
    .ent-row.reverse,
    .ent-contact-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .ent-row.reverse .ent-col-text,
    .ent-row.reverse .ent-col-visual {
        grid-column: unset;
    }
    
    .ent-contact-form-container {
        padding: 2rem;
    }
}

@media (max-width: 576px) {
    .form-group-row {
        grid-template-columns: 1fr;
    }
    .ent-col-text h2 {
        font-size: 1.75rem;
    }
}
/* Zamiast żonglować numerami kolumn, po prostu odwracamy ich kolejność wyświetlania */
.ent-row.reverse {
    grid-template-columns: 1.2fr 0.8fr; /* Utrzymujemy ten sam podział proporcji */
}

.ent-row.reverse .ent-col-text {
    order: 2; /* Tekst ląduje po prawej */
}

.ent-row.reverse .ent-col-visual {
    order: 1; /* Grafika ląduje po lewej */
}

/* W RWD musimy zresetować kolejność, żeby na telefonach tekst był znowu nad grafiką */
@media (max-width: 992px) {
    .ent-row.reverse .ent-col-text,
    .ent-row.reverse .ent-col-visual {
        order: unset;
    }
}
/* ==========================================================================
   21. PODSTRONA DOŁĄCZ DO AGENCJI (DLA FOTOGRAFÓW)
   ========================================================================== */

.join-hero {
    background: linear-gradient(rgba(17, 17, 17, 0.95), rgba(26, 26, 26, 0.98));
    border-bottom: 4px solid var(--accent);
    padding: 6rem 0;
}

.join-hero .page-title {
    color: #ffffff;
}

.join-hero .page-subtitle {
    color: #bbbbbb;
    max-width: 750px;
}

.join-badge {
    display: inline-block;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    border-radius: 2px;
}

/* Układ główny kolumn */
.join-main-content {
    padding: 6rem 0;
    background: #ffffff;
}

.join-layout-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 5rem;
    align-items: start;
}

.join-info-col h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.join-info-col > p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #444444;
    margin-bottom: 3rem;
}

/* Lista korzyści */
.join-perks-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 4rem;
}

.perk-card {
    display: flex;
    gap: 1.5rem;
    background: #fafafa;
    padding: 1.5rem;
    border: 1px solid #eeeeee;
    border-radius: 2px;
}

.perk-icon {
    font-size: 2rem;
    line-height: 1;
}

.perk-card h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #111111;
    margin: 0 0 0.4rem 0;
}

.perk-card p {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.5;
    margin: 0;
}

/* Wymagania techniczne */
.join-requirements-box {
    background: #111111;
    color: #ffffff;
    padding: 2.5rem;
    border-radius: 2px;
}

.join-requirements-box h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: #ffffff;
}

.req-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.req-bullet-list li {
    font-size: 0.95rem;
    color: #dddddd;
    margin-bottom: 1rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.5;
}

.req-bullet-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.req-bullet-list li:last-child {
    margin-bottom: 0;
}

/* Formularz zgłoszeniowy (Sticky fallback) */
.join-sticky-form {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 3rem;
    box-shadow: 0 15px 40px rgba(0,0,0,0.03);
    position: sticky;
    top: 40px;
}

.join-sticky-form h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    color: #111111;
}

.join-sticky-form p {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 2rem;
}

.join-agency-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
}

.form-element {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-element label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #333333;
    letter-spacing: 0.02em;
}

.form-element input,
.form-element select,
.form-element textarea {
    padding: 0.75rem 1rem;
    border: 1px solid #cccccc;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    background: #ffffff;
    outline: none;
    border-radius: 2px;
    transition: border-color 0.2s;
}

.form-element input:focus,
.form-element select:focus,
.form-element textarea:focus {
    border-color: #111111;
}

.form-checkbox-element {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-top: 0.5rem;
}

.form-checkbox-element input {
    margin-top: 0.2rem;
    cursor: pointer;
}

.form-checkbox-element label {
    font-size: 0.8rem;
    color: #555555;
    line-height: 1.4;
    cursor: pointer;
}

.btn-join-submit {
    background: #111111;
    color: #ffffff;
    border: none;
    padding: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 1rem;
    border-radius: 2px;
}

.btn-join-submit:hover {
    background: var(--accent);
}

/* Responsywność strony rekrutacji */
@media (max-width: 992px) {
    .join-layout-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    .join-sticky-form {
        position: static;
        padding: 2rem;
    }
}

@media (max-width: 576px) {
    .form-row-2 {
        grid-template-columns: 1fr;
    }
    .join-info-col h2 {
        font-size: 1.8rem;
    }
}
/* ==========================================================================
   22. PODSTRONA WARUNKI LICENCJI
   ========================================================================== */

.license-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
    border-bottom: 4px solid #111111;
    padding: 6rem 0;
}

.license-hero .page-title {
    color: #ffffff;
}

.license-hero .page-subtitle {
    color: #aaaaaa;
    max-width: 800px;
}

.license-badge {
    display: inline-block;
    background: #ffffff;
    color: #111111;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    border-radius: 2px;
}

/* Układ główny elementów strony */
.license-main-content {
    padding: 6rem 0;
    background: #ffffff;
}

/* Siatka kart z typami licencji */
.license-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 6rem;
}

.license-card-box {
    background: #fafafa;
    border: 1px solid #eeeeee;
    padding: 3rem;
    border-radius: 2px;
    transition: box-shadow 0.3s;
}

.license-card-box:hover {
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
}

.license-card-box.commercial {
    background: #111111;
    color: #ffffff;
    border: 1px solid #111111;
}

.l-card-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.license-card-box h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: #111111;
    letter-spacing: -0.01em;
}

.license-card-box.commercial h3 {
    color: #ffffff;
}

.license-card-box p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555555;
    margin-bottom: 2rem;
}

.license-card-box.commercial p {
    color: #bbbbbb;
}

.license-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.license-bullet-list li {
    font-size: 0.9rem;
    margin-bottom: 0.8rem;
    padding-left: 1.5rem;
    position: relative;
    color: #333333;
}

.license-card-box.commercial .license-bullet-list li {
    color: #dddddd;
}

.license-bullet-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-size: 1.2rem;
    top: -2px;
}

/* Tabela Pól Eksploatacji */
.license-table-zone {
    margin-bottom: 6rem;
}

.license-table-zone h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111111;
    margin: 0 0 0.5rem 0;
}

.table-lead {
    font-size: 1rem;
    color: #666666;
    margin-bottom: 2rem;
}

.table-responsive-wrapper {
    overflow-x: auto;
    border: 1px solid #eeeeee;
}

.license-compare-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.9rem;
}

.license-compare-table th,
.license-compare-table td {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid #eeeeee;
}

.license-compare-table th {
    background: #fafafa;
    font-weight: 600;
    color: #111111;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.license-compare-table tr:hover td {
    background: #fcfcfc;
}

/* Kolory statusów w tabeli */
.text-green {
    color: var(--accent);
    font-weight: 600;
}

.text-red {
    color: #ff3333;
    font-weight: 600;
}

.text-orange {
    color: #ff9900;
    font-weight: 600;
}

/* Sekcja FAQ */
.license-faq-zone h2 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #111111;
    margin-bottom: 3rem;
    text-align: center;
}

.faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.faq-item h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111111;
    margin: 0 0 0.8rem 0;
}

.faq-item p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555555;
    margin: 0;
}

/* RWD dla Licencji */
@media (max-width: 992px) {
    .license-types-grid,
    .faq-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .license-card-box {
        padding: 2rem;
    }
}
/* ==========================================================================
   23. PODSTRONA POLITYKA PRYWATNOŚCI
   ========================================================================== */

.privacy-hero {
    background: linear-gradient(135deg, #1f2421 0%, #0d0e0d 100%);
    border-bottom: 4px solid #161a17;
    padding: 6rem 0;
}

.privacy-badge {
    display: inline-block;
    background: var(--accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.4rem 0.8rem;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    border-radius: 2px;
}

.privacy-main-content {
    padding: 6rem 0;
    background: #ffffff;
}

/* Układ dwukolumnowy: Nawigacja boczna + Treść */
.privacy-layout {
    display: flex;
    gap: 4rem;
    position: relative;
}

.privacy-sidebar {
    width: 280px;
    flex-shrink: 0;
}

.privacy-nav {
    list-style: none;
    padding: 0;
    margin: 0;
    position: sticky;
    top: 120px; /* Przyklejenie pod głównym menu */
}

.privacy-nav li {
    margin-bottom: 0.5rem;
}

.p-nav-link {
    display: block;
    padding: 0.8rem 1rem;
    color: #666666;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border-left: 2px solid #eeeeee;
    transition: all 0.2s ease;
}

.p-nav-link:hover,
.p-nav-link.active {
    color: #111111;
    border-left-color: #111111;
    background: #fafafa;
}

/* Formatowanie tekstu prawnego */
.privacy-body-text {
    flex-grow: 1;
    max-width: 800px;
}

.last-update {
    font-size: 0.85rem;
    color: #999999;
    margin-bottom: 3rem;
}

.privacy-section {
    margin-bottom: 4rem;
    scroll-margin-top: 140px; /* offset dla płynnego skoku pod menu */
}

.privacy-section h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #111111;
    margin: 0 0 1.5rem 0;
    letter-spacing: -0.02em;
}

.privacy-section p {
    font-size: 1rem;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 1.5rem;
}

.privacy-section ul, 
.privacy-section ol {
    padding-left: 1.5rem;
    margin-bottom: 1.5rem;
}

.privacy-section li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 0.8rem;
}

/* Siatka Praw RODO */
.rights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.right-item {
    background: #fafafa;
    border: 1px solid #eeeeee;
    padding: 1.2rem;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #444444;
    border-radius: 2px;
}

.right-item strong {
    display: block;
    color: #111111;
    margin-bottom: 0.4rem;
}

/* Wyróżnienia */
.warning-note {
    background: #fff9f6;
    border-left: 4px solid #ff9900;
    padding: 1.2rem;
    font-size: 0.95rem !important;
}

.privacy-email {
    font-size: 1.3rem;
    color: #111111;
    background: #fafafa;
    display: inline-block;
    padding: 0.5rem 1.5rem;
    border: 1px dashed #cccccc;
    letter-spacing: 0.02em;
}

/* RWD dla Polityki Prywatności */
@media (max-width: 992px) {
    .privacy-layout {
        flex-direction: column;
        gap: 2rem;
    }
    
    .privacy-sidebar {
        display: none; /* Ukrywamy boczny pasek na tabletach i smartfonach */
    }
    
    .rights-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}
/* ==========================================================================
   24. PODSTRONA SUBSKRYPCJE I CENNIK
   ========================================================================== */

.pricing-hero {
    background: linear-gradient(135deg, #111111 0%, #1a231e 100%);
    padding: 7rem 0 5rem 0;
    text-align: center;
}

.pricing-badge {
    display: inline-block;
    background: rgba(34, 197, 94, 0.1);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 2px;
}

/* Przełącznik okresu płatności (Toggle Switch) */
.billing-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 3rem;
}

.billing-label {
    font-size: 1rem;
    color: #a0a0a0;
    font-weight: 500;
}

.billing-label.Yearly {
    color: #ffffff;
}

.discount-tag {
    background: var(--accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 2px;
    margin-left: 0.4rem;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #333333;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--accent);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Siatka cennika */
.pricing-cards-section {
    padding: 5rem 0;
    background: #fafafa;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: stretch;
}

.price-card {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    padding: 3rem 2.5rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.price-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
}

/* Wyróżnienie planu Pro */
.price-card.popular {
    border: 2px solid #111111;
    transform: scale(1.03);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.price-card.popular:hover {
    transform: scale(1.03) translateY(-5px);
}

.ribbon {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #111111;
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.3rem 0.7rem;
    letter-spacing: 0.05em;
}

/* Elementy karty */
.card-header h3 {
    font-size: 1.5rem;
    color: #111111;
    margin: 0 0 0.5rem 0;
}

.card-desc {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.4;
    min-height: 45px;
}

.price-box {
    margin: 2rem 0;
    display: flex;
    align-items: baseline;
}

.price-box .currency {
    font-size: 1rem;
    font-weight: 600;
    color: #111111;
    margin-right: 0.3rem;
}

.price-box .price {
    font-size: 3.5rem;
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.03em;
    line-height: 1;
}

.price-box .period {
    font-size: 0.95rem;
    color: #666666;
    margin-left: 0.4rem;
}

/* Cechy pakietu */
.card-features {
    flex-grow: 1;
    margin-bottom: 2.5rem;
}

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

.card-features li {
    font-size: 0.95rem;
    color: #333333;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.card-features li.disabled {
    color: #bbbbbb;
    text-decoration: line-through;
}

/* Przyciski cennika */
.btn-pricing-primary, .btn-pricing-secondary {
    width: 100%;
    padding: 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-pricing-primary {
    background: #111111;
    color: #ffffff;
}

.btn-pricing-primary:hover {
    background: var(--accent);
}

.btn-pricing-secondary {
    background: transparent;
    border: 1px solid #cccccc;
    color: #111111;
}

.btn-pricing-secondary:hover {
    border-color: #111111;
    background: #fcfcfc;
}

/* Sekcja funkcji podstawowych */
.pricing-features-include {
    padding: 6rem 0;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
}

.features-include-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 3rem;
}

.include-item h4 {
    font-size: 1.15rem;
    color: #111111;
    margin-bottom: 0.8rem;
}

.include-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555555;
}

/* Sekcja FAQ */
.pricing-faq {
    padding: 6rem 0;
    background: #ffffff;
}

.faq-container {
    max-width: 800px;
    margin: 3rem auto 0 auto;
}

.faq-item {
    border-bottom: 1px solid #eeeeee;
    padding: 1.5rem 0;
}

.faq-question {
    font-size: 1.1rem;
    font-weight: 600;
    color: #111111;
    cursor: pointer;
    position: relative;
    padding-right: 2rem;
}

.faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    color: #999999;
    transition: transform 0.2s ease;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), margin-top 0.3s ease;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555555;
}

.faq-item.open .faq-answer {
    max-height: 1000px;
    margin-top: 1rem;
    transition: max-height 0.3s ease-in-out;
}

.faq-item.open .faq-question::after {
    transform: translateY(-50%) rotate(45deg);
}

/* Responsywność */
@media (max-width: 992px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .price-card.popular {
        transform: none;
    }
    
    .price-card.popular:hover {
        transform: translateY(-5px);
    }
    
    .features-include-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}
/* ==========================================================================
   24. PODSTRONA SUBSKRYPCJE I CENNIK - POPRAWKA WIZUALNA
   ========================================================================== */

.pricing-hero {
    background: linear-gradient(135deg, #141816 0%, #0a0b0a 100%);
    padding: 8rem 0 5rem 0; /* Zwiększony górny margines, aby odsunąć tekst od menu */
    text-align: center;
}

/* Wymuszenie białego koloru dla tytułu na ciemnym tle */
.pricing-hero .page-title {
    color: #ffffff !important;
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

/* Rozjaśnienie opisu pod tytułem dla lepszego kontrastu */
.pricing-hero .page-subtitle {
    color: #cccccc !important;
    max-width: 700px;
    margin: 0 auto 3rem auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

.pricing-badge {
    display: inline-block;
    background: rgba(34, 197, 94, 0.12);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem 1.2rem;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 3px;
}

/* Przełącznik okresu płatności (Toggle Switch) i jego teksty */
.billing-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    margin-top: 1rem;
}

.billing-label {
    font-size: 0.95rem;
    color: #888888; /* Domyślnie lekko przyciemniony nieaktywny stan */
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Rozjaśnienie aktywnej etykiety rocznej */
.billing-label.Yearly {
    color: #ffffff;
}

.discount-tag {
    background: var(--accent);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 3px;
    margin-left: 0.5rem;
}
/* ==========================================================================
   25. PODSTRONA LICENCJE B2B
   ========================================================================== */

.b2b-hero {
    background: linear-gradient(135deg, #161a18 0%, #0b0c0b 100%);
    padding: 8rem 0 6rem 0;
    text-align: center;
}

.b2b-hero .page-title {
    color: #ffffff !important;
    font-size: 3rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.03em;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.b2b-hero .page-subtitle {
    color: #cccccc !important;
    max-width: 750px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.6;
}

.b2b-badge {
    display: inline-block;
    background: rgba(34, 197, 94, 0.12);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.5rem 1.2rem;
    letter-spacing: 0.08em;
    margin-bottom: 2rem;
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 3px;
}

/* Sekcja modelów licencji */
.license-models-section {
    padding: 6rem 0;
    background: #ffffff;
}

.section-title-center {
    font-size: 2rem;
    color: #111111;
    text-align: center;
    margin-bottom: 4rem;
    font-weight: 700;
}

.license-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    align-items: stretch;
}

.license-card {
    background: #fbfbfb;
    border: 1px solid #eeeeee;
    padding: 3rem 2rem;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

.license-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-color: #dddddd;
}

/* Karta wyróżniona (Premium/Rozszerzona) */
.license-card.premium {
    background: #ffffff;
    border: 2px solid #111111;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.license-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
}

.license-card h3 {
    font-size: 1.35rem;
    color: #111111;
    margin: 0 0 0.5rem 0;
    font-weight: 700;
}

.license-card p {
    font-size: 0.9rem;
    color: #666666;
    line-height: 1.5;
    margin-bottom: 2rem;
    min-height: 45px;
}

/* Lista cech licencji */
.license-features {
    list-style: none;
    padding: 0;
    margin: 0 0 3rem 0;
    flex-grow: 1;
}

.license-features li {
    font-size: 0.95rem;
    color: #333333;
    padding: 0.5rem 0;
    position: relative;
    padding-left: 1.5rem;
}

.license-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.license-features li.negative {
    color: #999999;
}

.license-features li.negative::before {
    content: "✕";
    color: #cc3333;
}

/* Przyciski */
.btn-b2b-primary, .btn-b2b-dark {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.9rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.2s ease;
}

.btn-b2b-primary {
    background: transparent;
    border: 1px solid #cccccc;
    color: #111111;
}

.btn-b2b-primary:hover {
    border-color: #111111;
    background: #f5f5f5;
}

.btn-b2b-dark {
    background: #111111;
    color: #ffffff;
    border: 1px solid #111111;
}

.btn-b2b-dark:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Sekcja bezpieczeństwa prawnego */
.b2b-safety-section {
    padding: 2rem 0 6rem 0;
    background: #ffffff;
}

.safety-box {
    background: #111111;
    color: #ffffff;
    padding: 4rem;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.safety-content {
    max-width: 800px;
}

.safety-content h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.safety-content p {
    color: #aaaaaa;
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.safety-badges {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.s-badge {
    background: rgba(255, 255, 255, 0.08);
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 2px;
    color: #ffffff;
}

/* Sekcja logotypów marek */
.b2b-brands {
    padding: 5rem 0;
    background: #fafafa;
    border-top: 1px solid #eeeeee;
    text-align: center;
}

.brands-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #888888;
    margin-bottom: 2.5rem;
    font-weight: 600;
}

.brands-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    opacity: 0.6;
    flex-wrap: wrap;
}

.brand-logo-item {
    font-family: 'Syncopate', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #444444;
    letter-spacing: 0.15em;
}

/* Responsywność dla B2B */
@media (max-width: 992px) {
    .license-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .license-card.premium {
        transform: none;
    }
    
    .safety-box {
        padding: 2.5rem 1.5rem;
    }
    
    .brands-logos {
        justify-content: center;
        gap: 3rem;
    }
}
/* ==========================================================================
   STYLE DLA PANELU LOGOWANIA I REJESTRACJI (TRYBUNAFOTO)
   ========================================================================== */

/* Zapobieganie powstawaniu białych marginesów wokół dokumentu */
html, body {
    background-color: #0e1110 !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Główna sekcja owijająca formularz, spychająca stopkę na sam dół ekranu */
.auth-section {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    background: #0e1110;
    box-sizing: border-box;
}

/* Profesjonalny kontener na formularze z łagodnym cieniem i minimalistyczną ramką */
.auth-container {
    background: #161a18;
    padding: 40px;
    border-radius: 6px;
    border: 1px solid #222825;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 440px;
    box-sizing: border-box;
}

/* Nowoczesne zakładki (Tabs) w stylu premium dashboardów */
.auth-tabs {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 2px solid #222825;
}

.auth-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    cursor: pointer;
    color: #888888;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1.5px;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.auth-tab:hover {
    color: #ffffff;
}

.auth-tab.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
    margin-bottom: -2px;
}

/* Klasa pomocnicza ukrywająca elementy */
.hidden {
    display: none !important;
}

/* Nagłówki wewnątrz formularzy */
.auth-container h2 {
    margin-top: 0;
    font-size: 20px;
    text-transform: uppercase;
    color: #ffffff;
    letter-spacing: -0.5px;
    margin-bottom: 25px;
    font-weight: 700;
}

/* Grupy formularza (label + input) */
.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px;
    color: #aaaaaa;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* Eleganckie, ciemne pola tekstowe */
.auth-container input {
    width: 100%;
    padding: 14px 16px;
    background: #1f2421;
    border: 1px solid #333c38;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-container input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
    outline: none;
}

/* Dedykowany, ostry przycisk zatwierdzania */
.btn-auth-submit {
    width: 100%;
    padding: 15px;
    background: var(--accent);
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    margin-top: 10px;
}

.btn-auth-submit:hover {
    background: #00b359;
}

.btn-auth-submit:active {
    transform: scale(0.99);
}

/* Komunikaty błędów i sukcesów */
.auth-message {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
}

.auth-message.error {
    background: rgba(204, 51, 51, 0.1);
    color: #ff4d4d;
    border: 1px solid rgba(204, 51, 51, 0.2);
}

.auth-message.success {
    background: rgba(34, 197, 94, 0.1);
    color: #33ff99;
    border: 1px solid rgba(34, 197, 94, 0.2);
}
/* ==========================================================================
   NOWE, JASNE STYLE DLA PANELU LOGOWANIA (DOPASOWANE DO TRYBUNAFOTO)
   ========================================================================== */

/* Spójne, jasne tło dla całej strony, jeśli treść jest krótka */
html, body {
    background-color: #ffffff !important;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: 'Inter', sans-serif;
}

/* Środkowa sekcja z logowaniem - teraz ma czyste, jasnoszare tło */
.auth-section {
    flex: 1 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px 20px;
    background: #f8f9fa; /* Bardzo delikatne, profesjonalne tło podbijające kartę */
    box-sizing: border-box;
}

/* Elegancka, biała karta z miękkim, nowoczesnym cieniem (soft shadow) */
.auth-container {
    background: #ffffff;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Subtelny, nieagresywny cień */
    width: 100%;
    max-width: 420px;
    box-sizing: border-box;
}

/* Zakładki dopasowane do jasnego motywu */
.auth-tabs {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
}

.auth-tab {
    flex: 1;
    text-align: center;
    padding: 12px;
    cursor: pointer;
    color: #6c757d;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    transition: color 0.2s ease;
}

.auth-tab:hover {
    color: #000000;
}

.auth-tab.active {
    color: var(--accent); /* Twój zielony kolor firmowy */
    border-bottom: 2px solid var(--accent);
    margin-bottom: -2px;
}

.hidden {
    display: none !important;
}

/* Nagłówek formularza */
.auth-container h2 {
    margin-top: 0;
    font-size: 18px;
    text-transform: uppercase;
    color: #212529;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    font-weight: 700;
    text-align: center;
}

.form-group {
    margin-bottom: 20px;
    text-align: left;
}

.form-group label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Czyste, nowoczesne inputy z delikatnym borderem */
.auth-container input {
    width: 100%;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    color: #212529;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Zielona poświata przy kliknięciu (focus) */
.auth-container input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    outline: none;
}

/* Przycisk idealnie współgrający z przyciskiem "ZALOGUJ SIĘ" z Twojego menu */
.btn-auth-submit {
    width: 100%;
    padding: 14px;
    background: #000000; /* Zmieniamy na czerń z menu, żeby pasowało do reszty UI */
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    margin-top: 10px;
}

.btn-auth-submit:hover {
    background: #212529;
}

.btn-auth-submit:active {
    transform: scale(0.99);
}

/* Komunikaty błędów dopasowane do jasnego tła */
.auth-message {
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
}

.auth-message.error {
    background: #fff5f5;
    color: #e53e3e;
    border: 1px solid #fed7d7;
}

.auth-message.success {
    background: #f0fff4;
    color: #38a169;
    border: 1px solid #c6f6d5;
}
/* 1. GŁÓWNA SIATKA: Równe połówki i zabezpieczenie szerokości */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Idealnie 50% na 50% */
    gap: 40px;                      /* Elegancki odstęp między tekstem a zdjęciem */
    align-items: center;            /* Wyrównanie zawartości w pionie */
    width: 100%;
    max-width: 1200px;              /* Maksymalna szerokość całej sekcji */
    margin: 0 auto;                 /* Wyśrodkowanie na ekranie */
}

/* 2. ZABEZPIECZENIE KOLUMN: Wymusza na CSS Grid respektowanie proporcji 1fr */
.about-text-block,
.about-image-block {
    min-width: 0;                   /* Kluczowe! Blokuje rozpychanie kolumny przez wielkie pliki */
    width: 100%;
}

/* 3. RESET STAREGO PLACEHOLDERA: Czyścimy wymiary z domyślnego szablonu */
.placeholder-img {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100% !important;
    height: auto !important;
    background: none !important;    /* Usuwa szare tło starego prostokąta */
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. DOPASOWANIE ZDJĘCIA: Skalowanie do szerokości kolumny */
.about-image-block img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    border-radius: 12px;            /* Ładne, nowoczesne zaokrąglenie rogów */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Delikatny cień nadający głębi */
}

/* 5. RESPONSYWNOŚĆ: Przejście w jedną kolumnę na tabletach i telefonach */
@media (max-width: 992px) {
    .about-grid {
        grid-template-columns: 1fr; /* Jedna kolumna na mniejszych ekranach */
        gap: 30px;
    }
}
.map-section-fluid {
    width: 100%;
    margin-top: 50px;
    padding: 0;
    line-height: 0; /* Likwiduje minimalną białą szparkę pod mapą */
}
.map-section-fluid iframe {
    width: 100% !important;
    height: 450px;
}