/* GENERATED by build_industries.py from index.html — do not edit. The homepage live-demo modal styles,
   copied verbatim so the demo on /industries/<slug> is the homepage's demo. */
/* ============================================================
   DEMO CALL MODAL (real live demo — see the engine in the script below)
   ============================================================ */
.dm-backdrop { position: fixed; inset: 0; z-index: 900; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(12,12,13,0.66); backdrop-filter: blur(3px); }
.dm-backdrop.open { display: flex; }
.dm-panel { width: 100%; max-width: 440px; background: var(--ink); border-radius: var(--radius-xl);
  border: 1px solid rgba(247,245,240,0.10); box-shadow: 0 24px 70px rgba(0,0,0,.5);
  padding: clamp(22px,4vw,30px); color: var(--paper); position: relative; }
.dm-panel.live { border-color: rgba(255,106,0,0.45); box-shadow: 0 0 0 1px rgba(255,106,0,0.35), 0 0 44px rgba(255,106,0,0.22), 0 24px 70px rgba(0,0,0,.5); }
.dm-x { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(247,245,240,0.06); border: 1px solid rgba(247,245,240,0.12); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; color: var(--paper); }
.dm-sel { position: relative; }
.dm-selbtn { width: 100%; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(247,245,240,0.06); border: 1px solid rgba(247,245,240,0.20); border-radius: var(--radius-pill);
  padding: 0 20px; cursor: pointer; color: var(--paper); font: 600 16px/1 var(--font-body); text-align: left; }
.dm-selbtn:hover { border-color: rgba(247,245,240,0.4); }
.dm-selbtn svg { transition: transform var(--dur-base); flex-shrink: 0; }
.dm-sel.open .dm-selbtn svg { transform: rotate(180deg); }
.dm-list { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20; list-style: none;
  margin: 0; padding: 6px; max-height: 264px; overflow-y: auto; display: none;
  background: #202124; border: 1px solid rgba(247,245,240,0.14); border-radius: var(--radius-md);
  box-shadow: 0 18px 50px rgba(0,0,0,.5); scrollbar-width: thin; scrollbar-color: rgba(255,106,0,0.55) transparent; }
.dm-sel.open .dm-list { display: block; }
.dm-list::-webkit-scrollbar { width: 6px; }
.dm-list::-webkit-scrollbar-thumb { background: rgba(255,106,0,0.55); border-radius: 3px; }
.dm-opt { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: transparent;
  border: none; border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer;
  color: var(--paper); font: 500 15px/1.2 var(--font-body); }
.dm-opt:hover { background: rgba(247,245,240,0.07); }
.dm-opt[aria-selected="true"] { background: rgba(255,106,0,0.14); }
.dm-opt span.d { width: 6px; height: 6px; border-radius: 50%; background: rgba(247,245,240,0.25); flex-shrink: 0; }
.dm-opt[aria-selected="true"] span.d { background: var(--orange); }
.cl-eq { display: inline-flex; align-items: flex-end; gap: 3px; height: 22px; }
.cl-eq span { width: 3px; border-radius: 2px; background: var(--orange); animation: cleq 1.1s var(--ease-standard) infinite; }
@keyframes cleq { 0%, 100% { height: 5px; opacity: .55; } 50% { height: 20px; opacity: 1; } }


/* ── Demo modal form fields (dark panel) ── */
.dm-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.dm-field label { font: 600 11px/1 var(--font-body); letter-spacing: 0.06em;
  text-transform: uppercase; color: rgba(247,245,240,0.55); }
.dm-field input { width: 100%; height: 46px; background: rgba(247,245,240,0.06);
  border: 1px solid rgba(247,245,240,0.20); border-radius: var(--radius-md);
  padding: 0 14px; color: var(--paper); font: 500 15px/1 var(--font-body); outline: none;
  transition: border-color var(--dur-fast); }
.dm-field input:focus { border-color: rgba(255,106,0,0.6); }
.dm-field input::placeholder { color: rgba(247,245,240,0.34); }
.dm-panel .cl-btn[disabled] { opacity: .6; cursor: default; }

.cl-pulse { animation: clpulse 1.7s var(--ease-standard) infinite; }
@keyframes clpulse {
  0% { box-shadow: 0 0 0 0 rgba(255,106,0,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(255,106,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,106,0,0); }
}

.flow-hub-glow { animation: flowHubGlow 4.2s var(--ease-standard) infinite; }
@keyframes flowHubGlow { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .82; transform: scale(1.05); } }

.hub-halo { position: absolute; inset: 24px; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, rgba(255,106,0,0) 0deg, rgba(255,106,0,0.40) 46deg, rgba(255,106,0,0) 130deg); -webkit-mask: radial-gradient(closest-side, transparent 85%, #000 87%); mask: radial-gradient(closest-side, transparent 85%, #000 87%); animation: haloSpin 9s linear infinite; }
@keyframes haloSpin { to { transform: rotate(360deg); } }