/* CRM-demo — nagebouwd CRM in de Viva67-huisstijl. Alles lokaal, niets wordt opgeslagen. */
.dm-hero, .dm-stage, .dm-end { padding-left: var(--frame); padding-right: var(--frame); }
.dm-hero { padding-top: 150px; padding-bottom: 50px; background: radial-gradient(60% 70% at 85% 0%, rgba(167,139,250,.22), transparent 70%); }
.dm-hero__inner, .dm-end__inner { max-width: 1100px; margin: 0 auto; }
.dm-hero__title { font-size: clamp(42px, 6.6vw, 104px); margin: 24px 0 22px; max-width: 14ch; }
.dm-hero__lead { color: var(--muted); font-size: clamp(17px, 1.5vw, 21px); max-width: 52ch; margin-bottom: 32px; }
.dm-hero__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.dm-go { display: inline-flex; align-items: center; gap: 12px; padding: 18px 30px; border: 0; cursor: pointer; font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--on-accent);
  background: linear-gradient(120deg, #c4b5fd, var(--accent) 45%, #8b6cf0); background-size: 200% 100%; box-shadow: 0 18px 50px -18px rgba(167,139,250,.9); transition: transform 200ms ease, background-position 500ms ease; }
.dm-go:hover { transform: translateY(-2px); background-position: 100% 0; }
.dm-go--sm { padding: 12px 18px; font-size: 12px; }
.dm-link { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; }
.dm-link:hover { color: var(--ink); }
.dm-go:focus-visible, .dm-link:focus-visible, .dm-nav__item:focus-visible, .dm-btn-sm:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* app-venster */
.dm-stage { padding-bottom: 90px; scroll-margin-top: 90px; position: relative; }
.dm-app { position: relative; max-width: 1240px; margin: 0 auto; background: #0d1326; box-shadow: 0 0 0 1px rgba(167,139,250,.25), 0 60px 120px -50px rgba(167,139,250,.55); overflow: hidden; }
.dm-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #0a0f1f; border-bottom: 1px solid var(--rule); font-size: 13px; color: var(--muted); }
.dm-dots { display: flex; gap: 6px; } .dm-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2a3150; }
.dm-bar__title { flex: 1; text-align: center; }
.dm-bar__badge { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: 3px 9px; }
.dm-body { display: grid; grid-template-columns: 210px 1fr; min-height: 620px; }
.dm-nav { background: #0a0f1f; border-right: 1px solid var(--rule); padding: 18px 10px; display: flex; flex-direction: column; gap: 4px; }
.dm-nav__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; background: none; color: var(--muted); font-size: 14px; cursor: pointer; text-align: left; transition: background 160ms ease, color 160ms ease; }
.dm-nav__item svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; flex: none; }
.dm-nav__item:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.dm-nav__item.is-active { color: var(--ink); background: rgba(167,139,250,.14); box-shadow: inset 3px 0 0 var(--accent); }
.dm-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 11px; display: grid; place-items: center; }
.dm-count.bump { animation: dmBump 600ms cubic-bezier(.2,1.6,.4,1); }
@keyframes dmBump { 40% { transform: scale(1.5); } }
.dm-main { position: relative; padding: 26px; overflow: hidden; }
.dm-view { display: none; }
.dm-view.is-active { display: block; animation: dmIn 420ms cubic-bezier(.2,.7,.2,1); }
@keyframes dmIn { from { opacity: 0; transform: translateY(10px); } }
.dm-head { margin-bottom: 20px; }
.dm-head h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; }
.dm-head p, .dm-muted { color: var(--muted); font-size: 14px; }
.dm-muted { margin-top: 10px; }

