/* ============================================================
   CPR VISION — Hero flow + conceptual product mockups
   Dark-glass UI language with gold accents.
   ============================================================ */

/* ---------------- HERO FLOW ---------------- */
.hero-flow { position: relative; padding-left: 30px; }
.flow-node {
  position: relative; display: flex; align-items: center; gap: 16px;
  padding: 14px 18px 14px 16px; margin-bottom: 16px;
  background: var(--card); border: 1px solid var(--card-border);
  border-radius: 14px; box-shadow: var(--shadow-card);
}
.reveals-on .flow-node { opacity: 0; transform: translateX(14px); animation: flowIn .7s var(--ease) forwards; }
.flow-node::before {
  content: ""; position: absolute; left: -30px; top: 50%; width: 30px; height: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent));
}
.flow-node:last-child { margin-bottom: 0; }
.flow-node .fn-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--gold-grad-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); display: grid; place-items: center; flex: 0 0 auto; }
.flow-node .fn-ico svg { width: 19px; height: 19px; color: var(--accent-2); }
.flow-node .fn-label { font-weight: 600; font-size: 15px; color: var(--fg); letter-spacing: -0.01em; }
.flow-node .fn-sub { font-size: 12px; color: var(--fg-muted); }
.flow-node.is-hub { background: var(--gold-grad); border-color: transparent; box-shadow: 0 14px 36px color-mix(in srgb, var(--accent-2) 30%, transparent); }
.flow-node.is-hub .fn-ico { background: rgba(4,7,7,0.14); border-color: rgba(4,7,7,0.18); }
.flow-node.is-hub .fn-ico svg { color: var(--ink); }
.flow-node.is-hub .fn-label { color: var(--ink); }
.flow-node.is-hub .fn-sub { color: rgba(4,7,7,0.62); }
.flow-node.is-out .fn-ico { background: var(--bg-alt2); border-color: var(--border); }
.flow-node.is-out .fn-ico svg { color: var(--fg-muted); }

/* vertical spine + travelling pulse */
.hero-flow__spine { position: absolute; left: 0; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(180deg, rgba(250,198,0,.0), rgba(250,198,0,.35) 12%, rgba(250,198,0,.35) 88%, rgba(250,198,0,0)); }
.hero-flow__pulse { position: absolute; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(250,198,0,.18), 0 0 16px 2px rgba(250,198,0,.7); top: 18px; animation: pulseDown 4.2s var(--ease) infinite; }

@keyframes flowIn { to { opacity: 1; transform: none; } }
@keyframes pulseDown { 0%{ top: 14px; opacity:0 } 8%{opacity:1} 92%{opacity:1} 100%{ top: calc(100% - 22px); opacity: 0 } }
@media (prefers-reduced-motion: reduce){ .reveals-on .flow-node{opacity:1;transform:none;animation:none} .hero-flow__pulse{display:none} }

/* ---------------- MOCK WINDOW ---------------- */
.mock {
  background: linear-gradient(180deg, #0e1313, #0a0e0e);
  border: 1px solid rgba(255,255,255,0.09); border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden; color: #fff;
}
.mock--light { background: #fff; color: #060a0a; border-color: #E8E6E1; box-shadow: 0 8px 28px rgba(4,7,7,0.10), 0 40px 90px rgba(4,7,7,0.13); }
.mock__bar { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid rgba(255,255,255,0.07); }
.mock--light .mock__bar { border-bottom-color: #E8E6E1; }
.mock__dots { display: flex; gap: 6px; }
.mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.16); }
.mock--light .mock__dots i { background: #D2D0D2; }
.mock__title { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,0.62); display: flex; align-items: center; gap: 8px; }
.mock--light .mock__title { color: #767271; }
.mock__title .tdot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-grad); }
.mock__body { padding: 20px; }

/* labels */
.m-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin: 0 0 12px; }
.mock--light .m-eyebrow { color: var(--gray); }

