/* ==========================================================================
   Interaktywne demo aplikacji Matchtly osadzone na landingu.
   Odwzorowanie interfejsu produktu na danych demonstracyjnych.
   Zero prawdziwych danych kandydatów.
   ========================================================================== */

/* Aplikacja jest interfejsem desktopowym. Na wąskim ekranie renderujemy ją w
   szerokości biurkowej i skalujemy całą ramkę, zamiast ściskać layout do 400 px,
   w którym tabele i tablica przestają być czytelne. Skalę liczy app.js. */
.demo-stage { position: relative; overflow: hidden; background: var(--ink-50); }
.demo-app { display: block; width: 100%; height: 720px; border: 0; background: var(--ink-50); }
.demo-stage.scaled .demo-app { transform-origin: 0 0; }

/* Podpowiedź nad demem */
.demo-hint {
  display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-600); margin-bottom: 14px; text-align: center;
}
.demo-hint svg { width: 16px; height: 16px; color: var(--violet-600); flex-shrink: 0; }
.demo-hint b { color: var(--ink-800); font-weight: 600; }

.demo-frame {
  border-radius: 14px; overflow: hidden; background: var(--white);
  box-shadow: var(--shadow-window); border: 1px solid var(--ink-200);
}
.demo-bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 14px;
  background: var(--ink-50); border-bottom: 1px solid var(--ink-200);
}
.demo-bar .window-dot { width: 10px; height: 10px; }
.demo-url {
  flex: 1; margin-left: 8px; background: var(--white); border: 1px solid var(--ink-200);
  border-radius: 7px; padding: 4px 12px; font-size: 12px; color: var(--ink-500);
}
.demo-live {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700;
  color: var(--violet-700); background: var(--violet-50); box-shadow: inset 0 0 0 1px var(--violet-100);
  padding: 4px 10px; border-radius: 100px; white-space: nowrap;
}
.demo-live i { width: 7px; height: 7px; border-radius: 50%; background: #34c77b; animation: pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.demo-mobile-note { display: none; }
@media (max-width: 1100px) {
  .demo-app { height: 660px; }
}
@media (max-width: 900px) {
  .demo-mobile-note {
    display: block; margin-top: 12px; text-align: center;
    font-size: 12.5px; line-height: 1.6; color: var(--ink-500);
  }
  .demo-hint svg { display: none; }
}

/* Na telefonie pasek okna ma tylko tyle miejsca, ile ma. Plakietka schodzi
   do samej kropki z krotszym podpisem, zeby adres nie wypychal jej poza kadr. */
@media (max-width: 768px) {
  .demo-live { font-size: 10px; padding: 3px 8px; gap: 5px; flex: none; }
  .demo-live i { width: 6px; height: 6px; }
}