/* ============================================================================
   Animated MCP Dashboard — homepage hero banner
   The live MCP Dashboard panel used in the site's main hero (index.html).
   Everything is namespaced .c42v (section) / .c42a (panel) so nothing here
   can reach the rest of the site.
   ============================================================================ */

/* ---------- variant section shell ---------- */
.c42v {
  padding: 76px 0 84px;
  position: relative;
  overflow: hidden;
}
.c42v--dark {
  background:
    radial-gradient(60% 60% at 15% -10%, rgba(132,45,237,0.28), transparent 60%),
    radial-gradient(60% 60% at 85% 0%, rgba(20,184,166,0.16), transparent 60%),
    #0a0a0d;
  color: #fff;
}
/* Both variants sit on the hero's dark ground — the light panel is shown on
   dark too, so the only difference between A and B is the panel itself. */

.c42v-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 26px;
}
.c42v--dark .c42v-tag { color: var(--violet-300); border: 1px solid rgba(255,255,255,0.22); }
.c42v-tag .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Hero layout: copy left, panel right — mirrors .hero-grid so the variants
   sit at the same rhythm as the existing hero. */
.c42v-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: start;   /* copy sits on the panel's top edge, not its centre */
}
@media (max-width: 980px) { .c42v-grid { grid-template-columns: 1fr; gap: 44px; } }
.c42v-grid > * { min-width: 0; }

.c42v-copy { max-width: 52ch; }
.c42v-copy h1,
.c42v-copy h2 {
  font-size: clamp(2.1rem, 4vw, 2.7rem);
  line-height: 1.12;
  margin: 0 0 16px;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
}
.c42v--dark .c42v-copy h1,
.c42v--dark .c42v-copy h2 { color: #fff; -webkit-text-fill-color: #fff; }
.c42v-copy p { font-size: 1.15rem; line-height: 1.55; margin: 0; }
.c42v--dark .c42v-copy p { color: rgba(255,255,255,0.86); }
.c42v-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.c42v--dark .c42v-ctas .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.35); }
.c42v--dark .c42v-ctas .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* Customer logos: same source PNGs used elsewhere on light backgrounds, but
   forced to solid white here — brightness(0) invert(1) flattens any color to
   white while preserving each logo's transparent background. Mirrors the
   equivalent .hero rule in styles.css for this section's own dark ground. */
.c42v--dark .logo-strip img { filter: brightness(0) invert(1); opacity: 0.65; }
.c42v--dark .logo-strip img:hover { opacity: 1; filter: brightness(0) invert(1); }

/* ============================================================================
   The panel. Two token blocks — light is the default, dark is opt-in via
   data-panel="dark", so the panel can sit on either ground independently of
   the section around it.
   ============================================================================ */