/* rows */
.m-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mock--light .m-row { border-bottom-color: #EBE9E4; }
.m-row:last-child { border-bottom: 0; }
.m-key { font-size: 13px; color: rgba(255,255,255,0.5); }
.mock--light .m-key { color: #767271; }
.m-val { font-size: 13.5px; font-weight: 600; color: #fff; }
.mock--light .m-val { color: var(--ink); }

/* profile header */
.m-profile { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.m-avatar { width: 52px; height: 52px; border-radius: 14px; background: var(--gold-grad); color: var(--ink); display: grid; place-items: center; font-family: var(--font-head); font-weight: 700; font-size: 19px; flex: 0 0 auto; }
.m-name { font-family: var(--font-head); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.m-meta { font-size: 12.5px; color: rgba(255,255,255,0.45); }
.mock--light .m-meta { color: var(--gray); }

/* tier / tag chips */
.m-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; }
.m-chip--gold { background: rgba(250,198,0,0.14); color: var(--gold); border: 1px solid rgba(250,198,0,0.3); }
.m-chip--soft { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.1); }
.mock--light .m-chip--soft { background: #F3F2EE; color: #767271; border-color: #E8E6E1; }
.m-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* next best action / AI rec */
.m-ai { margin-top: 16px; padding: 14px; border-radius: 12px; background: linear-gradient(135deg, rgba(250,198,0,0.12), rgba(243,148,0,0.04)); border: 1px solid rgba(250,198,0,0.22); }
.m-ai__head { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.m-ai__head svg { width: 14px; height: 14px; }
.m-ai__text { font-size: 13.5px; color: #fff; line-height: 1.45; }
.mock--light .m-ai__text { color: var(--ink); }

/* prompt chips (AI copilot) */
.m-prompt { display: flex; align-items: center; gap: 11px; padding: 13px 14px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); margin-bottom: 10px; font-size: 13.5px; transition: border-color .2s, background .2s; }
.m-prompt:hover { border-color: rgba(250,198,0,0.4); background: rgba(250,198,0,0.05); }
.m-prompt .ps { width: 26px; height: 26px; border-radius: 7px; background: rgba(250,198,0,0.12); display: grid; place-items: center; flex: 0 0 auto; }
.m-prompt .ps svg { width: 14px; height: 14px; color: var(--gold); }
.m-prompt .pa { margin-left: auto; color: rgba(255,255,255,0.3); }
.m-input { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 12px 14px; border-radius: 11px; border: 1px solid rgba(250,198,0,0.3); background: rgba(4,7,7,0.4); }
.m-input span { color: rgba(255,255,255,0.4); font-size: 13px; }
.m-input .cur { width: 2px; height: 16px; background: var(--gold); margin-left: auto; animation: blink 1.1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* journey builder nodes */
.m-journey { display: flex; flex-direction: column; gap: 0; }
.m-jnode { display: flex; align-items: center; gap: 12px; position: relative; padding: 9px 0; }
.m-jnode .jdot { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; font-size: 13px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.m-jnode.active .jdot { background: var(--gold-grad); border-color: transparent; }
.m-jnode.active .jdot svg { color: var(--ink); }
.m-jnode .jdot svg { width: 15px; height: 15px; color: var(--gold); }
.m-jnode .jlabel { font-size: 13.5px; font-weight: 600; }
.m-jnode .jmeta { font-size: 11.5px; color: rgba(255,255,255,0.4); }
.mock--light .m-jnode .jmeta { color: var(--gray); }
.m-jconn { width: 2px; height: 14px; margin-left: 14px; background: linear-gradient(180deg, rgba(250,198,0,.5), rgba(250,198,0,.2)); }

/* metric bars + dashboard */
.m-metric { margin-bottom: 16px; }
.m-metric:last-child { margin-bottom: 0; }
.m-metric__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.m-metric__label { font-size: 12.5px; color: rgba(255,255,255,0.5); }
.mock--light .m-metric__label { color: var(--gray); }
.m-metric__val { font-family: var(--font-head); font-weight: 600; font-size: 17px; }
.m-bar { height: 7px; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.mock--light .m-bar { background: #ECEAE5; }
.m-bar i { display: block; height: 100%; border-radius: 999px; background: var(--gold-grad); }

.m-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.m-stat { padding: 14px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); }
.mock--light .m-stat { background: #FAFAF8; border-color: #E8E6E1; }
.m-stat__num { font-family: var(--font-head); font-weight: 600; font-size: 24px; letter-spacing: -0.03em; }
.m-stat__lab { font-size: 11.5px; color: rgba(255,255,255,0.45); margin-top: 3px; }
.mock--light .m-stat__lab { color: var(--gray); }
.m-trend { font-size: 11px; color: var(--gold); font-weight: 600; }

/* mini chart */
.m-chart { height: 92px; display: flex; align-items: flex-end; gap: 7px; padding-top: 8px; }
.m-chart i { flex: 1; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, rgba(250,198,0,.85), rgba(243,148,0,.35)); min-height: 8px; }
.m-chart i.muted { background: rgba(255,255,255,0.1); }
.mock--light .m-chart i.muted { background: #E0DED9; }

/* floating badge over mock */
.mock-wrap { position: relative; }
.mock-badge {
  position: absolute; display: flex; align-items: center; gap: 10px;
  background: rgba(14,19,19,0.9); border: 1px solid rgba(250,198,0,0.3); border-radius: 12px;
  padding: 11px 14px; box-shadow: 0 18px 40px rgba(0,0,0,0.4); backdrop-filter: blur(8px);
  animation: floaty 5s ease-in-out infinite;
}
.mock-badge svg { width: 20px; height: 20px; color: var(--gold); }
.mock-badge .mb-num { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: #fff; }
.mock-badge .mb-lab { font-size: 11px; color: rgba(255,255,255,0.5); }
@keyframes floaty { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-9px) } }
@media (prefers-reduced-motion: reduce){ .mock-badge{animation:none} .m-input .cur{animation:none} }

/* ---------------- CHURN ENGINE: health gauge + risk rows ---------------- */
.m-health { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.m-ring { width: 96px; height: 96px; border-radius: 50%; position: relative; flex: 0 0 auto;
  background: conic-gradient(var(--accent) calc(var(--p,74) * 1%), rgba(255,255,255,0.10) 0); }
.mock--light .m-ring { background: conic-gradient(var(--accent) calc(var(--p,74) * 1%), #ECEAE5 0); }
.m-ring::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #0c1110; }
.mock--light .m-ring::after { background: #fff; }
.m-ring .rv { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.m-ring .rv b { font-family: var(--font-head); font-weight: 700; font-size: 25px; letter-spacing: -0.03em; }
.m-ring .rv span { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.mock--light .m-ring .rv span { color: #767271; }
.m-health__copy .hh { font-family: var(--font-head); font-weight: 600; font-size: 16px; }
.m-health__copy p { font-size: 12.5px; color: rgba(255,255,255,0.5); margin: 4px 0 0; line-height: 1.4; }
.mock--light .m-health__copy p { color: #767271; }

.m-risk { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mock--light .m-risk { border-bottom-color: #EBE9E4; }
.m-risk:last-child { border-bottom: 0; }
.m-risk .rdot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.r-high { background: #e0594f; } .r-med { background: #e8a23a; } .r-low { background: #3fae6b; }
.m-risk .rname { font-size: 13px; font-weight: 500; }
.m-risk .rtag { margin-left: auto; font-size: 11.5px; font-weight: 600; }
.m-risk .rtag.high { color: #e0594f; } .m-risk .rtag.med { color: #e8a23a; } .m-risk .rtag.low { color: #3fae6b; }

/* ---------------- AI BUDDY: copilot chat ---------------- */
.m-chat { display: flex; flex-direction: column; gap: 11px; }
.m-bub { max-width: 86%; padding: 11px 14px; font-size: 13.5px; line-height: 1.45; }
.m-bub--user { align-self: flex-end; background: var(--gold-grad); color: var(--ink); border-radius: 14px 14px 4px 14px; font-weight: 500; }
.m-bub--ai { align-self: flex-start; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); border-radius: 14px 14px 14px 4px; }
.mock--light .m-bub--ai { background: #F7F6F3; border-color: #EBE9E4; }
.m-bub--ai .bh { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.m-bub--ai .bh svg { width: 13px; height: 13px; }
.m-bub--ai ul { margin: 8px 0 0; padding-left: 16px; }
.m-bub--ai li { margin-bottom: 4px; }

/* ---------------- OMNICHANNEL: shared inbox threads ---------------- */
.m-thread { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.mock--light .m-thread { border-bottom-color: #EBE9E4; }
.m-thread:last-child { border-bottom: 0; }
.m-thread .tch { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.mock--light .m-thread .tch { background: #F3F2EE; border-color: #E8E6E1; }
.m-thread .tch svg { width: 15px; height: 15px; color: var(--accent); }
.m-thread .tinfo { flex: 1; min-width: 0; }
.m-thread .tname { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 7px; }
.m-thread .tname .tchan { font-size: 10px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,0.4); text-transform: uppercase; }
.mock--light .m-thread .tname .tchan { color: #9b9692; }
.m-thread .tsnip { font-size: 12px; color: rgba(255,255,255,0.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mock--light .m-thread .tsnip { color: #767271; }
.m-thread .ttime { font-size: 11px; color: rgba(255,255,255,0.35); flex: 0 0 auto; align-self: flex-start; }
.mock--light .m-thread .ttime { color: #9b9692; }