.services {
    background-color: var(--bg-secondary);
    border-top: 1px solid rgba(255,255,255,0.05);
}

.services-grid {
    display: flex;       /* Zamiana z grid na flex */
    flex-wrap: wrap;     /* Zezwolenie na łamanie wierszy */
    gap: 25px;
}

.service-card {
    background-color: var(--bg-card);
    padding: 35px 30px;
    border: 1px solid rgba(255,255,255,0.05);
    transition: var(--transition);
    position: relative;
    display: flex;
    flex-direction: column;
    /* FLEXBOX MAGIC: każdy element dąży do 33% szerokości minus luki, ale rośnie (flex-grow: 1), gdy jest miejsce! */
    flex: 1 1 calc(33.333% - 17px);
    min-width: 320px;
}

.service-card:hover {
    border-color: rgba(209, 176, 88, 0.3);
    transform: translateY(-5px);
}

.service-card.featured {
    flex: 1 1 100%; /* Zawsze 100% szerokości */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(209, 176, 88, 0.1) 100%);
    border-color: var(--accent-color);
    padding: 45px 40px;
}

.service-card.featured::before {
    content: 'NAJCZĘŚCIEJ WYBIERANE';
    position: absolute;
    top: 0;
    right: 30px;
    background-color: var(--accent-color);
    color: #000;
    font-size: 9px;
    font-weight: 700;
    padding: 8px 15px;
    letter-spacing: 1px;
}

.service-icon {
    width: 50px; height: 50px; background-color: rgba(209, 176, 88, 0.1); display: flex;
    align-items: center; justify-content: center; margin-bottom: 20px; color: var(--accent-color); font-size: 20px;
}
.service-card h3 { font-size: 18px; margin-bottom: 15px; text-transform: uppercase; letter-spacing: 1px; }
.service-card > p { font-size: 14px; margin-bottom: 20px; line-height: 1.7; }
.service-scope { margin-bottom: 20px; flex-grow: 1; }
.service-scope h4 { font-size: 11px; color: var(--accent-color); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; font-weight: 600; }
.service-scope ul { display: flex; flex-direction: column; gap: 8px; }
.service-scope li { font-size: 13px; padding-left: 18px; position: relative; }
.service-scope li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; background-color: var(--accent-color); border-radius: 50%; }

.service-effect {
    background-color: rgba(255,255,255,0.03); padding: 15px 18px; border-left: 2px solid var(--accent-color); margin-top: auto;
}
.service-effect h4 { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; font-weight: 400; }
.service-effect p { font-size: 13px; color: var(--text-main); font-weight: 500; }

@media (max-width: 1100px) {
    .service-card { flex: 1 1 calc(50% - 13px); } /* 2 kolumny na tabletach, brak dziur! */
}
@media (max-width: 992px) {
    .service-card { flex: 1 1 100%; } /* 1 kolumna na mobile */
    .service-card.featured { grid-template-columns: 1fr; }
}