/* Shared by every portfolio demo: the "fictional business" bar and the demo popups. */
[hidden] { display: none !important; }

.demo-bar {
  position: relative; z-index: 60;
  background: #141414; color: #f4f2ec;
  font: 500 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.demo-bar-row {
  max-width: 1232px; margin: 0 auto;
  padding: 8px max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.demo-bar b { display: inline-block; padding: 2px 8px; margin-right: 8px; border-radius: 999px; background: #ffcc00; color: #141414; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.demo-bar a { color: #ffcc00; text-decoration: none; font-weight: 600; white-space: nowrap; }
.demo-bar a:hover { text-decoration: underline; }

.demo-modal {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  padding: 24px max(16px, env(safe-area-inset-right, 0px)) 24px max(16px, env(safe-area-inset-left, 0px));
  background: rgba(10, 10, 10, 0.55);
  font: 400 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.demo-card {
  position: relative; width: min(440px, 100%); max-height: 100%; overflow: auto;
  background: #fff; color: #141414; border-radius: 20px; padding: 28px 24px 22px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; gap: 12px;
}
.demo-card .demo-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7300; }
.demo-card h2 { margin: 0; font-size: 1.4rem; line-height: 1.2; font-weight: 700; color: #141414; }
.demo-card p { margin: 0; color: #4a4a4a; }
.demo-close {
  position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid #e3e3e3; background: #fff; color: #141414; cursor: pointer; font-size: 20px; line-height: 1;
}
.demo-ok {
  margin-top: 4px; padding: 13px 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: #141414; color: #fff; font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.demo-ok:hover { background: #333; }
.demo-wa { border-radius: 14px; overflow: hidden; border: 1px solid #e6e6e6; }
.demo-wa-head { background: #075e54; color: #fff; padding: 9px 14px; font-weight: 600; font-size: 14px; }
.demo-wa-body { background: #ece5dd; padding: 12px; }
.demo-bubble {
  margin-left: auto; max-width: 92%; background: #dcf8c6; color: #1f2c34; padding: 10px 12px;
  border-radius: 12px 12px 2px 12px; white-space: pre-wrap; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere;
}

/* Sections below the first screen slide up into place; nothing starts hidden. */
.js [data-reveal].below { transform: translateY(22px); transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.js [data-reveal].below.in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal].below { transform: none; transition: none; }
}