/* LUMEN heartbeat scanner.
   A 3D-tilted clinical card with a continuous ECG trace, a moving
   vertical scan line, and an ember pulse halo on the QRS apex.
   Used on the homepage and the ICU page as the visual answer to
   "what does LUMEN do at the bedside" before the visitor reads a word.

   Motion is calm by default (4s cycle), respects prefers-reduced-motion,
   and uses only transform + opacity + stroke-dashoffset for GPU safety.
   No JavaScript. No external assets. */

.bbeat-stage {
  display: grid;
  place-items: center;
  padding: clamp(40px, 6vw, 88px) var(--gutter);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink-900) 4%, var(--paper)) 0%,
    var(--paper) 100%);
}

.bbeat {
  position: relative;
  width: min(960px, 100%);
  perspective: 1600px;
}

.bbeat__caption {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
  font-family: var(--font-mono);
  text-align: center;
}
.bbeat__eyebrow {
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.bbeat__title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  margin: 0;
}

.bbeat__face {
  position: relative;
  background: linear-gradient(160deg, #050709 0%, #0a0d12 70%, #0d1117 100%);
  border: 1px solid rgba(247, 228, 207, 0.16);
  border-radius: 14px;
  padding: 28px 32px;
  transform: rotateY(-2.4deg) rotateX(2deg);
  transform-style: preserve-3d;
  box-shadow:
    0 30px 60px -28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(247, 228, 207, 0.05);
  overflow: hidden;
  isolation: isolate;
}

.bbeat__face::before {
  /* Faint horizon glow at the bottom */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 60%;
  background: radial-gradient(ellipse 60% 70% at 50% 100%,
    rgba(214, 135, 72, 0.08) 0%,
    transparent 70%);
  pointer-events: none;
}

.bbeat__chrome {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 228, 207, 0.55);
  margin-bottom: 14px;
  z-index: 2;
}
.bbeat__chrome-left { display: inline-flex; gap: 14px; align-items: center; }
.bbeat__chrome-right { display: inline-flex; gap: 14px; align-items: center; }
.bbeat__live {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(214, 135, 72, 0.95);
}
.bbeat__live::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(214, 135, 72, 1);
  box-shadow: 0 0 12px rgba(214, 135, 72, 0.95);
  animation: bbeat-blink 1.6s ease-in-out infinite;
}

.bbeat__svg {
  display: block;
  width: 100%;
  height: clamp(160px, 26vw, 220px);
  position: relative;
  z-index: 1;
}

/* The ECG baseline; very faint */
.bbeat__base {
  fill: none;
  stroke: rgba(247, 228, 207, 0.08);
  stroke-width: 0.5;
  stroke-dasharray: 2 6;
}

/* The actual heartbeat trace; ember, continuously drawing */
.bbeat__trace {
  fill: none;
  stroke: rgba(214, 135, 72, 0.96);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgba(214, 135, 72, 0.55));
  stroke-dasharray: 2400 2400;
  stroke-dashoffset: 2400;
  animation: bbeat-trace 5.2s linear infinite;
}

/* The vertical scanner sweep, evokes a CT/MRI scanner pass */
.bbeat__scan {
  position: absolute;
  inset: 14px 0 0 0;
  pointer-events: none;
  z-index: 1;
}
.bbeat__scan::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 80px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(214, 135, 72, 0.0) 30%,
    rgba(214, 135, 72, 0.18) 50%,
    rgba(214, 135, 72, 0.0) 70%,
    transparent 100%);
  filter: blur(0.4px);
  animation: bbeat-scan 5.2s linear infinite;
}

/* Side rail with bedside vitals: a static minimal block to ground the
   scanner so a clinician sees instantly: this is a vital-signs surface. */
.bbeat__rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(247, 228, 207, 0.10);
  font-family: var(--font-mono);
  z-index: 2;
}
.bbeat__rail-item {
  display: grid;
  gap: 4px;
}
.bbeat__rail-key {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(247, 228, 207, 0.50);
}
.bbeat__rail-val {
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: 500;
  color: rgba(247, 228, 207, 0.95);
  letter-spacing: 0.04em;
}
.bbeat__rail-val.is-ember { color: rgba(214, 135, 72, 0.95); }