/* overzicht */
.dm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; margin-bottom: 14px; }
.dm-kpi, .dm-card { background: #121a31; box-shadow: inset 0 0 0 1px var(--rule); padding: 18px; }
.dm-kpi span { display: block; font-size: 12.5px; color: var(--muted); }
.dm-kpi strong { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 600; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.dm-kpi em { font-style: normal; font-size: 12px; color: #6EE7B7; }
.dm-grid2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; }
.dm-card h3 { font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 16px; }
.dm-chart { display: flex; align-items: flex-end; gap: 10px; height: 170px; }
.dm-chart div { flex: 1; display: flex; flex-direction: column-reverse; gap: 2px; height: 100%; }
.dm-chart span { display: block; width: 100%; height: 0; transition: height 900ms cubic-bezier(.2,.7,.2,1); }
.dm-chart .d { background: linear-gradient(180deg, #c4b5fd, #8b6cf0); } .dm-chart .n { background: #0a0f1f; box-shadow: inset 0 0 0 1px rgba(167,139,250,.45); }
.dm-chart small { font-size: 11px; color: var(--muted); text-align: center; margin-top: 6px; }
.dm-feed { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-size: 14px; }
.dm-feed li { display: grid; grid-template-columns: 10px 1fr; gap: 12px; align-items: start; }
.dm-feed li::before { content: ""; width: 10px; height: 10px; margin-top: 5px; background: var(--accent); border-radius: 50%; }
.dm-feed li.new { animation: dmIn 500ms ease; }
.dm-feed small { display: block; color: var(--muted); font-size: 12px; }

/* inbox */
.dm-inbox { display: grid; grid-template-columns: 280px 1fr; gap: 0; height: 568px; margin: -26px; }
.dm-convs { list-style: none; margin: 0; padding: 0; border-right: 1px solid var(--rule); overflow-y: auto; }
.dm-conv { padding: 14px 16px; border-bottom: 1px solid var(--rule); cursor: pointer; transition: background 160ms ease; }
.dm-conv:hover { background: rgba(255,255,255,.03); }
.dm-conv.is-active { background: rgba(167,139,250,.12); }
.dm-conv.new { animation: dmSlide 600ms cubic-bezier(.2,.7,.2,1); }
@keyframes dmSlide { from { opacity: 0; transform: translateX(-30px); background: rgba(167,139,250,.3); } }
.dm-conv__top { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.dm-conv__top strong { font-weight: 600; }
.dm-conv__top time { color: var(--muted); font-size: 12px; }
.dm-conv p { color: var(--muted); font-size: 13px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-chan { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 2px 7px; margin-top: 6px; background: rgba(167,139,250,.16); color: var(--accent-ink); }
.dm-thread { display: flex; flex-direction: column; min-width: 0; }
.dm-thread__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.dm-thread__head span { display: block; color: var(--muted); font-size: 12.5px; }
.dm-msgs { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.dm-msg { max-width: 74%; padding: 11px 14px; font-size: 14px; line-height: 1.5; animation: dmIn 360ms ease; }
.dm-msg--in { background: #1b2340; align-self: flex-start; }
.dm-msg--out { background: rgba(167,139,250,.2); align-self: flex-end; box-shadow: inset 0 0 0 1px rgba(167,139,250,.35); }
.dm-msg small { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; }
.dm-msg .ai { font-size: 10px; font-weight: 700; letter-spacing: .12em; background: var(--accent); color: var(--on-accent); padding: 1px 5px; margin-right: 6px; }
.dm-typing { align-self: flex-end; display: flex; gap: 4px; padding: 12px 14px; background: rgba(167,139,250,.14); }
.dm-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dmDot 1s infinite; }
.dm-typing i:nth-child(2) { animation-delay: .15s; } .dm-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dmDot { 50% { opacity: .25; transform: translateY(-3px); } }
.dm-event { align-self: center; font-size: 12px; color: #6EE7B7; padding: 6px 12px; background: rgba(110,231,183,.08); }
.dm-compose { display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--rule); }
.dm-compose input { flex: 1; background: #0a0f1f; border: 1px solid var(--rule); color: var(--ink); padding: 10px 12px; font: inherit; font-size: 14px; }
.dm-btn-sm { border: 0; cursor: pointer; padding: 9px 14px; font-size: 12.5px; font-weight: 700; background: rgba(167,139,250,.18); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(167,139,250,.4); }
.dm-btn-sm:hover { background: var(--accent); color: var(--on-accent); }

/* contacten */
.dm-tablewrap { overflow-x: auto; }
.dm-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 620px; }
.dm-table th { text-align: left; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 10px 10px 10px 0; border-bottom: 1px solid var(--rule); }
.dm-table td { padding: 13px 10px 13px 0; border-bottom: 1px solid var(--rule); }
.dm-table tbody tr { cursor: pointer; transition: background 160ms ease; }
.dm-table tbody tr:hover { background: rgba(167,139,250,.07); }
.dm-av { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #8b6cf0, #c4b5fd); color: var(--on-accent); font-size: 12px; font-weight: 700; margin-right: 10px; vertical-align: middle; }
.dm-pill { display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.06); margin-right: 4px; }
.dm-pill--hot { background: rgba(252,165,165,.15); color: #FCA5A5; } .dm-pill--ok { background: rgba(110,231,183,.12); color: #6EE7B7; } .dm-pill--new { background: rgba(167,139,250,.18); color: var(--accent-ink); }
.dm-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: min(380px, 100%); background: #10172d; box-shadow: -30px 0 60px -30px #000, inset 1px 0 0 var(--rule); padding: 26px; overflow-y: auto; animation: dmDrawer 380ms cubic-bezier(.2,.7,.2,1); z-index: 4; }
.dm-drawer[hidden] { display: none; }
@keyframes dmDrawer { from { transform: translateX(100%); } }
.dm-drawer__x { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--muted); font-size: 26px; cursor: pointer; }
.dm-drawer h3 { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 12px 0 4px; }
.dm-drawer dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 14px; margin: 18px 0; }
.dm-drawer dt { color: var(--muted); }
.dm-drawer dd { margin: 0; }
.dm-tl { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--rule); }
.dm-tl li { position: relative; padding: 0 0 16px 18px; font-size: 13.5px; }
.dm-tl li::before { content: ""; position: absolute; left: -5px; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.dm-tl small { display: block; color: var(--muted); font-size: 12px; }

/* pijplijn */
.dm-board { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.dm-col { background: #10172d; box-shadow: inset 0 0 0 1px var(--rule); padding: 12px; min-height: 380px; transition: box-shadow 160ms ease, background 160ms ease; }
.dm-col.over { background: rgba(167,139,250,.1); box-shadow: inset 0 0 0 2px var(--accent); }
.dm-col h4 { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.dm-col h4 b { color: var(--ink); font-weight: 600; letter-spacing: 0; }
.dm-deal { background: #182143; padding: 12px; margin-bottom: 10px; cursor: grab; box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); transition: transform 160ms ease, box-shadow 160ms ease; user-select: none; }
.dm-deal:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(167,139,250,.5); }
.dm-deal.dragging { opacity: .4; }
.dm-deal.landed { animation: dmLand 500ms cubic-bezier(.2,1.6,.4,1); }
@keyframes dmLand { 40% { transform: scale(1.06); box-shadow: 0 0 0 2px var(--accent); } }
.dm-deal strong { display: block; font-size: 14px; }
.dm-deal span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.dm-deal b { display: block; margin-top: 8px; font-size: 14px; color: var(--accent-ink); }
.dm-col--won .dm-deal b { color: #6EE7B7; }

/* agenda */
.dm-week { display: grid; grid-template-columns: 52px repeat(5, minmax(0,1fr)); font-size: 12.5px; }
.dm-week .h { padding: 8px 6px; color: var(--muted); text-align: center; border-bottom: 1px solid var(--rule); }
.dm-week .h b { display: block; color: var(--ink); font-size: 14px; }
.dm-week .t { color: var(--muted); padding: 4px 6px 0 0; text-align: right; height: 52px; border-top: 1px solid rgba(255,255,255,.04); }
.dm-week .c { position: relative; border-left: 1px solid var(--rule); border-top: 1px solid rgba(255,255,255,.04); height: 52px; }
.dm-appt { position: absolute; left: 3px; right: 3px; padding: 6px 8px; background: linear-gradient(160deg, rgba(167,139,250,.45), rgba(139,108,240,.3)); box-shadow: inset 3px 0 0 var(--accent); font-size: 12px; line-height: 1.3; overflow: hidden; z-index: 1; animation: dmIn 500ms ease both; }
.dm-appt small { display: block; color: #d8cffc; font-size: 11px; }
.dm-appt--buffer { background: repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 5px, transparent 5px 10px); box-shadow: none; color: var(--muted); }

/* melding */
.dm-toast { position: absolute; right: 20px; bottom: 20px; z-index: 6; max-width: 340px; padding: 14px 16px 14px 18px; background: #1b2142; box-shadow: inset 3px 0 0 var(--accent), 0 30px 60px -20px #000; font-size: 14px; animation: dmToast 500ms cubic-bezier(.2,1.4,.4,1); cursor: pointer; }
.dm-toast[hidden] { display: none; }
.dm-toast strong { display: block; margin-bottom: 2px; }
.dm-toast span { color: var(--muted); font-size: 13px; }
@keyframes dmToast { from { opacity: 0; transform: translateY(20px) scale(.96); } }

/* rondleiding */
.dm-tour { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 60; width: min(460px, calc(100% - 32px)); background: #141a2e; box-shadow: inset 0 0 0 1px rgba(167,139,250,.5), 0 40px 80px -30px #000; padding: 20px 22px 18px; animation: dmToast 500ms cubic-bezier(.2,1.4,.4,1); }
.dm-tour[hidden] { display: none; }
.dm-tour__bar { height: 3px; background: var(--rule); margin: -20px -22px 16px; }
.dm-tour__bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #8b6cf0, #c4b5fd); transition: width 500ms ease; }
.dm-tour__step { font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-ink); }
.dm-tour__title { font-family: var(--font-display); font-weight: 600; font-size: 22px; margin: 6px 0 6px; }
.dm-tour__text { color: var(--muted); font-size: 14.5px; }
.dm-tour__btns { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.dm-hl { position: relative; z-index: 3; box-shadow: 0 0 0 2px var(--accent), 0 0 0 8px rgba(167,139,250,.22) !important; animation: dmPulse 1.6s ease-in-out infinite; }
@keyframes dmPulse { 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 14px rgba(167,139,250,.08); } }

@media (min-width: 1100px) { .dm-tour { left: auto; right: 24px; transform: none; width: 400px; } }

/* afsluiter */
.dm-end { padding-top: 40px; padding-bottom: 110px; }
.dm-end__inner { padding: clamp(28px, 5vw, 60px); background: linear-gradient(135deg, #1d1838, #0d0a1f); box-shadow: inset 0 0 0 1px rgba(167,139,250,.45); }
.dm-end h2 { font-size: clamp(32px, 4.4vw, 58px); max-width: 18ch; margin-bottom: 16px; }
.dm-end p { color: var(--muted); max-width: 60ch; margin-bottom: 26px; }
.dm-fine { font-size: 13px; margin: 22px 0 0 !important; }

@media (max-width: 900px) {
  .dm-body { grid-template-columns: minmax(0, 1fr); }
  .dm-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--rule); padding: 8px; }
  .dm-nav__item { width: auto; flex: none; }
  .dm-nav__item.is-active { box-shadow: inset 0 -3px 0 var(--accent); }
  .dm-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dm-grid2 { grid-template-columns: minmax(0, 1fr); }
  .dm-inbox { grid-template-columns: minmax(0, 1fr); height: auto; }
  .dm-convs { max-height: 230px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .dm-msgs { max-height: 380px; }
  .dm-main { padding: 18px; }
  .dm-inbox { margin: -18px; }
  .dm-week { grid-template-columns: 40px repeat(5, minmax(0,1fr)); font-size: 11px; }
  .dm-appt small { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dm-view.is-active, .dm-conv.new, .dm-msg, .dm-toast, .dm-tour, .dm-appt, .dm-drawer, .dm-hl, .dm-count.bump, .dm-deal.landed { animation: none !important; }
  .dm-chart span { transition: none; }
}