/* Hero mock variants — pure SVG/HTML, resize smoothly */

/* Shared frame: square-ish canvas that the art fills; parent controls size */
.hm-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  font-family: 'Figtree', sans-serif;
  color: #1F252D;
  /* Use a subtle backdrop so floating cards read against the hero bg */
}
.hm-frame * { box-sizing: border-box; }

/* ============================================================
   OPTION A — Laptop hero with floating phone + alert chips
   ============================================================ */
/* container-type: inline-size lets the floating cards' typography +
 * padding scale with the canvas width via cqi units — so on mobile the
 * scheduled-inspection card and inspection-completed notification stay
 * proportional to the laptop + phone mocks instead of staying at their
 * fixed desktop pixel sizes (which made them dwarf the surrounding art). */
.hmA { position: relative; width: 100%; height: 100%; container-type: inline-size; }
.hmA-laptop {
  position: absolute;
  left: 4%;
  top: 2%;
  width: 94%;
  filter: drop-shadow(0 22px 44px rgba(12,24,44,0.18));
}
.hmA-laptop svg { display: block; width: 100%; height: auto; }

.hmA-phone {
  position: absolute;
  right: 2%;
  top: 40%;
  width: 20%;
  filter: drop-shadow(0 18px 34px rgba(12,24,44,0.22));
}
.hmA-phone svg { display: block; width: 100%; height: auto; }

