/* --- Globalne Style ARCADE --- */
body {
    font-family: 'Press Start 2P', cursive;
    margin: 0;
    padding: 0;
    background-color: #000;
    color: #fff;
    line-height: 1.8;
    font-size: 14px;
    background-image: linear-gradient(rgba(0, 255, 0, 0.07) 2px, transparent 2px), linear-gradient(90deg, rgba(0, 255, 0, 0.07) 2px, transparent 2px);
    background-size: 40px 40px;
}

.container {
    max-width: 900px;
    margin: auto;
    padding:20px 20px;
}

h1, h2, h3, h4 {
    text-transform: uppercase;
    text-shadow: 3px 3px 0px rgba(0,0,0,0.7);
}

a {
    color: #ff00ff; /* Neonowy róż */
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

a:hover {
    color: #ffff00; /* Neonowy żółty */
    text-shadow: 0 0 5px #ffff00;
}

/* --- Nagłówek --- */
header {
    background: #111;
    padding: 1.5rem 0;
    border-bottom: 4px solid #ff00ff;
    text-align: center;
}

header h1 {
    color: #00ffff; /* Neonowy cyjan */
    font-size: 2rem;
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff, 3px 3px 0px #ff00ff;
    margin: 0 0 20px 0;
}

header nav ul { list-style: none; padding: 0; margin: 0; }
header nav li { display: inline-block; margin: 0 15px; }

/* --- Sekcja HERO --- */
.hero { padding: 50px 0; text-align: center; border-bottom: 4px solid #00ffff; }
.hero h2 { font-size: 3rem; color: #ffff00; text-shadow: 0 0 8px #ffff00, 4px 4px 0 #ff00ff; }

/* --- Ogólne style bloków --- */
.content-block {
    margin-bottom: 40px;
    padding: 25px;
    border-style: solid;
    border-width: 4px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
    background-color: rgba(10, 10, 10, 0.8);
}
.content-block h3 { margin: 0 0 15px 0; font-size: 1.2rem; border-bottom-style: solid; border-bottom-width: 2px; padding-bottom: 10px; }

/* --- Indywidualne kolory bloków --- */
#o-nas { border-color: #00ffff; }
#o-nas h3 { color: #00ffff; border-color: #00ffff; }

#sprzedaz { border-color: #ff00ff; }
#sprzedaz h3 { color: #ff00ff; border-color: #ff00ff; }

#serwis { border-color: #ffff00; }
#serwis h3 { color: #ffff00; border-color: #ffff00; }

#dlaczego-my { border-color: #00ff00; }
#dlaczego-my h3 { color: #00ff00; border-color: #00ff00; }

#personalizacja { border-color: #ffffff; }
#personalizacja h3 { color: #ffffff; border-color: #ffffff; }

/* --- NOWE STYLE DLA ZRÓŻNICOWANYCH UKŁADÓW --- */

/* Układ Obrazek + Tekst */
.layout-image-left, .layout-image-right {
    display: flex;
    align-items: center;
    gap: 30px;
}
.layout-image-right { flex-direction: row-reverse; }
.block-image { flex-basis: 300px; flex-shrink: 0; }
.block-image img { width: 100%; display: block; border: 3px solid; }
.block-text { flex-grow: 1; }
#o-nas .block-image img { border-color: #00ffff; }
#sprzedaz .block-image img { border-color: #ff00ff; }

/* Układ 3-kolumnowy */
.layout-three-columns {
    display: flex;
    gap: 20px;
    text-align: center;
    margin-top: 20px;
}
.column { flex: 1; }
.column h4 { font-size: 1rem; margin-top: 10px; color: #fff; }
.column p { font-size: 12px; line-height: 1.5; }
.icon-char { font-size: 3rem; color: #00ff00; text-shadow: 0 0 10px #00ff00; }

/* Wyróżniony blok */
.highlight-block { text-align: center; background: rgba(30, 0, 30, 0.8); }

/* Przyciski CTA */
.cta-button {
    font-family: 'Press Start 2P', cursive;
    background: transparent;
    border: 2px solid;
    color: #fff;
    padding: 12px 20px;
    margin-top: 20px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    font-size: 12px;
}
#sprzedaz .cta-button { border-color: #ff00ff; }
#sprzedaz .cta-button:hover { background: #ff00ff; color: #000; box-shadow: 0 0 15px #ff00ff; }
#personalizacja .cta-button { border-color: #fff; }
#personalizacja .cta-button:hover { background: #fff; color: #000; box-shadow: 0 0 15px #fff; }

/* --- Stopka --- */
footer { text-align: center; padding: 2rem 0; border-top: 4px solid #00ff00; background: #111; }

/* --- Baner Cookie --- */
#cookie-consent-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #111; color: white; padding: 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; z-index: 1000; border-top: 4px solid #ffff00; text-align: center; flex-wrap: wrap; }
#cookie-consent-banner p { margin: 0 20px 10px 0; flex-grow: 1; }
#cookie-consent-banner .buttons button { font-family: 'Press Start 2P', cursive; border: 2px solid #fff; background: #333; color: #fff; padding: 10px 15px; margin: 5px; cursor: pointer; transition: all 0.2s ease-in-out; }
#cookie-consent-banner #accept-cookies:hover { background-color: #00ff00; color: #000; border-color: #00ff00; }
#cookie-consent-banner #decline-cookies:hover { background-color: #ff3333; color: #000; border-color: #ff3333; }

.page-intro {
    text-align: center;
    padding: 30px 0;
    margin-bottom: 20px;
}

.page-intro h2 {
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 0 8px #fff;
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.catalog-card {
    background: rgba(20, 20, 20, 0.8);
    border-style: solid;
    border-width: 3px;
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.catalog-card img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    margin-bottom: 20px;
    background-color: #222;
}

.catalog-card h2 {
    font-size: 1rem;
    margin-bottom: 15px;
    text-shadow: none;
}

.catalog-card p {
    font-size: 10px;
    color: #ccc;
    flex-grow: 1;
}

.contact-form {
    max-width: 700px;
    margin: 40px auto;
    padding: 30px;
    border: 4px solid #ff00ff;
    background-color: rgba(10, 10, 10, 0.8);
}

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

.form-group label {
    display: block;
    margin-bottom: 10px;
    font-size: 1rem;
    color: #ff00ff;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px;
    background-color: #222;
    border: 2px solid #555;
    color: #fff;
    font-family: 'Press Start 2P', cursive;
    font-size: 14px;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #ffff00;
    box-shadow: 0 0 10px #ffff00;
}

.contact-form .cta-button {
    display: block;
    width: 100%;
    border-color: #fff;
}

.contact-form .cta-button:hover {
    background: #fff;
    color: #000;
    box-shadow: 0 0 15px #fff;
}

/* Indywidualne kolory dla kart */
.catalog-grid .catalog-card:nth-child(1) {
    border-color: #ff3333;
}
.catalog-grid .catalog-card:nth-child(1) h2 {
    color: #ff3333;
}

.catalog-grid .catalog-card:nth-child(2) {
    border-color: #00ffff;
}
.catalog-grid .catalog-card:nth-child(2) h2 {
    color: #00ffff;
}

.catalog-grid .catalog-card:nth-child(3) {
    border-color: #ffff00;
}
.catalog-grid .catalog-card:nth-child(3) h2 {
    color: #ffff00;
}

.footer-links {
    list-style-type: none;
}

.page-intro-container {
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .catalog-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .catalog-grid {
        grid-template-columns: 1fr;
    }
    .page-intro h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    header h1 { font-size: 1.5rem; }
    .layout-image-left, .layout-image-right { flex-direction: column; }
    .layout-three-columns { flex-direction: column; }
    .block-image { margin-bottom: 20px; width: 100%; max-width: 300px; }
}