/* Mobile: ungtilt the card so it doesn't clip on small screens; reduce
   side padding; collapse rail to 2 columns. */
@media (max-width: 720px) {
  .bbeat__face {
    transform: none;
    padding: 22px 18px;
    border-radius: 10px;
  }
  .bbeat__rail { grid-template-columns: repeat(2, 1fr); }
}

/* Reduced motion: freeze the trace at full draw, disable the scan sweep. */
@media (prefers-reduced-motion: reduce) {
  .bbeat__trace { stroke-dashoffset: 0; animation: none; }
  .bbeat__scan::before { animation: none; opacity: 0; }
  .bbeat__live::before { animation: none; }
}

@keyframes bbeat-trace {
  0%   { stroke-dashoffset: 2400; }
  100% { stroke-dashoffset: 0; }
}
@keyframes bbeat-scan {
  0%   { transform: translateX(-80px); opacity: 0.25; }
  4%   { opacity: 1; }
  96%  { opacity: 1; }
  100% { transform: translateX(calc(100vw + 80px)); opacity: 0.25; }
}
@keyframes bbeat-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* =========================================================
   THREE APPLIANCES (homepage hardware promo card grid).
   Doctor-first answer to "what is LUMEN, physically?". Three
   simple cards: Core (datacenter rack), Ward (nursing station),
   Bedside (per-bed tablet). NVIDIA inside, manufactured Montreal,
   hospital-owned. SVG visuals, no photo dependency.
   ========================================================= */

.skugrid-stage {
  padding: clamp(64px, 9vw, 128px) var(--gutter);
  background: var(--paper);
  border-bottom: var(--hair);
}
.skugrid-stage__head {
  display: grid;
  gap: 18px;
  max-width: var(--max-w);
  margin: 0 auto 48px;
  text-align: center;
}
.skugrid-stage__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.skugrid-stage__title {
  font-family: var(--font-serif);
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink-900);
  margin: 0;
  max-width: 22ch;
  margin-inline: auto;
}
.skugrid-stage__lede {
  font-size: clamp(15px, 1.6vw, 17px);
  line-height: 1.6;
  color: var(--ink-700);
  max-width: 56ch;
  margin: 0 auto;
}

.skugrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: var(--max-w);
  margin: 0 auto;
}
@media (max-width: 980px) { .skugrid { grid-template-columns: 1fr; gap: 18px; } }

.skucard {
  position: relative;
  background: var(--paper-pure);
  border: 1px solid color-mix(in srgb, var(--ink-900) 12%, transparent);
  border-radius: 12px;
  padding: 28px 26px 30px;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  gap: 16px;
  transition:
    transform var(--t-med) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out);
  min-height: 420px;
}
.skucard:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px -28px rgba(11, 18, 28, 0.32);
  border-color: color-mix(in srgb, var(--dawn-700) 35%, transparent);
}

.skucard__id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.skucard__id::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dawn-500, #d68748);
}

.skucard__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(24px, 2.6vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink-900);
}
.skucard__where {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-500);
  margin-top: 4px;
}
.skucard__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0;
}
.skucard__specs {
  display: grid;
  gap: 6px;
  padding-top: 14px;
  border-top: 1px dashed color-mix(in srgb, var(--ink-900) 10%, transparent);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-700);
}
.skucard__specs span { display: block; }

.skucard__art {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ink-900) 4%, transparent) 0%,
    transparent 100%);
  border-radius: 8px;
  margin: -4px -8px 4px;
}
.skucard__art svg {
  width: 100%;
  height: 100%;
  max-width: 220px;
}

.skugrid-stage__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 24px;
  margin: 36px auto 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  max-width: var(--max-w);
}
.skugrid-stage__foot span::before {
  content: "·";
  display: inline-block;
  margin-right: 22px;
  color: color-mix(in srgb, var(--ink-500) 60%, transparent);
}
.skugrid-stage__foot span:first-child::before { display: none; }