/* Alert chips */
.hmA-chip {
  position: absolute;
  background: #fff;
  border: 1px solid #E6EAEF;
  border-radius: 10px;
  padding: 10px 14px 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 14px 26px rgba(12,24,44,0.12), 0 2px 6px rgba(12,24,44,0.06);
  font-size: 12.5px;
  font-weight: 500;
  color: #1F252D;
  white-space: nowrap;
  letter-spacing: -0.005em;
}
.hmA-chip.warn  { background: #FFF7E6; border-color: #F3DFAF; }
.hmA-chip.ok    { background: #ECF6EE; border-color: #C9E3CE; }
.hmA-chip.err   { background: #FDEDEB; border-color: #F3C8C2; }
.hmA-chip .ic {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hmA-chip.warn .ic { background: #F5B342; color: #fff; }
.hmA-chip.ok   .ic { background: #1E7A2B; color: #fff; }
.hmA-chip.err  .ic { background: #C44A3E; color: #fff; }
.hmA-chip .ic svg { width: 10px; height: 10px; stroke: currentColor; stroke-width: 2.5; fill: none; }
.hmA-chip .close { width: 12px; height: 12px; opacity: 0.35; flex-shrink: 0; }
.hmA-chip .close svg { width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; fill: none; }

/* Scheduled inspection card (replaces the 3 chips). Base font-size scales
 * with the canvas via cqi; all inner sizes are em so they scale together. */
.hmA-sched {
  position: absolute;
  left: -2%;
  top: 30%;
  width: 32%;
  background: #fff;
  border: 1px solid #E6EAEF;
  /* Anchor: .ttl is 1em — was 14px on a 900px canvas. clamp keeps the card
   * legible on tiny canvases (≥7px) and capped at the original desktop size. */
  font-size: clamp(7px, 1.55cqi, 14px);
  border-radius: 0.86em; /* 12px */
  box-shadow: 0 22px 44px rgba(12,24,44,0.18), 0 4px 10px rgba(12,24,44,0.06);
  padding: 1em 1.14em; /* 14px 16px */
  animation: hmFloatA 6s ease-in-out infinite;
}
.hmA-sched .hd {
  display: flex;
  align-items: center;
  gap: 0.57em; /* 8px */
  font-size: 0.68em; /* 9.5px */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: #1E7A2B;
  margin-bottom: 0.71em; /* 10px */
}
.hmA-sched .hd .dot {
  width: 0.5em; height: 0.5em; border-radius: 50%;
  background: #1E7A2B;
  box-shadow: 0 0 0 0.21em rgba(30,122,43,0.18);
}
.hmA-sched .ttl {
  font-family: 'Poppins', sans-serif;
  font-size: 1em; /* 14px */
  font-weight: 600;
  color: #1F252D;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 0.21em; /* 3px */
}
.hmA-sched .sub {
  font-size: 0.79em; /* 11px */
  color: #6B7280;
  margin-bottom: 0.86em; /* 12px */
}
.hmA-sched .meta {
  display: flex;
  align-items: center;
  gap: 0.57em; /* 8px */
  padding-top: 0.71em; /* 10px */
  border-top: 1px solid #F0F2F0;
  font-size: 0.79em; /* 11px */
}
.hmA-sched .meta .av {
  width: 2em; height: 2em; border-radius: 50%; /* 22px @ 11em-base */
  background: linear-gradient(135deg, #4FA55D, #1E7A2B);
  color: #fff;
  font-size: 0.82em; /* 9px @ 11em-base */
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hmA-sched .meta .who { font-weight: 600; color: #1F252D; }
.hmA-sched .meta .when { color: #6B7280; margin-left: auto; font-weight: 500; }

/* Desktop notification (top-right corner, OS-style). Same cqi+em scaling
 * trick as .hmA-sched — anchor is .nf-ttl at 1em (= 12px on 900px canvas). */
.hmA-notif {
  position: absolute;
  right: 1%;
  top: 1%;
  width: 36%;
  background: rgba(30, 36, 45, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: clamp(6.5px, 1.33cqi, 12px);
  border-radius: 1em; /* 12px */
  padding: 1em 1.17em; /* 12px 14px */
  display: flex;
  gap: 0.83em; /* 10px */
  align-items: flex-start;
  box-shadow: 0 20px 40px rgba(0,0,0,0.28), 0 4px 10px rgba(0,0,0,0.14);
  animation: hmFloatA 6s ease-in-out infinite 0.5s;
  z-index: 3;
}
.hmA-notif .nf-ic {
  width: 2.33em; height: 2.33em; /* 28px */
  border-radius: 0.58em; /* 7px */
  background: #1E7A2B;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hmA-notif .nf-ic svg { width: 57%; height: 57%; stroke: #fff; fill: none; stroke-width: 2.5; }
.hmA-notif .nf-body { flex: 1; min-width: 0; }
.hmA-notif .nf-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25em; /* 3px */
}
.hmA-notif .nf-app {
  font-family: 'Poppins', sans-serif;
  font-size: 0.83em; /* 10px */
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B9D9BE;
}
.hmA-notif .nf-time {
  font-size: 0.79em; /* 9.5px */
  color: rgba(255,255,255,0.55);
}
.hmA-notif .nf-ttl {
  font-size: 1em; /* 12px */
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  letter-spacing: -0.005em;
}
.hmA-notif .nf-sub {
  font-size: 0.92em; /* 11px */
  color: rgba(255,255,255,0.7);
  margin-top: 0.17em; /* 2px */
  line-height: 1.3;
}

@keyframes hmFloatA {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ============================================================
   OPTION B — Floating dashboard "card stack" (flatter, modern)
   ============================================================ */
.hmB { position: relative; width: 100%; height: 100%; }
.hmB-primary {
  position: absolute;
  left: 8%;
  top: 10%;
  width: 82%;
  aspect-ratio: 16 / 10;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #E6EAEF;
  box-shadow: 0 28px 56px -12px rgba(12,24,44,0.22), 0 6px 14px rgba(12,24,44,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hmB-screen { width: 100%; flex: 1; display: block; }
.hmB-topbar {
  height: 34px;
  background: linear-gradient(180deg, #F5F7F6 0%, #EEF1F0 100%);
  border-bottom: 1px solid #E6EAEF;
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 6px;
  flex-shrink: 0;
}
.hmB-dot { width: 8px; height: 8px; border-radius: 50%; }
.hmB-dot.r { background: #E05B4B; }
.hmB-dot.y { background: #E5B03B; }
.hmB-dot.g { background: #58C06B; }
.hmB-nav {
  height: 38px;
  background: #fff;
  border-bottom: 1px solid #E6EAEF;
  display: flex;
  align-items: center;
  padding: 0 14px;
  gap: 14px;
  font-size: 10.5px;
  color: #6B7280;
  font-weight: 500;
  flex-shrink: 0;
}
.hmB-nav .logo {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hmB-nav .logo img { width: 100%; height: 100%; display: block; }
.hmB-nav .item.active {
  color: #1F252D;
  background: #E6F2E9;
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
  color: #1E7A2B;
}
.hmB-nav .grow { flex: 1; }
.hmB-nav .btn-sm {
  background: #1E7A2B;
  color: #fff;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}
.hmB-body {
  flex: 1;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  background: #FAFBFA;
}
.hmB-card {
  background: #fff;
  border: 1px solid #EEF0EE;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hmB-card .lbl {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9AA3AE;
  font-weight: 600;
}
.hmB-card .num {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #1F252D;
  letter-spacing: -0.02em;
  line-height: 1;
}
.hmB-card .trend {
  font-size: 9.5px;
  font-weight: 600;
  color: #1E7A2B;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hmB-card .trend svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.hmB-chart {
  grid-column: 1 / -1;
  background: #fff;
  border: 1px solid #EEF0EE;
  border-radius: 10px;
  padding: 14px 16px 10px;
  min-height: 80px;
  position: relative;
}
.hmB-chart .hd {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}
.hmB-chart .ttl {
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #1F252D;
}
.hmB-chart .pills { display: flex; gap: 4px; }
.hmB-chart .pill {
  font-size: 8.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: #F0F3F1;
  color: #6B7280;
}
.hmB-chart .pill.on { background: #1E7A2B; color: #fff; }
.hmB-chart svg { width: 100%; height: 42px; display: block; }

/* Floating side-card (mobile/notification) */
.hmB-side {
  position: absolute;
  right: 0%;
  top: 38%;
  width: 32%;
  background: #fff;
  border: 1px solid #E6EAEF;
  border-radius: 14px;
  box-shadow: 0 22px 44px rgba(12,24,44,0.18);
  padding: 16px;
  font-size: 11px;
  animation: hmFloatB 5.5s ease-in-out infinite;
}
.hmB-side .hd {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F0F2F0;
}
.hmB-side .hd .dot { width: 8px; height: 8px; border-radius: 50%; background: #1E7A2B; box-shadow: 0 0 0 3px rgba(30,122,43,0.15); }
.hmB-side .hd .lbl {
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #1F252D;
  letter-spacing: -0.01em;
}
.hmB-side .row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 10px;
}
.hmB-side .row .k { color: #6B7280; }
.hmB-side .row .v { color: #1F252D; font-weight: 600; }
.hmB-side .bar {
  margin: 10px 0 6px;
  height: 6px;
  background: #F0F3F1;
  border-radius: 999px;
  overflow: hidden;
}
.hmB-side .bar span {
  display: block;
  height: 100%;
  background: #1E7A2B;
  border-radius: 999px;
}
.hmB-side .progress {
  display: flex;
  justify-content: space-between;
  font-size: 9.5px;
  color: #6B7280;
}
.hmB-side .progress strong { color: #1E7A2B; font-weight: 700; }

/* Floating sign-off card — overlaps LEFT edge of dashboard */
.hmB-tag {
  position: absolute;
  left: -1%;
  top: 56%;
  background: #fff;
  border: 1px solid #E6EAEF;
  border-radius: 12px;
  box-shadow: 0 20px 40px rgba(12,24,44,0.16), 0 4px 10px rgba(12,24,44,0.06);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  animation: hmFloatB 5.5s ease-in-out infinite 1.5s;
  max-width: 200px;
}
.hmB-tag .ic {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: #E6F2E9;
  color: #1E7A2B;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hmB-tag .ic svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.25; }
.hmB-tag .who {
  font-family: 'Poppins', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  color: #1F252D;
  display: block;
  margin-bottom: 1px;
  letter-spacing: -0.005em;
}
.hmB-tag .sub { font-size: 9.5px; color: #6B7280; }

@keyframes hmFloatB {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* ============================================================
   OPTION C — Anthracite laptop + KPI tiles (bolder, product-led)
   ============================================================ */
.hmC { position: relative; width: 100%; height: 100%; }
.hmC-laptop {
  position: absolute;
  left: 10%;
  top: 4%;
  width: 80%;
  filter: drop-shadow(0 24px 48px rgba(12,24,44,0.24));
}
.hmC-laptop svg { display: block; width: 100%; height: auto; }

.hmC-kpi {
  position: absolute;
  background: #fff;
  border: 1px solid #E6EAEF;
  border-radius: 12px;
  box-shadow: 0 18px 38px rgba(12,24,44,0.14);
  padding: 12px 16px;
  min-width: 118px;
}
.hmC-kpi .lbl {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9AA3AE;
  font-weight: 600;
  margin-bottom: 4px;
}
.hmC-kpi .num {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #1F252D;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.hmC-kpi .trend {
  font-size: 10px;
  font-weight: 600;
  color: #1E7A2B;
  display: flex;
  align-items: center;
  gap: 4px;
}
.hmC-kpi .trend svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; }

.hmC-kpi-1 { left: 0%;  top: 22%; animation: hmFloatC 6s ease-in-out infinite; }
.hmC-kpi-2 { right: 0%; top: 16%; animation: hmFloatC 6s ease-in-out infinite 1.5s; }
.hmC-kpi-3 {
  right: -2%;
  bottom: 10%;
  animation: hmFloatC 6s ease-in-out infinite 3s;
  min-width: 170px;
}

/* Pulse ring */
.hmC-pulse {
  position: absolute;
  left: 44%;
  top: 44%;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #1E7A2B;
  box-shadow: 0 0 0 6px rgba(30,122,43,0.25), 0 0 0 14px rgba(30,122,43,0.12);
  animation: hmPulseC 2.4s ease-out infinite;
}

@keyframes hmFloatC {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes hmPulseC {
  0%   { box-shadow: 0 0 0 0   rgba(30,122,43,0.45), 0 0 0 0   rgba(30,122,43,0.25); }
  100% { box-shadow: 0 0 0 14px rgba(30,122,43,0), 0 0 0 26px rgba(30,122,43,0); }
}