/* VoltDoc Styles v2.1 (Fixed Icons)
   Naprawiona responsywność, układ ORAZ wyświetlanie ikon.
*/
@import url("fontawesome-all.min.css");
/* --- ZMIENNE KOLORYSTYCZNE --- */
:root {
    --primary: #1976d2;       /* Główny niebieski */
    --primary-dark: #0d47a1;  /* Ciemny granat */
    --accent: #ff9800;        /* Pomarańczowy */
    --accent-hover: #f57c00;
    --text-main: #333333;
    --text-light: #666666;
    --bg-light: #f4f6f8;
    --white: #ffffff;
    --border: #e0e0e0;
}

/* --- RESET & BAZA --- */
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }

body {
    margin: 0;
    padding: 0;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
    font-size: 16pt;
    line-height: 1.6;
    color: var(--text-light);
    background-color: var(--bg-light);
    overflow-x: hidden;
}

h1, h2, h3, h4, h5 {
    color: var(--text-main);
    font-weight: 300;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

h2 { font-size: 2.2em; font-weight: 400; }
h3 { font-size: 1.5em; }
p { margin-bottom: 1.5em; }
a { text-decoration: none; color: var(--primary); transition: 0.3s; }
a:hover { color: var(--accent); }

/* --- UKŁAD (GRID SYSTEM) --- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
    align-items: stretch;
}

[class*="col-"] {
    padding: 0 15px;
    width: 100%; /* Mobile first */
}

/* DESKTOP (powyżej 840px) */
@media (min-width: 841px) {
    .col-6 { width: 50%; }
    .col-4 { width: 33.333%; }
    .col-12 { width: 100%; }
}

/* TABLET I MOBILE (poniżej 840px) */
@media (max-width: 840px) {
    .col-12-narrower { 
        width: 100% !important; 
        margin-bottom: 2em;
    }
}

/* --- HEADER --- */
#header {
    background: var(--primary-dark);
    color: var(--white);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

#header h1 { margin: 0; font-size: 1.5em; font-weight: 700; letter-spacing: 1px; }
#header h1 a { color: var(--white); border: none; }

#nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

#nav ul li { margin-left: 20px; }
#nav ul li a { color: rgba(255,255,255,0.8); font-size: 0.9em; border: none; }
#nav ul li a:hover { color: var(--white); }

#nav .button {
    border: 1px solid var(--white);
    padding: 0.4em 1em;
    border-radius: 4px;
    color: var(--white);
}
#nav .button:hover { background: var(--white); color: var(--primary-dark); }

@media (max-width: 768px) {
    #nav ul li:not(:last-child) { display: none; }
}

/* --- BANNER --- */
#banner {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
    color: var(--white);
    padding: 8em 1em 6em 1em;
    text-align: center;
    margin-bottom: 2em;
}
#banner h2 { color: var(--white); font-size: 3em; margin-bottom: 0.2em; font-weight: 700; }
#banner p { font-size: 1.3em; opacity: 0.9; margin-bottom: 2em; }

/* --- PRZYCISKI --- */
.button {
    display: inline-block;
    padding: 0.8em 2em;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9em;
    cursor: pointer;
    border: 0;
    transition: all 0.3s ease;
    text-align: center;
}

.button.primary {
    background-color: var(--accent);
    color: var(--white);
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.button.primary:hover { background-color: var(--accent-hover); transform: translateY(-2px); }

.button.alt {
    background-color: transparent;
    border: 2px solid var(--border);
    color: var(--text-main);
}
.button.alt:hover { border-color: var(--primary); color: var(--primary); }
.button.fit { width: 100%; display: block; }

.actions { list-style: none; padding: 0; display: flex; justify-content: center; }
.actions li { padding: 0 10px; }

/* --- BOXES & FEATURES --- */
#main { padding: 4em 0; }

.box {
    background: var(--white);
    padding: 3em;
    margin-bottom: 2em;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.box.special { text-align: center; }

.image.featured { display: block; margin: 2em -3em -3em -3em; }
.image.featured img { width: 100%; border-radius: 0 0 8px 8px; }

.box.features .features-row {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    margin: 0 -3em;
}

.box.features section {
    width: 50%;
    padding: 3em;
    text-align: center;
    border-bottom: 1px solid var(--border);
}
.box.features section:nth-child(odd) { border-right: 1px solid var(--border); }

@media (max-width: 768px) {
    .box.features section { width: 100%; border-right: none !important; }
}

/* --- IKONY (NAPRAWIONE) --- */
.icon {
    text-decoration: none;
    border-bottom: none;
    position: relative;
}
/* Ten fragment odpowiada za wyświetlenie ikony z czcionki */
.icon:before {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    text-transform: none !important;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900; /* Wymagane dla ikon typu 'solid' */
}
.icon.brands:before {
    font-family: 'Font Awesome 5 Brands';
}

/* Kółko wokół ikony */
.icon.major {
    width: 4em; height: 4em; line-height: 4em;
    background: var(--primary); color: var(--white);
    border-radius: 50%; margin-bottom: 1.5em;
    display: inline-block; font-size: 1.5em;
}
.icon.major.accent2 { background: #1976d2; }
.icon.major.accent3 { background: #1565c0; }
.icon.major.accent4 { background: #0d47a1; }
.icon.major.accent5 { background: var(--accent); }

/* --- CENNIK --- */
.pricing {
    transition: transform 0.3s;
    border: 2px solid transparent;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.pricing:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.price-tag {
    font-size: 3em;
    font-weight: 700;
    color: var(--primary);
    display: block;
    margin: 0.5em 0;
}

/* --- CTA --- */
#cta {
    background: var(--primary-dark);
    color: var(--white);
    text-align: center;
    padding: 5em 1em;
}
#cta h2 { color: var(--white); }
#cta form { max-width: 500px; margin: 0 auto; }

/* --- FOOTER --- */
#footer {
    background: #263238;
    color: #b0bec5;
    text-align: center;
    padding: 4em 1em;
    font-size: 0.9em;
}
#footer strong { color: var(--white); }
#footer a { color: #cfd8dc; border-bottom: 1px dotted #cfd8dc; }
#footer a:hover { color: var(--white); border-bottom-style: solid; }

.icons {
    list-style: none; padding: 0; display: flex; justify-content: center; gap: 1.5em; margin-bottom: 2em;
}
.icons a { border: none !important; font-size: 1.5em; opacity: 0.6; }
.icons a:hover { opacity: 1; }

.copyright { list-style: none; padding: 0; margin-top: 2em; opacity: 0.5; }
.copyright li { display: inline; margin: 0 10px; }