.c42a-frame {
  --ui: #1b1e2c;
  --ui-2: #3d4356;
  --ui-muted: #767d93;
  --ui-faint: #9aa1b4;
  --surface: #ffffff;
  --surface-2: #fafbfd;
  --line: #e8ebf3;
  --line-2: #f0f2f8;

  --red: #e0384a;          --red-soft: #fdecee;
  --orange: #ef8425;       --orange-soft: #fef2e6;   --orange-ink: #c86a11;
  --amber: #e8a50b;        --amber-soft: #fdf5e3;    --amber-ink: #b58207;
  --green: #12a05c;        --green-soft: #e7f6ef;
  --blue: #2e6bf3;         --blue-soft: #eaf0fe;

  /* brand gradient sampled from the site tokens: violet-500 -> violet-600 -> teal-500 */
  --brand-a: #842ded;      --brand-mid: #6219e9;     --brand-b: #14b8a6;
  --bar-red-a: #d22b3e;    --bar-red-b: #ea4e5e;
  --bar-orange-a: #e67a16; --bar-orange-b: #f79c3c;
  --bar-blue-a: #255fe8;   --bar-blue-b: #4c86fa;

  --sheen: rgba(255,255,255,0.62);
  --bar-sheen: rgba(255,255,255,0.85);
  --scan: rgba(132,45,237,0.055);
  --card-shadow: 0 24px 60px -28px rgba(28,32,64,0.42), 0 3px 10px -4px rgba(28,32,64,0.18);
  --pill-ring: rgba(24,28,58,0.05);
  --pill-shadow: 0 12px 28px -12px rgba(24,28,58,0.35);

  width: 1080px;
  flex: 0 0 1080px;
  transform-origin: top left;
  position: relative;
  padding-bottom: 26px;
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.c42a-frame[data-panel="dark"] {
  --ui: #f0f3fb;
  --ui-2: #c2cadf;
  --ui-muted: #8b94ae;
  --ui-faint: #6e7691;
  --surface: #111629;
  --surface-2: #161c31;
  --line: #242b44;
  --line-2: #1d2337;

  --red: #ff6070;          --red-soft: rgba(255,96,112,0.15);
  --orange: #ffa24f;       --orange-soft: rgba(255,162,79,0.15);  --orange-ink: #ffb169;
  --amber: #f3c24b;        --amber-soft: rgba(243,194,75,0.15);   --amber-ink: #f3c24b;
  --green: #3ed88e;        --green-soft: rgba(62,216,142,0.15);
  --blue: #6094ff;         --blue-soft: rgba(96,148,255,0.15);

  --brand-a: #9b57f2;      --brand-mid: #7c3aed;     --brand-b: #2dd4bf;
  --bar-red-a: #e8455a;    --bar-red-b: #ff7286;
  --bar-orange-a: #f0902e; --bar-orange-b: #ffb061;
  --bar-blue-a: #3d77f5;   --bar-blue-b: #6fa0ff;

  --sheen: rgba(255,255,255,0.09);
  --bar-sheen: rgba(255,255,255,0.42);
  --scan: rgba(155,87,242,0.12);
  --card-shadow: 0 26px 64px -26px rgba(0,0,0,0.75), 0 3px 10px -4px rgba(0,0,0,0.45);
  --pill-ring: rgba(255,255,255,0.07);
  --pill-shadow: 0 14px 30px -12px rgba(0,0,0,0.6);
}

/* align-items:flex-start matters — a stretched frame reports the container's
   height back into the fit() measurement and the panel shrinks on resize. */
.c42a-scaler { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; }

.c42a-border {
  border-radius: 15px;
  padding: 1.6px;
  background: linear-gradient(115deg, var(--brand-a) 0%, var(--brand-mid) 40%, var(--brand-b) 100%);
  background-size: 220% 100%;
  box-shadow: var(--card-shadow);
  animation: c42aBorder 16s ease-in-out infinite;
}
@keyframes c42aBorder { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.c42a-card {
  position: relative;
  overflow: hidden;
  border-radius: 13.4px;
  background: var(--surface);
  padding: 14px 14px 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.c42a-card::after {
  content: "";
  position: absolute;
  inset: -40% -20%;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(105deg, transparent 42%, var(--sheen) 50%, transparent 58%);
  transform: translateX(-70%);
  animation: c42aSheen 11s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes c42aSheen { 0% { transform: translateX(-75%); } 38%,100% { transform: translateX(75%); } }

.c42a-head { display: flex; flex-direction: column; gap: 1px; }
.c42a-head h3 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ui); letter-spacing: -0.01em; line-height: 1.3; }
.c42a-head p { margin: 0; font-size: 10px; color: var(--ui-muted); line-height: 1.4; }

/* ---------- KPI row ---------- */
.c42a-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.c42a-kpi {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 11px 13px 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 66px;
  justify-content: space-between;
}
.c42a-val { display: flex; align-items: baseline; gap: 2px; line-height: 1; }
.c42a-num { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; color: var(--ui); }
.c42a-num.is-red { color: var(--red); }
.c42a-unit { font-size: 12px; font-weight: 600; color: var(--ui-faint); letter-spacing: -0.01em; }
.c42a-lbl { font-size: 8.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ui-muted); }
.c42a-meter { height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; margin-top: -2px; }
.c42a-meter i { display: block; height: 100%; width: 46%; border-radius: 2px;
  background: linear-gradient(90deg, var(--red), var(--orange));
  transition: width 1.1s cubic-bezier(0.22,0.7,0.25,1); }

.c42a-grades { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.c42a-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 700; padding: 3px 6px; border-radius: 5px; }
.c42a-chip b { font-weight: 800; opacity: 0.9; }
.c42a-g-a, .c42a-g-b { background: var(--green-soft); color: var(--green); }
.c42a-g-c { background: var(--amber-soft); color: var(--amber-ink); }
.c42a-g-d { background: var(--orange-soft); color: var(--orange-ink); }
.c42a-g-f { background: var(--red-soft); color: var(--red); }

.c42a-tick { animation: c42aTick 0.55s cubic-bezier(0.2,0.8,0.3,1); }
@keyframes c42aTick {
  0%   { transform: translateY(5px); opacity: 0.35; }
  55%  { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ---------- section shell ---------- */
.c42a-sect { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); display: flex; flex-direction: column; }
.c42a-sect-head { display: flex; align-items: baseline; gap: 6px; padding: 7px 11px; background: var(--surface-2); border-bottom: 1px solid var(--line-2); }
.c42a-sect-head .c42a-ico { font-size: 10px; line-height: 1; color: var(--brand-a); }
.c42a-sect-head h4 { margin: 0; font-size: 10.5px; font-weight: 700; color: var(--ui); letter-spacing: -0.005em; line-height: 1.3; }
.c42a-sect-head span { font-size: 9px; color: var(--ui-faint); }

/* ---------- priority matrix ---------- */
.c42a-table { width: 100%; border-collapse: collapse; margin: 0; table-layout: fixed; }
.c42a-table th:nth-child(1) { width: 44%; }
.c42a-table th:nth-child(2) { width: 12%; }
.c42a-table th:nth-child(3) { width: 8%; }
.c42a-table th:nth-child(4),
.c42a-table th:nth-child(5),
.c42a-table th:nth-child(6) { width: 7%; }
.c42a-table th:nth-child(7) { width: 15%; }
.c42a-table thead th {
  font-size: 8px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ui-faint); padding: 6px 11px; text-align: right; white-space: nowrap; background: none; border: 0;
}
.c42a-table thead th:first-child { text-align: left; }
.c42a-table tbody td {
  padding: 5.5px 11px; font-size: 10.5px; color: var(--ui-2); text-align: right;
  border: 0; border-top: 1px solid var(--line-2); white-space: nowrap; background: none;
}
.c42a-table tbody td:first-child { text-align: left; font-weight: 600; color: var(--ui); }
.c42a-table tbody tr { animation: c42aScan 9.5s linear infinite; }
@keyframes c42aScan { 0%,100% { background: transparent; } 3% { background: var(--scan); } 9% { background: transparent; } }
.c42a-grade { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 5px; font-size: 9.5px; font-weight: 800; }
.c42a-sev { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 1.5px 5px; border-radius: 999px; font-size: 9px; font-weight: 700; }
.c42a-sev-h { background: var(--red-soft); color: var(--red); }
.c42a-sev-m { background: var(--orange-soft); color: var(--orange-ink); }
.c42a-sev-l { background: var(--green-soft); color: var(--green); }
.c42a-date { color: var(--ui-faint); font-size: 9.5px; }

/* ---------- bar panels ---------- */
.c42a-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.c42a-rows { padding: 8px 11px 9px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 5px; }
.c42a-row { display: grid; grid-template-columns: 9px 132px 1fr 34px; align-items: center; gap: 7px; }
.c42a-row.is-tool { grid-template-columns: 150px 1fr 30px; }
.c42a-dot { width: 5px; height: 5px; border-radius: 50%; justify-self: center; }
.c42a-blab { font-size: 9px; color: var(--ui-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c42a-track { height: 6px; border-radius: 3px; background: var(--line-2); overflow: hidden; }
.c42a-fill {
  display: block; position: relative; height: 100%; border-radius: 3px; width: 0; overflow: hidden;
  transition: width 1.15s cubic-bezier(0.22,0.7,0.25,1);
}
.c42a-fill::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46px;
  background: linear-gradient(90deg, transparent, var(--bar-sheen), transparent);
  transform: translateX(-60px);
  animation: c42aBar 6.5s cubic-bezier(0.45,0,0.2,1) infinite;
  animation-delay: calc(var(--i) * 0.16s);
}
@keyframes c42aBar { 0% { transform: translateX(-60px); } 45%,100% { transform: translateX(760px); } }
.c42a-f-red { background: linear-gradient(90deg, var(--bar-red-a), var(--bar-red-b)); }
.c42a-f-orange { background: linear-gradient(90deg, var(--bar-orange-a), var(--bar-orange-b)); }
.c42a-f-blue { background: linear-gradient(90deg, var(--bar-blue-a), var(--bar-blue-b)); }
.c42a-bval { font-size: 9px; font-weight: 600; color: var(--ui-2); text-align: right; }

/* ---------- floating pill ---------- */
.c42a-pill {
  position: absolute; right: 16px; bottom: 0; z-index: 8;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--violet-600); border-radius: 999px; padding: 9px 17px;
  box-shadow: var(--pill-shadow), 0 0 0 1px var(--pill-ring);
  font-size: 11.5px; color: #ffffff;
  animation: c42aFloat 7s ease-in-out infinite;
}
.c42a-pill b { font-size: 13px; font-weight: 800; color: #ffffff; letter-spacing: -0.01em; }
@keyframes c42aFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ============================================================================
   Compact density
   Beside the hero copy the panel gets roughly 500px. This is deliberately not
   the full panel scaled down — at that ratio the 9px labels land under 5px and
   the whole thing turns to texture. Instead it drops the two columns that
   carry least at a glance, stacks the bar charts so they get full width, and
   sizes type up so every figure still reads.
   ============================================================================ */
.c42a-frame.is-compact { width: 520px; flex: 0 0 520px; padding-bottom: 24px; }
.is-compact .c42a-card { padding: 13px 13px 14px; gap: 9px; }
.is-compact .c42a-head h3 { font-size: 15px; }
.is-compact .c42a-head p { font-size: 10.5px; }

.is-compact .c42a-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.is-compact .c42a-kpi { min-height: 60px; padding: 10px 12px 9px; }
.is-compact .c42a-num { font-size: 24px; }
.is-compact .c42a-unit { font-size: 11.5px; }
.is-compact .c42a-lbl { font-size: 9px; }
.is-compact .c42a-chip { font-size: 10px; }
.is-compact .c42a-meter { height: 2.5px; }

.is-compact .c42a-sect-head { padding: 6px 10px; }
.is-compact .c42a-sect-head h4 { font-size: 11.5px; }
.is-compact .c42a-sect-head span { font-size: 9.5px; }

/* Score and Last audit go — the grade badge and the high/med/low split are
   what the eye actually reads at this size. */
.is-compact .c42a-table th:nth-child(3),
.is-compact .c42a-table td:nth-child(3),
.is-compact .c42a-table th:nth-child(7),
.is-compact .c42a-table td:nth-child(7) { display: none; }
.is-compact .c42a-table th:nth-child(1) { width: 40%; }
.is-compact .c42a-table th:nth-child(2) { width: 20%; }
.is-compact .c42a-table th:nth-child(4),
.is-compact .c42a-table th:nth-child(5),
.is-compact .c42a-table th:nth-child(6) { width: 13.33%; }
.is-compact .c42a-table thead th { font-size: 9px; padding: 6px 10px; }
.is-compact .c42a-table tbody td { font-size: 11.5px; padding: 5.5px 10px; }
.is-compact .c42a-grade { width: 18px; height: 18px; font-size: 10.5px; }
.is-compact .c42a-sev { font-size: 10px; min-width: 22px; padding: 2px 6px; }

.is-compact .c42a-panels { grid-template-columns: 1fr; gap: 8px; }
.is-compact .c42a-rows { padding: 8px 10px 9px; gap: 6px; }
.is-compact .c42a-row { grid-template-columns: 9px 128px 1fr 36px; gap: 8px; }
/* tool rows carry no dot — the 17px indent keeps their bars on the same left
   edge as the finding bars in the panel above. */
.is-compact .c42a-row.is-tool { grid-template-columns: 128px 1fr 36px; margin-left: 17px; }
.is-compact .c42a-blab { font-size: 10.5px; }
.is-compact .c42a-bval { font-size: 10.5px; }
.is-compact .c42a-track { height: 7px; }
.is-compact .c42a-pill { font-size: 11px; padding: 8px 15px; right: 12px; }
.is-compact .c42a-pill b { font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .c42a-card::after { display: none; }
  .c42a-border, .c42a-table tbody tr, .c42a-fill::after, .c42a-pill { animation: none !important; }
  .c42a-fill, .c42a-meter i { transition: none !important; }
}