/* Yhtenäinen sininen paletti, vaaleat osiotaustat ja valkoiset kortit. */
:root {
    --primary-color: #165fb6;
    --secondary-color: #327fc5;
    --accent-color: #c7e4ff;
    --card-border: #cddff0;
}

#palvelut { background: #f0f6fd; }
#toteutus { background: #f7faff; }
#miksivalitameidat {
    background: linear-gradient(120deg, #d2e6fc, #e6f1fe);
}
#varustelutasot {
    background: linear-gradient(120deg, #dcecff, #c9e1fa);
}
.section-title::after,
#miksivalitameidat .section-title::after { background: #2475c6; }
#varustelutasot .section-title::after { background: #2475c6; }
.service-icon { background: #e6f1ff; border: 1px solid #cee2fa; }
.process-number { background: #e3effd; border-color: #c9ddf5; color: #245c9b; }
.contact-section { background: linear-gradient(115deg, #1b56a5, #2b7cbd); }
.contact-section .section-title::after { background: #b9ddff; }
.contact-form-container { background: rgba(255,255,255,.12); }

/* Vaaleat kirjoituskentät ja tumma teksti. */
.contact-form .form-group input:not([type="checkbox"]):not([type="radio"]),
.contact-form .form-group textarea {
    background: #fff;
    color: #111;
    border: 1px solid #cbd5e1;
    backdrop-filter: none;
    caret-color: #111;
    color-scheme: light;
}
.contact-form .form-group input::placeholder,
.contact-form .form-group textarea::placeholder { color: #64748b; }
.contact-form .form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.contact-form .form-group textarea:focus {
    background: #fff;
    color: #111;
    border-color: #96c9ff;
    box-shadow: 0 0 0 3px rgba(191, 222, 255, .35);
}
.contact-form input[type="file"]::file-selector-button {
    background: #e7f0fb;
    color: #16385b;
    border: 1px solid #c5d8ef;
    border-radius: 5px;
    padding: 6px 10px;
    margin-right: 10px;
    cursor: pointer;
}
.attachment-list { list-style: none; padding: 0; margin: 0; }
.attachment-list:empty, .attachment-feedback:empty { display: none; }
.attachment-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.attachment-list li span { min-width: 0; overflow-wrap: anywhere; font-size: .9rem; }
.attachment-remove { flex-shrink: 0; background: #fff; color: #16385b; border: 1px solid #c5d8ef; border-radius: 6px; padding: 8px 12px; min-height: 44px; font: inherit; font-size: .85rem; cursor: pointer; }
.attachment-remove:hover { background: #e7f0fb; }
.attachment-feedback { color: #fff; font-size: .85rem; line-height: 1.6; margin: 0; }
.attachment-feedback.attachment-error { background: #fff1f2; color: #881337; border-radius: 8px; padding: 10px 12px; }
.upload-progress-panel { padding: 14px 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; background: rgba(255,255,255,.1); color: #fff; }
.upload-progress-panel p { margin: 0 0 10px; font-size: .95rem; line-height: 1.5; }
.upload-progress-panel progress { display: block; width: 100%; height: 12px; border: 0; border-radius: 6px; overflow: hidden; background: #dbeafe; accent-color: #80c3ff; }
.upload-progress-panel progress::-webkit-progress-bar { background: #dbeafe; border-radius: 6px; }
.upload-progress-panel progress::-webkit-progress-value { background: #80c3ff; border-radius: 6px; }
.upload-progress-panel progress::-moz-progress-bar { background: #80c3ff; border-radius: 6px; }