/* ============================================================
   Mindlever — realistic product UI mockups
   Light "app screenshot" screens framed to sit on the dark
   products section. Built from boxes/flex/grid (no illustration).
   ============================================================ */

.mock {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #fbfcfd;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
  color: #29363f;
  container-type: inline-size;
}
.mock__bar {
  height: 40px;
  display: flex; align-items: center; gap: 8px;
  padding: 0 15px;
  background: #eef2f5;
  border-bottom: 1px solid #e2e8ed;
}
.mock__dots { display: flex; gap: 6px; }
.mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: #cdd6dd; }
.mock__title {
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  color: #5d6e79; margin-left: 8px;
  white-space: nowrap;
  display: flex; align-items: center; gap: 7px;
}
.mock__title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint) 30%, transparent); }
.mock__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; height: calc(100% - 40px); }

/* generic pieces */
.m-card { background: #fff; border: 1px solid #e8edf1; border-radius: 13px; padding: 12px 13px; }
.m-row { display: flex; gap: 10px; }
.m-stat { flex: 1; }
.m-stat .k { font-size: 10.5px; color: #8593a0; font-weight: 500; letter-spacing: .02em; }
.m-stat .v { font-family: var(--font-head); font-weight: 700; font-size: 21px; color: #1f2b33; line-height: 1.15; margin-top: 3px; }
.m-stat .v.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.m-trend { font-size: 10px; font-weight: 600; color: #2f9e6f; margin-top: 2px; }

/* chips / badges */
.m-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 10.5px; font-weight: 600; padding: 4px 9px; border-radius: 100px; }
.m-chip.ok { background: #e4f5ec; color: #2f9e6f; }
.m-chip.warn { background: #fdf0dd; color: #c5872a; }
.m-chip.crit { background: #fce5e5; color: #d2453f; }
.m-chip.brand { background: color-mix(in oklab, var(--blue) 14%, #fff); color: var(--blue-deep); }
.m-tick { width: 14px; height: 14px; border-radius: 50%; background: var(--grad); display: inline-grid; place-items: center; }
.m-tick::after { content: ""; width: 5px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); }

/* bar chart */
.m-chart { display: flex; align-items: flex-end; gap: 7px; height: 78px; padding-top: 6px; }
.m-chart .bar { flex: 1; border-radius: 5px 5px 3px 3px; background: linear-gradient(var(--mint), color-mix(in oklab, var(--blue) 80%, var(--mint))); opacity: .35; }
.m-chart .bar.hot { opacity: 1; background: var(--grad); }

/* line list */
.m-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid #eef2f5; }
.m-line:first-child { border-top: 0; }
.m-line .lbl { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #41505b; font-weight: 500; }
.m-line .badge-ico { width: 22px; height: 22px; border-radius: 7px; background: #eef2f5; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #6a7a85; }

/* ===================== AI Pulse ===================== */
.mock--pulse .m-toprow { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mock--pulse .m-toprow .m-card { padding: 11px 12px; }

/* ===================== Corporate GPT (chat) ===================== */
.mock--chat .mock__body { flex-direction: row; gap: 0; padding: 0; }
.m-side { width: 33%; background: #f4f7f9; border-right: 1px solid #e6ebef; padding: 13px 11px; display: flex; flex-direction: column; gap: 7px; }
.m-side .nw { font-size: 10.5px; font-weight: 600; color: #fff; background: var(--grad); border-radius: 8px; padding: 7px 9px; text-align: center; }
.m-side .it { font-size: 10.5px; color: #5d6e79; padding: 7px 9px; border-radius: 8px; background: #fff; border: 1px solid #e8edf1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-side .it.on { background: color-mix(in oklab, var(--mint) 16%, #fff); color: #2c3d47; font-weight: 600; border-color: transparent; }
.m-chatmain { flex: 1; display: flex; flex-direction: column; padding: 14px; gap: 10px; }
.m-bub { max-width: 82%; font-size: 11.5px; line-height: 1.45; padding: 9px 12px; border-radius: 14px; }
.m-bub.u { align-self: flex-end; background: var(--grad); color: #10201a; border-bottom-right-radius: 5px; font-weight: 500; }
.m-bub.a { align-self: flex-start; background: #f1f4f7; color: #3a4751; border-bottom-left-radius: 5px; }
.m-input { margin-top: auto; display: flex; align-items: center; gap: 8px; border: 1px solid #e2e8ed; border-radius: 100px; padding: 9px 9px 9px 14px; color: #98a4ae; font-size: 11px; }
.m-input .send { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; }
.m-input .send::after { content: ""; width: 6px; height: 6px; border: solid #10201a; border-width: 2px 2px 0 0; transform: rotate(45deg); margin-left: -2px; }

/* ===================== Voice Assist (kiosk) ===================== */
.mock--kiosk .mock__body { background: linear-gradient(165deg, #2c3d47, #1f2b33); height: calc(100% - 40px); padding: 18px; gap: 14px; }
.mock--kiosk .mic { display: flex; align-items: center; gap: 13px; }
.mock--kiosk .mic .orb { width: 46px; height: 46px; border-radius: 50%; background: var(--grad); flex-shrink: 0; box-shadow: 0 0 0 8px color-mix(in oklab, var(--blue) 22%, transparent); position: relative; }
.mock--kiosk .mic .orb::after { content: ""; position: absolute; inset: 14px; border: 2px solid rgba(16,32,26,.5); border-radius: 4px 4px 7px 7px; border-top-width: 6px; }
.mock--kiosk .mic .st { font-family: var(--font-head); font-weight: 600; color: #fff; font-size: 14px; }
.mock--kiosk .mic .sub { font-size: 11px; color: #9fb0bb; margin-top: 2px; }
.m-wave { display: flex; align-items: center; gap: 4px; height: 26px; }
.m-wave i { width: 4px; border-radius: 3px; background: var(--grad); }
.mock--kiosk .order { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: 13px; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
.mock--kiosk .oi { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #d6e0e6; white-space: nowrap; }
.mock--kiosk .oi b { color: #fff; font-weight: 600; }
.mock--kiosk .tot { display: flex; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.12); padding-top: 9px; font-family: var(--font-head); font-weight: 700; color: #fff; font-size: 14px; }
.mock--kiosk .cta { background: var(--grad); color: #10201a; font-family: var(--font-head); font-weight: 600; font-size: 12.5px; text-align: center; padding: 11px; border-radius: 100px; }

/* ===================== Digital Human ===================== */
.mock--dh .id { display: flex; align-items: center; gap: 12px; }
.mock--dh .id .av { width: 44px; height: 44px; border-radius: 14px; background: var(--grad); flex-shrink: 0; position: relative; overflow: hidden; }
.mock--dh .id .av::after { content: ""; position: absolute; left: 50%; top: 11px; width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.85); transform: translateX(-50%); box-shadow: 0 16px 0 -1px rgba(255,255,255,.85); }
.mock--dh .id .nm { font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #1f2b33; }
.mock--dh .id .role { font-size: 11px; color: #8593a0; margin-top: 1px; }
.m-timeline { display: flex; flex-direction: column; gap: 0; }
.m-ev { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.m-ev .pip { width: 9px; height: 9px; border-radius: 50%; background: var(--grad); margin-top: 3px; position: relative; flex-shrink: 0; }
.m-ev:not(:last-child) .pip::after { content: ""; position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 2px; height: 16px; background: #e2e8ed; }
.m-ev .tx { font-size: 11px; color: #41505b; }
.m-ev .tx span { color: #98a4ae; white-space: nowrap; }

/* ===================== Incident Management ===================== */
.mock--ops .m-head { display: flex; justify-content: space-between; align-items: center; }
.mock--ops .m-head .h { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: #1f2b33; white-space: nowrap; }
.mock--ops .inc > div { flex: 1; min-width: 0; }
.mock--ops .inc { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #e8edf1; border-radius: 11px; background: #fff; }
.mock--ops .inc .sev { width: 6px; height: 30px; border-radius: 4px; flex-shrink: 0; }
.mock--ops .inc .sev.c { background: #d2453f; }
.mock--ops .inc .sev.w { background: #e0a32e; }
.mock--ops .inc .sev.r { background: #2f9e6f; }
.mock--ops .inc .nm { font-size: 11.5px; font-weight: 600; color: #2b3942; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock--ops .inc .meta { font-size: 10px; color: #98a4ae; margin-top: 1px; white-space: nowrap; }
.mock--ops .inc .right { margin-left: auto; flex: 0 0 auto; }

/* generic integration logos strip */
.m-integ { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.m-integ .lg { font-size: 9.5px; font-weight: 700; letter-spacing: .03em; color: #6a7a85; background: #f1f4f7; border: 1px solid #e6ebef; border-radius: 7px; padding: 4px 8px; white-space: nowrap; }
.m-integ > span:first-child { white-space: nowrap; }

/* ===================== About composition ===================== */
.mock--about {
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(90% 90% at 80% 10%, color-mix(in oklab, var(--blue) 30%, transparent), transparent 60%),
    radial-gradient(80% 80% at 10% 100%, color-mix(in oklab, var(--mint) 28%, transparent), transparent 60%),
    var(--slate-700);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  padding: 8%;
}
.about-stage { position: relative; width: 100%; max-width: 360px; }
.about-card {
  background: #fff; border-radius: 18px; padding: 18px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,.5);
  display: flex; flex-direction: column; gap: 13px;
}
.about-card .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.about-card .hd .t { font-family: var(--font-head); font-weight: 700; font-size: 13px; color: #1f2b33; white-space: nowrap; }
.about-float {
  position: absolute; right: -7%; bottom: -11%;
  background: #fff; border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.45);
  display: flex; align-items: center; gap: 11px;
  width: 62%;
}
.about-float .ic { width: 34px; height: 34px; border-radius: 10px; background: var(--grad); flex-shrink: 0; display: grid; place-items: center; }
.about-float .ic::after { content: ""; width: 7px; height: 12px; border: solid #10201a; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-1px); }
.about-float .v { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: #1f2b33; }
.about-float .k { font-size: 10px; color: #8593a0; margin-top: 1px; white-space: nowrap; }

@container (max-width: 360px) {
  .m-stat .v { font-size: 17px; }
  .mock__body { padding: 12px; gap: 9px; }
}