/* ==========================================================================
   Demo / business-case modal

   Lifted verbatim from the homepage's inline <style>. The ROI calculator's
   #bc-overlay dialog moved to /{lang}/roi-calculator/ with the section, but
   these rules did not, so the dialog rendered unstyled and always visible at
   the foot of the page (.demo-overlay is what hides it until .open).

   The homepage still carries its own inline copy; keep the two in step.
   ========================================================================== */

.demo-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(10,10,40,0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 1rem; }
.demo-overlay.open { display: flex; }
.demo-modal { background: #fff; border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,0.22); width: 100%; max-width: 520px; max-height: 92vh; overflow-y: auto; padding: 40px 40px 36px; position: relative; animation: modal-in 0.22s ease; }
.demo-modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: #f1f5f9; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #64748b; font-size: 18px; line-height: 1; }
.demo-modal-close:hover { background: #e2e8f0; }
.demo-modal-title { font: 800 24px/1.15 Poppins, sans-serif; color: #1C1859; margin-bottom: 6px; }
.demo-modal-sub { font: 400 14px/1.6 Inter, sans-serif; color: #64748b; margin-bottom: 28px; }
.demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.demo-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.demo-field label { font: 600 12px/1 Inter, sans-serif; color: #374151; }
.demo-field input, .demo-field select, .demo-field textarea { width: 100%; border: 1.5px solid #e2e8f0; border-radius: 8px; padding: 10px 12px; font: 400 14px/1.4 Inter, sans-serif; color: #1e293b; background: #f8fafc; transition: border-color .15s, box-shadow .15s; outline: none; }
.demo-field input:focus, .demo-field select:focus, .demo-field textarea:focus { border-color: #FC057C; box-shadow: 0 0 0 3px rgba(252,5,124,0.1); background: #fff; }
.demo-field textarea { resize: vertical; min-height: 80px; }
.demo-actions { display: flex; gap: 12px; margin-top: 24px; }
.demo-btn-submit { flex: 1; padding: 13px; border: 0; border-radius: 10px; background: #FC057C; color: #fff; font: 700 14px/1 Inter, sans-serif; cursor: pointer; transition: opacity .15s; }
.demo-btn-submit:hover { opacity: 0.88; }
.demo-btn-submit:disabled { opacity: 0.5; cursor: default; }
.demo-btn-cancel { padding: 13px 20px; border: 1.5px solid #e2e8f0; border-radius: 10px; background: transparent; color: #64748b; font: 600 14px/1 Inter, sans-serif; cursor: pointer; transition: border-color .15s; }
.demo-btn-cancel:hover { border-color: #94a3b8; }
.demo-success { display: none; text-align: center; padding: 20px 0; }
.demo-success-icon { width: 56px; height: 56px; border-radius: 50%; background: #f0fdf4; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 28px; }
.demo-success-text { font: 600 16px/1.5 Inter, sans-serif; color: #1C1859; }
@media (max-width: 540px) {
  .demo-modal { padding: 28px 20px 24px; }
  .demo-row { grid-template-columns: 1fr; }
}

/* .demo-modal references this animation. */
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}