/* ============================================================
   ZENTAVOR — Components & sections
   ============================================================ */

/* ====================== HEADER ====================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease),
              box-shadow 0.4s var(--ease), backdrop-filter 0.4s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: var(--header-bg);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom-color: var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  height: 76px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.logo .mark {
  width: 30px; height: 30px;
  flex-shrink: 0;
}
.logo .mark path { fill: none; }
.logo .mark .accent-arrow { transition: stroke 0.4s var(--ease); }

.nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 450;
  color: var(--text-muted);
  transition: color 0.25s, background 0.25s;
}
.nav-link:hover { color: var(--text); background: var(--surface); }
.nav-link svg { width: 11px; height: 11px; opacity: 0.6; transition: transform 0.3s var(--ease); }
.nav-item:hover .nav-link svg { transform: rotate(180deg); }

.header-cta { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.header-cta .btn { height: 42px; padding: 0 20px; font-size: 14px; }
.lang-toggle {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; border: 1px solid var(--border-strong); border-radius: 999px;
  background: var(--surface); backdrop-filter: blur(var(--card-blur));
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em;
}
.lang-toggle span { padding: 4px 9px; border-radius: 999px; color: var(--text-faint); transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.lang-toggle[data-lang="en"] span[data-l="en"],
.lang-toggle[data-lang="ru"] span[data-l="ru"] { background: var(--accent); color: #fff; }

/* Mega dropdown */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: 680px;
  background: var(--surface-solid);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 22px;
  box-shadow: var(--shadow-hover);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0.3s;
  backdrop-filter: blur(20px);
}
.nav-item:hover .mega,
.nav-item:focus-within .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 18px; }
/* Solutions: each group is its own vertical column */
.mega-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 8px; }
.mega-group { display: flex; flex-direction: column; }
.mega-group + .mega-group { padding-left: 16px; border-left: 1px solid var(--border); }
.mega-col-head {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 6px 10px 10px;
  grid-column: 1 / -1;
}
.mega a {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--text-muted);
  transition: color 0.2s, background 0.2s;
}
.mega a:hover { color: var(--text); background: var(--surface); }
.mega a b { display: block; color: var(--text); font-weight: 500; font-family: var(--font-display); }
/* per-solution icon */
.mega-group a { display: flex; align-items: center; gap: 11px; }
.mega .mi { flex: 0 0 auto; display: inline-grid; place-items: center; width: 18px; height: 18px;
  color: var(--text-faint); transition: color 0.2s var(--ease); }
.mega .mi svg { width: 18px; height: 18px; display: block; }
.mega-group a:hover .mi { color: var(--accent); }
.mega.products a { padding: 12px; }
.mega.products { width: 420px; background: var(--surface-solid); }
.mega.products .mega-grid { grid-template-columns: 1fr 1fr; }
.mega.products .desc { font-size: 11.5px; color: var(--text-faint); margin-top: 2px; }

/* ====================== HERO ====================== */
.hero {
  position: relative;
  padding-top: 196px;
  padding-bottom: 110px;
  overflow: hidden;
  min-height: clamp(600px, 84vh, 840px);
}
/* Home hero photo — Dark Infra (concept A, the shipped default). Light concepts keep the glow/grid hero. */
.hero-photo, .hero-scrim { display: none; }
html[data-concept="a"] .hero .hero-glow,
html[data-concept="a"] .hero .grid-bg { display: none; }
html[data-concept="a"] .hero-photo {
  display: block; position: absolute; left: 0; right: 0; top: -15%; height: 130%; z-index: 0;
  background: url("../img/home-hero.webp") 70% center / cover no-repeat;
}
html[data-concept="a"] .hero-scrim {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, var(--bg) 3%, color-mix(in srgb, var(--bg) 84%, transparent) 32%, color-mix(in srgb, var(--bg) 34%, transparent) 58%, transparent 80%),
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 55%, transparent) 0%, transparent 24%, transparent 50%, var(--bg) 100%);
}
@media (max-width: 860px) {
  html[data-concept="a"] .hero-photo { background-position: 62% center; }
  html[data-concept="a"] .hero-scrim {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 60%, transparent) 0%, color-mix(in srgb, var(--bg) 46%, transparent) 42%, color-mix(in srgb, var(--bg) 78%, transparent) 74%, var(--bg) 100%);
  }
}
.hero-glow {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 900px;
  background: var(--hero-glow);
  pointer-events: none;
  z-index: 0;
}
/* promote to its own compositor layer ONLY while actively scrolling (parallax
   toggles .is-scrolling on <html>, clearing it ~150ms after scroll stops) —
   a permanent will-change forced an always-on layer and caused scroll jitter. */
html.is-scrolling .hero-glow,
html.is-scrolling .hero-photo { will-change: transform; }
.hero .wrap { position: relative; z-index: 2; }
.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 30px;
}
.hero-kicker .rule {
  width: 34px; height: 1px;
  background: linear-gradient(90deg, var(--accent-soft), transparent);
}
.hero h1 { max-width: 16ch; margin-bottom: 28px; }
.hero h1 .text-grad { display: inline; }
.hero .lead { font-size: clamp(18px, 1.55vw, 22px); max-width: 60ch; }
.hero-ctas { display: flex; gap: 14px; margin-top: 44px; flex-wrap: wrap; }

/* ====================== STATS BAND (standalone) ====================== */
.stats-band { padding: 8px 0 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  backdrop-filter: blur(var(--card-blur));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.stat-block {
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: background 0.35s var(--ease);
}
.stat-block + .stat-block { border-left: 1px solid var(--border); }
.stat-block::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(var(--accent), var(--accent-2));
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.5s var(--ease);
}
.stat-block:hover { background: var(--surface-2); }
.stat-block:hover::before { transform: scaleY(1); }
.stat-num {
  font-family: var(--font-display);
  font-size: clamp(38px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  background: linear-gradient(135deg, var(--text), var(--accent-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-lbl { font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--text); margin-top: 8px; letter-spacing: -0.01em; }
.stat-sub { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); letter-spacing: 0.02em; }

/* ====================== METRICS SNAPSHOT ====================== */
.snapshot { padding: 64px 0 calc(var(--section-y) + 16px); }
.snapshot-inner {
  padding: 0;
  display: grid;
  grid-template-columns: auto repeat(4, 1fr);
  align-items: start;
}
.snapshot-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 34px 44px 0 0;
  min-height: 202px;   /* 34px top pad + 168px ring band → title centres on the circles */
}
.snapshot-title .k {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.snapshot-title .v { font-family: var(--font-display); font-size: 28px; font-weight: 500; max-width: 14ch; line-height: 1.15; }
.snapshot-title .vsub { font-family: var(--font-mono); font-size: 16px; color: var(--text-faint); letter-spacing: 0.02em; margin-top: 9px; }
.snap-cell { padding: 34px 24px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; }
.snap-cell .chart-holder.ring { width: 168px; }
.snap-cell .chart-holder.ring svg { width: 100%; height: auto; }
.snap-badge { width: 168px; height: 168px; display: grid; place-items: center; }
.snap-badge svg { width: 148px; height: 148px; overflow: visible; }
.snap-badge .badge-arc {
  stroke-dasharray: 264; stroke-dashoffset: 264;
  transition: stroke-dashoffset 1.5s var(--ease) 0.2s;
}
.snap-badge .badge-check {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  transition: stroke-dashoffset 0.7s var(--ease) 1.1s;
}
.reveal.in .snap-badge .badge-arc { stroke-dashoffset: 0; }
.reveal.in .snap-badge .badge-check { stroke-dashoffset: 0; }
.snap-cell .desc { font-size: 18px; color: var(--text-muted); line-height: 1.45; max-width: 22ch; }
.snap-cell .desc b { color: var(--text); font-weight: 600; }

/* ====================== CHALLENGES ====================== */
.challenges { background: transparent; }
.challenges-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 80px;
  align-items: start;
}
/* flat row stack — hovering one pushes the others back; hovered gets side glow */
.challenges-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  perspective: 1100px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}
.challenge-row {
  position: relative;
  padding: 16px 26px;
  border-radius: 14px;
  opacity: 0;                                       /* pre-reveal */
  transform: translateZ(-48px);
  transform-origin: 50% 50%;
  transition:
    transform 0.5s var(--ease),
    opacity 0.5s var(--ease),
    filter 0.5s var(--ease),
    background 0.4s var(--ease);
  will-change: transform, opacity, filter;
}
.challenge-row p { font-size: clamp(16px, 1.3vw, 18.5px); color: var(--text); font-weight: 400; margin: 0; text-wrap: pretty; transition: color 0.4s var(--ease), text-shadow 0.4s var(--ease); }
/* lit row text — brighter and lifted off the side glow for crisp reading (no metric change, so wrapping stays identical) */
.challenges-list.in .challenge-row:nth-child(3) p,
.challenges-list.in .challenge-row:hover p {
  color: #fff;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg-deep) 70%, transparent);
}
/* while the list is hovered, only the cursor row keeps the lit text; the rest read normal */
.challenges-list.in:hover .challenge-row p {
  color: var(--text);
  text-shadow: none;
}
.challenges-list.in .challenge-row:hover p {
  color: #fff;
  text-shadow: 0 1px 12px color-mix(in srgb, var(--bg-deep) 70%, transparent);
}

/* luminous side rails — bright at mid-height, fading out top & bottom (no hard border) */
.challenge-row::before,
.challenge-row::after {
  content: "";
  position: absolute;
  top: 14%;
  bottom: 14%;
  width: 1.5px;
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.challenge-row::before {
  left: 0;
  background: linear-gradient(to bottom, transparent, var(--accent-2), transparent);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent-2) 65%, transparent);
}
.challenge-row::after {
  right: 0;
  background: linear-gradient(to bottom, transparent, var(--accent-soft), transparent);
  box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 65%, transparent);
}

/* entrance stagger once the block scrolls in */
.challenges-list.in .challenge-row:nth-child(2) { transition-delay: 0.06s; }
.challenges-list.in .challenge-row:nth-child(3) { transition-delay: 0.12s; }
.challenges-list.in .challenge-row:nth-child(4) { transition-delay: 0.18s; }
.challenges-list.in .challenge-row:nth-child(5) { transition-delay: 0.24s; }

/* lit appearance — forward, full clarity, soft glow hugging the side edges only */
.challenges-list.in .challenge-row:nth-child(3),
.challenges-list.in .challenge-row:hover {
  opacity: 1;
  transform: translateZ(24px);
  filter: blur(0);
  z-index: 2;
  background:
    radial-gradient(36% 130% at 0% 50%, color-mix(in srgb, var(--accent-2) 17%, transparent), transparent 72%),
    radial-gradient(36% 130% at 100% 50%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 72%),
    color-mix(in srgb, #fff 3%, transparent);
}
.challenges-list.in .challenge-row:nth-child(3)::before,
.challenges-list.in .challenge-row:nth-child(3)::after,
.challenges-list.in .challenge-row:hover::before,
.challenges-list.in .challenge-row:hover::after { opacity: 1; }

/* back appearance — every row except the lit centre by default, and all rows while the list is hovered */
.challenges-list.in .challenge-row:not(:nth-child(3)) {
  opacity: 0.4;
  transform: translateZ(-90px);
  filter: blur(1.4px);
}
.challenges-list.in:hover .challenge-row {
  opacity: 0.4;
  transform: translateZ(-90px);
  filter: blur(1.4px);
  background: none;
  transition-delay: 0s;
}
.challenges-list.in:hover .challenge-row::before,
.challenges-list.in:hover .challenge-row::after { opacity: 0; }

/* the row under the cursor wins over everything — stays lit */
.challenges-list.in .challenge-row:hover {
  opacity: 1;
  transform: translateZ(24px);
  filter: blur(0);
  transition-delay: 0s;
  background:
    radial-gradient(36% 130% at 0% 50%, color-mix(in srgb, var(--accent-2) 17%, transparent), transparent 72%),
    radial-gradient(36% 130% at 100% 50%, color-mix(in srgb, var(--accent) 17%, transparent), transparent 72%),
    color-mix(in srgb, #fff 3%, transparent);
}
.challenges-list.in .challenge-row:hover::before,
.challenges-list.in .challenge-row:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .challenge-row {
    opacity: 1;
    transform: none;
    transition: background 0.35s var(--ease), box-shadow 0.35s var(--ease);
  }
}
.bridge {
  margin-top: 40px;
  padding: 28px 32px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--surface);
  font-family: var(--font-display);
  font-size: clamp(18px, 1.6vw, 23px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
}
.bridge b { color: var(--accent-soft); font-weight: 500; }

/* ====================== SOLUTIONS ====================== */
.cluster { margin-top: 76px; }
.cluster:first-of-type { margin-top: 0; }

/* ---- sticky aside + scrolling stream (Bima "work in action") ---- */
.sol-layout {
  display: grid;
  grid-template-columns: minmax(280px, 350px) 1fr;
  gap: 60px;
  align-items: start;
}
.sol-aside { position: sticky; top: 108px; }
.sol-aside .section-head { margin-bottom: 36px; }
.sol-nav { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 14px; }
.sol-nav-item {
  display: flex; align-items: baseline; gap: 14px;
  padding: 13px 14px; border-radius: 12px;
  color: var(--text-faint);
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.sol-nav-item .n { font-family: var(--font-mono); font-size: 12px; }
.sol-nav-item .t { font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.sol-nav-item:hover { color: var(--text-muted); }
.sol-nav-item.active { color: var(--text); background: var(--surface); }
.sol-nav-item.active .n { color: var(--accent-soft); }

.sol-stream { display: flex; flex-direction: column; gap: 0; }
.sol-stream .cluster { margin-top: 64px; scroll-margin-top: 100px; }
.sol-stream .cluster:first-child { margin-top: 0; }
/* one solution per row */
.sol-stream .sol-grid,
.sol-stream .sol-grid.two { grid-template-columns: 1fr; gap: 22px; }

/* wide cards: text + metrics on the left, a large cinematic chart on the right */
@media (min-width: 768px) {
  .sol-stream .sol-card {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas:
      ".       chart"
      "info    chart"
      "metrics chart"
      ".       chart";
    column-gap: 44px; row-gap: 16px;
    align-items: start;
    padding: 28px 30px;
    min-height: 240px;
  }
  .sol-stream .sol-card > .top { grid-area: info; align-self: end; }
  .sol-stream .sol-card > .chart-panel { grid-area: chart; margin: 0; align-self: stretch; }
  .sol-stream .sol-card > .metric-row { grid-area: metrics; align-self: start; margin-top: 0; }
}

@media (max-width: 1080px) {
  .sol-layout { grid-template-columns: 1fr; gap: 30px; }
  .sol-aside { position: static; }
  .sol-nav { display: none; }
}
.cluster-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.cluster-head .num { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); }
.cluster-head h3 { font-size: clamp(20px, 1.7vw, 26px); }
.cluster-head .note { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }

.sol-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sol-grid.two { grid-template-columns: repeat(2, 1fr); }
.sol-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.sol-card::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 50% 50%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.sol-card:hover::after { opacity: 1; }
.sol-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 18px 50px -28px color-mix(in srgb, var(--accent) 65%, transparent); }
/* whole-card navigation: stretched-link overlay (sits above content; nothing else is interactive) */
.sol-card-link {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit;
  text-indent: -9999px; overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.sol-card-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.sol-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sol-card h4 { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: -0.02em; }
.sol-card .one-liner { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; margin-top: 5px; }
.sol-card .ic {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  display: grid; place-items: center;
  color: var(--accent-soft);
}
.sol-card .ic svg { width: 19px; height: 19px; }

.chart-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-deep);
  padding: 14px 16px 14px;
  position: relative;
  isolation: isolate;
  --cp-glow: var(--accent);
}
[data-concept="b"] .chart-panel, [data-concept="c"] .chart-panel { background: var(--surface-2); }

/* Premium glass viz — concept A (dark) only, so light themes stay clean.
   Frosted top highlight, fine graph-paper grid, and a bottom bloom that
   inherits the chart's data color via --cp-glow (set by charts.js). */
html[data-concept="a"] .chart-panel {
  background:
    linear-gradient(180deg, color-mix(in srgb, #fff 5%, transparent), transparent 55%),
    var(--bg-deep);
  border-color: color-mix(in srgb, #fff 11%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent);
}
html[data-concept="a"] .chart-panel::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(75% 56% at 50% 124%, color-mix(in srgb, var(--cp-glow) 50%, transparent), transparent 70%);
  opacity: 0.5; transition: opacity 0.5s var(--ease);
}
html[data-concept="a"] .sol-card:hover .chart-panel::after { opacity: 0.9; }
.chart-panel .cp-head, .chart-panel .chart-holder { position: relative; z-index: 1; }
html[data-concept="a"] .chart-panel .cp-metric { text-shadow: 0 0 16px color-mix(in srgb, currentColor 45%, transparent); }
/* lone percentage sits top-right above the chart */
.sol-stream .chart-panel .cp-head { justify-content: flex-end; }
/* product name + result carry the card now (no one-liner, no icon) */
.sol-stream .sol-card h4 { font-size: clamp(21px, 1.5vw, 25px); letter-spacing: -0.025em; }
.sol-stream .metric-row { border-top: none; padding-top: 0; }
.sol-stream .metric-row .m + .m { border-left: none; }
.sol-stream .metric-row .m b { font-size: 22px; line-height: 1.1; overflow-wrap: break-word; }
.sol-stream .metric-row .m span { font-size: 11px; }
/* keep rings / gauges from stretching across the wide chart column */
.sol-stream .chart-holder[data-chart="agents"],
.sol-stream .chart-holder[data-chart="reviews"] { max-width: 188px; margin: 0 auto; }
.sol-stream .chart-holder[data-chart="texttosql"] { max-width: 244px; margin: 0 auto; }
.chart-panel .cp-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px;
}
.chart-panel .cp-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.chart-panel .cp-metric {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--pos);
}
.chart-panel .cp-metric.neg { color: var(--accent-2); }
.chart-holder { width: 100%; }
.chart-holder svg { width: 100%; height: auto; overflow: visible; }
.metric-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.metric-row .m { display: flex; flex-direction: column; gap: 4px; padding-right: 16px; min-width: 0; }
.metric-row .m + .m { padding-left: 16px; padding-right: 0; border-left: 1px solid var(--border); }
.metric-row .m b {
  font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1;
  background: linear-gradient(135deg, var(--text), var(--accent-soft));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.metric-row .m span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.03em; line-height: 1.3; }
.sol-card .foot { display: none; }

/* ====================== PRODUCTS ====================== */
.products { background: transparent; }
.product-block {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 64px;
  align-items: center;
  padding: 64px 0;
}
.product-block + .product-block { border-top: 0; }
.product-block.flip .pb-text { order: 2; }
/* AiDoc demo sits left (flipped): don't clip the active-stage glow during the animation */
.product-block.flip .pb-visual { overflow: visible; min-height: 400px; }
.product-block.harmony-block { grid-template-columns: minmax(280px, 320px) 1fr; gap: 56px; }
@media (max-width: 1024px) { .product-block.harmony-block { grid-template-columns: 1fr; } }
.pb-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-soft);
  margin-bottom: 18px;
}
.pb-text h3 { font-size: clamp(34px, 3.4vw, 46px); letter-spacing: -0.03em; }
.pb-text .tagline { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); margin-top: 12px; }
.pb-text .desc { font-size: 16.5px; color: var(--text-muted); line-height: 1.6; margin-top: 22px; max-width: 46ch; }
.pb-feats { display: flex; flex-direction: column; gap: 12px; margin: 26px 0 30px; }
.pb-feat { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--text); }
.pb-feat .tick { color: var(--accent-2); flex-shrink: 0; margin-top: 2px; }
.pb-feat span b { font-weight: 500; }
.pb-feat .sub { display: block; color: var(--text-faint); font-size: 13px; margin-top: 1px; }

.pb-visual {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-deep);
  box-shadow: var(--shadow-card);
  padding: 22px;
  position: relative;
  overflow: hidden;
  min-height: 360px;
}
[data-concept="b"] .pb-visual, [data-concept="c"] .pb-visual { background: var(--surface); }

/* Harmony orchestration diagram */
.harmony-visual { padding: 0; overflow: hidden; }
.orch.harmony { position: relative; height: 540px; }
.orch-sky {
  position: absolute; inset: 0;
  background:
    radial-gradient(120px 120px at 50% 50%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 70%),
    radial-gradient(420px 360px at 50% 50%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    radial-gradient(300px 240px at 12% 88%, color-mix(in srgb, var(--accent-soft) 10%, transparent), transparent 70%),
    radial-gradient(300px 240px at 88% 12%, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent 70%);
  z-index: 0;
}
.orch-sky::before, .orch-sky::after {
  content: ""; position: absolute; inset: 0;
  background-repeat: repeat;
  opacity: 0.6;
}
.orch-sky::before {
  background-image:
    radial-gradient(1px 1px at 18% 24%, #fff, transparent), radial-gradient(1px 1px at 62% 14%, #fff, transparent),
    radial-gradient(1px 1px at 82% 42%, #fff, transparent), radial-gradient(1px 1px at 34% 62%, #fff, transparent),
    radial-gradient(1px 1px at 72% 74%, #fff, transparent), radial-gradient(1px 1px at 46% 88%, #fff, transparent),
    radial-gradient(1px 1px at 8% 54%, #fff, transparent), radial-gradient(1px 1px at 92% 66%, #fff, transparent),
    radial-gradient(1px 1px at 54% 40%, #fff, transparent), radial-gradient(1px 1px at 26% 8%, #fff, transparent);
  animation: zv-twinkle 4s var(--ease) infinite;
}
.orch-sky::after {
  background-image:
    radial-gradient(1px 1px at 40% 30%, var(--accent-soft), transparent), radial-gradient(1px 1px at 70% 55%, var(--accent-2), transparent),
    radial-gradient(1px 1px at 14% 76%, #fff, transparent), radial-gradient(1px 1px at 88% 28%, #fff, transparent),
    radial-gradient(1px 1px at 58% 82%, var(--accent-soft), transparent);
  animation: zv-twinkle 5.5s var(--ease) infinite reverse;
}
[data-concept="b"] .orch-sky, [data-concept="c"] .orch-sky { filter: none; opacity: 0.9; }
[data-concept="b"] .orch-sky::before, [data-concept="b"] .orch-sky::after,
[data-concept="c"] .orch-sky::before, [data-concept="c"] .orch-sky::after { display: none; }
@keyframes zv-twinkle { 0%,100% { opacity: 0.25; } 50% { opacity: 0.7; } }

.orch-lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; opacity: 1; transition: opacity 1s var(--ease); }
.orch.harmony.emerge-init .orch-lines { opacity: 0; }
.obeam { animation-name: orch-flow; animation-duration: var(--flow, 2.6s); animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes orch-flow { to { stroke-dashoffset: -260; } }
@media (prefers-reduced-motion: reduce) { .obeam { animation: none; stroke-dasharray: none; } }
.orch-lines .orch-ring { stroke: var(--border); animation: zv-ringspin 60s linear infinite; transform-box: fill-box; transform-origin: center; }
@keyframes zv-ringspin { to { transform: rotate(360deg); } }

.onode {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-solid) 64%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 3;
  white-space: nowrap;
  --nc: var(--accent-soft);
  transition: transform 1.05s var(--ease-spring), opacity 0.85s var(--ease), border-color 0.35s var(--ease), box-shadow 0.4s var(--ease), background 0.35s var(--ease);
}
/* emerge-from-core start state (dx/dy set inline per node) */
.orch.harmony .onode.emerge { transform: translate(-50%, -50%) translate(var(--dx, 0), var(--dy, 0)) scale(0.25); opacity: 0; }
.orch.harmony .onode.core.emerge { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
.onode[data-c="violet"] { --nc: var(--accent-soft); }
.onode[data-c="cyan"]   { --nc: var(--accent-2); }
.onode[data-c="green"]  { --nc: var(--pos); }
.onode[data-c="amber"]  { --nc: var(--warn); }
.onode .oi {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  display: grid; place-items: center;
  color: var(--nc);
  background: color-mix(in srgb, var(--nc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--nc) 30%, transparent);
  transition: transform 0.4s var(--ease-spring), box-shadow 0.4s var(--ease), background 0.35s var(--ease);
}
.onode .oi svg { width: 20px; height: 20px; }
.onode .ol b { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.onode .ol i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

.onode:hover {
  transform: translate(-50%, -50%) translateY(-4px);
  border-color: color-mix(in srgb, var(--nc) 55%, var(--border));
  box-shadow: 0 18px 50px -22px color-mix(in srgb, var(--nc) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--nc) 22%, transparent);
}
.onode:hover .oi { transform: scale(1.08); background: color-mix(in srgb, var(--nc) 24%, transparent); box-shadow: 0 0 18px -2px color-mix(in srgb, var(--nc) 65%, transparent); }

.onode.core {
  padding: 15px 22px;
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--surface-solid) 82%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 50px -8px color-mix(in srgb, var(--accent) 55%, transparent);
  animation: zv-corepulse 3.4s var(--ease) infinite;
}
.onode.core .oi { width: 40px; height: 40px; }
.onode.core .ol b { font-size: 17px; }
.onode.core:hover { transform: translate(-50%, -50%) translateY(-4px) scale(1.02); }
@keyframes zv-corepulse {
  0%,100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 48px -10px color-mix(in srgb, var(--accent) 50%, transparent); }
  50% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 72px -6px color-mix(in srgb, var(--accent) 70%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .orch-sky::before, .orch-sky::after, .orch-lines .orch-ring, .onode.core { animation: none; }
}

/* ===== HARMONY STAGE — one diagram that travels behind the whole story ===== */
.hm-stage { position: relative; padding-top: 150px; padding-bottom: var(--section-y); }
.hm-stage .hero-glow { inset: -6% 0 auto 0; }   /* keep glow inside the viewport (no overflow → sticky stays alive) */

/* ---------- Floating gradient backdrop (top of hero) ----------
   Soft blurred orbs that wander among each other (drift) and very slowly shift
   hue around our violet/cyan. All values are literal so the animation always
   runs; masked to dissolve downward into the continuous page backdrop. */
.float-bg {
  position: absolute; inset: 0 0 auto 0; height: 94vh; z-index: 0;
  overflow: hidden; pointer-events: none; opacity: 0.95;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 92%);
}
.float-bg .blob { position: absolute; border-radius: 50%; filter: blur(72px); mix-blend-mode: screen; will-change: transform; }
/* base colour = violet for all orbs; the hue sweep below carries them through the
   canon band violet → blue → turquoise → green (and back), never off-brand */
.float-bg .b1 { top: -10%; left: -8%; width: 48vw; height: 48vw; background: radial-gradient(circle at 50% 50%, hsla(265,82%,62%,0.52), transparent 70%); animation: fb-a 22s ease-in-out -3s infinite alternate; }
.float-bg .b2 { top: -14%; left: 52%; width: 52vw; height: 52vw; background: radial-gradient(circle at 50% 50%, hsla(265,80%,58%,0.46), transparent 70%); animation: fb-b 27s ease-in-out -11s infinite alternate; }
.float-bg .b3 { top: 16%;  left: 18%; width: 40vw; height: 40vw; background: radial-gradient(circle at 50% 50%, hsla(265,84%,60%,0.42), transparent 70%); animation: fb-c 19s ease-in-out -6s infinite alternate; }
.float-bg .b4 { top: 2%;   left: 76%; width: 38vw; height: 38vw; background: radial-gradient(circle at 50% 50%, hsla(265,80%,64%,0.38), transparent 70%); animation: fb-d 24s ease-in-out -16s infinite alternate; }
/* horizontal traverse — orbs glide right↔left (alternate); some start L→R, some R→L */
@keyframes fb-a { from { transform: translate(-12vw, 3vh) scale(1); }    to { transform: translate(24vw, -4vh) scale(1.12); } }
@keyframes fb-b { from { transform: translate(20vw, -2vh) scale(1.08); } to { transform: translate(-22vw, 5vh) scale(0.92); } }
@keyframes fb-c { from { transform: translate(-22vw, -3vh) scale(0.96); }to { transform: translate(18vw, 4vh) scale(1.18); } }
@keyframes fb-d { from { transform: translate(16vw, 4vh) scale(1.1); }   to { transform: translate(-18vw, -5vh) scale(0.96); } }
/* light concepts: screen blend washes out → use normal */
[data-concept="b"] .float-bg, [data-concept="c"] .float-bg { opacity: 0.6; }
[data-concept="b"] .float-bg .blob, [data-concept="c"] .float-bg .blob { mix-blend-mode: normal; }
@media (max-width: 880px) { .float-bg { height: 70vh; } }
@media (prefers-reduced-motion: reduce) { .float-bg .blob { animation: none; } }
.hm-stage-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: 0.82fr 1.18fr; gap: 52px; align-items: start;
}

/* LEFT — the scrolling story, kept in its own column (not centred) */
.hm-flow { position: relative; z-index: 2; }
.hm-block { display: flex; flex-direction: column; justify-content: center; }
.hm-hero2 { min-height: 80vh; }
.hm-hero2 h1 { margin-bottom: 26px; }
.hm-hero2 .lead { font-size: clamp(18px, 1.55vw, 22px); }
.hm-hero2 .hero-ctas { margin-top: 38px; }
.hm-kpi2 { min-height: 48vh; }
.hm-kpi2 .sol-kpis { width: min(880px, 168%); }   /* let the strip breathe — overlaps the faint diagram behind it */
.hm-intro2 { min-height: 50vh; max-width: 40rem; }
.hm-intro2 .h-section { margin-top: 16px; }
.hm-intro2 .lead { margin-top: 18px; }

/* chapters */
.hm-chapter {
  min-height: 86vh; display: flex; flex-direction: column; justify-content: center;
  max-width: 30rem; opacity: 0.3; transition: opacity 0.6s var(--ease);
}
.hm-chapter.is-on { opacity: 1; }
.hm-chapter:last-child { min-height: 78vh; }
.hm-k { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 18px; }
.hm-chapter h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.025em; line-height: 1.08; color: var(--text); margin-bottom: 18px; }
.hm-chapter p { color: var(--text-muted); font-size: 17px; line-height: 1.62; max-width: 28rem; }
.hm-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }

/* RIGHT — the pinned diagram. Holds ONE position the whole scroll (no lateral
   travel); recedes into depth (scale + blur + fade) past KPI / intro, then floats
   forward again for the chapters. The emerge is along depth, not sideways. */
.hm-stage-graph {
  position: sticky; top: 0; min-height: 100vh; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s var(--ease), transform 0.75s var(--ease), filter 0.6s var(--ease);
}
/* raised ~6vh so the graph sits level with the centre of the hero text on the left;
   same translateY across all phases → holds one vertical position through the scroll */
.hm-stage[data-phase="hero"] .hm-stage-graph { opacity: 1; transform: translateY(-6vh) scale(1.1); filter: none; }
.hm-stage[data-phase="mid"] .hm-stage-graph { opacity: 0.24; transform: translateY(-6vh) scale(0.94); filter: blur(2px); }   /* sink into depth, in place — keeps KPI numbers legible on top */
.hm-stage[data-phase="live"] .hm-stage-graph { opacity: 1; transform: translateY(-6vh) scale(1.1); filter: none; }   /* float forward from behind */
/* mesh fills the wide column → branches spread like Home, node cards stay their normal size */
.hm-live { width: 100%; height: 560px; }
.hm-stage-scrim, .hm-rail { display: none; }
.hm-rail-i { display: flex; align-items: center; gap: 12px; }
.hm-rail-i .tk { width: 16px; height: 2px; border-radius: 2px; background: var(--border-strong); transition: width 0.45s var(--ease-spring), background 0.45s var(--ease); }
.hm-rail-i .lb { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-faint); transition: color 0.45s var(--ease); white-space: nowrap; }
.hm-stage[data-active="0"] .hm-rail-i:nth-child(1) .tk,
.hm-stage[data-active="1"] .hm-rail-i:nth-child(2) .tk,
.hm-stage[data-active="2"] .hm-rail-i:nth-child(3) .tk,
.hm-stage[data-active="3"] .hm-rail-i:nth-child(4) .tk,
.hm-stage[data-active="4"] .hm-rail-i:nth-child(5) .tk,
.hm-stage[data-active="5"] .hm-rail-i:nth-child(6) .tk { width: 40px; background: var(--accent-soft); }
.hm-stage[data-active="0"] .hm-rail-i:nth-child(1) .lb,
.hm-stage[data-active="1"] .hm-rail-i:nth-child(2) .lb,
.hm-stage[data-active="2"] .hm-rail-i:nth-child(3) .lb,
.hm-stage[data-active="3"] .hm-rail-i:nth-child(4) .lb,
.hm-stage[data-active="4"] .hm-rail-i:nth-child(5) .lb,
.hm-stage[data-active="5"] .hm-rail-i:nth-child(6) .lb { color: var(--text); }

/* diagram comes alive — node glow per chapter (only in the live phase) */
.hm-live .onode { transition: opacity 0.55s var(--ease), border-color 0.5s var(--ease), box-shadow 0.5s var(--ease), background 0.5s var(--ease), transform 1.05s var(--ease-spring); }
.hm-live .onode.core { animation: none; }
.hm-stage[data-phase="live"][data-active] .hm-live .onode { opacity: 0.3; }
.hm-stage[data-phase="live"][data-active="0"] .hm-live .onode,
.hm-stage[data-phase="live"][data-active="1"] .hm-live .onode[data-role="core"],
.hm-stage[data-phase="live"][data-active="2"] .hm-live :is(.onode[data-role="support"], .onode[data-role="sales"], .onode[data-role="ops"]),
.hm-stage[data-phase="live"][data-active="3"] .hm-live .onode[data-role="tools"],
.hm-stage[data-phase="live"][data-active="4"] .hm-live :is(.onode[data-role="core"], .onode[data-role="tools"]),
.hm-stage[data-phase="live"][data-active="5"] .hm-live .onode[data-role="policy"] {
  opacity: 1;
  border-color: color-mix(in srgb, var(--nc) 55%, var(--border));
  box-shadow: 0 16px 46px -24px color-mix(in srgb, var(--nc) 75%, transparent),
              0 0 0 1px color-mix(in srgb, var(--nc) 26%, transparent),
              0 0 34px -6px color-mix(in srgb, var(--nc) 55%, transparent);
}

/* beams emphasise the active flow (data-to set by build()) */
.hm-stage[data-phase="live"][data-active] .hm-live .obeam { opacity: 0.2; transition: opacity 0.5s var(--ease); }
.hm-stage[data-phase="live"][data-active="0"] .hm-live .obeam,
.hm-stage[data-phase="live"][data-active="1"] .hm-live .obeam { opacity: 0.62; }
.hm-stage[data-phase="live"][data-active="2"] .hm-live .obeam[data-to="support"],
.hm-stage[data-phase="live"][data-active="2"] .hm-live .obeam[data-to="sales"],
.hm-stage[data-phase="live"][data-active="2"] .hm-live .obeam[data-to="ops"],
.hm-stage[data-phase="live"][data-active="3"] .hm-live .obeam[data-to="tools"],
.hm-stage[data-phase="live"][data-active="4"] .hm-live .obeam[data-to="tools"],
.hm-stage[data-phase="live"][data-active="5"] .hm-live .obeam[data-to="policy"] { opacity: 0.95; }

/* Trust — shield sweep over the whole mesh */
.hm-shield {
  position: absolute; inset: -3%; border-radius: 50%;   /* dome wraps every node card (corner nodes sit at 22/85 %) */
  border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
  box-shadow: inset 0 0 70px -14px color-mix(in srgb, var(--warn) 34%, transparent), 0 0 44px -14px color-mix(in srgb, var(--warn) 30%, transparent);
  opacity: 0; transform: scale(0.86); transition: opacity 0.6s var(--ease), transform 0.85s var(--ease-spring);
  z-index: 2; pointer-events: none;
}
.hm-stage[data-phase="live"][data-active="5"] .hm-shield { opacity: 1; transform: scale(1); }

@media (max-width: 1080px) {
  /* sticky graph dropped below 1080 (wide nodes overflow narrow columns); the
     overflow-x guard is safe here since nothing relies on position:sticky. */
  html, body { overflow-x: hidden; }
  .hm-stage { padding-top: 116px; }
  .hm-stage-grid { grid-template-columns: 1fr; gap: 0; }
  .hm-stage-graph, .hm-stage-scrim { display: none; }
  .hm-flow, .hm-stage[data-phase="live"] .hm-flow { max-width: 100%; transform: none; }
  .hm-block { min-height: 0 !important; }
  .hm-hero2 { padding-bottom: 16px; }
  .hm-kpi2 { padding: 30px 0; }
  .hm-kpi2 .sol-kpis { grid-template-columns: 1fr; width: 100%; }
  .hm-kpi2 .sol-kpi + .sol-kpi { border-left: 0; border-top: 1px solid var(--border); }
  .hm-intro2 { max-width: 100%; padding-bottom: 8px; }
  .hm-chapter { min-height: 0; opacity: 1; max-width: 100%; padding: 34px 0; border-top: 1px solid var(--border); }
}
@media (prefers-reduced-motion: reduce) { .hm-chapter { opacity: 1; } }

/* AiDoc pipeline mock */
.pipe { display: flex; flex-direction: column; gap: 14px; height: 100%; justify-content: center; }
.pipe-stage {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-solid);
}
.pipe-stage .lab { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); width: 70px; flex-shrink: 0; }
.pipe-stage .body { flex: 1; }
.doc-lines { display: flex; flex-direction: column; gap: 5px; }
.doc-lines i { display: block; height: 6px; border-radius: 3px; background: var(--border-strong); }
.kv { display: flex; gap: 8px; flex-wrap: wrap; }
.kv span { font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 7px; background: var(--chip-bg); border: 1px solid var(--border); }
.kv span b { color: var(--accent-2); }
.answer { font-size: 13px; line-height: 1.5; }
.answer .cite { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-soft); }
.pipe-arrow { display: grid; place-items: center; color: var(--text-faint); }

/* AiDoc animated demo */
.adoc { display: flex; flex-direction: column; gap: 0; height: 100%; justify-content: center; }
.adoc-stage {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface-solid);
  padding: 13px 16px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.adoc-stage.in { opacity: 1; transform: none; }
.adoc-stage.active {
  border-color: color-mix(in srgb, var(--accent-2) 50%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-2) 22%, transparent), 0 16px 44px -26px color-mix(in srgb, var(--accent-2) 80%, transparent);
}
.adoc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.adoc-head .ah-ic { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.adoc-head .ah-ic svg { width: 14px; height: 14px; }
.adoc-head .ah-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.adoc-head .ah-tag { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; }
.adoc-q { font-size: 14px; color: var(--text); line-height: 1.5; min-height: 1.5em; }
.q-caret, .a-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--accent-2); vertical-align: -2px; margin-left: 2px; opacity: 0; }
.adoc-stage.active .q-caret, .adoc-stage.active .a-caret { opacity: 1; animation: adoc-blink 1s step-end infinite; }
@keyframes adoc-blink { 50% { opacity: 0; } }
.adoc-arrow { display: grid; place-items: center; color: var(--text-faint); height: 24px; opacity: 0; transform: translateY(-4px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.adoc-arrow.in { opacity: 1; transform: none; }
.adoc .doc-lines { gap: 7px; }
.adoc .doc-lines i { transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease); }
.adoc .doc-lines i.drawn { transform: scaleX(1); }
.adoc .doc-lines i.hl { background: color-mix(in srgb, var(--accent-2) 60%, var(--border-strong)); box-shadow: 0 0 10px -1px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.adoc .kv { gap: 8px; }
.adoc .kv span { display: inline-flex; align-items: center; gap: 6px; opacity: 0; }
.adoc .kv span.pop { animation: adoc-pop 0.4s var(--ease-spring) forwards; }
.adoc .kv span .k { font-style: normal; color: var(--text-faint); }
@keyframes adoc-pop { from { opacity: 0; transform: translateY(6px) scale(0.95); } to { opacity: 1; transform: none; } }
.adoc .answer { color: var(--text); line-height: 1.5; min-height: 3em; }   /* reserve 2 lines so the card doesn't grow when the answer wraps */
.adoc .answer .cite { opacity: 0; transition: opacity 0.5s var(--ease); }
.adoc .answer .cite.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .adoc-stage, .adoc-arrow { opacity: 1; transform: none; }
  .adoc .doc-lines i { transform: scaleX(1); }
  .adoc .kv span { opacity: 1; }
}

/* ====================== CASES ====================== */
/* metric direction colors (shared by flagship + cards) */
.cc-num.m-up, .cf-big .n.m-up { background: linear-gradient(135deg, var(--pos), var(--accent-2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cc-num.m-down, .cf-big .n.m-down { background: linear-gradient(135deg, var(--accent-2), var(--accent-soft)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cc-num.m-neu, .cf-big .n.m-neu { color: var(--text); }

/* industry tag tints (token-only) */
.cc-ind { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 6px; border: 1px solid; white-space: nowrap; }
.ind-energy  { color: var(--warn);        border-color: color-mix(in srgb, var(--warn) 42%, transparent);     background: color-mix(in srgb, var(--warn) 10%, transparent); }
.ind-retail  { color: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 42%, transparent);   background: color-mix(in srgb, var(--accent) 10%, transparent); }
.ind-banking { color: var(--accent-2);    border-color: color-mix(in srgb, var(--accent-2) 42%, transparent); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.ind-other   { color: var(--pos);         border-color: color-mix(in srgb, var(--pos) 42%, transparent);      background: color-mix(in srgb, var(--pos) 10%, transparent); }

/* ---- FLAGSHIP band ---- */
.cases-flagwrap { margin-bottom: 18px; }
.case-flag {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center;
  padding: 40px; border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur));
  transition: border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.case-flag::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 100% at 100% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%); }
.case-flag:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); box-shadow: var(--shadow-hover); }
.cf-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent-soft); display: flex; align-items: center; gap: 11px; }
.cf-eyebrow .pip { width: 20px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.case-flag h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 2.6vw, 36px);
  letter-spacing: -0.03em; line-height: 1.05; margin-top: 16px; }
.cf-desc { color: var(--text-muted); font-size: 15px; line-height: 1.6; max-width: 50ch; margin-top: 14px; }
.cf-big { display: flex; align-items: baseline; gap: 15px; margin-top: 26px; }
.cf-big .n { font-family: var(--font-display); font-weight: 600; font-size: clamp(52px, 6vw, 84px);
  line-height: 0.9; letter-spacing: -0.04em; }
.cf-big .nl { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); max-width: 17ch; line-height: 1.4; }
.cf-stack { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.cf-stack span { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 9px; }
.cf-cap { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em;
  display: flex; justify-content: space-between; margin-bottom: 10px; }
.cf-area { width: 100%; height: auto; display: block; }
.cf-axis { stroke: var(--border-strong); stroke-width: 1; }
.cf-ar { fill: url(#cfArea); opacity: 0; transition: opacity 1s var(--ease) 0.6s; }
.cf-ln { fill: none; stroke: var(--accent-2); stroke-width: 2.2;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-2) 55%, transparent));
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease) 0.2s; }
.cf-area .dot { fill: var(--bg); stroke: var(--accent-2); stroke-width: 2; }
.cf-area text { font-family: var(--font-mono); font-size: 9px; fill: var(--text-faint); }
.case-flag.in .cf-ln { stroke-dashoffset: 0; }
.case-flag.in .cf-ar { opacity: 1; }

/* ---- capability groups ---- */
.cap-group { margin-top: 52px; }
.cap-group.group-hidden { display: none; }
.cap-head { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.cap-t { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; color: var(--text); }
.cap-ln { flex: 1; height: 1px; background: var(--border); }
.cap-ct { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); white-space: nowrap; }

/* ---- metric-first card ---- */
.cases-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* solution-page "related case" sections carry 1–2 cards — center them instead of leaving empty columns */
.cases-grid.cg-1 { grid-template-columns: minmax(0, 400px); justify-content: center; }
.cases-grid.cg-2 { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; }
@media (max-width: 760px) { .cases-grid.cg-2 { grid-template-columns: minmax(0, 420px); } }
.case-card {
  padding: 24px; display: flex; flex-direction: column; gap: 11px;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(var(--card-blur)); -webkit-backdrop-filter: blur(var(--card-blur));
  transition: transform 0.5s var(--ease-spring), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.case-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 56%);
  opacity: 0; transition: opacity 0.5s var(--ease); }
.case-card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong)); box-shadow: var(--shadow-hover); }
.case-card:hover::after { opacity: 1; }
.cc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-svc { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-faint); white-space: nowrap; }
.cc-num { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px, 3.2vw, 48px);
  line-height: 0.92; letter-spacing: -0.04em; margin-top: 6px; }
.cc-num-l { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); line-height: 1.4; margin-top: -4px; }
.case-card h4 { font-family: var(--font-display); font-size: 15.5px; font-weight: 500; color: var(--text); letter-spacing: -0.015em; margin-top: 6px; }
.case-card > p { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.cc-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); }
.case-status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pos); }
.case-status.pilot { color: var(--warn); }
.case-status .nda { color: var(--text-faint); margin-left: 8px; }

.nda-note {
  margin-top: 36px;
  display: flex; align-items: center; gap: 14px;
  padding: 18px 24px; border: 1px dashed var(--border-strong); border-radius: var(--radius);
  font-size: 14px; color: var(--text-muted);
}
.nda-note svg { color: var(--text-faint); flex-shrink: 0; }
.cases-empty { margin-top: 36px; text-align: center; font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); }

/* ---- two-row filter bar ---- */
.case-filterbar { display: flex; flex-direction: column; gap: 12px; margin: 0 0 8px; }
.ff-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ff-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-faint); width: 92px; flex-shrink: 0; }
.ff-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.case-chip {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  background: var(--chip-bg); border: 1px solid var(--border); color: var(--text-muted);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.case-chip:hover { color: var(--text); border-color: var(--border-strong); }
.case-chip[aria-pressed="true"] {
  color: var(--text); border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---- filter show/hide ---- */
.case-card.is-hidden, .case-flag.is-hidden { display: none; }
.case-card.is-hiding { opacity: 0; transform: scale(0.985); pointer-events: none; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
@keyframes caseShow { from { opacity: 0; transform: translateY(12px) scale(0.99); } to { opacity: 1; transform: none; } }
.case-card.case-show { animation: caseShow 0.5s var(--ease) both; }

/* accent word inside the word-by-word hero headline */
.cases-h1 .rw-line:last-child .rw-w {
  background: linear-gradient(100deg, var(--accent-soft), var(--text) 72%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .case-card.case-show { animation: none; }
  .case-card.is-hiding { transition: none; }
  .cf-ln { stroke-dashoffset: 0; } .cf-ar { opacity: 1; }
}

/* cases — responsive */
@media (max-width: 1024px) {
  .case-flag { grid-template-columns: 1fr; gap: 30px; }
  .cases-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .cases-grid { grid-template-columns: 1fr; gap: 14px; }
  .ff-label { width: auto; }
}

/* ====================== COST ORIENTATION (estimator) ====================== */
.cost { background: transparent; }
.cost-grid { display: grid; grid-template-columns: 1fr 1.04fr; gap: 36px; align-items: stretch; }
/* three labelled bands paced down the full height of the receipt beside them */
.cost-steps { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
.cost-step .cs-head { display: flex; align-items: center; gap: 14px; margin-bottom: 13px; }
/* the rule runs from the label to the edge of the column: everything under it
   belongs to that label. Not a divider between steps — a claim on the band. */
.cost-step .cs-head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.cost-step .cs-label { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; }
.cost-shapes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cost-opt {
  text-align: left; padding: 13px 15px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.cost-opt:hover { border-color: var(--border-strong); transform: translateY(-2px); }
.cost-opt[data-on="1"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.cost-opt .o-t { display: block; font-family: var(--font-display); font-size: 14.5px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; }
.cost-opt .o-d { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.4; }
.cost-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.cost-pill {
  padding: 10px 17px; border-radius: 999px;
  font-family: var(--font-display); font-size: 14.5px; font-weight: 450;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease);
}
.cost-pill:hover { border-color: var(--border-strong); }
.cost-pill[data-on="1"] { background: var(--accent); border-color: var(--accent); color: #fff; }

/* result receipt — deliberately deep/dark in every concept */
.cost-result {
  position: relative;                 /* static — does not follow scroll (anchors ::before) */
  display: flex; flex-direction: column;   /* fill column height; CTA anchors to the bottom */
  padding: 28px; border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #0C0C16 0%, #15152e 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(124,58,237,0.12);
  overflow: hidden;
  isolation: isolate;
  /* The receipt stays deep-dark in every concept, so the form it hosts inherits
     concept-A neutrals locally instead of a dozen per-concept form overrides.
     Accents are deliberately left alone — they already read on this card. */
  color-scheme: dark;
  color: var(--text);
  --bg-deep: #050509;
  --surface-2: #16161F;               /* opaque: concepts b/c paint inputs and the country panel with it */
  --border: rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.22);
  --text: #F0F0F5;
  --text-muted: #9CA2AE;
  --text-faint: #8A909C;
  --neg: #F87171;
  --pos: #10B981;
}
/* the country dropdown hangs below the phone field — it must not be clipped */
.cost-result.is-form { overflow: visible; }
.cost-result::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;             /* keeps the glow rounded once overflow opens up */
  background: radial-gradient(90% 60% at 12% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%),
              radial-gradient(70% 50% at 100% 100%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 60%);
}
.cost-result .cr-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-soft);
  display: inline-flex; align-items: center; gap: 9px;
}
.cost-result .cr-eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: 0.6; }
.cost-range {
  margin-top: 14px;
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.03em;
  font-size: clamp(34px, 4vw, 50px); line-height: 1.04;
  color: #F0F0F5;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.cost-range .cr-num { background: linear-gradient(140deg, #fff 0%, var(--accent-soft) 95%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.cost-range .cr-pre { font-family: var(--font-mono); font-size: 0.32em; font-weight: 500; letter-spacing: 0.04em; color: rgba(255,255,255,0.55); }
.cost-range .cr-arrow { color: rgba(255,255,255,0.4); font-size: 0.7em; }
.cost-rows { margin-top: 26px; display: flex; flex-direction: column; gap: 18px; }
.cost-row .cr-k { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-soft); }
.cost-row .cr-v { margin-top: 7px; font-size: 17px; font-weight: 500; color: #F0F0F5; }
.cost-result .cr-cta { margin-top: auto; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10); }
.cost-result .cr-cta .btn { width: 100%; }
.cost-result .cr-note { margin-top: 12px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.45); text-align: center; }
/* Rows folded into one line while the form has the floor. The labels differ in
   length, so this re-wraps between one and two lines as the visitor clicks —
   and since it sits in the pane that sets the card's height, that reflow would
   resize the whole card under them. Reserve both lines. Two is the ceiling:
   the longest reachable line is ~85 characters. */
.cost-result .cr-recap { margin-top: 18px; min-height: 3.2em; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: rgba(255,255,255,0.52); }

/* Both panes occupy the same grid cell, so the track is as tall as the taller
   one (the form) and swapping them never changes the card's height. Below the
   two-column breakpoint the card is wide and short — reserving the form's full
   height there would just leave a hole, so the panes plainly replace each other. */
.cr-swap { flex: 1 1 auto; display: flex; flex-direction: column; }
.cr-pane { flex: 1 1 auto; display: flex; flex-direction: column; }
.cr-pane[hidden] { display: none; }
@media (min-width: 1081px) {
  .cr-swap { display: grid; grid-template-rows: 1fr; }
  .cr-swap > .cr-pane { grid-area: 1 / 1; min-width: 0; }
  .cr-swap > .cr-pane[hidden] { display: flex; visibility: hidden; pointer-events: none; }
}

/* ---- estimate request, inside the receipt ----
   Everything here is one notch tighter than the site-wide form: this pane sets
   the card's reserved height, so every pixel it saves is a pixel the section
   does not grow by. */
.cr-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.10); }
.crf-back {
  display: inline-flex; align-items: center; gap: 8px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.45);
  transition: color 0.22s var(--ease);
}
.crf-back:hover { color: #F0F0F5; }
.crf-back .crf-back-a { transition: transform 0.22s var(--ease); }
.crf-back:hover .crf-back-a { transform: translateX(-3px); }
.crf-title { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; margin-top: 12px; color: #F0F0F5; }
.crf-sub { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: rgba(255,255,255,0.55); }
.cr-form form { margin-top: 16px; }
.cr-form .form-grid { gap: 13px; }
.cr-form .field { gap: 6px; }
.cr-form .field label { font-size: 11px; }
.cr-form .field input, .cr-form .tel-input { padding: 10px 13px; font-size: 14px; }
/* "Did you mean …" comes and goes while the email is typed. In flow it would
   grow the pane and resize the card, so float it like .field-msg (the two are
   mutually exclusive, so they never collide). Only the button takes clicks —
   the strip must not shadow the consent label it slightly overlaps. */
.cr-form .field-hint { position: absolute; top: 100%; left: 0; right: 0; margin-top: 3px; pointer-events: none; }
.cr-form .field-hint button { pointer-events: auto; }
.cr-form .field input, .cr-form .tel-wrap { border-radius: 10px; }
.cr-form .tel-country { padding: 0 10px; font-size: 12px; }
.cr-form .consent { margin-top: 13px; font-size: 12.5px; }
.cr-form .btn { width: 100%; margin-top: 15px; }
@media (prefers-reduced-motion: no-preference) {
  .cost-result.is-form .cr-form { animation: crf-in 0.32s var(--ease); }
  @keyframes crf-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 1080px) { .cost-grid { grid-template-columns: 1fr; gap: 28px; } .cost-result { position: relative; top: 0; } }
/* the enlarged shape cards need the full width once the column narrows */
@media (max-width: 640px) { .cost-shapes { grid-template-columns: 1fr; } .cost-step .cs-label { font-size: 18px; } }

/* ====================== ENGAGEMENT ====================== */
.engage { background: transparent; }
/* ---------- engagement: tab switcher ---------- */
.eng-tabs {
  position: relative; display: flex; width: fit-content; gap: 2px;
  padding: 5px; margin: 0 auto 30px;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface);
  -webkit-backdrop-filter: blur(var(--card-blur)); backdrop-filter: blur(var(--card-blur));
}
.eng-tab {
  position: relative; z-index: 1;
  padding: 11px 24px; border: 0; background: transparent; border-radius: 999px;
  font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: -0.01em;
  color: var(--text-muted); white-space: nowrap;
  transition: color .3s var(--ease);
}
.eng-tab.is-active { color: #fff; }
.eng-tab-ind {
  position: absolute; z-index: 0; top: 5px; left: 0; height: calc(100% - 10px);
  width: 0; border-radius: 999px;
  background: var(--accent); box-shadow: 0 10px 28px -10px var(--accent);
  transition: transform .42s var(--ease-spring), width .42s var(--ease-spring);
  pointer-events: none;
}

/* ---------- engagement: tab panel (text + in-card timeline) ---------- */
/* both panels stack in one grid cell → the container always holds the TALLER one,
   so switching tabs never changes the block's size (no layout jump) */
.eng-panels { position: relative; display: grid; }
.eng-panel {
  grid-area: 1 / 1;
  display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 52px; align-items: center; padding: 40px 48px;
  visibility: hidden; opacity: 0; pointer-events: none;
}
.eng-panel.is-active { visibility: visible; opacity: 1; pointer-events: auto; z-index: 1; animation: eng-fade .5s var(--ease); }
@keyframes eng-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .eng-panel.is-active { animation: none; } }
/* staff panel — premium violet glow building toward the right (behind the glass tiles) */
html[data-concept="a"] #engpanel-1 {
  background:
    radial-gradient(64% 110% at 100% 50%, color-mix(in srgb, var(--accent) 44%, transparent), transparent 72%),
    var(--surface);
}

.eng-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent-soft);
}
.eng-eyebrow::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: 0.6; }
.eng-title { font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.03em; line-height: 1.05; margin: 18px 0 0; }
.eng-copy { font-size: 16px; color: var(--text-muted); line-height: 1.6; margin-top: 18px; max-width: 42ch; }
.eng-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.eng-tags span { font-family: var(--font-mono); font-size: 11.5px; padding: 6px 12px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text-muted); }

/* Outsourcing — delivery board: a workstream × week matrix whose glass cells light
   up in a steady left→right wave, proving end-to-end ownership + predictable cadence */
.eng-viz { width: 100%; }
.eb-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 15px; }
.eb-title { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.eb-sub { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--text-faint); }

.eng-board {
  /* tunable knobs (dev pad writes these inline) */
  --eb-gap: 6px;
  --eb-radius: 7px;
  --eb-max: 900px;
  --eb-accent: #2eb6d1;
  --eb-fill: 37;       /* active gradient strength, % */
  --eb-glow: 17px;     /* active glow blur */
  --eb-x: -64px; --eb-y: 0px;   /* nudge position */
  display: grid; grid-template-columns: auto repeat(8, 1fr);
  gap: var(--eb-gap); align-items: center; position: relative; z-index: 1;
  max-width: var(--eb-max);
  transform: translate(var(--eb-x), var(--eb-y));
}
.eb-lbl {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.03em;
  color: var(--text-faint); white-space: nowrap; text-align: right; padding-right: 4px;
}
.eb-cell {
  aspect-ratio: 1; border-radius: var(--eb-radius);
  background: var(--surface); border: 1px solid var(--border);   /* grey / inactive */
}
/* only ".on" cells light up — the active weeks of each workstream, in a left→right wave */
.eb-cell.on {
  --eb-d: calc((var(--c) + var(--r) * 0.5) * 0.07s);
  transition:
    background .5s var(--ease) var(--eb-d),
    border-color .5s var(--ease) var(--eb-d),
    box-shadow .5s var(--ease) var(--eb-d);
}
.eng-panels.in .eb-cell.on {
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--eb-accent) calc(var(--eb-fill) * 1%), transparent),
    color-mix(in srgb, var(--eb-accent) calc(var(--eb-fill) * 0.42%), transparent));
  border-color: color-mix(in srgb, var(--eb-accent) 52%, var(--border-strong));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-soft) 22%, transparent),
    0 0 var(--eb-glow) -2px color-mix(in srgb, var(--eb-accent) 52%, transparent);
}
/* week labels live in the same grid (last row) so they align to the cell columns */
.eb-w { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); text-align: center; padding-top: 3px; }
@media (prefers-reduced-motion: reduce) {
  .eb-cell.on { transition: none; }
}

/* Staff augmentation — role badge grid */
.eng-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eng-role {
  position: relative; overflow: hidden;
  min-height: 124px; padding: 20px 20px 18px; border-radius: 18px;
  display: flex; align-items: flex-start;
  /* almost clear glass that nearly blends into the panel — faint contour */
  background: linear-gradient(150deg, color-mix(in srgb, #fff 5%, transparent), color-mix(in srgb, #fff 1.5%, transparent) 70%);
  border: 1px solid color-mix(in srgb, #fff 9%, transparent);
  -webkit-backdrop-filter: blur(3px) saturate(135%);
  backdrop-filter: blur(3px) saturate(135%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
    0 6px 16px -16px rgba(0,0,0,0.45);
  transition: transform .4s var(--ease-spring), border-color .35s var(--ease), box-shadow .4s var(--ease);
}
.eng-role:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, #fff 16%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    0 10px 22px -18px rgba(0,0,0,0.5);
}
/* light concepts — frosted glass tuned for a light backdrop */
[data-concept="b"] .eng-role,
[data-concept="c"] .eng-role {
  background: linear-gradient(150deg, color-mix(in srgb, #fff 18%, transparent), color-mix(in srgb, #fff 9%, transparent) 70%);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 20px -18px rgba(40,30,70,0.22);
}
[data-concept="b"] .eng-role:hover,
[data-concept="c"] .eng-role:hover {
  border-color: var(--border-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 10px 22px -18px rgba(40,30,70,0.28);
}
/* big role name fills the card; icon sits free in the bottom-right corner */
.eng-role .role-name {
  font-family: var(--font-display); font-size: clamp(18px, 1.5vw, 22px); font-weight: 500;
  color: var(--text); letter-spacing: -0.02em; line-height: 1.16; max-width: 72%;
}
.eng-role .role-badge {
  position: absolute; right: 18px; bottom: 16px;
  background: none; border: 0;
  /* resting: clean white contour (icons are stroke-only — no fill) with a faint glow */
  color: #fff;
  filter: drop-shadow(0 0 5px color-mix(in srgb, #fff 26%, transparent));
  /* glow reacts instantly (no ramp/pause); only the lift eases */
  transition: transform .4s var(--ease-spring), color .1s linear, filter .1s linear;
}
.eng-role .role-badge svg { width: 46px; height: 46px; }
/* light concepts — a white contour would vanish, so use a dark ink contour instead
   (declared before :hover so the hover state still wins at equal specificity) */
[data-concept="b"] .eng-role .role-badge,
[data-concept="c"] .eng-role .role-badge {
  color: color-mix(in srgb, var(--text) 72%, transparent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--text) 10%, transparent));
}
/* hover — contour lights up white */
.eng-role:hover .role-badge {
  transform: translateY(-1px);
  color: #fff;
  filter:
    drop-shadow(0 0 11px color-mix(in srgb, #fff 78%, transparent))
    drop-shadow(0 0 3px color-mix(in srgb, #fff 92%, transparent));
}
[data-concept="b"] .eng-role:hover .role-badge,
[data-concept="c"] .eng-role:hover .role-badge {
  color: var(--text);
  filter: drop-shadow(0 0 9px color-mix(in srgb, var(--accent) 32%, transparent));
}
.eng-role:last-child { grid-column: 1 / -1; }

/* ---------- delivery lifecycle — winding roadmap ---------- */
.lifecycle { margin-top: 44px; }
.lc-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 18px; }

/* the road waves across 5 milestone columns; nodes alternate crest/trough */
.lc-track {
  --rm-crest: 130px;                  /* y of an "up" node — fixed from the top edge   */
  --rm-trough: calc(100% - 130px);    /* y of a "down" node — fixed from the bottom    */
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 18px;
  min-height: 356px;                  /* end-regions fixed (130px); middle gap trimmed ~⅓ */
}

/* road — three layered SVG paths drawn by JS (base dotted, glow, bright progress) */
.lc-flow { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.lc-flow-base {
  fill: none; stroke: color-mix(in srgb, var(--accent-soft) 34%, transparent);
  stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1 8;
}
.lc-flow-glow {
  fill: none; stroke: color-mix(in srgb, var(--accent) 60%, transparent);
  stroke-width: 8; stroke-linecap: round; filter: blur(8px); opacity: .45;
}
.lc-flow-prog {
  fill: none; stroke: var(--accent);
  stroke-width: 2.5; stroke-linecap: round;
}
/* the road draws leg-by-leg (node → node): JS splits it into one segment path per
   leg and arms each with its own dash + staggered transition (see lcFlow / build()) */

/* each stop owns one column + the full track height; card and node placed within */
.lc-stop { position: relative; grid-row: 1; min-height: inherit; }
.lc-card {
  position: absolute; left: 0; right: 0;
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
  transition: transform .4s var(--ease-spring), border-color .35s var(--ease), box-shadow .4s var(--ease);
}
.lc-stop.up   .lc-card { top: 0; }
.lc-stop.down .lc-card { bottom: 0; }
.lc-card h4 { font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.lc-card p  { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; }
.lc-card:hover {
  transform: scale(1.04); z-index: 3;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent),
    0 16px 40px -22px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* milestone node — carved rhombus sitting on the wave.
   Dormant until the drawing road reaches it (per-stop delay --d set by JS). */
.lc-node {
  position: absolute; left: 50%; width: 16px; height: 16px;
  transform: translate(-50%, -50%) rotate(45deg) scale(.42);
  background: var(--surface-solid);
  border: 1.5px solid color-mix(in srgb, var(--accent) 30%, var(--border-strong));
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-soft) 14%, transparent);
  opacity: .35; z-index: 2;
  transition:
    transform .55s var(--ease-spring) var(--d, 0s),
    box-shadow .55s var(--ease) var(--d, 0s),
    border-color .55s var(--ease) var(--d, 0s),
    opacity .45s var(--ease) var(--d, 0s);
}
.lc-stop.up   .lc-node { top: var(--rm-crest); }
.lc-stop.down .lc-node { top: var(--rm-trough); }

/* connect: node pops to full strength as the line links it in */
.lifecycle.in .lc-node {
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
  border-color: color-mix(in srgb, var(--accent) 62%, var(--border-strong));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent-soft) 22%, transparent),
    0 0 0 5px color-mix(in srgb, var(--accent) 9%, transparent);
  opacity: 1;
}

/* short stem tying the node to its card */
.lc-stem { position: absolute; left: 50%; width: 1.5px; transform: translateX(-50%); z-index: 1; }
.lc-stop.up .lc-stem {
  top: calc(var(--rm-crest) - 28px); height: 28px;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--accent) 42%, transparent));
}
.lc-stop.down .lc-stem {
  top: var(--rm-trough); height: 28px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--accent) 42%, transparent), transparent);
}

/* final milestone — filled accent diamond + glow (the finish) */
.lc-stop.is-final .lc-node {
  width: 20px; height: 20px;
  background: var(--accent); border-color: var(--accent);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent),
    0 0 24px 2px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* engagement responsive — wave folds into a vertical timeline */
@media (max-width: 920px) {
  .eng-panel, .eng-panel.is-active { grid-template-columns: 1fr; gap: 32px; padding: 32px 28px; }
  /* the -64px nudge is desktop art direction (pulls the board into the column
     gap); in a single column it hangs the row labels out of the card */
  .eng-board { --eb-x: 0px; }
  .lc-flow { display: none; }
  .lc-track {
    display: block; min-height: 0; position: relative; padding-left: 30px;
  }
  .lc-track::before {                         /* vertical spine */
    content: ""; position: absolute; left: 7px; top: 22px; bottom: 22px; width: 2px;
    background: linear-gradient(to bottom,
      color-mix(in srgb, var(--accent) 55%, transparent),
      color-mix(in srgb, var(--accent-soft) 30%, transparent));
  }
  .lc-stop { min-height: 0; padding: 9px 0; }
  .lc-stop.up .lc-card, .lc-stop.down .lc-card { position: static; }
  .lc-stem { display: none; }
  /* node rides the vertical spine; dormant→active without the desktop translateX */
  .lc-node, .lc-stop.up .lc-node, .lc-stop.down .lc-node {
    top: 30px; left: -30px; transform: translateY(-50%) rotate(45deg) scale(.42);
  }
  .lifecycle.in .lc-node {
    transform: translateY(-50%) rotate(45deg) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-flow-prog, .lc-flow-glow { transition: none; }
  .lc-node { transition: none; }
}

/* ====================== INDUSTRIES ====================== */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ind-card {
  --gc: var(--accent);              /* accent colour — violet family */
  position: relative; overflow: hidden;
  padding: 28px 28px 26px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 232px;
}
.ind-card.down { --gc: var(--accent-soft); }

/* oversized ghost-glyph watermark — gives each card a unique silhouette */
.ind-glyph {
  position: absolute; right: -20px; top: -16px;
  width: 152px; height: 152px;
  color: var(--gc);
  opacity: 0.14;
  transform: rotate(-8deg) translateY(7px);
  transition: opacity 0.6s var(--ease), transform 0.7s var(--ease-spring);
  pointer-events: none; z-index: 0;
}
.reveal.in .ind-glyph { transform: rotate(-8deg) translateY(0); }
[data-concept="b"] .ind-glyph, [data-concept="c"] .ind-glyph { opacity: 0.16; }

.ind-card h4 { position: relative; z-index: 1; font-family: var(--font-display); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; color: var(--text-muted); }
.ind-metric { position: relative; z-index: 1; margin-top: auto; }
.ind-card .range {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 600; letter-spacing: -0.04em; line-height: 0.95;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--text) 18%, var(--gc));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.ind-card .range-lbl { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-faint); }
/* accent rule that grows under the metric on hover */
.ind-metric::after { content: ""; display: block; height: 2px; width: 32px; margin-top: 16px; border-radius: 2px; background: linear-gradient(90deg, var(--gc), transparent); transition: width 0.5s var(--ease); }
.ind-card:hover .ind-metric::after { width: 86px; }
.ind-proof {
  position: relative; z-index: 1;
  padding-top: 16px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.45;
  color: var(--text-muted); letter-spacing: 0.01em;
}

/* gradient perimeter trace on hover (works in concepts A/B/C) */
.ind-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(125deg, var(--gc), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.ind-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-hover), 0 24px 60px -34px color-mix(in srgb, var(--gc) 70%, transparent); }
.ind-card:hover::after { opacity: 1; }
.ind-card:hover .ind-glyph { opacity: 0.24; transform: rotate(-8deg) translateY(-2px) scale(1.07); }
@media (prefers-reduced-motion: reduce) {
  .ind-card, .ind-glyph { transition: none; }
  .ind-card:hover .ind-glyph { transform: rotate(-8deg) scale(1.07); }
}

/* ====================== ENGINEERING STACK (scrolling card marquee) ====================== */
.stack-sec { position: relative; padding: 120px 0; overflow: hidden; }
.stack-head { max-width: var(--maxw); margin: 0 auto 56px; padding: 0 var(--gutter); position: relative; z-index: 5; }
.stack-head .eyebrow { margin-bottom: 16px; }
.stack-head .h-section { margin: 0; }
.stack-hint { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-top: 16px; }

.tech-marquee-row {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
}
/* edge fade via cheap opaque gradient overlays. mask-image was re-composited every
   frame under the moving marquee, which caused the stutter/freeze while it scrolled. */
.tech-marquee-row::before,
.tech-marquee-row::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 4; pointer-events: none;
}
.tech-marquee-row::before { left: 0; background: linear-gradient(90deg, var(--bg) 18%, transparent); }
.tech-marquee-row::after { right: 0; background: linear-gradient(270deg, var(--bg) 18%, transparent); }
.tech-marquee-row + .tech-marquee-row { margin-top: 18px; }
.tech-marquee { display: flex; width: max-content; }
/* trailing margin (not flex gap) so the -50% loop lands exactly one set over — gap is not
   counted in 50%, which left a ~half-gap hitch every cycle. */
.tech-marquee > .tech-card { margin-right: 18px; }
.tech-marquee.is-animating { will-change: transform; }
.tech-marquee.is-animating.r1 { animation: tech-l 52s linear infinite; }
.tech-marquee.is-animating.r2 { animation: tech-r 60s linear infinite; }
/* pause-on-hover is a mouse courtesy — on touch a tap sets a sticky :hover
   that would freeze the marquee until the next tap somewhere else */
@media (hover: hover) {
  .tech-marquee-row:hover .tech-marquee.is-animating { animation-play-state: paused; }
}
/* no-motion fallback (prefers-reduced-motion): one static set, swipeable —
   otherwise the strip shows ~2 of 7 cards with no way to reach the rest.
   The edge fades are absolutely positioned inside the scroll box and would
   ride away with the content, so the static row drops them. */
.tech-marquee-row.is-static { overflow-x: auto; }
.tech-marquee-row.is-static::before,
.tech-marquee-row.is-static::after { display: none; }
@keyframes tech-l { to { transform: translate3d(-50%, 0, 0); } }
@keyframes tech-r { from { transform: translate3d(-50%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* base (flat) cards — Home "Engineering stack" */
.tech-card {
  flex: 0 0 auto;
  width: 204px; height: 190px;
  background: linear-gradient(180deg, var(--surface-solid), var(--bg-deep));
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-card);
  transition: transform 0.5s var(--ease-spring), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
[data-concept="b"] .tech-card, [data-concept="c"] .tech-card { background: var(--surface-solid); }
.tech-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.tech-card:hover .tech-logo img { opacity: 1; }
.tech-logo { flex: 1; display: flex; align-items: center; justify-content: center; }
.tech-logo img { width: 56px; height: 56px; object-fit: contain; opacity: 0.62; transition: opacity 0.35s var(--ease); }
.tech-mono { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -0.02em; color: var(--text-muted); opacity: 0.5; }
.tech-card:hover .tech-mono { opacity: 0.8; }
.ts-foot { display: flex; flex-direction: column; gap: 3px; }
.ts-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.ts-cat { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.03em; }

/* ---- tilted-ribbon variant — only the Model-agnostic block (harmony) ---- */
.hm-integrations .tech-marquee-row { padding: 46px 0; }
.hm-integrations .tech-marquee-row + .tech-marquee-row { margin-top: 6px; }
.hm-integrations .tech-marquee { gap: 0; }
.hm-integrations .tech-marquee > .tech-card { margin-right: 28px; }
.hm-integrations .tech-card {
  width: 208px; height: 266px;
  background: linear-gradient(158deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--bg-deep) 90%, transparent));
  border-radius: 22px;
  padding: 24px 22px 22px;
  box-shadow: 0 36px 60px -34px rgba(0,0,0,0.75), inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(6px);
  transform: perspective(1300px) rotateY(-24deg);
  transform-origin: 50% 50%;
  transition: transform 0.55s var(--ease-spring), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.hm-integrations .tech-card:hover {
  transform: perspective(1300px) rotateY(0deg) translateY(-10px) scale(1.03);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border-strong));
  box-shadow: 0 44px 80px -34px color-mix(in srgb, var(--accent) 40%, rgba(0,0,0,0.8));
  z-index: 3;
}
.hm-integrations .tech-logo img { width: 108px; height: 108px; opacity: 0.16; filter: grayscale(1); transition: opacity 0.4s var(--ease), filter 0.4s var(--ease); }
.hm-integrations .tech-card:hover .tech-logo img { opacity: 0.42; filter: grayscale(0.4); }
.hm-integrations .tech-mono { display: flex; align-items: center; justify-content: center; flex: 1; font-weight: 700; font-size: 58px; letter-spacing: -0.03em; opacity: 0.16; }
.hm-integrations .tech-card:hover .tech-mono { opacity: 0.4; }
.hm-integrations .ts-name { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); transition: color 0.35s var(--ease); }
.hm-integrations .tech-card:hover .ts-name { color: var(--text); }
.hm-integrations .ts-cat { display: none; }

/* ====================== FINAL CTA ====================== */
.final {
  position: relative;
  padding: var(--section-y) 0;
  overflow: hidden;
}
.final-glow {
  position: absolute; inset: 0; background: var(--hero-glow); opacity: 0.62; pointer-events: none;
  /* keep the glow in the upper area only and fully dissolve it by ~60%, so the lower
     section and the footer stay uniformly dark — no visible edge / band at the seam */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 60%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 60%);
}
.final-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.final h2 { font-size: clamp(38px, 4.4vw, 64px); letter-spacing: -0.035em; line-height: 0.98; }
.final .lead { margin-top: 26px; }
.final-contact { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.final-contact a { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 15px; color: var(--text); }
.final-contact a .ic { width: 38px; height: 38px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); display: grid; place-items: center; color: var(--accent-soft); }

.form-card { padding: 34px; border-radius: var(--radius-lg); }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.field input, .field textarea {
  background: var(--bg-deep);
  border: 1px solid var(--border);
  border-radius: 11px;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  outline: none;
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
[data-concept="b"] .field input, [data-concept="b"] .field textarea,
[data-concept="c"] .field input, [data-concept="c"] .field textarea { background: var(--surface-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.field input:focus, .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.field textarea { resize: none; min-height: 92px; overflow: hidden; }
.form-card .btn { width: 100%; margin-top: 18px; }
.form-note { font-size: 12px; color: var(--text-faint); text-align: center; margin-top: 14px; }
/* form-level submit error (network / rate limit) — not tied to any field */
.form-submit-msg { display: none; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--neg); text-align: center; margin-top: 12px; }
.form-submit-msg.is-on { display: block; }

/* ---- contact form: validation, phone picker, consent, success ---- */
.field-msg { display: none; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--neg); margin-top: 2px; }
.field.err .field-msg { display: block; }
/* error text floats below the field (absolute) so it never reflows / jerks the form */
.field { position: relative; }
.field .field-msg { position: absolute; top: 100%; left: 0; right: 0; margin-top: 3px; }
.field.err input, .field.err textarea, .field.err .tel-wrap { border-color: var(--neg); }
.field.err .tel-wrap:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--neg) 16%, transparent); }
.field.err input:focus, .field.err textarea:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--neg) 16%, transparent); }
.field-hint { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.field-hint button { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }

/* phone composite */
.tel-wrap { position: relative; display: flex; align-items: stretch; gap: 0; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 11px; transition: border-color 0.25s, box-shadow 0.25s; }
[data-concept="b"] .tel-wrap, [data-concept="c"] .tel-wrap { background: var(--surface-2); }
.tel-wrap:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent); }
.tel-country { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; background: none; border: 0; border-right: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.tel-country .tel-iso { color: var(--text-faint); }
.tel-country .tel-caret { font-size: 10px; color: var(--text-faint); transition: transform 0.25s var(--ease); }
.tel-country[aria-expanded="true"] .tel-caret { transform: rotate(180deg); }
.tel-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 13px 15px; font-family: var(--font-body); font-size: 15px; color: var(--text); }
.tel-input::placeholder { color: var(--text-faint); }

/* dropdown panel — canon surface (opaque + grain + soft edge), no static accent bar */
.tel-panel { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg-deep); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: 0 24px 60px -30px rgba(0,0,0,0.7); }
.tel-panel[hidden] { display: none; }
[data-concept="b"] .tel-panel, [data-concept="c"] .tel-panel { background: var(--surface-2); }
.tel-panel::before { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.04; pointer-events: none; border-radius: inherit; }
.tel-search { position: relative; z-index: 1; margin: 8px; padding: 9px 11px; background: var(--bg-deep); border: 1px solid var(--border); border-radius: 9px; color: var(--text); font-family: var(--font-body); font-size: 13px; outline: none; }
.tel-search:focus { border-color: var(--accent); }
.tel-list { position: relative; z-index: 1; margin: 0; padding: 0 6px 6px; list-style: none; overflow-y: auto; }
.tel-opt { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 13.5px; color: var(--text); }
.tel-opt .o-dial { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); margin-left: auto; }
.tel-opt .o-iso { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.tel-opt:hover, .tel-opt.is-active { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.tel-opt[aria-selected="true"] { color: var(--accent-soft); }

/* consent */
.consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; font-size: 13px; color: var(--text-faint); cursor: pointer; }
.consent input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent); flex: 0 0 auto; }
.consent a { color: var(--accent); text-underline-offset: 2px; }
.consent-msg { margin-top: 6px; }
.consent-msg.err { display: block; }

/* honeypot: off-screen, never shown to humans */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* loading + success */
.btn.is-loading { opacity: 0.7; pointer-events: none; }
.form-success { text-align: center; padding: 22px 8px; }
.form-success .fs-check { display: inline-flex; color: var(--pos); margin-bottom: 12px; }
.form-success .fs-title { font-size: 22px; margin-bottom: 8px; }
.form-success .fs-body { color: var(--text-faint); font-size: 14px; }

/* ---- contact modal (native <dialog>) ---- */
.contact-modal { position: fixed; inset: 0; margin: auto; width: min(560px, 92vw); max-height: 90vh; overflow: hidden; padding: 30px 32px 34px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-elev); color: var(--text); box-shadow: 0 40px 120px -40px rgba(0,0,0,0.8); }
/* only lay out (and thus show) the dialog when open — keeps UA `dialog:not([open]){display:none}` intact */
.contact-modal[open] { display: flex; flex-direction: column; }
.contact-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.contact-modal::backdrop { background: rgba(5,5,9,0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.contact-modal .modal-close { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-faint); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }
.contact-modal .modal-close:hover { color: var(--text); border-color: var(--border-strong); }
.contact-modal .modal-head { margin-bottom: 20px; padding-right: 40px; }
.contact-modal .modal-title { font-size: 24px; line-height: 1.15; margin-top: 12px; }
.contact-modal .modal-sub { color: var(--text-faint); font-size: 14px; margin-top: 10px; }
.contact-modal .btn { width: 100%; margin-top: 18px; }
/* subtle enter animation where supported; skipped under reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .contact-modal[open] { animation: cm-in 0.28s var(--ease); }
  @keyframes cm-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
}
@media (max-width: 560px) {
  .contact-modal { width: 94vw; padding: 22px 18px 26px; border-radius: 18px; }
  .contact-modal .modal-title { font-size: 20px; }
}

/* ====================== FOOTER ====================== */
.site-footer { position: relative; overflow: hidden; padding: 84px 0 36px; background: transparent; }
/* depth: soft accent pooled at the bottom and fading up — top seam with "Let's talk" stays seamless */
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -28%; height: 78%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(68% 80% at 28% 100%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 66%),
    radial-gradient(58% 70% at 94% 100%, color-mix(in srgb, var(--accent-2) 11%, transparent), transparent 70%);
}
.site-footer .wrap { position: relative; z-index: 1; }

.footer-top { display: grid; grid-template-columns: 1.5fr 0.9fr 0.9fr 0.9fr; gap: 44px; padding-bottom: 46px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, color-mix(in srgb, var(--accent) 42%, transparent), var(--border) 42%, var(--border) 72%, transparent) 1; }

.footer-brand .logo { margin-bottom: 18px; font-size: 22px; }
.footer-brand p { font-size: 13.5px; color: var(--text-muted); max-width: 42ch; line-height: 1.6;
  padding: 16px 18px; border-radius: 14px; border: 1px solid var(--border);
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%), var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent), 0 18px 42px -30px rgba(0,0,0,0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.footer-socials { display: flex; gap: 10px; margin-top: 24px; }
.footer-socials a { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); display: grid; place-items: center;
  color: var(--text-muted); background: var(--surface);
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.4s var(--ease-spring), box-shadow 0.3s var(--ease); }
.footer-socials a:hover { color: #fff; transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  box-shadow: 0 14px 26px -14px color-mix(in srgb, var(--accent) 80%, transparent); }
[data-concept="b"] .footer-socials a:hover, [data-concept="c"] .footer-socials a:hover {
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: 0 14px 26px -16px color-mix(in srgb, var(--accent) 50%, transparent); }

/* gradient divider between the brand block and the link columns */
.footer-top > :nth-child(2) { position: relative; padding-left: 44px; }
.footer-top > :nth-child(2)::before {
  content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 30%, var(--border)) 22%, var(--border) 62%, transparent); }

.footer-col h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-soft) 80%, var(--text-faint)); margin-bottom: 16px; }
html[data-concept="a"] .footer-col h5 { text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 32%, transparent); }
.footer-col a { display: flex; align-items: center; width: fit-content; font-size: 14px; color: var(--text-muted); padding: 5px 0;
  transition: color 0.2s var(--ease), transform 0.3s var(--ease); }
.footer-col a:hover { color: var(--text); transform: translateX(5px); }

.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 26px; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); flex-wrap: wrap; gap: 14px; }
.footer-bottom .legal { display: flex; gap: 22px; }
.footer-bottom .legal a { transition: color 0.2s var(--ease); }
.footer-bottom .legal a:hover { color: var(--text); }

/* ====================== custom cursor (dark only) ====================== */
.cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; mix-blend-mode: difference; }
.cursor-dot { width: 6px; height: 6px; background: #fff; transform: translate(-50%,-50%); }
.cursor-ring { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,0.6); transform: translate(-50%,-50%); transition: width 0.3s var(--ease), height 0.3s var(--ease), opacity 0.3s; }
body:not([data-cursor="on"]) .cursor-dot, body:not([data-cursor="on"]) .cursor-ring { display: none; }

/* ====================== responsive (tablet graceful) ====================== */
@media (max-width: 1080px) {
  :root { --section-y: 100px; --gutter: 28px; }
  .challenges-grid, .final-inner { grid-template-columns: 1fr; gap: 44px; }
  .sol-grid, .sol-grid.two, .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .product-block { grid-template-columns: 1fr; gap: 40px; }
  .product-block.flip .pb-text { order: 0; }
  .snapshot-inner { grid-template-columns: 1fr 1fr; }
  .snapshot-title { grid-column: 1 / -1; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-top > :nth-child(2) { padding-left: 0; }
  .footer-top > :nth-child(2)::before { display: none; }
  .nav { display: none; }
}

@media (max-width: 680px) {
  .ind-grid { grid-template-columns: 1fr; }
}

/* ====================== WHY ZENTAVOR ====================== */
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.why-col {
  --gc: var(--accent);
  position: relative; overflow: hidden;
  padding: 26px 24px 24px;
  min-height: 244px;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  transition: transform 0.5s var(--ease-spring), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease);
}
.why-idx { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-faint); }
/* full-card scene background (reference style) — Dark Infra (concept A) only */
.why-col > * { position: relative; z-index: 1; }
.why-viz { display: none; }
html[data-concept="a"] .why-col { padding-right: 40%; background: var(--bg-deep); }
html[data-concept="a"] .why-viz { display: block; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html[data-concept="a"] .why-viz img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.12) translateX(8%); transform-origin: center; display: block; transition: transform 0.7s var(--ease-spring); }
html[data-concept="a"] .why-viz::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 30%, color-mix(in srgb, var(--bg) 38%, transparent) 56%, transparent 86%),
    linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--bg) 52%, transparent) 100%);
}
html[data-concept="a"] .why-col:hover .why-viz img { transform: scale(1.17) translateX(8%); }
/* Production card — flat near-square panel: show whole panel in 3D perspective.
   Position knobs live in these vars (tunable via the on-page dev pad). */
html[data-concept="a"] .why-grid .why-col:first-child .why-viz img {
  --wp-x: 82%; --wp-y: 71%;
  --wp-zoom: 1.71;
  --wp-rx: 18deg; --wp-ry: 13deg; --wp-rz: -5deg;
  --wp-persp: 1100px;
  object-fit: contain; object-position: var(--wp-x) var(--wp-y);
  transform-origin: center center;
  transform: perspective(var(--wp-persp)) rotateX(var(--wp-rx)) rotateY(var(--wp-ry)) rotateZ(var(--wp-rz)) scale(var(--wp-zoom));
}
html[data-concept="a"] .why-grid .why-col:first-child:hover .why-viz img {
  transform: perspective(var(--wp-persp)) rotateX(var(--wp-rx)) rotateY(var(--wp-ry)) rotateZ(var(--wp-rz)) scale(calc(var(--wp-zoom) + 0.06));
}
/* Enterprise / ROI / Team cards — same near-square 3D panel treatment.
   Each img carries its own --wp-* (tunable via the on-page dev pads). */
html[data-concept="a"] .why-grid .why-col:nth-child(2) .why-viz img,
html[data-concept="a"] .why-grid .why-col:nth-child(3) .why-viz img,
html[data-concept="a"] .why-grid .why-col:nth-child(4) .why-viz img {
  object-fit: contain; object-position: center;
  transform-origin: center center;
  transform: translate(var(--wp-x), var(--wp-y)) perspective(var(--wp-persp)) rotateX(var(--wp-rx)) rotateY(var(--wp-ry)) rotateZ(var(--wp-rz)) scale(var(--wp-zoom));
}
html[data-concept="a"] .why-grid .why-col:nth-child(2):hover .why-viz img,
html[data-concept="a"] .why-grid .why-col:nth-child(3):hover .why-viz img,
html[data-concept="a"] .why-grid .why-col:nth-child(4):hover .why-viz img {
  transform: translate(var(--wp-x), var(--wp-y)) perspective(var(--wp-persp)) rotateX(var(--wp-rx)) rotateY(var(--wp-ry)) rotateZ(var(--wp-rz)) scale(calc(var(--wp-zoom) + 0.06));
}
/* per-card position knobs (tuned) */
html[data-concept="a"] .why-grid .why-col:nth-child(2) .why-viz img { /* Enterprise */
  --wp-x: 110px; --wp-y: -2px; --wp-zoom: 1.42; --wp-rx: 14deg; --wp-ry: 21deg; --wp-rz: -9deg; --wp-persp: 640px;
}
html[data-concept="a"] .why-grid .why-col:nth-child(3) .why-viz img { /* ROI */
  --wp-x: 66px; --wp-y: 56px; --wp-zoom: 1.6; --wp-rx: 9deg; --wp-ry: 0deg; --wp-rz: -9deg; --wp-persp: 700px;
}
html[data-concept="a"] .why-grid .why-col:nth-child(4) .why-viz img { /* Team */
  --wp-x: 20px; --wp-y: 7px; --wp-zoom: 1.6; --wp-rx: 20deg; --wp-ry: 7deg; --wp-rz: -4deg; --wp-persp: 1100px;
}
@media (max-width: 680px) {
  html[data-concept="a"] .why-col { padding-right: 24px; }
  html[data-concept="a"] .why-viz::after { background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 40%, transparent), color-mix(in srgb, var(--bg) 72%, transparent) 70%, var(--bg)); }
}

/* hero number + accent rule that grows on reveal, then again on hover */
.why-num { position: relative; margin-top: 20px; }
.why-num::before { display: none; }
.reveal.in .why-num::before { width: 52px; }
.why-col:hover .why-num::before { width: 88px; }
.why-num .n {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600; letter-spacing: -0.04em; line-height: 0.95;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, var(--text) 18%, var(--gc));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.why-num-lbl { display: block; margin-top: 9px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-faint); }
.why-col h4 { margin-top: 20px; font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.01em; }
.why-body { margin-top: 9px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }

/* gradient perimeter trace on hover (concepts A/B/C) */
.why-col::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(125deg, var(--gc), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.why-col:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-hover), 0 24px 60px -34px color-mix(in srgb, var(--gc) 55%, transparent); }
.why-col:hover::after { opacity: 1; }

/* security strip */
.why-sec { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 40px; }
.why-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--text-muted);
}
.why-chip svg { width: 14px; height: 14px; color: var(--accent-soft); flex-shrink: 0; }

@media (max-width: 1024px) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .why-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .why-col { transition: none; }
  .why-num::before { transition: none; }
}

/* ====================== SOLUTION PAGES ====================== */
/* solution & product heroes mirror the index hero rhythm (single canon across tabs) */
.sol-hero { position: relative; padding-top: 196px; padding-bottom: 110px; min-height: clamp(600px, 84vh, 840px); display: flex; flex-direction: column; justify-content: center; }
.sol-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; }
.crumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 22px; }
.crumb a { color: var(--accent-soft); }
.sol-hero-chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 26px 0 30px; }
.sol-hero-chart .chart-panel { margin: 0; }

/* KPI strip */
.sol-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); backdrop-filter: blur(var(--card-blur)); box-shadow: var(--shadow-card); }
.sol-kpi { padding: 30px 32px; }
.sol-kpi + .sol-kpi { border-left: 1px solid var(--border); }
.sol-kpi .v { display: inline-block; font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1.05; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; background: linear-gradient(135deg, var(--text), var(--accent-soft)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sol-kpi .l { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.sol-kpis.k4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .sol-kpis.k4 { grid-template-columns: 1fr 1fr; } .sol-kpis.k4 .sol-kpi:nth-child(3) { border-left: 0; } }

/* How it works */
.sol-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sol-step { display: flex; gap: 18px; align-items: flex-start; padding: 26px 28px; }
.sol-step-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-2)); }
.sol-step-ic svg { width: 20px; height: 20px; }
.sol-step h4 { font-family: var(--font-display); font-weight: 500; font-size: 18px; letter-spacing: -0.015em; color: var(--text); }
.sol-step p { margin-top: 8px; color: var(--text-muted); font-size: 15px; line-height: 1.55; }

/* The challenge */
.sol-problem { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sol-problem-item { display: flex; gap: 14px; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(var(--card-blur)); }
.sol-problem-item .pin { color: var(--accent-2); flex: none; margin-top: 1px; }
.sol-problem-item p { color: var(--text-muted); font-size: 15.5px; line-height: 1.5; }

/* What we build */
.sol-build { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sol-build-item { padding: 28px 30px; display: flex; flex-direction: column; gap: 10px; }
.sol-build-item h4 { font-family: var(--font-display); font-weight: 500; font-size: 18.5px; letter-spacing: -0.015em; color: var(--text); }
.sol-build-item p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }

/* "What we build" cards — canon grain panels: opaque surface + soft top gradient + grain + hover glow (site-wide) */
.sol-build-item { overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, transparent), transparent 46%), var(--surface-solid); }
.sol-build-item::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background-image: var(--grain); background-size: 140px; opacity: 0.05; mix-blend-mode: overlay; pointer-events: none; }
.sol-build-item > * { position: relative; z-index: 1; }
.sol-build-item:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 42%, var(--border)); box-shadow: 0 24px 52px -26px color-mix(in srgb, var(--accent) 60%, transparent), var(--shadow-card); }

/* "What we build" cards → mini A/B comparison charts (control vs variant),
   bars grow from a shared baseline when the card reveals (.in), the lift counts
   up (data-countup). Same language as the A/B section: violet=control, cyan=variant,
   green=lift. */
.sol-build-item { position: relative; }
.abx-chart { display: flex; align-items: flex-end; gap: 22px; margin: 10px 0 4px; }
.abx-bars { display: flex; align-items: flex-end; gap: 12px; }
.abx-col { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.abx-bar { width: 26px; height: 0; border-radius: 6px 6px 0 0; transition: height .9s var(--ease); }
.abx-col.c .abx-bar { background: linear-gradient(180deg, var(--accent-soft), color-mix(in srgb, var(--accent-soft) 45%, transparent)); }
.abx-col.v .abx-bar { background: linear-gradient(180deg, var(--accent-2), color-mix(in srgb, var(--accent-2) 45%, transparent)); box-shadow: 0 0 16px -3px color-mix(in srgb, var(--accent-2) 55%, transparent); }
.sol-build-item.in .abx-col .abx-bar { height: var(--h); }
.abx-cap { font: 500 10px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.abx-col.c .abx-cap { color: color-mix(in srgb, var(--accent-soft) 75%, var(--text-muted)); }
.abx-col.v .abx-cap { color: color-mix(in srgb, var(--accent-2) 78%, var(--text-muted)); }
.abx-delta { display: flex; flex-direction: column; gap: 4px; padding-bottom: 18px; }
.abx-d-v { font: 600 30px/1 var(--font-display); letter-spacing: -.02em; color: var(--pos); font-variant-numeric: tabular-nums; }
.abx-d-l { font: 400 11.5px/1.2 var(--font-mono); color: var(--text-muted); }
.abx-note { color: var(--text-muted); font-size: 14px; line-height: 1.55; margin: 0; }
@media (prefers-reduced-motion: reduce) { .abx-bar { transition: none !important; } }

/* ============================================================
   PROVEN IN A/B · SHARED BASELINE RAIL  (solution-recommender "What we build")
   One full-width comparative chart; four variant/control pairs stand on a
   single baseline rail that spans edge to edge. The tallest variant bar
   breaks above the panel's top hairline.
   ============================================================ */
.sb-section { position: relative; padding: clamp(72px, 9vw, 124px) 0 0; overflow: hidden; }

.sb-head { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); margin-bottom: clamp(56px, 8vw, 104px); display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 28px; flex-wrap: wrap; }
.sb-head-main { min-width: 0; }
.sb-key { display: flex; gap: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); padding-bottom: 4px; }
.sb-key span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sb-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.sb-key .kc { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); border: 1px solid color-mix(in srgb, var(--accent-soft) 60%, transparent); }
.sb-key .kv { background: linear-gradient(90deg, var(--accent-2), var(--accent) 38%, var(--pos) 70%, var(--warn)); }
.sb-head .h {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(34px, 5vw, 64px); letter-spacing: -0.035em; line-height: 0.98;
  margin-top: 18px; max-width: 16ch;
}

.sb-panel { position: relative; width: 100%; padding-top: clamp(40px, 6vw, 84px); }

.sb-rail-wrap { position: relative; width: 100%; }

/* the four pairs spread across full width, sitting ON the rail */
.sb-items {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end;
  height: clamp(220px, 30vw, 320px); padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 auto;
}
.sb-item { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; overflow: visible; --c: var(--accent-2); }
.sb-item + .sb-item::before { content: ""; position: absolute; left: 0; bottom: 0; top: 14%; width: 1px; background: linear-gradient(to top, rgba(255,255,255,0.10), transparent); }

.sb-pair { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 1.1vw, 16px); height: 100%; width: 100%; }
.sb-bar { position: relative; width: clamp(26px, 3.4vw, 48px); border-radius: 6px 6px 0 0; transform: scaleY(0); transform-origin: bottom center; transition: transform 1s var(--ease); }
.sb.in .sb-bar { transform: scaleY(1); }
.sb-bar.control {
  background: linear-gradient(to top, color-mix(in srgb, var(--accent-soft) 22%, transparent), color-mix(in srgb, var(--accent-soft) 9%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent-soft) 26%, transparent); border-bottom: none;
}
.sb-bar.variant {
  background: linear-gradient(to top, color-mix(in srgb, var(--c) 80%, transparent), color-mix(in srgb, var(--c) 34%, transparent));
  border: 1px solid color-mix(in srgb, var(--c) 70%, transparent); border-bottom: none;
  box-shadow: 0 0 22px -4px color-mix(in srgb, var(--c) 55%, transparent);
}

.sb-cap {
  position: absolute; left: 50%; transform: translateX(-50%) translateY(8px); bottom: 100%;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--c); white-space: nowrap;
  opacity: 0; transition: opacity 0.5s var(--ease) 0.7s, transform 0.6s var(--ease) 0.7s;
}
.sb.in .sb-cap { opacity: 1; transform: translateX(-50%) translateY(0); }

/* readout row below the rail: title / metric / note per pair */
.sb-readout { display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--maxw); margin: 0 auto; padding: clamp(26px, 3vw, 40px) var(--gutter) clamp(72px, 9vw, 120px); }
.sb-ro { position: relative; padding: 0 clamp(12px, 1.6vw, 24px); --c: var(--accent-2); }
.sb-ro + .sb-ro::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 18px; width: 1px; background: var(--border); }
.sb-ro-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; }
.sb-ro-metric { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -0.03em; line-height: 1; color: var(--c); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 8px; }
.sb-ro-unit { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-faint); text-transform: none; }
.sb-ro-note { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: var(--text-muted); margin: 16px 0 0; max-width: 30ch; }

/* color per index */
.sb-item:nth-child(1), .sb-ro:nth-child(1) { --c: var(--accent-2); }
.sb-item:nth-child(2), .sb-ro:nth-child(2) { --c: var(--accent); }
.sb-item:nth-child(3), .sb-ro:nth-child(3) { --c: var(--pos); }
.sb-item:nth-child(4), .sb-ro:nth-child(4) { --c: var(--warn); }
.sb-item:nth-child(2) .sb-cap, .sb-ro:nth-child(2) .sb-ro-metric { color: var(--accent-soft); }

@media (max-width: 860px) {
  .sb-items, .sb-readout { grid-template-columns: repeat(2, 1fr); }
  .sb-items { height: auto; }
  .sb-item { height: clamp(180px, 42vw, 240px); padding-bottom: 0; }
  .sb-item:nth-child(2)::before { display: none; }
  .sb-item:nth-child(3), .sb-item:nth-child(4) { border-top: 1px solid var(--border); }
  .sb-item:nth-child(3)::before, .sb-item:nth-child(4)::before { top: 0; }
  .sb-readout { row-gap: 40px; padding-bottom: clamp(56px, 12vw, 80px); }
  .sb-ro:nth-child(3)::before, .sb-ro:nth-child(2n+1)::before { display: none; }
}
@media (max-width: 460px) {
  .sb-items, .sb-readout { grid-template-columns: 1fr; }
  .sb-item { height: 150px; }
  .sb-item::before { display: none; }
  .sb-ro::before { display: none; }
  .sb-readout { row-gap: 34px; }
  .sb-bar { width: clamp(34px, 12vw, 52px); }
}
@media (prefers-reduced-motion: reduce) {
  .sb-bar, .sb-cap { transition: none !important; }
  .sb-bar { transform: scaleY(1); }
  .sb-cap { opacity: 1; transform: translateX(-50%); }
}

/* With / Without comparison */
.sol-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sol-compare-col { padding: 30px 32px; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); backdrop-filter: blur(var(--card-blur)); }
.sol-compare-col.with { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: 0 24px 60px -34px color-mix(in srgb, var(--accent) 55%, transparent); }
.sol-compare-col h4 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 18px; }
.sol-compare-col.without h4 { color: var(--text-faint); }
.sol-compare-col.with h4 { color: var(--accent-soft); }
.sol-compare-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.5; }
.sol-compare-row:first-of-type { border-top: 0; }
.sol-compare-row .mk { flex: none; margin-top: 1px; width: 18px; height: 18px; }
.sol-compare-col.without .sol-compare-row { color: var(--text-faint); }
.sol-compare-col.without .mk { color: var(--neg); }
.sol-compare-col.with .sol-compare-row { color: var(--text); }
.sol-compare-col.with .mk { color: var(--pos); }

/* Stack */
.sol-stack { display: flex; flex-wrap: wrap; gap: 10px; }
.sol-chip { font-family: var(--font-mono); font-size: 12.5px; padding: 8px 14px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--border); color: var(--text-muted); }

/* Hero visual */
.sol-hero-viz { position: relative; z-index: 2; }
.sol-hero-viz .chart-panel { margin: 0; padding: 30px 30px 26px; }
.sol-hero-viz .metric-row { margin-top: 22px; }

/* Harmony hero — clean orchestration, no boxed "sky" background; a soft
   edgeless glow anchors the diagram and melts into the page hero-glow. */
.sol-hero-viz .orch.harmony { height: 500px; }
.sol-hero-viz .orch.harmony::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(340px 300px at 50% 50%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 72%);
}
.hm-hero-run { margin-top: 30px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--text-faint); }
/* The orchestration mesh needs the wide desktop column; below that its
   absolutely-positioned nodes overflow horizontally, so the hero goes
   text-only (mirrors the backbone, which also drops its mesh ≤1080). */
@media (max-width: 1080px) { body[data-page="harmony"] .sol-hero-viz { display: none; } }

/* Agent loop diagram */
.agent-loop { position: relative; width: min(540px, 100%); aspect-ratio: 1; margin: 12px auto 0; }
.agent-loop .al-track { position: absolute; inset: 16%; border-radius: 50%; border: 1px dashed var(--border-strong); }
.agent-loop .al-flow { position: absolute; inset: 16%; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, color-mix(in srgb, var(--accent) 70%, transparent) 70deg, var(--accent-2) 130deg, transparent 210deg, transparent 360deg);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px)); mask: radial-gradient(closest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: al-spin 7s linear infinite; opacity: 0.9; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 40%, transparent)); }
.agent-loop .al-pulse { position: absolute; inset: 16%; border-radius: 50%; animation: al-spin 7s linear infinite; }
.agent-loop .al-pulse::before { content: ""; position: absolute; top: -4px; left: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 12px 2px color-mix(in srgb, var(--accent-2) 80%, transparent); }
@keyframes al-spin { to { transform: rotate(360deg); } }
.agent-loop .al-core { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 38%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; text-align: center; gap: 2px;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 26%, var(--bg-elev)), var(--bg-deep));
  border: 1px solid var(--border); box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 30px 60px -30px rgba(0,0,0,0.9); }
.agent-loop .al-core .ci { color: var(--accent-soft); }
.agent-loop .al-core .ci svg { width: 30px; height: 30px; }
.agent-loop .al-core b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--text); margin-top: 6px; }
.agent-loop .al-core i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); }
.agent-loop .al-node { position: absolute; transform: translate(-50%, -50%); width: 168px; max-width: 42%;
  display: flex; gap: 11px; align-items: center; padding: 13px 15px; border-radius: 14px;
  background: var(--surface-2); border: 1px solid var(--border); backdrop-filter: blur(var(--card-blur)); box-shadow: var(--shadow-card); }
.agent-loop .al-node .ni { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: color-mix(in srgb, var(--nc, var(--accent-soft)) 18%, transparent); color: var(--nc, var(--accent-soft)); }
.agent-loop .al-node .ni svg { width: 17px; height: 17px; }
.agent-loop .al-node b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 13.5px; color: var(--text); letter-spacing: -0.01em; }
.agent-loop .al-node i { font-style: normal; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
.agent-loop .al-node.n { left: 50%; top: 16%; --nc: var(--accent-soft); }
.agent-loop .al-node.e { left: 84%; top: 50%; --nc: var(--pos); }
.agent-loop .al-node.s { left: 50%; top: 84%; --nc: var(--accent-2); }
.agent-loop .al-node.w { left: 16%; top: 50%; --nc: var(--warn); }
@media (max-width: 600px) {
  .agent-loop .al-node { width: 150px; padding: 10px 12px; }
  .agent-loop .al-node b { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) { .agent-loop .al-flow, .agent-loop .al-pulse { animation: none; } }

/* Capabilities */
.sol-cap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sol-cap-item { padding: 30px 30px 32px; }
.sol-cap-item .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); border: 1px solid var(--border); color: var(--accent-soft); margin-bottom: 18px; }
.sol-cap-item .ic svg { width: 22px; height: 22px; }
.sol-cap-item h4 { font-family: var(--font-display); font-weight: 500; font-size: 18.5px; letter-spacing: -0.015em; color: var(--text); margin-bottom: 9px; }
.sol-cap-item p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }

/* Impact charts (multi) */
.sol-charts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sol-charts .chart-panel { margin: 0; height: 100%; }
.sol-charts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sol-charts2 .chart-panel { margin: 0; }

/* FAQ accordion */
.sol-faq { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.sol-faq-item { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(var(--card-blur)); overflow: hidden; }
.sol-faq-item summary { list-style: none; cursor: pointer; padding: 22px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--font-display); font-weight: 500; font-size: 17px; color: var(--text); letter-spacing: -0.01em; }
.sol-faq-item summary::-webkit-details-marker { display: none; }
.sol-faq-item summary .fq { flex: none; width: 22px; height: 22px; color: var(--accent-soft); transition: transform 0.35s var(--ease); }
.sol-faq-item[open] summary .fq { transform: rotate(45deg); }
.sol-faq-item .fa { padding: 0 26px 24px; color: var(--text-muted); font-size: 15px; line-height: 1.6; }

.final-inner.solo { grid-template-columns: 1fr; max-width: 720px; gap: 0; }
@media (max-width: 1024px) {
  .sol-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .sol-problem, .sol-build, .sol-steps, .sol-compare, .sol-cap, .sol-charts, .sol-charts2 { grid-template-columns: 1fr; }
  .sol-kpis { grid-template-columns: 1fr; }
  .sol-kpi + .sol-kpi { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .sol-hero-viz .orch.harmony { height: 420px; }
}

/* ====================== PRODUCT PAGES ====================== */
/* Product hero pill chip */

/* Architecture layers (Harmony) */
.arch-stack { display: flex; flex-direction: column; gap: 12px; }
.arch-row { display: grid; grid-template-columns: 160px 1fr; gap: 26px; align-items: center; padding: 20px 24px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); backdrop-filter: blur(var(--card-blur)); transition: border-color 0.3s var(--ease), transform 0.4s var(--ease-spring); }
.arch-row:hover { border-color: var(--border-strong); transform: translateX(4px); }
.arch-label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-soft); }
.arch-nodes { display: flex; flex-wrap: wrap; gap: 9px; }
.arch-node { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12.5px; padding: 7px 13px; border-radius: 10px; background: var(--bg-deep); border: 1px solid var(--border); color: var(--text-muted); }
.arch-node::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }
@media (max-width: 860px) { .arch-row { grid-template-columns: 1fr; gap: 12px; } }

/* Demo stepper (CSS-only tabs) */
.hm-demo-wrap > input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.hm-demo { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 18px; align-items: start; }

/* --- scenario picker --- */
.hm-tabs { display: flex; flex-direction: column; gap: 8px; }
.hm-tab { position: relative; display: block; padding: 13px 36px 13px 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); cursor: pointer; overflow: hidden; transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease); }
.hm-tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--accent), var(--accent-2)); transform: scaleY(0); transition: transform 0.3s var(--ease-spring); }
.hm-tab:hover { transform: translateX(3px); border-color: var(--border-strong); }
.hm-tab .tg { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 5px; }
.hm-tab .tt { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; }
.hm-tab-caret { position: absolute; right: 16px; top: 50%; transform: translateY(-50%) translateX(-4px); color: var(--accent-soft); font-size: 13px; opacity: 0; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }

/* --- run panel --- */
.hm-panel { display: none; position: relative; padding: 26px 30px 24px; height: 900px; overflow: hidden; }
.hm-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 38%; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent); }
.hm-run-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--border); }
.hm-run-head h4 { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; color: var(--text); }
.hm-run-meta { display: flex; align-items: center; gap: 10px; }

/* --- execution trace --- */
.hm-trace { position: relative; list-style: none; margin: 0; padding: 2px 0; }
.hm-trace::before { content: ""; position: absolute; left: 13.5px; top: 22px; bottom: 22px; width: 1px; background: var(--border-strong); transform: scaleY(0); transform-origin: top; }
.hm-step { position: relative; display: grid; grid-template-columns: 28px minmax(0, 150px) 1fr auto; gap: 16px; align-items: center; padding: 13px 14px; border-radius: 12px; opacity: 0; transform: translateY(8px); transition: background 0.2s var(--ease); }
.hm-step .lt { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; justify-self: end; white-space: nowrap; }
.hm-step:hover .lt { color: var(--accent-soft); }
.hm-step + .hm-step { margin-top: 2px; }
.hm-step:hover { background: var(--surface); }
.hm-node { position: relative; justify-self: center; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--border-strong); background: var(--surface-solid); z-index: 1; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.hm-node::after { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: var(--accent); transform: scale(0); }
.hm-step:hover .hm-node { border-color: color-mix(in srgb, var(--accent) 55%, var(--border-strong)); }
.hm-step-main { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hm-step .sa { font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }
.hm-step .st { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-soft); padding: 2px 8px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border)); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.hm-step .sd { font-size: 14px; color: var(--text-muted); line-height: 1.55; }

/* --- footer chips --- */
.hm-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--border); }
.hm-fchip { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-deep); }
.hm-fchip.ok { color: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, var(--border)); }

/* --- radio toggle: show panel + light up the active tab --- */
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo #hp-0,
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo #hp-1,
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo #hp-2,
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo #hp-3,
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo #hp-4 { display: block; }
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo #hp-0.hm-conv-panel,
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo #hp-1.hm-conv-panel,
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo #hp-2.hm-conv-panel,
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo #hp-3.hm-conv-panel,
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo #hp-4.hm-conv-panel { display: flex; }   /* animated panels are flex columns */
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo label[for="hsc-0"],
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo label[for="hsc-1"],
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo label[for="hsc-2"],
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo label[for="hsc-3"],
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo label[for="hsc-4"] { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: var(--surface-2); box-shadow: 0 14px 40px -28px color-mix(in srgb, var(--accent) 60%, transparent); }
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo label[for="hsc-0"]::before,
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo label[for="hsc-1"]::before,
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo label[for="hsc-2"]::before,
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo label[for="hsc-3"]::before,
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo label[for="hsc-4"]::before { transform: scaleY(1); }
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo label[for="hsc-0"] .hm-tab-caret,
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo label[for="hsc-1"] .hm-tab-caret,
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo label[for="hsc-2"] .hm-tab-caret,
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo label[for="hsc-3"] .hm-tab-caret,
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo label[for="hsc-4"] .hm-tab-caret { opacity: 1; transform: translateY(-50%) translateX(0); }

/* active channel kicker brightens */
.hm-demo-wrap > #hsc-0:checked ~ .hm-demo label[for="hsc-0"] .tg,
.hm-demo-wrap > #hsc-1:checked ~ .hm-demo label[for="hsc-1"] .tg,
.hm-demo-wrap > #hsc-2:checked ~ .hm-demo label[for="hsc-2"] .tg,
.hm-demo-wrap > #hsc-3:checked ~ .hm-demo label[for="hsc-3"] .tg,
.hm-demo-wrap > #hsc-4:checked ~ .hm-demo label[for="hsc-4"] .tg { color: var(--accent-soft); }

/* --- cascade: replays on reveal + on every tab switch (display flip) --- */
.hm-demo-wrap.in .hm-trace::before { animation: hm-spine 0.6s var(--ease) 0.04s forwards; }
.hm-demo-wrap.in .hm-step { animation: hm-step-in 0.5s var(--ease) forwards; }
.hm-demo-wrap.in .hm-node::after { animation: hm-node-pop 0.5s var(--ease-spring) forwards; }
.hm-demo-wrap.in .hm-step:nth-child(1), .hm-demo-wrap.in .hm-step:nth-child(1) .hm-node::after { animation-delay: 0.10s; }
.hm-demo-wrap.in .hm-step:nth-child(2), .hm-demo-wrap.in .hm-step:nth-child(2) .hm-node::after { animation-delay: 0.19s; }
.hm-demo-wrap.in .hm-step:nth-child(3), .hm-demo-wrap.in .hm-step:nth-child(3) .hm-node::after { animation-delay: 0.28s; }
.hm-demo-wrap.in .hm-step:nth-child(4), .hm-demo-wrap.in .hm-step:nth-child(4) .hm-node::after { animation-delay: 0.37s; }
.hm-demo-wrap.in .hm-step:nth-child(5), .hm-demo-wrap.in .hm-step:nth-child(5) .hm-node::after { animation-delay: 0.46s; }
.hm-demo-wrap.in .hm-step:nth-child(6), .hm-demo-wrap.in .hm-step:nth-child(6) .hm-node::after { animation-delay: 0.55s; }
/* continuous pulse — a highlight that travels node→node down the pipeline */
.hm-demo-wrap.in .hm-node { animation: hm-node-glow 2.6s var(--ease) infinite; }
.hm-demo-wrap.in .hm-step:nth-child(1) .hm-node { animation-delay: 1.05s; }
.hm-demo-wrap.in .hm-step:nth-child(2) .hm-node { animation-delay: 1.37s; }
.hm-demo-wrap.in .hm-step:nth-child(3) .hm-node { animation-delay: 1.69s; }
.hm-demo-wrap.in .hm-step:nth-child(4) .hm-node { animation-delay: 2.01s; }
.hm-demo-wrap.in .hm-step:nth-child(5) .hm-node { animation-delay: 2.33s; }
.hm-demo-wrap.in .hm-step:nth-child(6) .hm-node { animation-delay: 2.65s; }
@keyframes hm-spine { to { transform: scaleY(1); } }
@keyframes hm-step-in { to { opacity: 1; transform: none; } }
@keyframes hm-node-pop { 0% { transform: scale(0); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes hm-node-glow {
  0%, 16%, 100% { box-shadow: 0 0 0 0 transparent; border-color: var(--border-strong); }
  7% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 13px 1px color-mix(in srgb, var(--accent) 45%, transparent); border-color: color-mix(in srgb, var(--accent) 70%, var(--border-strong)); }
}

@media (prefers-reduced-motion: reduce) {
  .hm-step { opacity: 1; transform: none; animation: none; }
  .hm-node, .hm-node::after { animation: none; }
  .hm-node::after { transform: scale(1); }
  .hm-trace::before { transform: scaleY(1); animation: none; }
  .hm-demo-wrap.in .hm-step, .hm-demo-wrap.in .hm-node, .hm-demo-wrap.in .hm-node::after, .hm-demo-wrap.in .hm-trace::before { animation: none; }
}
@media (max-width: 880px) { .hm-demo { grid-template-columns: 1fr; } .hm-step { grid-template-columns: 32px 1fr auto; } .hm-step .sd { grid-column: 2 / -1; } .hm-step .lt { grid-row: 1; grid-column: 3; align-self: start; } }

/* ====================== BANKING — living conversation panel ====================== */
/* JS-driven (interactions.js → demoBanking). Style sits between console + editorial. */
.hm-conv-panel { flex-direction: column; padding: 0; gap: 0; }
.hm-conv-panel::before { display: none; }   /* drop the default top hairline; we have our own bar */
.hm-conv-top { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.hc-id { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.hc-id b { color: var(--accent-soft); font-weight: 500; }
.hc-sc { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
.hc-st { margin-left: auto; font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); opacity: 0; transition: opacity 0.33s var(--ease); }
.hc-st.show { opacity: 1; color: var(--pos); }

.hm-conv { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 22px 24px 6px; display: flex; flex-direction: column; gap: 13px; }
.hm-msg { opacity: 0; transform: translateY(10px); transition: opacity 0.33s var(--ease), transform 0.33s var(--ease-spring); max-width: 84%; }
.hm-msg.show { opacity: 1; transform: none; }
.hm-msg.cust { align-self: flex-start; }
.hm-msg.agent { align-self: flex-end; }
.hm-who { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 5px 4px; }
.hm-msg.agent .hm-who { text-align: right; margin: 0 4px 5px 0; color: var(--accent-soft); }
.hm-bub { display: inline-block; padding: 12px 15px; border-radius: 14px; font-size: 14px; line-height: 1.5; color: var(--text); min-height: 43px; }
.hm-msg.cust .hm-bub { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: 5px; }
.hm-msg.agent .hm-bub { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 9%, transparent)); border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border)); border-bottom-right-radius: 5px; }
.hm-t { white-space: pre-wrap; }
.hm-ch { display: inline; opacity: 0; filter: blur(5px); animation: hm-chin 0.26s var(--ease) forwards; }
@keyframes hm-chin { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: blur(0); } }
.hm-car { display: none; width: 2px; height: 1.05em; vertical-align: -2px; margin-left: 2px; background: var(--accent-2); animation: hm-carblink 1s step-end infinite; }
.hm-car.on { display: inline-block; }
@keyframes hm-carblink { 50% { opacity: 0; } }
.hm-dots { display: none; align-items: center; gap: 5px; height: 1em; vertical-align: -1px; }
.hm-dots.on { display: inline-flex; }
.hm-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-faint); animation: hm-dotp 1.25s var(--ease) infinite; }
.hm-dots i:nth-child(2) { animation-delay: 0.16s; }
.hm-dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes hm-dotp { 0%,65%,100% { opacity: 0.25; transform: translateY(0); } 32% { opacity: 1; transform: translateY(-3px); background: var(--accent-soft); } }

.hm-work { align-self: stretch; display: flex; flex-direction: column; gap: 2px; margin: 1px 0; }
.hm-wstep { border-radius: 12px; opacity: 0; transform: translateY(6px); transition: opacity 0.27s var(--ease), transform 0.27s var(--ease-spring), background 0.2s var(--ease); padding: 3px 12px; }
.hm-wstep.show { opacity: 1; transform: none; }
.hm-wstep.active { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.hm-wrow { display: grid; grid-template-columns: 18px minmax(74px, auto) 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.hm-wn { position: relative; justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-solid); border: 1.5px solid var(--border-strong); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }
.hm-wstep.active .hm-wn { border-color: var(--accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 12px var(--accent); }
.hm-wstep.done .hm-wn { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 60%, var(--surface-solid)); box-shadow: none; }
.hm-wa { font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.hm-wtok { font-family: var(--font-mono); font-size: 11px; color: var(--accent-soft); }
.hm-wlat { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); justify-self: end; font-variant-numeric: tabular-nums; }

.hm-wdet { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.27s var(--ease), opacity 0.27s var(--ease); padding-left: 30px; }
.hm-wdet.open { grid-template-rows: 1fr; opacity: 1; }
.hm-wdet-in { overflow: hidden; min-height: 0; padding: 1px 0 8px; }
.hm-classes { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-cls { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.hm-cls.scan { color: var(--text); border-color: var(--accent-2); box-shadow: 0 0 14px -2px var(--accent-2); transform: translateY(-1px); }
.hm-cls.dim { opacity: 0.32; }
.hm-cls.picked { color: var(--text); border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.hm-cls.picked::after { content: " ✓"; color: var(--pos); }
.hm-docs { display: flex; flex-direction: column; gap: 4px; }
.hm-doc { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease); }
.hm-sco { color: var(--text-faint); font-variant-numeric: tabular-nums; }
.hm-doc.scan { color: var(--text); border-color: var(--accent-2); box-shadow: 0 0 14px -4px var(--accent-2); }
.hm-doc.dim { opacity: 0.3; }
.hm-doc.picked { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hm-doc.picked .hm-sco { color: var(--pos); }
.hm-verdict { margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); opacity: 0; transition: opacity 0.23s var(--ease); }
.hm-verdict.show { opacity: 1; }
.hm-verdict b { color: var(--accent-soft); font-weight: 500; }

.hm-conv-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; padding: 15px 24px; border-top: 1px solid var(--border); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--pos) 6%, transparent)); opacity: 0; transition: opacity 0.33s var(--ease); }
.hm-conv-foot.show { opacity: 1; }
.hc-res { font-family: var(--font-display); font-weight: 500; color: var(--pos); }
.hc-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin-left: auto; }
@media (prefers-reduced-motion: reduce) {
  .hm-ch { animation: none; opacity: 1; filter: none; }
  .hm-car, .hm-dots { display: none !important; }
}
@media (max-width: 880px) {
  .hm-panel { height: auto; min-height: 520px; }
  .hm-conv-foot { flex-wrap: wrap; }
  .hc-meta { margin-left: 0; }
}

/* ====================== AiDoc · invoice panel (canon document + canon typing) ====================== */
.hm-iv-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.hm-iv-ocr { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hm-iv-doc, .hm-iv-fields { opacity: 0; transform: translateY(8px); transition: opacity 0.33s var(--ease), transform 0.33s var(--ease-spring); }
.hm-iv-doc.show, .hm-iv-fields.show { opacity: 1; transform: none; }
.hm-iv-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.hm-iv-ic { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; display: grid; place-items: center; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.hm-iv-ic svg { width: 14px; height: 14px; }
.hm-iv-ic.ok { color: var(--pos); background: color-mix(in srgb, var(--pos) 16%, transparent); }
.hm-iv-l { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.hm-iv-l.ok { color: var(--pos); }
.hm-iv-tag { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); padding: 2px 8px; border: 1px solid var(--border); border-radius: 6px; }
.hm-iv-paper { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-solid); padding: 13px 16px; }
/* canon doc-lines: bars draw left→right, one highlighted */
.hm-iv-lines { display: flex; flex-direction: column; gap: 7px; }
.hm-iv-lines i { display: block; height: 6px; border-radius: 3px; background: var(--border-strong); transform: scaleX(0); transform-origin: left; transition: transform 0.27s var(--ease); }
.hm-iv-lines i.drawn { transform: scaleX(1); }
.hm-iv-lines i.hl { background: color-mix(in srgb, var(--accent-2) 60%, var(--border-strong)); box-shadow: 0 0 10px -1px color-mix(in srgb, var(--accent-2) 70%, transparent); }
/* canon kv chips: pop in */
.hm-iv-kv { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.hm-iv-kv span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 7px; background: color-mix(in srgb, var(--surface) 60%, transparent); border: 1px solid var(--border); opacity: 0; }
.hm-iv-kv span.pop { animation: hm-iv-pop 0.27s var(--ease-spring) forwards; }
.hm-iv-kv span .k { font-style: normal; color: var(--text-faint); }
.hm-iv-kv span b { color: var(--accent-2); }
.hm-iv-rkv span b { color: var(--text); }
@keyframes hm-iv-pop { from { opacity: 0; transform: translateY(6px) scale(0.95); } to { opacity: 1; transform: none; } }

.hm-iv-steps { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: 10px; }
.hm-iv-step { border-radius: 12px; opacity: 0; transform: translateY(6px); transition: opacity 0.27s var(--ease), transform 0.27s var(--ease-spring), background 0.2s var(--ease); padding: 2px 10px; }
.hm-iv-step.show { opacity: 1; transform: none; }
.hm-iv-step.active { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.hm-iv-row { display: grid; grid-template-columns: 18px minmax(70px, auto) 1fr auto; gap: 12px; align-items: center; padding: 6px 0; }
.hm-iv-n { justify-self: center; width: 9px; height: 9px; border-radius: 50%; background: var(--surface-solid); border: 1.5px solid var(--border-strong); transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; }
.hm-iv-step.active .hm-iv-n { border-color: var(--accent-soft); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent), 0 0 12px var(--accent); }
.hm-iv-step.done .hm-iv-n { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 60%, var(--surface-solid)); }
.hm-iv-a { font-family: var(--font-display); font-weight: 500; font-size: 14px; }
.hm-iv-tok { font-family: var(--font-mono); font-size: 11px; color: var(--accent-soft); }
.hm-iv-lat { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); justify-self: end; font-variant-numeric: tabular-nums; }
.hm-iv-det { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.27s var(--ease), opacity 0.27s var(--ease); padding-left: 30px; }
.hm-iv-det.open { grid-template-rows: 1fr; opacity: 1; }
.hm-iv-det-in { overflow: hidden; min-height: 0; padding: 1px 0 7px; }
.hm-iv-pos { display: flex; flex-direction: column; gap: 4px; }
.hm-iv-po { display: grid; grid-template-columns: 1fr auto; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding: 6px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease); }
.hm-iv-po.scan { color: var(--text); border-color: var(--accent-2); box-shadow: 0 0 14px -4px var(--accent-2); }
.hm-iv-po.dim { opacity: 0.3; }
.hm-iv-po.picked { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hm-iv-po.picked .pm { color: var(--pos); }
.hm-iv-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-iv-chk { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); opacity: 0; transform: translateY(4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease-spring), color 0.2s var(--ease), border-color 0.2s var(--ease); }
.hm-iv-chk.on { opacity: 1; transform: none; color: var(--text); border-color: color-mix(in srgb, var(--pos) 35%, var(--border)); }
.hm-iv-chk.on::before { content: "✓ "; color: var(--pos); }
.hm-iv-route { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); min-height: 1.4em; }
/* canon caret */
.hm-iv-car { display: none; width: 2px; height: 1.05em; vertical-align: -2px; margin-left: 2px; background: var(--accent-2); animation: hm-iv-blink 1s step-end infinite; }
.hm-iv-car.on { display: inline-block; }
@keyframes hm-iv-blink { 50% { opacity: 0; } }

/* explicit OUTPUT — what the app produced */
.hm-iv-result { border: 1px solid color-mix(in srgb, var(--pos) 26%, var(--border)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--pos) 9%, transparent), transparent); padding: 14px 16px; opacity: 0; transform: translateY(8px); transition: opacity 0.33s var(--ease), transform 0.33s var(--ease-spring); }
.hm-iv-result.show { opacity: 1; transform: none; }
.hm-iv-ans { font-size: 13.5px; color: var(--text); line-height: 1.5; min-height: 1.5em; margin-bottom: 9px; }
@media (prefers-reduced-motion: reduce) {
  .hm-iv-lines i { transform: scaleX(1); }
  .hm-iv-car { display: none !important; }
}
@media (max-width: 880px) { .hm-iv-ocr { grid-template-columns: 1fr; } }

/* ====================== TextToSQL panel (question → SQL → answer table) ====================== */
.hm-sq-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.hm-sq-q { opacity: 0; transform: translateY(8px); transition: opacity 0.33s var(--ease), transform 0.33s var(--ease-spring); }
.hm-sq-q.show { opacity: 1; transform: none; }
.hm-sq-qt { font-family: var(--font-display); font-weight: 500; font-size: 17px; letter-spacing: -0.01em; color: var(--text); min-height: 1.4em; }
.hm-sq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-sq-chip { display: inline-flex; gap: 6px; font-family: var(--font-mono); font-size: 11px; padding: 3px 8px; border-radius: 7px; background: var(--surface); border: 1px solid var(--border); opacity: 0; }
.hm-sq-chip.pop { animation: hm-iv-pop 0.27s var(--ease-spring) forwards; }
.hm-sq-chip .k { font-style: normal; color: var(--text-faint); }
.hm-sq-chip b { color: var(--accent-2); }
.hm-sq-tbls { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-sq-tbl { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding: 3px 10px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface); transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease), opacity 0.2s var(--ease); }
.hm-sq-tbl::before { content: "▦ "; opacity: 0.5; }
.hm-sq-tbl.scan { color: var(--text); border-color: var(--accent-2); box-shadow: 0 0 14px -3px var(--accent-2); }
.hm-sq-tbl.dim { opacity: 0.3; }
.hm-sq-tbl.picked { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.hm-sq-sql { background: var(--bg-deep, #070710); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 13px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); white-space: pre-wrap; line-height: 1.55; min-height: 1.5em; }
.hm-sq-result { border: 1px solid color-mix(in srgb, var(--pos) 26%, var(--border)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--pos) 9%, transparent), transparent); padding: 14px 16px; opacity: 0; transform: translateY(8px); transition: opacity 0.33s var(--ease), transform 0.33s var(--ease-spring); }
.hm-sq-result.show { opacity: 1; transform: none; }
.hm-sq-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; margin-bottom: 10px; }
.hm-sq-table th { text-align: left; color: var(--text-faint); font-weight: 400; padding: 5px 8px; border-bottom: 1px solid var(--border-strong); }
.hm-sq-table th:nth-child(n+2), .hm-sq-table td:nth-child(n+2) { text-align: right; }
.hm-sq-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.hm-sq-table tbody tr { opacity: 0; transform: translateY(4px); transition: opacity 0.23s var(--ease), transform 0.23s var(--ease-spring); }
.hm-sq-table tbody tr.show { opacity: 1; transform: none; }
.hm-sq-table .rhead { opacity: 0; transition: opacity 0.23s var(--ease); }
.hm-sq-table .rhead.show { opacity: 1; }
.hm-sq-table .up { color: var(--pos); }
.hm-sq-interp { font-size: 13.5px; color: var(--text); line-height: 1.5; min-height: 1.4em; }

/* ====================== Data Ops panel (alert → error log → runbook → retry) ====================== */
.hm-do-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.hm-do-alert { border: 1px solid color-mix(in srgb, var(--warn) 32%, var(--border)); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--warn) 11%, transparent), transparent); padding: 12px 14px; opacity: 0; transform: translateY(8px); transition: opacity 0.33s var(--ease), transform 0.33s var(--ease-spring); }
.hm-do-alert.show { opacity: 1; transform: none; }
.hm-do-at { font-family: var(--font-mono); font-size: 12.5px; color: var(--text); }
.hm-do-at b { color: var(--warn); font-weight: 500; }
.hm-do-ameta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); margin-top: 4px; }
/* error-log console */
.hm-do-console { background: #06060e; border: 1px solid var(--border-strong); border-radius: 10px; padding: 9px 6px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }
.hm-do-cl { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: baseline; padding: 3px 9px; border-radius: 6px; border: 1px solid transparent; opacity: 0; transform: translateY(3px); transition: opacity 0.17s var(--ease), transform 0.17s var(--ease), background 0.17s var(--ease), border-color 0.17s var(--ease), box-shadow 0.17s var(--ease); }
.hm-do-cl.in { opacity: 1; transform: none; }
.hm-do-cl .ts { color: #565c70; }
.hm-do-cl .lv { font-weight: 500; }
.hm-do-cl .lv.info { color: #5a6276; } .hm-do-cl .lv.dbg { color: #49506a; } .hm-do-cl .lv.err { color: var(--neg); }
.hm-do-cl .msg { color: var(--text-muted); }
.hm-do-cl.scan { background: color-mix(in srgb, var(--accent-2) 7%, transparent); border-color: color-mix(in srgb, var(--accent-2) 30%, transparent); }
.hm-do-cl.dim { opacity: 0.32; }
.hm-do-cl.located { background: color-mix(in srgb, var(--neg) 10%, transparent); border-color: color-mix(in srgb, var(--neg) 45%, var(--border)); box-shadow: 0 0 16px -5px var(--neg); }
.hm-do-cl .tok { color: var(--text-muted); border-radius: 3px; padding: 0 2px; transition: color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.hm-do-cl .tok.lit { color: var(--neg); background: color-mix(in srgb, var(--neg) 16%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--neg) 40%, transparent); }
/* pipeline mini */
.hm-do-pl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hm-do-st { font-family: var(--font-mono); font-size: 11px; padding: 4px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-faint); transition: color 0.3s var(--ease), border-color 0.3s var(--ease), background 0.3s var(--ease); }
.hm-do-st.ok { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 35%, var(--border)); } .hm-do-st.ok::before { content: "✓ "; }
.hm-do-st.fail { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 45%, var(--border)); background: color-mix(in srgb, var(--neg) 8%, transparent); } .hm-do-st.fail::before { content: "✕ "; }
.hm-do-st.run { color: var(--accent-2); border-color: color-mix(in srgb, var(--accent-2) 45%, var(--border)); animation: hm-do-run 1s var(--ease) infinite; } .hm-do-st.run::before { content: "⟳ "; }
@keyframes hm-do-run { 50% { opacity: 0.55; } }
.hm-do-arr { color: var(--text-faint); font-family: var(--font-mono); }
@media (prefers-reduced-motion: reduce) { .hm-do-cl { opacity: 1; transform: none; } }

/* ====================== Trading panel (gather → cluster → summarize → compare) ====================== */
.hm-tr-feed { display: flex; flex-wrap: wrap; gap: 5px; }
.hm-tr-inc { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); padding: 3px 9px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-deep, #070710); opacity: 0; transform: translateY(6px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease-spring); }
.hm-tr-inc.in { opacity: 1; transform: none; }
.hm-tr-clusters { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hm-tr-cluster { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 9px 11px; opacity: 0; transform: translateY(8px) scale(0.97); transition: opacity 0.27s var(--ease), transform 0.27s var(--ease-spring); }
.hm-tr-cluster.in { opacity: 1; transform: none; }
.hm-tr-cluster.lead { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.hm-tr-cluster .ct { font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--text); display: flex; justify-content: space-between; align-items: baseline; }
.hm-tr-cluster .cn { font-family: var(--font-mono); font-size: 11px; color: var(--accent-soft); }
.hm-tr-cluster .cd { margin-top: 6px; display: flex; gap: 3px; }
.hm-tr-cluster .cd i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.hm-tr-summary { font-family: var(--font-body); font-size: 13px; color: var(--text-muted); line-height: 1.55; min-height: 1.4em; }
.hm-tr-cite { font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-soft); opacity: 0; transition: opacity 0.27s var(--ease); }
.hm-tr-cite.in { opacity: 1; }
.hm-tr-compare { display: flex; align-items: center; gap: 14px; }
.hm-tr-spark { opacity: 0; transition: opacity 0.33s var(--ease); }
.hm-tr-spark.in { opacity: 1; }
.hm-tr-spark svg { display: block; }
.hm-tr-spark .ln { stroke: var(--accent-2); stroke-width: 1.6; fill: none; stroke-dasharray: 120; stroke-dashoffset: 120; transition: stroke-dashoffset 0.67s var(--ease); }
.hm-tr-spark.in .ln { stroke-dashoffset: 0; }
.hm-tr-spark .dot { fill: var(--pos); opacity: 0; transition: opacity 0.2s var(--ease) 0.6s; }
.hm-tr-spark.in .dot { opacity: 1; }
.hm-tr-trend { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.hm-tr-trend b { color: var(--pos); font-weight: 500; }
.hm-tr-trend .sub { color: var(--text-faint); font-size: 10.5px; }

.hm-integrations { overflow: hidden; }

/* ====================== GOVERNANCE — one full-width Audit-trail block ====================== */
.hm-gov { width: 100%; }
/* let the heading + lead span the full block width here */
#governance .section-head { max-width: none; }
#governance .section-head .lead { max-width: none; }
.hm-audit {
  position: relative; display: flex; flex-direction: column;
  padding: 30px 34px; border-radius: var(--radius-lg);
  background: linear-gradient(165deg, #0C0C16 0%, #15152e 100%);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,0.8), 0 0 0 1px rgba(124,58,237,0.12);
  overflow: hidden; isolation: isolate;
}
.hm-audit::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90% 60% at 12% 0%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 60%),
              radial-gradient(70% 50% at 100% 100%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 60%);
}
/* Grey wash covering the whole card, swept away by two soft diagonal fronts
   moving toward each other along the TL→BR axis: the top-left front clears
   ~70% of the card, the bottom-right front clears the remaining ~30%; both
   finish together. On top of the straight fronts, round "breakthrough" blobs
   sit along the seam and grow with the same fill variables, so colour locally
   punches through ahead of the line and the merge reads organic, not ruler-
   straight. All layers are intersected: grey survives only where NOTHING has
   cleared it yet, and the base fronts still guarantee a fully-clear end state.
   At rest all fills are 0% and feathers trail BEHIND the edges → the card
   starts FULLY grey. Sits behind content (z-index:-1) → text stays coloured. */
.hm-audit::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(165deg, #24242b 0%, #2f2f38 100%);
  -webkit-mask-image:
    linear-gradient(135deg, transparent calc(var(--au-fill) - 25%),  #000 var(--au-fill)),
    linear-gradient(315deg, transparent calc(var(--au-fill2) - 25%), #000 var(--au-fill2)),
    radial-gradient(circle at 88% 40%, transparent calc((var(--au-fill) - 65%) * 1.1),  #000 calc((var(--au-fill) - 65%) * 1.1 + 16%)),
    radial-gradient(circle at 66% 86%, transparent calc(var(--au-fill) - 76%),          #000 calc(var(--au-fill) - 62%)),
    radial-gradient(circle at 79% 58%, transparent calc((var(--au-fill2) - 34%) * 1.3), #000 calc((var(--au-fill2) - 34%) * 1.3 + 15%));
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(135deg, transparent calc(var(--au-fill) - 25%),  #000 var(--au-fill)),
    linear-gradient(315deg, transparent calc(var(--au-fill2) - 25%), #000 var(--au-fill2)),
    radial-gradient(circle at 88% 40%, transparent calc((var(--au-fill) - 65%) * 1.1),  #000 calc((var(--au-fill) - 65%) * 1.1 + 16%)),
    radial-gradient(circle at 66% 86%, transparent calc(var(--au-fill) - 76%),          #000 calc(var(--au-fill) - 62%)),
    radial-gradient(circle at 79% 58%, transparent calc((var(--au-fill2) - 34%) * 1.3), #000 calc((var(--au-fill2) - 34%) * 1.3 + 15%));
          mask-composite: intersect;
}
@property --au-fill  { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
@property --au-fill2 { syntax: "<percentage>"; initial-value: 0%; inherits: false; }
/* TL front runs the whole ~1.55s; BR front joins once TL has covered ~60%
   (0.85s in), starts gently (ease-in) and both land at the same instant. */
.hm-audit.in::after {
  animation:
    auFillTL 1.55s cubic-bezier(.45,.1,.35,.9) 0.15s forwards,
    auFillBR 0.78s cubic-bezier(.5,.1,.4,.95)  0.92s forwards;
}
@keyframes auFillTL { from { --au-fill:  0%; } to { --au-fill:  95%; } }
@keyframes auFillBR { from { --au-fill2: 0%; } to { --au-fill2: 55%; } }
@media (prefers-reduced-motion: reduce) {
  .hm-audit::after { display: none; }
}
.hm-audit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,0.10); }
.ha-eyebrow { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-soft); }
.ha-run { font-family: var(--font-mono); font-size: 13px; color: rgba(255,255,255,0.5); }
.hm-audit-rows { list-style: none; margin: 0; padding: 8px 0 0; }
.hm-audit-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-family: var(--font-mono); font-size: 15px; }
.hm-audit-row:last-child { border-bottom: 0; }
.hr-step { color: #F0F0F5; }
.hr-scope { color: var(--accent-soft); }
.hr-meta { color: rgba(255,255,255,0.5); }
.hr-flag { justify-self: end; text-align: right; font-size: 14px; letter-spacing: 0.02em; }
.hr-flag.ok { color: var(--pos); }
.hr-flag.warn { color: var(--warn); }
.hm-audit-foot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.10); }
.haf-cell { display: flex; flex-direction: column; gap: 5px; }
.haf-k { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
.haf-v { font-family: var(--font-display); font-size: 21px; font-weight: 500; color: #F0F0F5; }
/* governance points, merged into the card */
.hm-audit-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,0.10); }
.hm-ap h4 { font-family: var(--font-display); font-weight: 500; font-size: 16.5px; letter-spacing: -0.01em; color: #F0F0F5; margin-bottom: 8px; }
.hm-ap p { font-size: 14.5px; color: rgba(255,255,255,0.58); line-height: 1.55; }
/* deploy targets, merged into the card */
.hm-audit-deploy { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.10); }
.hm-deploy-k { display: block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 12px; }
.hm-deploy-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 760px) { .hm-audit-points { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 560px) { .hm-audit-row { grid-template-columns: 1fr auto; row-gap: 3px; } .hr-scope { grid-column: 1; grid-row: 2; } .hr-meta { grid-column: 1; grid-row: 3; } .hr-flag { grid-row: 1; } }

/* Checklist (bench) */
.prod-check { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.prod-check-item { display: flex; gap: 14px; align-items: center; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.prod-check-item .ck { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--pos) 16%, transparent); color: var(--pos); }
.prod-check-item span.tx { font-size: 15px; color: var(--text); line-height: 1.45; }
@media (max-width: 760px) { .prod-check { grid-template-columns: 1fr; } }

/* Numbered rows (AiDoc what) */
.prod-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.prod-flow-item { position: relative; padding: 28px 26px; }
.prod-flow-item .pn { font-family: var(--font-mono); font-size: 13px; color: var(--accent-soft); }
.prod-flow-item h4 { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.015em; color: var(--text); margin: 12px 0 9px; }
.prod-flow-item p { color: var(--text-muted); font-size: 14px; line-height: 1.55; }
.prod-flow-item .pn-arrow { position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); z-index: 2; transition: transform 0.35s var(--ease), color 0.35s var(--ease); }
.prod-flow-item:last-child .pn-arrow { display: none; }
.prod-flow-item:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.prod-flow-item:hover .pn-arrow { transform: translateY(-50%) translateX(4px); color: var(--accent-soft); }
.prod-flow-item:hover .pn { color: var(--accent); }
@media (max-width: 980px) { .prod-flow { grid-template-columns: 1fr 1fr; } .prod-flow-item .pn-arrow { display: none; } }
@media (max-width: 560px) { .prod-flow { grid-template-columns: 1fr; } }

/* Industries / deploy grids reuse cards */
.prod-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.prod-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.prod-card { padding: 28px 30px; }
.prod-card .pk { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; }
.prod-card h4 { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.015em; color: var(--text); margin-bottom: 8px; }
.prod-card p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }
.prod-card .mark { display: inline-block; margin-top: 12px; font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-soft); }
.prod-card { transition: transform 0.5s var(--ease-spring), border-color 0.4s var(--ease), box-shadow 0.5s var(--ease), background 0.4s var(--ease); }
.prod-card:hover { transform: translateY(-6px); border-color: var(--border-strong); box-shadow: var(--shadow-hover); }
.prod-card:hover .pk { color: var(--accent-soft); }
@media (max-width: 980px) { .prod-grid3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .prod-grid3, .prod-grid2 { grid-template-columns: 1fr; } }

/* AiDoc Q&A demo card — a live answering session */
.doc-qa { max-width: 760px; margin: 0 auto; padding: 0; overflow: hidden; }
.doc-qa-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 26px; border-bottom: 1px solid var(--border); }
.doc-qa-head .dq-doc { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.doc-qa-head .dq-doc svg { color: var(--accent-2); }
.doc-qa-head .dq-state { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pos); }
.doc-qa-ask { display: flex; gap: 12px; align-items: center; margin: 22px 26px 0; padding: 15px 18px; border-radius: 12px; background: var(--bg-deep); border: 1px solid var(--border); font-size: 15px; color: var(--text); }
.doc-qa-ask .qic { color: var(--accent-soft); flex: none; }
.doc-qa-ans { margin: 16px 26px 0; padding: 20px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border: 1px solid var(--border); font-size: 15px; line-height: 1.6; color: var(--text); }
.doc-qa-cites { margin: 16px 26px 0; display: flex; flex-direction: column; gap: 8px; }
.doc-qa-cite { position: relative; display: grid; grid-template-columns: 132px 1fr; gap: 14px; font-size: 12.5px; padding: 11px 14px; border-radius: 9px; background: var(--bg-deep); border: 1px solid var(--border); border-left: 2px solid color-mix(in srgb, var(--accent-2) 40%, var(--border)); }
.doc-qa-cite .cr { font-family: var(--font-mono); color: var(--accent-2); }
.doc-qa-cite .cq { color: var(--text-faint); font-style: italic; line-height: 1.45; }
.doc-qa-conf { margin: 18px 26px 24px; display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--pos); }
.doc-qa-conf .bar { flex: 1; height: 5px; border-radius: 999px; background: var(--bg-deep); overflow: hidden; }
.doc-qa-conf .bar i { display: block; height: 100%; width: 96%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--pos)); transform: scaleX(0); transform-origin: left; }
/* live cascade — answer computes, citations surface, confidence fills */
.doc-qa-ans, .doc-qa-cite, .doc-qa-conf { opacity: 0; transform: translateY(8px); }
.doc-qa.in .doc-qa-ans { animation: dq-in 0.55s var(--ease) 0.2s forwards; }
.doc-qa.in .doc-qa-cites .doc-qa-cite { animation: dq-in 0.5s var(--ease) forwards; }
.doc-qa.in .doc-qa-cites .doc-qa-cite:nth-child(1) { animation-delay: 0.5s; }
.doc-qa.in .doc-qa-cites .doc-qa-cite:nth-child(2) { animation-delay: 0.64s; }
.doc-qa.in .doc-qa-cites .doc-qa-cite:nth-child(3) { animation-delay: 0.78s; }
.doc-qa.in .doc-qa-conf { animation: dq-in 0.5s var(--ease) 0.95s forwards; }
.doc-qa.in .doc-qa-conf .bar i { animation: dq-bar 0.9s var(--ease) 1.05s forwards; }
@keyframes dq-in { to { opacity: 1; transform: none; } }
@keyframes dq-bar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .doc-qa-ans, .doc-qa-cite, .doc-qa-conf { opacity: 1; transform: none; animation: none; }
  .doc-qa-conf .bar i { transform: scaleX(1); animation: none; }
}
@media (max-width: 560px) { .doc-qa-cite { grid-template-columns: 1fr; gap: 5px; } }
@media (max-width: 560px) { .doc-qa-cite { grid-template-columns: 1fr; gap: 4px; } }

/* ======================================================================
   MOBILE / RESPONSIVE PASS — home (header drawer + per-section phone rules)
   Appended last so it wins over the tablet (≤1080) rules above.
   ====================================================================== */

/* ---- header: hamburger + slide-in drawer (desktop nav is hidden ≤1080) ---- */
.nav-toggle, .nav-cta, .nav-scrim { display: none; }

@media (max-width: 1080px) {
  .header-inner { gap: 16px; height: 66px; }
  .header-cta { display: none; }                  /* CTA relocates into the drawer */

  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 44px; padding: 0 11px;
    border: 1px solid var(--border-strong); border-radius: 12px;
    background: var(--surface);
    -webkit-backdrop-filter: blur(var(--card-blur)); backdrop-filter: blur(var(--card-blur));
    position: relative; z-index: 95;
  }
  .nav-toggle span { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--text);
    transition: transform .35s var(--ease), opacity .25s var(--ease); }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav {
    display: flex;                                 /* override the ≤1080 `display:none` above */
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(84vw, 340px);
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0; padding: 90px 20px 28px;
    background: var(--surface-solid);
    border-left: 1px solid var(--border);
    box-shadow: -30px 0 80px -42px rgba(0,0,0,0.85);
    transform: translateX(105%);
    transition: transform .42s var(--ease-spring);
    overflow-y: auto; z-index: 90;
  }
  .site-header.nav-open .nav { transform: none; }
  .nav-item { width: 100%; }
  .nav .mega { display: none; }                    /* dropdowns collapse to their top-level link */
  .nav-link { font-size: 17px; padding: 14px; border-radius: 12px; color: var(--text); }
  .nav-link svg { display: none; }
  .nav-cta { display: inline-flex; width: 100%; height: 50px; margin-top: 18px; }

  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 80;
    background: color-mix(in srgb, var(--bg-deep) 72%, transparent);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .35s var(--ease);
  }
  .nav-scrim[hidden] { display: block; opacity: 0; pointer-events: none; }
  .site-header.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
}

/* ---- solutions: collapse the sticky aside; nav becomes a pill row ---- */
@media (max-width: 980px) {
  .solutions .sol-layout { grid-template-columns: 1fr; gap: 30px; }
  .sol-aside { position: static; top: auto; }
  .sol-aside .section-head { margin-bottom: 22px; }
  .sol-nav { flex-direction: row; flex-wrap: wrap; gap: 8px; border-top: 0; padding-top: 0; }
  .sol-nav-item { padding: 9px 14px; border: 1px solid var(--border); border-radius: 999px; }
  .sol-stream .cluster { margin-top: 44px; }
}

/* ---- phone: global rhythm + per-section ---- */
@media (max-width: 640px) {
  :root { --gutter: 20px; --section-y: 78px; }
  .section-head { margin-bottom: 40px; }

  /* hero */
  .hero, .sol-hero { padding-top: 130px; padding-bottom: 60px; min-height: clamp(520px, 86vh, 700px); }
  .hero-kicker { margin-bottom: 22px; font-size: 11.5px; }
  .hero h1 { margin-bottom: 22px; }
  .hero-ctas { gap: 12px; margin-top: 32px; }
  .hero-ctas .btn { width: 100%; }

  /* metrics snapshot → single column, centred */
  .snapshot { padding: 36px 0 calc(var(--section-y) + 8px); }
  .snapshot-inner { grid-template-columns: 1fr; }
  .snapshot-title { grid-column: 1; min-height: 0; padding: 0 0 6px; text-align: center; align-items: center; }
  .snap-cell { padding: 22px 8px; }
  .snap-cell .desc { font-size: 16px; }

  /* challenges — flatten the 3D depth stack (no hover on touch) */
  .challenges-grid { gap: 30px; }
  .challenges-list { perspective: none; gap: 8px; }
  .challenges-list .challenge-row,
  .challenges-list.in .challenge-row,
  .challenges-list.in .challenge-row:not(:nth-child(3)),
  .challenges-list.in:hover .challenge-row {
    opacity: 1; transform: none; filter: none; transition-delay: 0s;
    border: 1px solid var(--border);
    background: color-mix(in srgb, #fff 3%, transparent);
  }
  .challenges-list .challenge-row p,
  .challenges-list.in .challenge-row p { color: var(--text); text-shadow: none; }
  .challenge-row::before, .challenge-row::after { display: none; }
  .bridge { padding: 22px; }

  /* products / engage spacing */
  .product-block { gap: 30px; }
  .pb-visual { min-height: 300px; padding: 18px; }

  /* engagement: tabs full-width, lifecycle cards 2-up */
  .eng-tabs { display: flex; width: 100%; }
  .eng-tab { flex: 1; padding: 11px 14px; text-align: center; }
  .eng-panel, .eng-panel.is-active { padding: 26px 20px; }

  /* Harmony orchestration — fixed %-positioned nodes overlap when narrow,
     so collapse them to icon-only chips (beams redraw to the new centres) */
  .orch.harmony { height: 380px; }
  .orch.harmony .onode { padding: 8px; gap: 0; }
  .orch.harmony .onode .ol { display: none; }
  .orch.harmony .onode .oi { width: 30px; height: 30px; }
  .orch.harmony .onode .oi svg { width: 17px; height: 17px; }
  .orch.harmony .onode.core { padding: 10px; }
  .orch.harmony .onode.core .oi { width: 36px; height: 36px; }

  /* industries */
  .ind-card { min-height: 0; padding: 24px 22px; }

  /* contact + form */
  .final-inner { gap: 34px; }
  .form-card { padding: 24px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .tel-panel { max-height: 220px; }
  .consent { font-size: 12.5px; }

  /* stack marquee band */
  .stack-sec { padding: 72px 0; }

  /* footer */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 26px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { justify-content: flex-start; }
}

@media (max-width: 400px) {
  :root { --gutter: 16px; }
  .footer-top { grid-template-columns: 1fr; }
  .snap-cell .chart-holder.ring, .snap-badge { width: 150px; }
  .snap-badge svg { width: 132px; height: 132px; }
  .eng-roles { grid-template-columns: 1fr; }
}

/* ================================================================
   AIDOC STORY — scrollytelling scene (aidoc.html #story)
   ================================================================ */
.story-track { height: 520vh; }
.story-pin { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; overflow: hidden; padding-top: 88px; box-sizing: border-box; }
.story-pin > .grid-bg { opacity: 0.55; }
.story-pin .wrap { width: 100%; max-width: calc(var(--maxw) + 200px); position: relative; }
.story-head { margin-bottom: 24px; }
.story-head .h-section { margin-top: 14px; max-width: 780px; }
.story-grid { display: grid; grid-template-columns: 1.8fr 1fr; gap: clamp(36px, 4.5vw, 80px); align-items: center; }

/* --- scene: blueprint line-art --- */
.story-stage { position: relative; }
.story-scene { width: 100%; height: auto; display: block; transition: opacity 0.5s var(--ease); }
.story-scene :where(rect, circle, path) { stroke: var(--border-strong); stroke-width: 1.5; fill: none; transition: stroke 0.4s var(--ease), opacity 0.5s var(--ease); }
.sc-label { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; fill: var(--text-faint); stroke: none; }
.sc-base { stroke: var(--border); }
.sc-cl-fr { stroke: var(--border-strong); stroke-dasharray: 3 5; }
.sc-cl-h, .sc-cl-s { stroke: var(--text-muted); stroke-width: 1.8; }
.sc-beam { stroke: color-mix(in srgb, var(--accent-2) 55%, var(--border-strong)); opacity: 0; transition: stroke 0.4s var(--ease); }

/* files */
.sc-file { transform: translate(180px, var(--y)); opacity: 0; }
.story[data-act="1"] .sc-file {
  transform: translate(calc(180px + var(--fp, 0) * 380px), calc(var(--y) + var(--fp, 0) * var(--ty))) rotate(calc(var(--r, 0deg) * (1 - var(--fp, 0))));
  opacity: calc(min(var(--fp, 0) * 8, 1) - max(0, var(--fp, 0) - 0.78) * 6);
}
.sc-file rect { fill: var(--surface); }
.sc-ext { font-family: var(--font-mono); font-size: 13px; fill: var(--accent-2); stroke: none; }
.sc-meta { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; fill: var(--text-faint); stroke: none; }
.sc-flines { stroke: var(--border); stroke-width: 1.2; }

/* closed box + deploy tags */
.sc-box { transition: transform 0.2s linear, opacity 0.5s var(--ease); }
.sc-box-r { fill: var(--surface); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent-2) 20%, transparent)); transition: filter 0.6s var(--ease), stroke 0.4s var(--ease); }
.sc-box-ic path { stroke: var(--text-muted); }
.sc-box-ic .sc-box-l { stroke: var(--text-faint); }
.sc-box-ic .sc-box-ai { fill: var(--accent-2); stroke: none; }
.sc-box-dots circle { fill: var(--text-faint); stroke: none; opacity: 0.3; }
.story-feed .sc-box-r { stroke: color-mix(in srgb, var(--accent-2) 45%, var(--border-strong)); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent-2) 42%, transparent)); }
.story-feed .sc-box-dots circle { animation: sc-dot 0.9s var(--ease) infinite; }
.sc-box-dots circle:nth-child(2) { animation-delay: 0.15s; }
.sc-box-dots circle:nth-child(3) { animation-delay: 0.3s; }
@keyframes sc-dot { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
.story[data-act="2"] .sc-box { opacity: 0; }
/* deployment shapes: four AiDoc variants (act 3) */
.sc-dep > .sc-label { opacity: 0; transition: opacity 0.5s var(--ease); }
.story[data-act="3"] .sc-dep > .sc-label, .story[data-act="4"] .sc-dep > .sc-label { opacity: 1; }
.sc-dep-t { transform: translate(var(--dx), calc(var(--dy) + 12px)); opacity: 0; transition: opacity 0.45s var(--ease), transform 0.5s var(--ease-spring); }
.sc-dep-t.on { opacity: 1; transform: translate(var(--dx), var(--dy)); }
.sc-dr { fill: var(--surface); stroke: var(--border-strong); }
.sc-drc { stroke: var(--accent-soft); opacity: 0.5; }
.sc-di :where(path, rect, circle) { stroke: var(--accent-soft); stroke-width: 1.5; }
.sc-dep-t.on .sc-di :where(path, rect, circle) { stroke: var(--accent-2); }
.sc-dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; fill: var(--text); stroke: none; text-anchor: middle; }
.sc-ds { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; fill: var(--text-faint); stroke: none; text-anchor: middle; }
.sc-pick { opacity: 0; transition: opacity 0.4s var(--ease); }
.sc-pick circle { stroke: var(--accent-2); fill: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.sc-pick path { stroke: var(--accent-2); stroke-width: 1.8; }
.story-pick .sc-dep-t.sel .sc-dr { stroke: var(--accent-2); }
.story-pick .sc-dep-t.sel .sc-drc { opacity: 1; stroke: var(--accent-2); }
.story-pick .sc-dep-t.sel .sc-pick { opacity: 1; }

/* pipeline (act 2) */
.sc-pipe { opacity: 0; transform: scale(0.94); transform-origin: 550px 270px; transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); pointer-events: none; }
.story[data-act="2"] .sc-pipe { opacity: 1; transform: none; }
.sc-pipe-r { fill: var(--surface); }
.sc-pipe-div { stroke: var(--border); }
.sc-link { stroke: var(--border); }
.story[data-act="2"] .sc-link { stroke: var(--border-strong); animation: sc-dash7 1.1s linear infinite; }
@keyframes sc-dash7 { to { stroke-dashoffset: -14; } }
.sc-node { opacity: 0.5; transition: opacity 0.4s var(--ease); }
.sc-node.on { opacity: 1; }
.sc-node rect { transform: translate(var(--nx), var(--ny)); fill: var(--bg); }
.sc-node text { transform: translate(var(--nx), var(--ny)); stroke: none; text-anchor: middle; }
.sc-node .sc-ni { transform: translate(var(--nx), var(--ny)); }
.sc-ni :where(path, rect, circle) { stroke: var(--text-faint); stroke-width: 1.5; }
.sc-nt { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 0.09em; fill: var(--text-muted); }
.sc-ns { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; fill: var(--text-faint); }
.sc-node.on rect { stroke: var(--accent-2); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--accent-2) 45%, transparent)); }
.sc-node.on .sc-nt { fill: var(--accent-2); }
.sc-node.on .sc-ni :where(path, rect, circle) { stroke: var(--accent-2); }

/* beam visible on the way back */
.story[data-act="3"] .sc-beam { opacity: calc(var(--p, 0) * 0.9); animation: sc-dash11 1.4s linear infinite reverse; }
.story[data-act="4"] .sc-beam { opacity: 0.35; animation: sc-dash11 1.4s linear infinite reverse; }
@keyframes sc-dash11 { to { stroke-dashoffset: -22; } }
.story[data-act="4"] .story-scene { opacity: 0.38; }

/* --- dialogue overlay (act 4): chat between client and AiDoc --- */
.story-dialog { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -46%) scale(0.97); width: min(600px, 96%); padding: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); backdrop-filter: blur(var(--card-blur)); opacity: 0; pointer-events: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); overflow: hidden; }
.story[data-act="4"] .story-dialog { opacity: 1; transform: translate(-50%, -50%); pointer-events: auto; }
.sd-head { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); padding: 13px 20px; border-bottom: 1px solid var(--border); }
.sd-ava { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.sd-title { font-size: 12px; letter-spacing: 0.08em; color: var(--text); }
.sd-doc { margin-left: auto; padding: 3px 9px; border: 1px solid var(--border); border-radius: 7px; font-size: 10.5px; }
.sd-chat { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px; }
.sd-msg { max-width: 86%; opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.sd-msg.in { opacity: 1; transform: none; }
.sd-who { display: block; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--text-faint); margin-bottom: 6px; }
.sd-m-cl { align-self: flex-end; text-align: right; }
.sd-m-cl .sd-q { display: inline-block; text-align: left; background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, var(--border)); border-radius: 12px 12px 4px 12px; padding: 11px 15px; }
.sd-m-ai { align-self: flex-start; }
.sd-m-ai .sd-a { background: var(--bg); border: 1px solid var(--border); border-radius: 12px 12px 12px 4px; padding: 12px 16px; }
.sd-m-st { align-self: flex-start; width: 64%; }
.sd-stl { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-faint); margin-bottom: 7px; }
.sd-q { font-size: 14.5px; color: var(--text); }
.sd-caret { display: inline-block; width: 7px; height: 1em; vertical-align: -0.15em; background: var(--accent-2); opacity: 0; margin-left: 2px; }
.sd-input.typing .sd-caret, .sd-a.active .sd-caret { opacity: 1; animation: adoc-blink 1s step-end infinite; }
.sd-scan { display: flex; flex-direction: column; gap: 6px; }
.sd-scan i { height: 4px; border-radius: 2px; background: var(--border); transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease); }
.sd-scan i.drawn { transform: scaleX(1); }
.sd-scan i:nth-child(1) { width: 88%; } .sd-scan i:nth-child(2) { width: 64%; } .sd-scan i:nth-child(3) { width: 76%; background: color-mix(in srgb, var(--accent-2) 55%, var(--border)); } .sd-scan i:nth-child(4) { width: 52%; }
.sd-a { font-size: 14px; line-height: 1.58; color: var(--text); min-height: 3em; }
.sd-cites { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-2); }
.sd-cites span { opacity: 0; transition: opacity 0.4s var(--ease); }
.sd-cites span.in { opacity: 1; }
.sd-conf { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); opacity: 0; transition: opacity 0.45s var(--ease); }
.story-dialog.done .sd-conf { opacity: 1; }
.sd-conf .bar { flex: 1; height: 3px; border-radius: 2px; background: var(--border); overflow: hidden; }
.sd-conf .bar i { display: block; height: 100%; width: 0; background: var(--pos); transition: width 1s var(--ease); }
.story-dialog.done .sd-conf .bar i { width: 96%; }
.sd-input { display: flex; align-items: center; gap: 12px; margin: 0 20px 16px; padding: 10px 15px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; color: var(--text); transition: border-color 0.3s var(--ease); }
.sd-input.typing { border-color: var(--border-strong); }
.sd-itw { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.sd-input .sd-ph { flex: 1; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.sd-input.typing .sd-ph, .sd-input.sent .sd-ph { display: none; }
.sd-input:not(.typing):not(.sent) .sd-itw { flex: 0 0 0; }
.sd-send { flex-shrink: 0; appearance: none; background: none; border: 0; padding: 0; display: grid; place-items: center; color: var(--text-faint); transition: color 0.25s var(--ease), transform 0.25s var(--ease); }
.sd-input.typing .sd-send { color: var(--accent-2); }
.sd-input.sent .sd-send { color: var(--pos); transform: translateX(4px); }
/* after the animation the input becomes real: type and send → demo CTA */
.sd-real { display: none; flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font-family: inherit; font-size: 13px; }
.sd-real::placeholder { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.story-dialog.done .sd-real { display: block; }
.story-dialog.done .sd-itw, .story-dialog.done .sd-ph { display: none; }
.story-dialog.done .sd-send { cursor: pointer; }
.story-dialog.done .sd-send:hover { color: var(--accent-2); transform: translateX(3px); }
.story-dialog.done .sd-input:focus-within { border-color: var(--accent-2); }

/* --- act rail --- */
.story-rail { display: flex; gap: 26px; margin-top: 24px; }
.story-rail button { appearance: none; background: none; border: 0; padding: 8px 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--text-faint); border-top: 1px solid var(--border); transition: color 0.3s var(--ease), border-color 0.3s var(--ease); }
.story-rail button:hover { color: var(--text-muted); border-top-color: var(--border-strong); }
.story-rail button.on { color: var(--accent-2); border-top-color: var(--accent-2); }

/* --- right column: act texts --- */
.story-text { position: relative; display: grid; }
.story-step { grid-area: 1 / 1; opacity: 0; transform: translateY(16px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); pointer-events: none; }
.story[data-act="1"] .story-step[data-step="1"], .story[data-act="2"] .story-step[data-step="2"], .story[data-act="3"] .story-step[data-step="3"], .story[data-act="4"] .story-step[data-step="4"] { opacity: 1; transform: none; pointer-events: auto; }
.story-step h3 { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 1.9vw, 25px); letter-spacing: -0.015em; color: var(--text); margin-bottom: 12px; }
.story-step > p { color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }
.story-step ul { list-style: none; margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.story-step ul li {
  position: relative; isolation: isolate;
  font-size: 13.5px; line-height: 1.5; color: var(--text-muted);
  padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
  transition: color 0.35s var(--ease), border-color 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.5s var(--ease), transform 0.5s var(--ease-spring);
}
/* glow from behind the block (canon — like .sol-card), no left bar */
.story-step ul li::after {
  content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(130% 130% at 0% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%);
  opacity: 0; transition: opacity 0.45s var(--ease);
}
.story-step ul li b { color: var(--text); font-weight: 600; }
.story-step ul li:hover {
  color: var(--text);
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: 0 16px 44px -28px color-mix(in srgb, var(--accent) 62%, transparent);
}
.story-step ul li:hover::after { opacity: 1; }
/* act 2 theses — active line emphasised (synced to scroll); brand accent, no coloured text */
.story-theses li.on {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: 0 16px 44px -28px color-mix(in srgb, var(--accent) 60%, transparent);
}
.story-theses li.on::after { opacity: 1; }
.story-theses li.on b { color: var(--text); }

/* mini-scenes: hidden on desktop */
.story-mini { display: none; }

/* --- story fallback: stacked acts (narrow screens / reduced motion) --- */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  .story-track { height: auto; }
  .story-pin { position: static; height: auto; padding: 80px 0; overflow: visible; }
  .story-grid { display: block; }
  .story-stage { display: none; }
  .story-text { display: block; max-width: 640px; }
  .story-step { opacity: 1; transform: none; pointer-events: auto; position: static; }
  .story-step + .story-step { margin-top: 48px; }
  .story-theses li.on { color: var(--text-muted); border-color: var(--border); background: var(--surface); box-shadow: none; }
  .story-theses li.on::after { opacity: 0; }
  .story-theses li.on b { color: var(--text); }
  .story-mini { display: block; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); padding: 14px; }
  .story-mini svg { width: 100%; height: auto; display: block; }
  .story-mini svg rect, .story-mini svg circle, .story-mini svg path { stroke: var(--border-strong); stroke-width: 1.4; fill: none; }
  .story-mini-qa .mq { font-family: var(--font-mono); font-size: 12px; color: var(--accent-2); margin-bottom: 8px; }
  .story-mini-qa .ma { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
  .story-mini-qa .ma span { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 10.5px; color: var(--accent-2); }
}

/* ============================================================
   ANTI-FRAUD — solution page (animation-led)
   Fraud/blocked = var(--neg); review = --warn; cleared = --pos;
   scanning = --accent-2. All motion transform/opacity.
   ============================================================ */
/* hero live-decision teaser */
.af-livecard { background: var(--bg-deep); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-card); font-family: var(--font-mono); }
.af-lc-head { display: flex; justify-content: space-between; align-items: center; color: var(--text-faint); font-size: 11px; letter-spacing: .06em; }
.af-lc-timer { color: var(--accent-2); }
.af-lc-txn { margin: 14px 0; color: var(--text); font-size: 14px; }
.af-lc-verdict { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .08em; padding: 5px 12px; border-radius: 8px; }
.af-lc-verdict.approve { color: var(--pos); background: color-mix(in srgb, var(--pos) 12%, transparent); border: 1px solid color-mix(in srgb, var(--pos) 45%, transparent); }
.af-lc-verdict.block { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); border: 1px solid color-mix(in srgb, var(--neg) 45%, transparent); }

/* hero proof block (right column) — still used by the smart-search hero */
.af-hero-proof { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); backdrop-filter: blur(var(--card-blur)); padding: 8px 26px 20px; }
.af-hp-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft); padding: 16px 0; border-bottom: 1px solid var(--border); }
.af-hp-m { display: flex; align-items: baseline; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.af-hp-m .v { font-family: var(--font-display); font-weight: 500; font-size: 36px; letter-spacing: -.03em; line-height: 1; color: var(--text); flex: 0 0 auto; min-width: 116px; }
.af-hp-m .v.cy { color: var(--accent-2); }
.af-hp-m .v.pos { color: var(--pos); }
.af-hp-m .l { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); line-height: 1.45; }
.af-hp-nda { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); padding-top: 14px; }

/* hero proof — iPhone running Fraud Ops with KPIs flying out of it.
   Phone (frame PNG + screen) stays dark in every concept (product shot);
   flying cards are token-driven and adapt to the active concept. */
body[data-page="sol-antifraud"] .sol-hero,
body[data-page="sol-forecast"] .sol-hero { overflow: hidden; }
.fph-stage { position: relative; width: 100%; max-width: 580px; margin-inline: auto; display: flex; align-items: center; justify-content: center; }
.fph-glow { position: absolute; width: 84%; height: 74%; top: 5%; left: 50%; transform: translateX(-50%); background: radial-gradient(60% 60% at 50% 42%, color-mix(in srgb, var(--accent-2) 36%, transparent), transparent 72%); filter: blur(54px); opacity: .55; pointer-events: none; }
/* device: real iPhone frame PNG laid over a live (blurred) screen; the clip
   crops the lower body (it runs off the hero) and fades it softly at the foot */
.fph-clip { position: relative; width: 100%; height: 540px; display: flex; justify-content: center; align-items: flex-start; padding-top: 4px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 87%, transparent 100%); mask-image: linear-gradient(180deg, #000 87%, transparent 100%); }
.fph-phone { position: relative; width: min(394px, 96%); aspect-ratio: 1419 / 2796; flex: 0 0 auto; }
.fph-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; filter: drop-shadow(0 42px 62px rgba(0,0,0,.5)) drop-shadow(0 14px 24px rgba(0,0,0,.42)); }
/* screen fills the transparent window of the frame (measured insets, ~1% bleed under bezel) */
.fph-screen { position: absolute; top: 3.1%; left: 7.7%; right: 7.8%; bottom: 3.1%; border-radius: 8.5% / 4.4%; overflow: hidden; z-index: 2; background: radial-gradient(120% 80% at 50% -8%, #10131a 0%, #070a0f 52%, #04050a 100%); --s-text: #EAEDF2; --s-muted: #8B919C; --s-faint: #5A606B; --s-line: rgba(255,255,255,.07); --s-tile: rgba(255,255,255,.035); }
.fph-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 9; background: linear-gradient(133deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.04) 16%, transparent 34%); mix-blend-mode: screen; }
/* running UI sits behind the glass, intentionally out of focus */
.fph-app { position: absolute; inset: 0; padding: 15px 17px 17px; display: flex; flex-direction: column; gap: 13px; filter: blur(3px); opacity: .9; transform: scale(1.02); }
.fph-status { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--s-text); margin-top: -2px; }
.fph-status .sig { display: flex; align-items: flex-end; gap: 2px; height: 9px; }
.fph-status .sig i { width: 2.5px; background: var(--s-text); border-radius: 1px; opacity: .85; }
.fph-status .sig i:nth-child(1) { height: 4px; } .fph-status .sig i:nth-child(2) { height: 6px; } .fph-status .sig i:nth-child(3) { height: 8px; } .fph-status .sig i:nth-child(4) { height: 10px; opacity: .4; }
.fph-head { display: flex; align-items: center; gap: 9px; margin-top: 22px; }
.fph-mark { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; display: grid; place-items: center; background: linear-gradient(150deg, color-mix(in srgb, var(--accent-2) 80%, #000), color-mix(in srgb, var(--accent) 70%, #000)); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.fph-mark svg { width: 15px; height: 15px; color: #fff; }
.fph-head .ttl { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--s-text); letter-spacing: -.01em; line-height: 1; }
.fph-head .ttl small { display: block; font-family: var(--font-mono); font-weight: 400; font-size: 9.5px; letter-spacing: .06em; color: var(--s-muted); margin-top: 3px; }
.fph-head .env { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--s-muted); letter-spacing: .02em; }
.fph-ctx { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: color-mix(in srgb, var(--accent-2) 80%, var(--s-muted)); padding-bottom: 11px; border-bottom: 1px solid var(--s-line); }
.fph-dec { display: flex; align-items: center; gap: 14px; background: var(--s-tile); border: 1px solid var(--s-line); border-radius: 16px; padding: 14px; }
.fph-dial { width: 62px; height: 62px; flex: 0 0 auto; }
.fph-dial .trk { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 7; }
.fph-dial .val { fill: none; stroke: var(--accent-2); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 165; transform: rotate(-90deg); transform-origin: center; }
.fph-dial-c { position: relative; }
.fph-dial-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--s-text); }
.fph-dec-r { min-width: 0; }
.fph-verdict { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--pos); display: flex; align-items: center; gap: 6px; }
.fph-verdict svg { width: 14px; height: 14px; }
.fph-dec-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--s-muted); margin-top: 4px; }
.fph-dec-sub b { color: var(--accent-2); font-weight: 500; }
.fph-dec-id { font-family: var(--font-mono); font-size: 9.5px; color: var(--s-faint); margin-top: 5px; }
.fph-feed { display: flex; flex-direction: column; gap: 2px; margin-top: 1px; }
.fph-feed-h { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-faint); margin-bottom: 5px; }
.fph-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--s-line); font-family: var(--font-mono); font-size: 11px; }
.fph-row .mer { color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fph-row .amt { color: var(--s-text); }
.fph-row .chip { font-size: 9.5px; padding: 2px 7px; border-radius: 6px; }
.fph-row .chip.g { color: var(--pos); background: color-mix(in srgb, var(--pos) 15%, transparent); }
.fph-row .chip.r { color: var(--neg); background: color-mix(in srgb, var(--neg) 16%, transparent); }
.fph-row.blk .amt { color: var(--neg); }
.fph-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 9.5px; color: var(--s-faint); padding-top: 10px; border-top: 1px solid var(--s-line); }
.fph-foot .live { display: flex; align-items: center; gap: 6px; color: var(--accent-2); }
.fph-foot .live i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); animation: fphPulse 2s var(--ease) infinite; }
@keyframes fphPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
/* flying KPI cards */
.fph-card { position: absolute; z-index: 7; animation: fphFloat var(--d, 6s) var(--ease) infinite; animation-delay: var(--delay, 0s); }
.fph-panel { display: flex; align-items: center; gap: 15px; padding: 18px 22px; border-radius: 20px; background: color-mix(in srgb, var(--surface-solid) 80%, transparent); border: 1px solid var(--border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 36px 64px -24px rgba(0,0,0,.78), 0 12px 26px -14px rgba(0,0,0,.55), 0 0 30px -8px color-mix(in srgb, var(--accent-2) 22%, transparent); transform: rotate(var(--r, 0deg)); }
.fph-panel > span:not(.fph-ic) { display: flex; flex-direction: column; min-width: 0; }
.fph-ic { width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto; display: grid; place-items: center; background: color-mix(in srgb, var(--accent-2) 14%, transparent); color: var(--accent-2); box-shadow: 0 0 18px -5px color-mix(in srgb, var(--accent-2) 44%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent-2) 20%, transparent) inset; }
.fph-ic svg { width: 23px; height: 23px; }
.fph-ic.v { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-soft); box-shadow: 0 0 18px -5px color-mix(in srgb, var(--accent) 44%, transparent), 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent) inset; }
.fph-v { font-family: var(--font-display); font-weight: 600; font-size: 42px; line-height: 1; letter-spacing: -.035em; color: var(--text); white-space: nowrap; }
.fph-v.cy { color: var(--accent-2); }
.fph-l { font-family: var(--font-mono); font-size: 12px; letter-spacing: .02em; color: var(--text-faint); margin-top: 7px; white-space: nowrap; }
.fph-card.c1 { top: 11%; left: -7%; --r: -3deg; --d: 6.5s; }
.fph-card.c2 { top: 37%; right: -8%; --r: 3.5deg; --d: 7.4s; --delay: -2.2s; }
.fph-card.c3 { top: 58%; left: -5%; --r: -2deg; --d: 8s; --delay: -1.1s; }
@keyframes fphFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .fph-card { animation: none; } .fph-foot .live i { animation: none; } }
@media (max-width: 540px) {
  .fph-clip { height: 452px; }
  .fph-card.c1 { left: -3%; } .fph-card.c2 { right: -3%; } .fph-card.c3 { left: -2%; }
  .fph-v { font-size: 31px; }
  .fph-ic { width: 40px; height: 40px; }
}

/* ===== Loyalty app — personalization living in a membership app ===== */
.loy-stage { display: grid; grid-template-columns: 1.55fr 1fr; gap: 48px; align-items: center; margin-top: 6px; }
@media (max-width: 980px) { .loy-stage { grid-template-columns: 1fr; gap: 40px; } }
.loy-phones { display: flex; gap: 20px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.loy-phone { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1 1 250px; min-width: 0; max-width: 316px; }
.loy-glow { width: 80%; height: 70%; top: 8%; opacity: .45; }
.loy-phone .fph-phone { width: 100%; }
.loy-cap { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); text-align: center; }
.fph-app.loy { filter: none; opacity: 1; transform: none; gap: 10px; padding: 26px 18px 15px; }
.fph-app.loy .fph-status { margin-top: 0; padding: 0 3px; }
.loy-bar { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
.loy-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--s-text); }
.loy-mk { width: 22px; height: 22px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #0B0712; background: linear-gradient(150deg, var(--accent-soft), var(--accent-2)); }
.loy-pts { font-family: var(--font-mono); font-size: 11px; color: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--s-line)); border-radius: 999px; padding: 5px 10px; }
.loy-offer { position: relative; border-radius: 18px; padding: 15px 16px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--s-line)); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 26%, #0c0c14), #0c0c14 72%); }
.loy-offer::after { content: ""; position: absolute; right: -34px; top: -34px; width: 128px; height: 128px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 70%); pointer-events: none; }
.loy-badge { position: relative; display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); border-radius: 999px; padding: 4px 9px; }
.loy-big { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: -.01em; margin-top: 11px; line-height: 1.05; color: var(--s-text); }
.loy-big em { font-style: normal; color: var(--accent-soft); }
.loy-big b { color: var(--accent-2); font-weight: 700; }
.loy-desc { position: relative; font-family: var(--font-body); font-weight: 300; font-size: 11.5px; color: #cfcad8; margin: 8px 0 0; line-height: 1.45; max-width: 235px; }
.loy-chips { position: relative; display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.loy-chips span { font-family: var(--font-mono); font-size: 9px; color: var(--s-muted); border: 1px solid var(--s-line); border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,.03); }
.loy-list { display: flex; flex-direction: column; gap: 7px; }
.loy-item { display: flex; align-items: center; gap: 10px; border: 1px solid var(--s-line); border-radius: 13px; padding: 8px; background: var(--s-tile); }
.loy-ph { position: relative; width: 44px; height: 44px; flex: none; border-radius: 9px; overflow: hidden; border: 1px solid var(--s-line); background-size: cover; background-position: center; }
.loy-off { position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 8px; font-weight: 600; color: #0B0712; background: var(--accent-2); padding: 1px 4px; border-radius: 0 0 6px 0; }
.loy-meta { min-width: 0; flex: 1; }
.loy-nm { font-family: var(--font-display); font-weight: 500; font-size: 12.5px; color: var(--s-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loy-tag { font-family: var(--font-mono); font-size: 9px; color: var(--s-faint); margin-top: 2px; }
.loy-prices { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
.loy-new { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--accent-soft); font-variant-numeric: tabular-nums; }
.loy-old { font-family: var(--font-mono); font-size: 10px; color: var(--s-faint); text-decoration: line-through; }
.loy-add { margin-left: auto; width: 30px; height: 30px; flex: none; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--s-line)); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.loy-qr { margin-top: auto; display: flex; align-items: center; gap: 12px; border: 1px solid var(--s-line); border-radius: 14px; padding: 11px; background: var(--s-tile); }
.loy-qrcode { width: 46px; height: 46px; flex: none; border-radius: 9px; background: #0d0d15; border: 1px solid var(--s-line); padding: 6px; }
.loy-qrcode svg { width: 100%; height: 100%; display: block; }
.loy-qt { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--s-text); }
.loy-qs { font-family: var(--font-mono); font-size: 9.5px; color: var(--s-muted); margin-top: 2px; }
.loy-copy { min-width: 0; }
.loy-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.loy-pt-h { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--text); }
.loy-pt-ic { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent-2) 13%, transparent); color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent-2) 24%, transparent); box-shadow: 0 0 18px -7px color-mix(in srgb, var(--accent-2) 50%, transparent); }
.loy-pt-ic svg { width: 18px; height: 18px; }
.loy-pt-b { font-family: var(--font-body); font-weight: 300; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); margin: 9px 0 0 48px; }
@media (max-width: 540px) { .loy-pt-b { margin-left: 0; } .loy-pt-h { font-size: 16px; } }
/* phone A — favorites row + CTA */
.loy-fav { display: flex; align-items: center; gap: 10px; border: 1px solid var(--s-line); border-radius: 14px; padding: 9px 11px; background: var(--s-tile); }
.loy-fav-ic { width: 32px; height: 32px; flex: none; border-radius: 9px; display: grid; place-items: center; font-size: 15px; color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.loy-fav-tx { min-width: 0; }
.loy-fav-t { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--s-text); }
.loy-fav-s { font-family: var(--font-body); font-weight: 300; font-size: 10.5px; color: var(--s-muted); margin-top: 2px; line-height: 1.35; }
.loy-fav-go { margin-left: auto; align-self: flex-start; font-family: var(--font-mono); font-size: 9px; color: var(--accent-2); white-space: nowrap; }
.loy-cta { margin-top: 13px; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: #0B0712; background: linear-gradient(90deg, var(--accent-soft), var(--accent-2)); border-radius: 12px; padding: 11px; box-shadow: 0 14px 28px -16px var(--accent); }
/* phone B — fulfilment toggle, location, list head */
.fph-app.loy.loy-b { gap: 9px; }
.loy-seg { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--s-line); border-radius: 11px; background: rgba(255,255,255,.03); align-self: flex-start; }
.loy-seg button { font-family: var(--font-mono); font-size: 10.5px; color: var(--s-muted); background: transparent; border: 0; cursor: pointer; padding: 7px 12px; border-radius: 8px; }
.loy-seg button[aria-pressed="true"] { color: #0B0712; background: var(--accent-soft); font-weight: 600; }
.loy-loc { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10.5px; color: var(--s-muted); border: 1px solid var(--s-line); border-radius: 11px; padding: 9px 11px; }
.loy-pin { color: var(--accent-2); }
.loy-chev { margin-left: auto; color: var(--s-faint); }
.loy-listhead { display: flex; align-items: center; justify-content: space-between; }
.loy-lt { font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--s-text); }
.loy-lt em { font-style: normal; color: var(--accent-soft); }
.loy-lc { font-family: var(--font-mono); font-size: 10px; color: var(--s-faint); }
.loy-plist { display: flex; flex-direction: column; gap: 6px; }
.loy-b .loy-item { padding: 7px; gap: 9px; }
.loy-b .loy-ph { width: 40px; height: 40px; }
.loy-b .loy-nm { font-size: 12px; }
/* loyalty reveal animation — armed only when JS + motion allowed (no-JS keeps all visible) */
[data-loy-badge] { transition: opacity .5s var(--ease); }
.loy-chips span { transition: opacity .4s var(--ease), transform .4s var(--ease); }
.loy-plist .loy-item { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.loy-armed [data-loy-badge] { opacity: 0; }
.loy-armed .loy-chips span { opacity: 0; transform: translateY(6px); }
.loy-armed .loy-plist .loy-item { opacity: 0; transform: translateX(10px); }
[data-loy-badge].on { opacity: 1; }
.loy-chips span.on { opacity: 1; transform: none; }
.loy-plist .loy-item.on { opacity: 1; transform: none; }

/* AI Agents hero — crisp in-focus "agent at work" phone screen (data-aph) */
.fph-app.aph { filter: blur(3px); opacity: .92; transform: scale(1.02); gap: 11px; padding: 15px 17px 15px; }
.fph-app.aph .fph-foot { margin-top: 14px; }
.aph-dec { display: flex; align-items: center; gap: 14px; background: var(--s-tile); border: 1px solid var(--s-line); border-radius: 16px; padding: 13px 14px; }
.aph-dial-c { position: relative; flex: 0 0 auto; }
.aph-dial { width: 60px; height: 60px; display: block; }
.aph-dial .trk { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 7; }
.aph-dial .val { fill: none; stroke: var(--accent-2); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 201; stroke-dashoffset: 201; transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset .6s var(--ease), stroke .4s var(--ease); }
.aph-dec.done .aph-dial .val { stroke: var(--pos); }
.aph-dial-n { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--s-text); }
.aph-dec-r { min-width: 0; }
.aph-verdict { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .02em; color: var(--accent-2); display: flex; align-items: center; gap: 6px; transition: color .4s var(--ease); }
.aph-dec.done .aph-verdict { color: var(--pos); }
.aph-dec-sub { font-family: var(--font-mono); font-size: 10.5px; color: var(--s-muted); margin-top: 4px; }
.aph-dec-id { font-family: var(--font-mono); font-size: 9.5px; color: var(--s-faint); margin-top: 5px; }
.aph-goal { font-family: var(--font-body); font-size: 12px; line-height: 1.45; color: var(--s-text); background: var(--s-tile); border: 1px solid var(--s-line); border-radius: 12px; padding: 9px 12px; }
.aph-plan { display: flex; flex-direction: column; gap: 2px; }
.aph-step { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--s-line); font-family: var(--font-mono); font-size: 11px; color: var(--s-faint); opacity: .5; transition: opacity .35s var(--ease), color .35s var(--ease); }
.aph-step:first-child { border-top: none; }
.aph-step .tk { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--s-line); position: relative; flex: 0 0 auto; transition: background .3s var(--ease), border-color .3s var(--ease); }
.aph-step .tool { color: var(--s-faint); font-size: 10px; }
.aph-step.run { opacity: 1; color: var(--s-muted); }
.aph-step.run .tk { border-color: var(--accent-2); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 60%, transparent); animation: aphPulse 1.3s var(--ease) infinite; }
.aph-step.done { opacity: 1; color: var(--s-text); }
.aph-step.done .tool { color: color-mix(in srgb, var(--accent-2) 75%, var(--s-muted)); }
.aph-step.done .tk { background: var(--accent-2); border-color: var(--accent-2); }
.aph-step.done .tk::after { content: ""; position: absolute; left: 5px; top: 2.4px; width: 3px; height: 6.5px; border: solid #04060b; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.aph-feed { display: flex; flex-direction: column; }
.aph-feed-h { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-faint); margin-bottom: 4px; }
.aph-frows { display: flex; flex-direction: column; }
.aph-frow { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--s-line); font-family: var(--font-mono); font-size: 11px; }
.aph-frow .g { color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aph-frow .ch { color: var(--s-faint); font-size: 9.5px; }
.aph-frow .st { font-size: 9.5px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.aph-frow .st.ok { color: var(--pos); background: color-mix(in srgb, var(--pos) 15%, transparent); }
.aph-frow .st.gate { color: var(--accent-soft); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.aph-frow.in { animation: aphRowIn .45s var(--ease); }
@keyframes aphRowIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes aphPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .aph-step.run .tk { animation: none; } .aph-frow.in { animation: none; } }

/* Smart Search hero — crisp in-focus "ask your knowledge" phone screen (data-sp) */
.fph-app.sph { filter: blur(3px); opacity: .92; transform: scale(1.02); gap: 10px; padding: 15px 17px 15px; }
.fph-app.sph .fph-foot { margin-top: 12px; }
.sph-bar { display: flex; align-items: center; gap: 8px; background: var(--s-tile); border: 1px solid var(--s-line); border-radius: 12px; padding: 10px 12px; min-height: 38px; }
.sph-bar svg { width: 16px; height: 16px; color: var(--accent-2); flex: 0 0 auto; }
.sph-q { font-family: var(--font-body); font-size: 12.5px; color: var(--s-text); line-height: 1.3; }
.sph-caret { display: inline-block; width: 1.5px; height: 13px; background: var(--accent-2); margin-left: 1px; vertical-align: -2px; animation: sphBlink 1s steps(1) infinite; }
@keyframes sphBlink { 50% { opacity: 0; } }
.sph-src { display: flex; flex-direction: column; }
.sph-src-h { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-faint); margin-bottom: 4px; }
.sph-srow { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 7px 0; border-top: 1px solid var(--s-line); font-family: var(--font-mono); font-size: 11px; opacity: 0; transform: translateY(-5px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.sph-srow.in { opacity: 1; transform: none; }
.sph-srow .sc { color: var(--accent-2); font-size: 10px; padding: 2px 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent-2) 14%, transparent); }
.sph-srow .ti { color: var(--s-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sph-srow .ty { color: var(--s-faint); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.sph-ans-wrap { display: flex; flex-direction: column; gap: 6px; }
.sph-ans-h { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--s-faint); }
.sph-grounded { text-transform: none; letter-spacing: .02em; color: var(--pos); font-size: 9.5px; opacity: 0; transition: opacity .4s var(--ease); }
.sph-grounded.in { opacity: 1; }
.sph-ans { font-family: var(--font-body); font-size: 12px; line-height: 1.5; color: var(--s-text); }
.sph-ans .w { opacity: 0; transition: opacity .25s var(--ease); }
.sph-ans .w.in { opacity: 1; }
.sph-ans .cite { color: var(--accent-2); font-family: var(--font-mono); font-size: 10px; opacity: 0; transition: opacity .25s var(--ease); padding: 0 1px; }
.sph-ans .cite.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .sph-caret { animation: none; } .sph-srow, .sph-ans .w, .sph-ans .cite, .sph-grounded { transition: none; } }

/* Recommender hero — crisp in-focus "personalization engine" phone screen (data-rp) */
/* recommender hero: keep the live phone screen softly blurred (frosted backdrop) —
   the crisp metric callouts float over it; bezel + reflection stay sharp.
   scale(1.04) lets the blur fill to the screen edge (no soft inset gap). */
.fph-app.rph { filter: blur(3px); opacity: .92; transform: scale(1.02); gap: 9px; padding: 15px 17px 15px; }
.fph-app.rph .fph-foot { margin-top: 12px; }
.fph-app.rph .fph-head .env { transition: color .4s var(--ease); }
.fph-app.rph .fph-head .env.warm { color: var(--accent-2); }
/* session context + real-time signal chips */
.rph-sess { display: flex; flex-direction: column; gap: 7px; background: var(--s-tile); border: 1px solid var(--s-line); border-radius: 12px; padding: 9px 11px; }
.rph-sess-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 10px; }
.rph-sess-h span:first-child { color: var(--accent-2); }
.rph-sess-h span:last-child { color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rph-sig { display: flex; flex-wrap: wrap; gap: 5px; }
.rph-sig .chip { font-family: var(--font-mono); font-size: 9px; letter-spacing: .02em; color: var(--s-muted); padding: 2px 7px; border-radius: 6px; background: rgba(255,255,255,.045); border: 1px solid var(--s-line); opacity: 0; transform: translateY(-4px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.rph-sig .chip.in { opacity: 1; transform: none; }
/* three pipeline stages */
.rph-pipe { display: flex; flex-direction: column; }
.rph-stage { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--s-line); font-family: var(--font-mono); font-size: 11px; color: var(--s-faint); opacity: .5; transition: opacity .35s var(--ease), color .35s var(--ease); }
.rph-stage:first-child { border-top: none; }
.rph-dot { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--s-line); flex: 0 0 auto; transition: background .3s var(--ease), border-color .3s var(--ease); }
.rph-st-l { color: var(--s-muted); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rph-st-l small { color: var(--s-faint); font-size: 9px; letter-spacing: .04em; }
.rph-st-v { color: var(--s-faint); font-size: 10px; white-space: nowrap; }
.rph-stage.run { opacity: 1; }
.rph-stage.run .rph-dot { border-color: var(--accent-2); animation: rphPulse 1.3s var(--ease) infinite; }
.rph-stage.run .rph-st-v { color: var(--accent-2); }
.rph-stage.done { opacity: 1; color: var(--s-text); }
.rph-stage.done .rph-dot { background: var(--accent-2); border-color: var(--accent-2); position: relative; }
.rph-stage.done .rph-dot::after { content: ""; position: absolute; left: 4.2px; top: 1.8px; width: 2.6px; height: 5.6px; border: solid #04060b; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
/* ranked recommendation list with score bars (scores decrease down the list) */
.rph-list { display: flex; flex-direction: column; gap: 2px; }
.rph-rec { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 9px; padding: 6px 0; border-top: 1px solid var(--s-line); opacity: 0; transform: translateY(-5px); transition: opacity .35s var(--ease), transform .4s var(--ease); }
.rph-rec:first-child { border-top: none; }
.rph-rec.in { opacity: 1; transform: none; }
.rph-rec.drop { opacity: 0; transform: translateY(-4px); }
.rph-rec-m { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rph-rec-n { font-family: var(--font-mono); font-size: 10.5px; color: var(--s-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rph-rec-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; }
.rph-rec-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent-2); transition: width .55s var(--ease); }
.rph-rec-s { font-family: var(--font-mono); font-size: 10px; color: var(--s-muted); flex: 0 0 auto; }
.rph-rec.hot .rph-rec-n { color: var(--pos); }
.rph-rec.hot .rph-rec-bar i { background: var(--pos); }
.rph-rec.hot .rph-rec-s { color: var(--pos); }
/* online A/B readout */
.rph-ab { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px 10px; }
.rph-ab-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--s-faint); grid-column: 1 / -1; }
.rph-ab-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; }
.rph-ab-fill { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--pos); transition: width .7s var(--ease); }
.rph-ab-v { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: -.01em; color: var(--pos); white-space: nowrap; }
@keyframes rphPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) {
  .rph-stage.run .rph-dot { animation: none; }
  .rph-sig .chip, .rph-rec, .rph-rec-bar i, .rph-ab-fill { transition: none; }
}

/* signature: fraud-ops dashboard (Inside the decision) — MacBook-screen window */
.fd-stage { position: relative; padding: 8px; }
.fd-stage::before { content: ""; position: absolute; inset: -8% -4% 2%; background: radial-gradient(56% 54% at 50% 30%, color-mix(in srgb, var(--accent-2) 24%, transparent), transparent 72%); filter: blur(54px); z-index: 0; pointer-events: none; }
.fd-win { position: relative; z-index: 1; width: min(1200px, 100%); aspect-ratio: 16 / 10; min-height: 700px; margin: 0 auto; display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--accent-2) 14%, var(--border)); border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--bg-deep) 90%, var(--accent-2) 10%); color: var(--text); box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px color-mix(in srgb, var(--accent-2) 8%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent); }
.fd-chrome { flex: 0 0 auto; display: flex; align-items: center; height: 36px; padding: 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent); }
.fd-lights { display: flex; gap: 8px; }
.fd-lights i { width: 11px; height: 11px; border-radius: 50%; }
.fd-lights i:nth-child(1) { background: #ff5f57; } .fd-lights i:nth-child(2) { background: #febc2e; } .fd-lights i:nth-child(3) { background: #28c840; }
.fd-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 16px 18px; gap: 14px; }
.fd-kpis { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fd-kpi { display: flex; flex-direction: column; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 13px; padding: 12px 14px 10px; background: color-mix(in srgb, var(--surface) 45%, transparent); }
.fd-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; }
.fd-kpi-k { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.fd-kpi-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-faint); flex: 0 0 auto; }
.fd-kpi-ic svg { width: 14px; height: 14px; }
.fd-kpi-v { font-family: var(--font-display); font-weight: 500; font-size: 26px; color: var(--text); margin-top: 9px; letter-spacing: -.02em; line-height: 1; }
.fd-kpi.cy .fd-kpi-v { color: var(--accent-2); }
.fd-kpi-sub { font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); margin-top: 5px; }
.fd-spark { margin-top: auto; padding-top: 10px; height: 32px; }
.fd-spark svg { width: 100%; height: 32px; overflow: visible; display: block; }
.fd-spark .ln { fill: none; stroke: var(--accent-2); stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent-2) 55%, transparent)); }
.fd-spark .ar { fill: color-mix(in srgb, var(--accent-2) 13%, transparent); stroke: none; }
.fd-spark .br { fill: color-mix(in srgb, var(--accent-2) 50%, transparent); }
.fd-spark .dot { fill: var(--accent-2); filter: drop-shadow(0 0 3px color-mix(in srgb, var(--accent-2) 60%, transparent)); }
.fd-spark .gs0 { stop-color: var(--accent-2); stop-opacity: .28; }
.fd-spark .gs1 { stop-color: var(--accent-2); stop-opacity: 0; }
.fd-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.62fr 1fr; gap: 16px; }
.fd-tbl { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.fd-th, .fd-row { display: grid; grid-template-columns: 88px minmax(0,1fr) 100px 74px 92px; gap: 12px; align-items: center; }
.fd-th { flex: 0 0 auto; padding: 0 14px 10px; border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.fd-feed { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.fd-row { height: 48px; padding: 0 14px; border-radius: 10px; position: relative; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-muted); animation: fdIn .5s var(--ease); }
@keyframes fdIn { from { opacity: 0; transform: translateY(-9px); } to { opacity: 1; transform: none; } }
.fd-row .tm { color: var(--text-faint); }
.fd-row .mer { font-family: var(--font-body); font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-row .amt { color: var(--text); }
.fd-chip { justify-self: start; font-family: var(--font-mono); font-size: 11.5px; padding: 3px 9px; border-radius: 8px; border: 1px solid transparent; }
.fd-chip.g { color: var(--pos); background: color-mix(in srgb, var(--pos) 11%, transparent); border-color: color-mix(in srgb, var(--pos) 32%, transparent); }
.fd-chip.a { color: var(--warn); background: color-mix(in srgb, var(--warn) 11%, transparent); border-color: color-mix(in srgb, var(--warn) 34%, transparent); }
.fd-chip.r { color: var(--neg); background: color-mix(in srgb, var(--neg) 12%, transparent); border-color: color-mix(in srgb, var(--neg) 40%, transparent); }
.fd-stat { font-size: 12px; }
.fd-stat.g { color: var(--pos); } .fd-stat.a { color: var(--warn); } .fd-stat.r { color: var(--neg); }
.fd-row.is-active { background: color-mix(in srgb, var(--accent-2) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-2) 38%, transparent), 0 0 24px -10px color-mix(in srgb, var(--accent-2) 55%, transparent); }
.fd-row.is-active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2.5px; border-radius: 2px; background: var(--accent-2); box-shadow: 0 0 8px var(--accent-2); }
.fd-case { min-height: 0; overflow: hidden; --vc: var(--neg); border: 1px solid color-mix(in srgb, var(--text) 9%, transparent); border-radius: 13px; padding: 16px; background: color-mix(in srgb, var(--surface) 40%, transparent); display: flex; flex-direction: column; gap: 10px; }
.fd-case-top { display: flex; align-items: center; justify-content: space-between; }
.fd-cid { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--text-faint); }
.fd-verdict { font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: .1em; color: var(--vc); padding: 4px 11px; border: 1px solid color-mix(in srgb, var(--vc) 50%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--vc) 9%, transparent); transition: color .35s var(--ease), border-color .35s var(--ease); }
.fd-sum { font-family: var(--font-display); font-weight: 500; font-size: 20px; color: var(--text); letter-spacing: -.01em; }
.fd-sum span { color: var(--text-faint); font-weight: 400; }
.fd-csub { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-top: -7px; }
.fd-lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.fd-sigs { display: flex; flex-direction: column; gap: 9px; margin-top: 5px; }
.fd-sig { display: grid; grid-template-columns: 1fr auto; gap: 7px 10px; align-items: baseline; }
.fd-sig .lab { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-muted); }
.fd-sig .val { font-family: var(--font-mono); font-size: 11.5px; text-align: right; }
.fd-sig .val.g { color: var(--pos); } .fd-sig .val.a { color: var(--warn); } .fd-sig .val.r { color: var(--neg); }
.fd-sig .bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.fd-sig .bar i { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .6s var(--ease); }
.fd-sig .bar i.g { background: var(--pos); } .fd-sig .bar i.a { background: var(--warn); } .fd-sig .bar i.r { background: var(--neg); }
.fd-case.show .fd-sig:nth-child(1) .bar i { width: var(--w); transition-delay: .1s; }
.fd-case.show .fd-sig:nth-child(2) .bar i { width: var(--w); transition-delay: .22s; }
.fd-case.show .fd-sig:nth-child(3) .bar i { width: var(--w); transition-delay: .34s; }
.fd-risk { display: flex; align-items: baseline; gap: 11px; }
.fd-risk-n { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--vc); transition: color .35s var(--ease); }
.fd-risk-t { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.fd-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.fd-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .03em; color: var(--text-muted); border: 1px solid color-mix(in srgb, var(--text) 14%, transparent); border-radius: 7px; padding: 3px 8px; }
.fd-ai { border: 1px solid color-mix(in srgb, var(--accent-2) 20%, var(--border)); background: color-mix(in srgb, var(--accent-2) 6%, transparent); border-radius: 11px; padding: 12px 13px; }
.fd-ai-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fd-ai-h svg { width: 13px; height: 13px; color: var(--accent-2); }
.fd-ai-h .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-2); }
.fd-ai p { margin: 0; font-family: var(--font-body); font-size: 12px; line-height: 1.45; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fd-acts { display: flex; gap: 9px; margin-top: auto; }
.fd-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-display); font-weight: 500; font-size: 12px; padding: 9px; border-radius: 9px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; transition: all .22s var(--ease); }
.fd-btn svg { width: 14px; height: 14px; }
.fd-btn.block { border-color: color-mix(in srgb, var(--neg) 50%, transparent); color: var(--neg); }
.fd-btn.block:hover { background: color-mix(in srgb, var(--neg) 12%, transparent); }
.fd-btn.appr { border-color: color-mix(in srgb, var(--pos) 46%, transparent); color: var(--pos); }
.fd-btn.appr:hover { background: color-mix(in srgb, var(--pos) 12%, transparent); }
.fd-btn.esc { border-color: color-mix(in srgb, var(--warn) 44%, transparent); color: var(--warn); }
.fd-btn.esc:hover { background: color-mix(in srgb, var(--warn) 12%, transparent); }
@media (max-width: 900px) {
  .fd-win { aspect-ratio: auto; min-height: 0; }
  .fd-grid { grid-template-columns: 1fr; }
  .fd-kpis { grid-template-columns: repeat(2, 1fr); }
  .fd-feed { overflow: visible; }
  .fd-case { overflow: visible; }
  .fd-acts { margin-top: 12px; }
}
@media (max-width: 560px) {
  .fd-th, .fd-row { grid-template-columns: 1fr 68px 70px; gap: 9px; }
  .fd-th .tm-h, .fd-row .tm, .fd-th .st-h, .fd-row .fd-stat { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fd-row { animation: none; } }

/* 3 · the real cost — live A/B (same stream, two engines) */
.af-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.af-ab-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-card); overflow: hidden; }
.af-ab-h { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--border); background: var(--bg-deep); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.af-ab-h .lost { font-family: var(--font-display); font-size: 18px; color: var(--neg); text-transform: none; letter-spacing: -.01em; }
.af-ab-h .lost small { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-faint); letter-spacing: .06em; margin-left: 5px; }
.af-ab-col.good .af-ab-h .lost { color: var(--pos); }
.af-ab-feed { padding: 4px 0; min-height: 234px; }
.af-ab-row { display: grid; grid-template-columns: 1fr 78px 104px; gap: 10px; align-items: center; padding: 9px 16px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,.04); animation: afcRowIn .4s var(--ease); }
.af-ab-row .a { color: var(--text); text-align: right; }
.af-ab-row .s { text-align: right; font-size: 11px; }
.af-ab-row.app .s { color: var(--pos); }
.af-ab-row.dec .s { color: var(--neg); }
.af-ab-row.falsepos { background: color-mix(in srgb, var(--neg) 10%, transparent); }
.af-cost-foot { margin-top: 18px; display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
.af-cost-foot b { font-family: var(--font-display); color: var(--pos); font-size: 15px; }
/* phones: collapse the two engines to one column and let scores/labels size to content (was clipping) */
@media (max-width: 600px) {
  .af-ab { grid-template-columns: 1fr; }
  .af-ab-row { grid-template-columns: 1fr auto auto; }
}

/* 4 · graph intelligence — investigation panel */
.af-inv { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.af-inv-graph { position: relative; background: var(--bg-deep); border-right: 1px solid var(--border); }
.af-inv-graph svg { width: 100%; height: auto; display: block; }
.afg-edge { stroke: var(--grid-line); stroke-width: 1; }
.afg-node { fill: var(--bg-elev); stroke: var(--border-strong); stroke-width: 1.5; }
.af-inv.caught .afg-good { animation: afgPulse 3s ease-in-out infinite; }
@keyframes afgPulse { 0%, 100% { stroke: color-mix(in srgb, var(--pos) 45%, var(--border-strong)); } 50% { stroke: var(--pos); } }
.afg-ring-node { transition: fill .5s var(--ease) .8s, stroke .5s var(--ease) .8s; }
.af-inv.caught .afg-ring-node { fill: color-mix(in srgb, var(--neg) 22%, var(--bg-elev)); stroke: var(--neg); }
.afg-ring-edge { stroke: var(--neg); stroke-width: 2; stroke-dasharray: 6 5; opacity: 0; }
.af-inv.caught .afg-ring-edge { animation: afgEdge 1s var(--ease) 1.1s forwards; }
@keyframes afgEdge { to { opacity: .9; } }
.afg-label { fill: var(--text-faint); font-family: var(--font-mono); font-size: 11px; opacity: 0; transition: opacity .5s var(--ease) 1.2s; }
.af-inv.caught .afg-label { opacity: 1; }
.af-inv-side { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.af-inv-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); }
.af-inv-tag { font-family: var(--font-display); font-weight: 500; font-size: 15px; color: var(--neg); }
.af-inv-members { display: flex; flex-direction: column; gap: 8px; }
.af-inv-member { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-family: var(--font-mono); opacity: 0; transform: translateX(8px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.af-inv-member.on { opacity: 1; transform: none; }
.af-inv-member .id { font-size: 12px; color: var(--text); }
.af-inv-member .amt { font-size: 12px; color: var(--neg); text-align: right; }
.af-inv-member .meta { grid-column: 1 / -1; font-size: 10px; color: var(--text-faint); }

/* Catch-the-ring — globe scan (mounted by js/anti-fraud.js into [data-af="inv"]) */
.af-globe { background:
  radial-gradient(42% 42% at 50% 50%, color-mix(in srgb, var(--accent-2) 13%, transparent), transparent 72%),
  radial-gradient(130% 130% at 50% 6%, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent 55%); }
/* ocean: brighter cyan core → deep edge = limb-darkening so the sphere reads 3D */
#glbOcean .o0 { stop-color: color-mix(in srgb, var(--accent-2) 16%, #161b22); }
#glbOcean .o1 { stop-color: #05060a; }
.glb-ocean { stroke: color-mix(in srgb, var(--accent-2) 22%, var(--border)); stroke-width: 1; }
.glb-land { fill: color-mix(in srgb, var(--text) 8%, #14171c); stroke: color-mix(in srgb, var(--text) 18%, transparent); stroke-width: .5; stroke-linejoin: round; }
.glb-grat { fill: none; stroke: color-mix(in srgb, var(--text) 7%, transparent); stroke-width: .5; }
.glb-atm { fill: none; stroke: color-mix(in srgb, var(--accent-2) 52%, transparent); stroke-width: 3; opacity: .7; filter: blur(7px) drop-shadow(0 0 18px color-mix(in srgb, var(--accent-2) 40%, transparent)); }
.glb-arc { fill: none; stroke: var(--accent-2); stroke-width: 2.2; stroke-linecap: round; opacity: 0; transition: opacity .45s var(--ease); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-2) 55%, transparent)); }
.glb-arc.on { opacity: .95; }
.glb-pt { opacity: 0; transition: opacity .4s var(--ease); }
.glb-pt.on { opacity: 1; }
.glb-dot { fill: color-mix(in srgb, var(--accent-2) 38%, var(--surface)); stroke: var(--accent-2); stroke-width: 1.8; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent-2) 75%, transparent)); }
.glb-dot.dim { fill: var(--surface); stroke: var(--border-strong); filter: none; }
.glb-lab { font-family: var(--font-mono); font-size: 10.5px; fill: var(--text); text-anchor: middle; paint-order: stroke; stroke: var(--bg-deep); stroke-width: 3px; }
.glb-ping { fill: none; stroke: var(--accent-2); stroke-width: 1.6; transform-box: fill-box; transform-origin: center; pointer-events: none; animation: glbPing 1.4s var(--ease) forwards; }
@keyframes glbPing { from { transform: scale(.4); opacity: .7; } to { transform: scale(7); opacity: 0; } }
.glb-scan-line { fill: none; stroke: url(#rgScanV); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent-2) 55%, transparent)); }
.glb-scan-glow { fill: none; stroke: url(#rgScanV); stroke-width: 14; stroke-linecap: round; }
#rgScanV .v0 { stop-color: var(--accent-2); stop-opacity: 0; }
#rgScanV .v1 { stop-color: var(--accent-2); stop-opacity: 1; }
@media (prefers-reduced-motion: reduce) { .glb-ping { animation: none; opacity: 0; } }

/* 5 · pipeline run monitor (DAG) */
.af-dag { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.af-dag-bar { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-deep); font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.af-dag-bar .ok { color: var(--pos); }
.af-dag-tasks { display: flex; align-items: stretch; gap: 0; padding: 22px 18px; overflow-x: auto; }
.af-task { position: relative; flex: 1 0 132px; min-width: 132px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; opacity: .45; transition: opacity .4s var(--ease), border-color .4s var(--ease); }
.af-task.done { opacity: 1; border-color: color-mix(in srgb, var(--pos) 30%, var(--border)); }
.af-task + .af-task { margin-left: 26px; }
.af-task + .af-task::before { content: ""; position: absolute; left: -26px; top: 50%; width: 26px; height: 2px; background: var(--border); }
.af-task .top { display: flex; justify-content: space-between; align-items: center; }
.af-task .nm { font-family: var(--font-display); font-weight: 500; font-size: 13px; color: var(--text); }
.af-task .tick { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; }
.af-task.done .tick { border-color: var(--pos); background: color-mix(in srgb, var(--pos) 15%, transparent); }
.af-task.done .tick::after { content: ""; width: 5px; height: 8px; border: solid var(--pos); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.af-task .dur { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.af-task.sched { border-style: dashed; }
.af-task.sched .tick { border-color: var(--accent-2); }
.af-task.sched.done .tick { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 15%, transparent); }
.af-task.sched.done .tick::after { border-color: var(--accent-2); }
.af-task.sched .dur { color: var(--accent-2); }

/* 6 · results dashboard — KPI tiles + one trend */
.af-dash { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.af-dash-bar { padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-deep); font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.af-dash-kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.af-kpi { padding: 22px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.af-kpi:last-child { border-right: none; }
.af-kpi .n { font-family: var(--font-display); font-weight: 500; font-size: 34px; letter-spacing: -.03em; color: var(--text); line-height: 1; }
.af-kpi .n.cy { color: var(--accent-2); }
.af-kpi .n.pos { color: var(--pos); }
.af-kpi .n .u { font-size: 16px; color: var(--text-faint); margin-left: 3px; letter-spacing: 0; }
.af-kpi .l { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-top: 8px; }
.af-dash-chart { padding: 18px 20px 22px; }
.af-dash-chart-h { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin-bottom: 14px; }
.af-dash-chart-h b { font-family: var(--font-display); font-size: 15px; color: var(--accent-2); }
@media (max-width: 680px) { .af-dash-kpis { grid-template-columns: repeat(2, 1fr); } }

/* 7 · audit / decision log */
.af-audit { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.af-audit-bar { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-deep); font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.af-arow { display: grid; grid-template-columns: 78px 1.4fr 88px 1.3fr 110px; gap: 14px; align-items: center; padding: 12px 18px; font-family: var(--font-mono); font-size: 12px; }
.af-ahead { color: var(--text-faint); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid var(--border); }
.af-arow:not(.af-ahead) { border-bottom: 1px solid rgba(255,255,255,.04); color: var(--text-muted); }
.af-arow .dc { font-weight: 500; }
.af-arow .dc.block { color: var(--neg); }
.af-arow .dc.review { color: var(--warn); }
.af-arow .dc.clear { color: var(--pos); }
.af-arow .rc { display: flex; gap: 5px; flex-wrap: wrap; }
.af-arow .rc span { font-size: 9.5px; color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.af-arow .exp { color: var(--text-faint); }

/* anti-fraud responsive */
@media (max-width: 1080px) {
  .af-dag-tasks { flex-direction: column; }
  .af-task + .af-task { margin-left: 0; margin-top: 26px; }
  .af-task + .af-task::before { left: 50%; top: -26px; width: 2px; height: 26px; }
}
@media (max-width: 1024px) {
  .af-cost { grid-template-columns: 1fr; }
  .af-inv { grid-template-columns: 1fr; }
  .af-inv-graph { border-right: none; border-bottom: 1px solid var(--border); }
  .af-dash-grid { grid-template-columns: 1fr; }
  .af-widget { border-right: none; border-bottom: 1px solid var(--border); }
  .af-arow { grid-template-columns: 70px 1fr 80px; }
  .af-arow .rc, .af-arow .exp, .af-ahead span:nth-child(4), .af-ahead span:nth-child(5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .af-ab-row, .af-inv-member, .afg-label, .af-task, .fd-sig .bar i { transition: none !important; }
  .fd-row { animation: none !important; }
  .af-inv-member { opacity: 1; transform: none; }
  .af-inv.caught .afg-label { opacity: 1; }
  .af-inv .afg-good { animation: none; }
}

/* graph insight punchline */
.af-inv-insight { font-family: var(--font-body); font-size: 12.5px; line-height: 1.5; color: var(--text-muted); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 2px; }

/* 9 · proof result */
.af-proof { max-width: 820px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 32px 36px; text-align: center; }
.af-proof-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft); }
.af-proof-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 24px 0; }
.af-proof-m { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }
.af-proof-m:not(:first-child) { border-left: 1px solid var(--border); }
.af-proof-m .v { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; color: var(--text); line-height: 1; }
.af-proof-m .v.cy { color: var(--accent-2); }
.af-proof-m .v .u { font-size: 18px; color: var(--text-faint); margin-left: 2px; }
.af-proof-m .l { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); line-height: 1.4; }
.af-proof-nda { font-family: var(--font-body); font-size: 13px; color: var(--text-faint); margin: 0; border-top: 1px solid var(--border); padding-top: 18px; }
@media (max-width: 680px) { .af-proof-metrics { grid-template-columns: 1fr; gap: 18px; } .af-proof-m { padding: 0; } .af-proof-m:not(:first-child) { border-left: none; } .af-proof { padding: 26px 22px; } }

/* ============================================================
   RECOMMENDER — ENGINE REVEAL (reng-) — cinematic "how it works"
   CINEMATIC composition that RESTS COMPOSED. The stage is a CENTERED relative
   box (reference geometry). The real iPhone (PNG bezel from the hero,
   .fph-phone/.fph-screen/.fph-frame) starts CENTERED, the user taps the Store
   app, the cold "?" feed appears, then the phone SLIDES LEFT (negative
   translateX) to REVEAL the engine sitting to the RIGHT of center: Stage A
   "this shopper" profile staggers in, Stage B "shoppers like them" candidates +
   scanline highlight the high co-buy picks, the picks FLY LEFTWARD back into the
   phone and the "?" cells resolve into the shelf. Plays ONCE, then RESTS on the
   composed state — the phone stays slid LEFT (filled shelf) AND both engine
   panels (Stage A over Stage B) stay fully visible to its right; nothing fades,
   the phone does NOT slide back. Choreography in js/recommender.js
   (initEngineReveal) via data-phase on [data-reng].
   Tokens only; accent-2 (cyan) = running engine; pos (green) = selected.
   ============================================================ */
.reng-scene { position: relative; }

/* =========================================================================
   PHONE UI — realistic iOS interface (paths → ../img/...)
   NOTE: base .fph-phone/.fph-frame/.fph-screen rules live elsewhere in this
   file (shared with the hero phone) and are intentionally NOT redefined here;
   the engine-reveal phone is driven by the .reng-fph/.reng-screen overrides.
   ========================================================================= */

/* device-local dark scale + shared vars for both screens */
.reng-home, .reng-app {
  --scr-card:   #14151F;
  --scr-card-2: #1B1D29;
  --scr-panel:  #0E0F17;
  --scr-line:   rgba(255,255,255,.085);
  --scr-line2:  rgba(255,255,255,.16);
  --scr-faint:  #5A6076;
  --scr-muted:  #9AA0B4;
  --scr-body:   #E6E8EF;
  --scr-strong: #F6F7FA;
  --scr-shadow: 0 8px 18px -8px rgba(0,0,0,.65);
}

/* ---- soft wallpaper ---- */
.reng-home {
  position: absolute; inset: 0;
  padding: 13% 16px 16px;
  border-radius: inherit; overflow: hidden;
  opacity: 1;
  transition: opacity .4s var(--ease);
  background:
    radial-gradient(95% 60% at 22% 6%,  color-mix(in srgb, var(--accent)   34%, transparent), transparent 60%),
    radial-gradient(110% 70% at 88% 24%, color-mix(in srgb, var(--accent-2) 26%, transparent), transparent 62%),
    radial-gradient(120% 80% at 50% 108%, #050610, transparent 70%),
    linear-gradient(168deg, #11121C 0%, #0A0B12 52%, #07080E 100%);
}

/* ---- status bar ---- */
.reng-statusbar {
  display: flex; justify-content: space-between; align-items: center;
  font: 600 12px/1 var(--font-body);
  color: var(--scr-strong);
  padding: 0 8px 18px;
  letter-spacing: .01em;
}
.reng-statusbar .sb-time { font-variant-numeric: tabular-nums; }
.reng-statusbar .sb-glyphs { display: inline-flex; align-items: center; gap: 6px; }
.reng-statusbar .sb-glyphs svg { display: block; }

/* ---- home app grid ---- */
.reng-icons {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 17px 12px;
  justify-items: center;
}
.reng-appcell {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 100%;
}
.reng-ic, .reng-store-ic {
  position: relative;
  width: 100%; max-width: 52px; aspect-ratio: 1;
  border-radius: 22%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--scr-shadow), inset 0 1px 0 rgba(255,255,255,.14);
  overflow: hidden;
}
.reng-ic::after, .reng-store-ic::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.18), transparent 42%);
  pointer-events: none;
}
.reng-ic svg, .reng-store-ic svg { position: relative; width: 52%; height: 52%; z-index: 1; }
.reng-iclabel {
  font: 500 9.5px/1.1 var(--font-body);
  color: rgba(246,247,250,.82);
  text-align: center; letter-spacing: .01em;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* canon app tiles — muted/dim tints for the dark canon, white glyphs */
.reng-ic.ic-camera   { background: linear-gradient(150deg, #24242E, #131319); }
.reng-ic.ic-messages { background: linear-gradient(150deg, #186B4D, #0C4734); }
.reng-ic.ic-music    { background: linear-gradient(150deg, #3A2D63, #221A3E); }
.reng-ic.ic-maps     { background: linear-gradient(150deg, #185C6E, #0C3A48); }
.reng-ic.ic-photos   { background: linear-gradient(150deg, #185C6E, #0C3A48); }
.reng-ic.ic-weather  { background: linear-gradient(150deg, #185C6E, #0C3A48); }
.reng-ic.ic-clock    { background: linear-gradient(150deg, #24242E, #131319); }
.reng-ic.ic-settings { background: linear-gradient(150deg, #24242E, #131319); }
.reng-ic.ic-wallet   { background: linear-gradient(150deg, #24242E, #131319); }
.reng-ic.ic-notes    { background: linear-gradient(150deg, #7C5C20, #4E3A13); }
.reng-ic.ic-mail     { background: linear-gradient(150deg, #3A2D63, #221A3E); }
.reng-ic.ic-health   { background: linear-gradient(150deg, #186B4D, #0C4734); }
.reng-ic.ic-calendar { background: linear-gradient(150deg, #7C5C20, #4E3A13); }
.reng-ic.ic-calendar svg { color: #fff; }
.reng-ic.ic-phone    { background: linear-gradient(150deg, #186B4D, #0C4734); }
.reng-ic.ic-safari   { background: linear-gradient(150deg, #185C6E, #0C3A48); }
.reng-ic.ic-safari svg { color: #fff; }

/* store app — highlighted hero icon */
.reng-store-cell { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.reng-store-ic {
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--accent-2)));
  box-shadow:
    var(--scr-shadow),
    inset 0 1px 0 rgba(255,255,255,.22),
    0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
}
.reng-store-ic svg { color: #fff; }
.reng-store-label { font: 500 9.5px/1.1 var(--font-body); color: rgba(246,247,250,.92); text-shadow: 0 1px 2px rgba(0,0,0,.5); }

/* tap affordance */
.reng-ripple {
  position: absolute; inset: -7px; border-radius: 30%;
  border: 2px solid color-mix(in srgb, var(--accent) 80%, #fff);
  opacity: 0; transform: scale(.4); pointer-events: none; z-index: 6;
}
.reng-finger {
  position: absolute; top: 38%; left: 50%; z-index: 20;
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(60% 60% at 38% 32%, rgba(255,255,255,.4), rgba(246,247,250,.12) 70%);
  border: 1.5px solid rgba(246,247,250,.5);
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
  opacity: 0; transform: translate(-50%, -50%);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}

/* ---- frosted dock ---- */
.reng-dock {
  position: absolute; left: 14px; right: 14px; bottom: 15px;
  border-radius: 26px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  align-items: center; gap: 14px; padding: 13px 16px;
  background: rgba(28,30,42,.55);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.reng-dock .reng-ic { max-width: 50px; }

/* ---- APP — "For you" feed ---- */
.reng-app {
  position: absolute; inset: 0;
  padding: 13% 14px 16px;
  border-radius: inherit; overflow: hidden;
  transform-origin: 50% 60%;
  opacity: 0; transform: scale(.93);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  background:
    radial-gradient(120% 60% at 50% -4%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 58%),
    linear-gradient(180deg, #0B0C13 0%, #07080E 100%);
}
.reng-app-head {
  display: flex; justify-content: space-between; align-items: center;
  margin: 4px 2px 14px;
}
.reng-app-title { font: 600 22px/1 var(--font-display); color: var(--scr-strong); letter-spacing: -.03em; }
.reng-app-sub {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 10px/1 var(--font-mono); color: var(--scr-muted);
  margin-top: 6px; letter-spacing: .02em;
}
.reng-app-sub::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--pos); box-shadow: 0 0 6px var(--pos);
}
.reng-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background:
    radial-gradient(70% 70% at 32% 28%, color-mix(in srgb, var(--accent-2) 70%, #fff), transparent 60%),
    linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 50%, var(--accent-2)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 8px rgba(0,0,0,.4);
  border: 1.5px solid rgba(255,255,255,.14);
}

.reng-app-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reng-cell { position: relative; aspect-ratio: .8; }

/* cold-start skeleton */
.reng-q {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  background: var(--scr-panel);
  border: 1px solid var(--scr-line);
  opacity: 1; transform: scale(1);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reng-q::before {
  content: ""; position: absolute; inset: 8px 8px 38px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.reng-q::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.07) 48%, transparent 66%);
  background-size: 220% 100%;
  animation: rengShimmer 1.6s linear infinite;
}
.reng-q i {
  position: absolute; left: 8px; right: 24px; bottom: 22px; height: 8px;
  border-radius: 4px; background: rgba(255,255,255,.06);
}
.reng-q i::after {
  content: ""; position: absolute; left: 0; right: 40%; top: 14px; height: 7px;
  border-radius: 4px; background: rgba(255,255,255,.04);
}
@keyframes rengShimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* resolved product card */
.reng-prod {
  position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, var(--scr-card), color-mix(in srgb, var(--scr-card) 70%, #000));
  border: 1px solid var(--scr-line);
  padding: 7px; display: flex; flex-direction: column; gap: 7px;
  box-shadow: 0 10px 24px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05);
  opacity: 0; transform: scale(.965) translateY(8px);
  transition: opacity .62s var(--ease), transform .62s var(--ease);
}
.reng-thumb {
  position: relative; flex: 1; border-radius: 9px;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: #0E0F17;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.reng-thumb .reng-save {
  position: absolute; top: 6px; right: 6px;
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,9,14,.5);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
}
.reng-thumb .reng-save svg { width: 12px; height: 12px; }
.reng-prodfoot { display: flex; flex-direction: column; gap: 3px; padding: 0 1px 1px; }
.reng-pname { font: 500 12px/1.15 var(--font-body); color: var(--scr-body); letter-spacing: -.01em; }
.reng-pmeta {
  display: inline-flex; align-items: center; gap: 5px;
  font: 500 10.5px/1 var(--font-mono); color: var(--scr-muted);
}
.reng-pmeta .reng-price { color: var(--scr-strong); }
.reng-pmeta .reng-star { display: inline-flex; align-items: center; gap: 2px; color: var(--scr-muted); }
.reng-pmeta .reng-star svg { width: 10px; height: 10px; color: #F5B638; }
.reng-pmeta .reng-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--scr-faint); }

/* dock-arrival glint when a ranked pick lands on a feed cell */
.reng-cell{ --land:0; }
.reng-cell .reng-land{
  position:absolute; inset:-3px; border-radius:16px; z-index:6; pointer-events:none; opacity:0;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-2) 75%, transparent), 0 0 26px color-mix(in srgb, var(--accent-2) 45%, transparent);
}
.reng-cell.is-landing .reng-land{ animation:rengLand .8s var(--ease) 1; }
@keyframes rengLand{ 0%{opacity:0;transform:scale(.86);} 28%{opacity:1;} 100%{opacity:0;transform:scale(1.04);} }

/* =========================================================================
   ENGINE (left column) — two stacked stages
   ========================================================================= */
.reng-stage { position: relative; max-width: 940px; height: clamp(720px, 60vw, 800px); margin: 0 auto; --reng-slide: clamp(180px, 24vw, 300px); }

.reng-ph-pos { position: absolute; top: 0; left: 50%; width: min(330px, 100%); transform: translateX(-50%); z-index: 3; display: flex; justify-content: center; align-items: flex-start; }
.reng-glow { position: absolute; width: 86%; height: 72%; top: 8%; left: 50%; transform: translateX(-50%); background: radial-gradient(60% 60% at 50% 42%, color-mix(in srgb, var(--accent-2) 30%, transparent), transparent 72%); filter: blur(54px); opacity: .5; pointer-events: none; z-index: 0; transition: opacity .5s var(--ease); }
.reng-fph { position: relative; width: min(330px, 100%); aspect-ratio: 1419 / 2796; flex: 0 0 auto; z-index: 1; will-change: transform; transition: transform .68s var(--ease-spring); }
.reng-screen { position: absolute; top: 3.1%; left: 7.7%; right: 7.8%; bottom: 3.1%; border-radius: 8.5% / 4.4%; overflow: hidden; clip-path: inset(0 round 8.5% / 4.4%); z-index: 2; background: #08080D; transition: filter .6s var(--ease); }
.reng-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(133deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.03) 18%, transparent 36%); mix-blend-mode: screen; z-index: 40; }

.reng-engine { position: absolute; top: 0; left: calc(50% - 24px); z-index: 1; width: clamp(360px, 46vw, 460px); display: flex; flex-direction: column; gap: 14px; }
.reng-estage { position: relative; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--bg-elev) 88%, var(--bg-deep))); box-shadow: var(--shadow-card), 0 24px 60px -30px color-mix(in srgb, #000 80%, transparent); }
.reng-ehead { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 13px; }
.reng-estep { display: flex; align-items: center; gap: 9px; font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }
.reng-estep .rule { width: 28px; height: 1px; background: linear-gradient(90deg, var(--accent-2), transparent); flex: none; }
.reng-ehl { font: 600 16px/1.1 var(--font-display); color: var(--text); letter-spacing: -.02em; margin-top: 7px; }
.reng-ehint { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }

/* STAGE A — profile rows */
.reng-eprofile { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), filter .7s var(--ease); }
.reng-erows { position:relative; padding-left:6px; display: flex; flex-direction: column; gap: 9px; }
.reng-erow { position:relative; z-index:1; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reng-erow-ic {
  position:relative; width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--c, var(--accent-2));
  background:
    radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--c, var(--accent-2)) 22%, transparent), color-mix(in srgb, var(--c, var(--accent-2)) 7%, transparent)),
    rgba(255,255,255,.02);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c, var(--accent-2)) 45%, transparent) inset,
    0 2px 8px -4px color-mix(in srgb, var(--c, var(--accent-2)) 60%, transparent);
}
.reng-erow-ic::after{
  content:""; position:absolute; inset:-4px; border-radius:13px;
  background:radial-gradient(circle, color-mix(in srgb, var(--c, var(--accent-2)) 60%, transparent), transparent 68%);
  opacity:0; z-index:-1; transition:opacity .35s var(--ease);
}
.reng-erow.lit .reng-erow-ic::after{ opacity:1; }
.reng-erow.lit.settled .reng-erow-ic::after{ opacity:0; transition:opacity 1s var(--ease); }
.reng-erow-ic svg path,.reng-erow-ic svg circle,.reng-erow-ic svg line{ vector-effect:non-scaling-stroke; }
.js-reng .reng-erow-ic svg .draw{ stroke-dasharray:var(--len); stroke-dashoffset:var(--len); }
.reng-erow.lit .reng-erow-ic svg .draw{ stroke-dashoffset:0; transition:stroke-dashoffset .62s var(--ease); }
.reng-erow-l { font: 500 13px/1.2 var(--font-body); color: var(--text); }
.reng-erow-v { font: 400 11px/1 var(--font-mono); color: var(--text-muted); margin-top: 3px; }
.reng-erow-v .caret{ display:inline-block; width:1px; height:1em; margin-left:1px; background:var(--c, var(--accent-2)); vertical-align:-2px; opacity:0; }
.reng-erow.lit .reng-erow-v .caret{ opacity:1; animation:rengBlink .8s steps(1) infinite; }
.reng-erow.lit.typed .reng-erow-v .caret{ opacity:0; animation:none; }
@keyframes rengBlink{ 0%,100%{opacity:1} 50%{opacity:0} }

/* TWEAK 1 — signal-bus hairline + travelling pulse REMOVED.
   The reading-history rows read clean, with no connecting line under the icons. */

/* Stage A scan-line */
.reng-escan{
  position:absolute; left:-6px; right:-6px; top:0; height:2px; z-index:6; opacity:0; pointer-events:none;
}
.reng-escan::before{
  content:""; position:absolute; inset:0; filter:blur(.4px);
  background:linear-gradient(90deg, transparent, rgba(124,58,237,.85) 28%, rgba(167,139,250,.95) 50%, rgba(6,182,212,.85) 72%, transparent);
}
.reng-escan::after{
  content:""; position:absolute; left:8%; right:8%; top:-9px; height:20px; filter:blur(4px);
  background:linear-gradient(180deg, rgba(124,58,237,.18), transparent);
}
.js-reng .reng-erow-l,.js-reng .reng-erow-v{ opacity:0; }
.js-reng .reng-erow-l{ transform:translateX(8px); }
.js-reng .reng-erow-ic{ opacity:0; transform:scale(.82); }
.reng-erow.lit .reng-erow-ic{ opacity:1; transform:scale(1); transition:opacity .4s var(--ease), transform .55s var(--ease-spring); }
.reng-erow.lit .reng-erow-l{ opacity:1; transform:none; transition:opacity .42s var(--ease) .08s, transform .55s var(--ease) .08s; }
.reng-erow.lit .reng-erow-v{ opacity:1; transition:opacity .3s var(--ease) .1s; }

/* connective pulse A → B */
.reng-flow{
  position:absolute; left:50%; top:0; width:3px; height:46px; border-radius:3px;
  transform:translate(-50%,0); z-index:8; opacity:0; pointer-events:none;
  background:linear-gradient(180deg, transparent, var(--accent-soft) 45%, var(--accent-2) 80%, transparent);
  box-shadow:0 0 12px 2px rgba(124,58,237,.6);
}
.reng-flow.run{ animation:rengFlowAB 700ms var(--ease) 1 forwards; }
@keyframes rengFlowAB{
  0%{ opacity:0; transform:translate(-50%,-30px) scaleY(.6); }
  20%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,60px) scaleY(1.1); }
}

/* compute grid behind engine */
.reng-grid{
  position:absolute; inset:-6% -4%; z-index:0; pointer-events:none; opacity:.12;
  background-image:
    linear-gradient(rgba(124,58,237,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(6,182,212,.42) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  mask-image:radial-gradient(70% 60% at 50% 40%, #000, transparent 78%);
  transition:opacity .8s var(--ease);
}
.reng-scene[data-phase="match"] .reng-grid,
.reng-scene[data-phase="rank"] .reng-grid,
.reng-scene[data-phase="fly"] .reng-grid{ opacity:.26; }
.reng-scene[data-phase="filled"] .reng-grid{ opacity:.16; }

/* =========================================================================
   STAGE B — RANKED RAIL (the variant core)
   A ranked list of co-buy candidates that sit on a vertical rank rail; the
   top-N picks extract IN RANK ORDER along the rail and dock into the feed.
   When a pick leaves, the list CONDENSES (rows below slide up) — no holes.
   ========================================================================= */
.reng-ematch { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), filter .7s var(--ease); }

/* the rail + scanned candidate area */
.reng-rail-area { position: relative; padding-left: 30px; }
/* vertical rank rail */
.reng-rail{
  position:absolute; left:13px; top:4px; bottom:4px; width:2px; border-radius:2px; z-index:0;
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 55%, transparent), color-mix(in srgb, var(--accent) 38%, transparent) 60%, rgba(255,255,255,.05));
}
.reng-rail::after{
  content:""; position:absolute; inset:-1px 0; left:-1px; width:4px; border-radius:3px;
  background:linear-gradient(180deg, var(--accent-2), var(--accent-soft));
  filter:blur(2px); opacity:0; transition:opacity .7s var(--ease);
}
.reng-ematch.rail-on .reng-rail::after{ opacity:.55; }
/* carriage: the glowing puck that rides the rail to mark the active extraction */
.reng-carriage{
  position:absolute; left:8px; width:12px; height:12px; border-radius:50%; z-index:3; pointer-events:none;
  top:0; opacity:0;
  background:radial-gradient(circle at 38% 32%, #fff, var(--accent-soft) 55%, var(--accent) 100%);
  box-shadow:0 0 14px 3px color-mix(in srgb, var(--accent-soft) 70%, transparent);
  transition:top .5s var(--ease-spring), opacity .3s var(--ease);
}

/* Stage A horizontal scanline reused as the rank-rail sweep over candidates */
.reng-scanline { position: absolute; left: -4px; right: -4px; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-2), transparent); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--accent-2) 35%, transparent); z-index: 5; opacity: 0; }

/* candidate list — flex column; height transitions allow smooth condense */
.reng-cand-list{ position:relative; display:flex; flex-direction:column; gap:8px; }
.reng-cand{
  position:relative; display:flex; align-items:center; gap:10px;
  border-radius:12px; border:1px solid var(--border); background:var(--surface);
  padding:7px 9px 7px 8px; overflow:hidden;
  opacity:.4; transform:translateY(8px);
  transition:opacity .5s var(--ease), transform .55s var(--ease),
             box-shadow .4s var(--ease), border-color .4s var(--ease),
             margin .55s var(--ease-spring), max-height .55s var(--ease), padding .4s var(--ease);
  max-height:80px;
}
/* rank chip on the rail */
.reng-rankno{
  position:absolute; left:-22px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font:600 10px/1 var(--font-mono); color:var(--text-faint);
  background:var(--bg-elev); border:1px solid var(--border); z-index:2;
  transition:color .4s var(--ease), border-color .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.reng-cand.is-pick .reng-rankno{ color:#fff; border-color:transparent;
  background:linear-gradient(150deg, var(--accent-2), var(--accent)); box-shadow:0 0 10px -1px color-mix(in srgb, var(--accent-2) 70%, transparent); }
.reng-cthumb{
  width:42px; height:42px; flex:none; border-radius:9px;
  background-size:contain; background-position:center; background-repeat:no-repeat; background-color:var(--bg-deep);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.reng-cmeta{ flex:1; min-width:0; }
.reng-cname { font: 500 12px/1.15 var(--font-body); color: var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.reng-cname.dim { color: var(--text-muted); }
.reng-cbar{ position:relative; margin-top:5px; height:4px; border-radius:3px; background:rgba(255,255,255,.07); overflow:hidden; }
.reng-cbar > i{ position:absolute; inset:0; right:auto; width:0%; border-radius:3px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  transition:width .7s var(--ease); }
.reng-cand.dimcand .reng-cbar > i{ background:linear-gradient(90deg, rgba(255,255,255,.18), rgba(255,255,255,.28)); }
.reng-cright{ flex:none; text-align:right; }
.reng-cbuy { font: 500 12px/1 var(--font-mono); color: var(--pos); }
.reng-cbuy.dim { color: var(--text-faint); }
.reng-clabel{ display:block; margin-top:3px; font:400 8.5px/1 var(--font-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }

/* picks get a steady highlight once locked */
.reng-cand.locked{ opacity:1; transform:none; border-color:color-mix(in srgb, var(--accent-2) 45%, var(--border)); box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-2) 45%, transparent), 0 0 18px -6px color-mix(in srgb, var(--accent-2) 45%, transparent); }
.reng-cand.lock{ animation:rengLock .7s var(--ease) 1; }
@keyframes rengLock{
  0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--accent-2) 0%, transparent); }
  35%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 55%, transparent), 0 0 26px color-mix(in srgb, var(--accent-2) 55%, transparent); }
  100%{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-2) 45%, transparent), 0 0 18px -6px color-mix(in srgb, var(--accent-2) 45%, transparent); }
}

/* extraction: the row blanks into a "dispatched" slot, then collapses (condense) */
.reng-cand.dispatched{
  opacity:.55; border-style:dashed; border-color:color-mix(in srgb, var(--accent-2) 32%, var(--border));
  box-shadow:none;
}
.reng-cand.dispatched .reng-cthumb,
.reng-cand.dispatched .reng-cright{ opacity:.25; transition:opacity .35s var(--ease); }
.reng-cand.dispatched .reng-cname::after{ content:""; }
.reng-cand.dispatched .reng-disp{ opacity:1; }
.reng-disp{
  position:absolute; left:8px; right:8px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; gap:7px; opacity:0; transition:opacity .35s var(--ease) .15s;
  font:500 10.5px/1 var(--font-mono); letter-spacing:.04em; color:var(--accent-2); pointer-events:none;
}
.reng-disp svg{ flex:none; }
/* collapse the dispatched row to close the gap (the condense) */
.reng-cand.collapsed{
  max-height:0 !important; padding-top:0 !important; padding-bottom:0 !important;
  margin-top:-8px; opacity:0; border-width:0;
}

/* the flying ghost that rides the rail leftward to the phone */
.reng-ghost{
  position:fixed; z-index:60; pointer-events:none; border-radius:11px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--accent-2) 60%, var(--border));
  background:linear-gradient(180deg, var(--scr-card, #14151F), #0c0d15);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-2) 55%, transparent), 0 0 30px -4px color-mix(in srgb, var(--accent-2) 55%, transparent), 0 18px 40px -16px rgba(0,0,0,.8);
  display:flex; flex-direction:column;
  will-change:transform, opacity;
}
.reng-ghost .gh-thumb{ flex:1; background-size:cover; background-position:center; background-repeat:no-repeat; background-color:#0E0F17; }
.reng-ghost .gh-name{ font:500 10px/1.1 var(--font-body); color:var(--scr-body,#E6E8EF); padding:4px 6px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* a faint comet trail behind the ghost as it rides the rail */
.reng-ghost::before{
  content:""; position:absolute; right:100%; top:50%; transform:translateY(-50%);
  width:46px; height:3px; border-radius:3px; margin-right:-2px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent-2) 80%, transparent));
  filter:blur(1px); opacity:.85;
}

.reng-efoot { position:relative; overflow:visible; margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; font: 400 12px/1.3 var(--font-mono); color: var(--text-muted); }
.reng-tick { color: var(--pos); flex: none; }
.reng-efoot .reng-fcount{ color:var(--text); font-weight:500; }

/* ---- footer row ---- */
.reng-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1080px; margin: 32px auto 0; }
.reng-caption { font: 400 13.5px/1.5 var(--font-body); color: var(--text-muted); margin: 0; max-width: 720px; }
.reng-replay { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font: 500 13px var(--font-display); cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.reng-replay:hover { background: var(--surface-2); border-color: var(--text-faint); }
.reng-replay:active { transform: scale(.97); }
.reng-replay:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.reng-replay svg { transition: transform .5s var(--ease); }
.reng-replay:hover svg { transform: rotate(-180deg); }

/* =========================================================================
   PHASE CHOREOGRAPHY — idle→tap→open→cold→profile→match→rank→fly→filled
   ========================================================================= */
.reng-scene[data-phase="idle"] .reng-fph,
.reng-scene[data-phase="tap"] .reng-fph,
.reng-scene[data-phase="open"] .reng-fph,
.reng-scene[data-phase="cold"] .reng-fph { transform: translateX(0) scale(1); }
.reng-scene[data-phase="profile"] .reng-fph,
.reng-scene[data-phase="match"] .reng-fph,
.reng-scene[data-phase="rank"] .reng-fph,
.reng-scene[data-phase="fly"] .reng-fph,
.reng-scene[data-phase="filled"] .reng-fph { transform: translateX(calc(-1 * var(--reng-slide))) scale(.965); }

.reng-scene[data-phase="idle"] .reng-glow,
.reng-scene[data-phase="tap"] .reng-glow,
.reng-scene[data-phase="open"] .reng-glow,
.reng-scene[data-phase="cold"] .reng-glow { opacity: .55; }
.reng-scene[data-phase="profile"] .reng-glow,
.reng-scene[data-phase="match"] .reng-glow,
.reng-scene[data-phase="rank"] .reng-glow,
.reng-scene[data-phase="fly"] .reng-glow,
.reng-scene[data-phase="filled"] .reng-glow { opacity: .32; }

.reng-scene[data-phase="open"] .reng-home,
.reng-scene[data-phase="cold"] .reng-home,
.reng-scene[data-phase="profile"] .reng-home,
.reng-scene[data-phase="match"] .reng-home,
.reng-scene[data-phase="rank"] .reng-home,
.reng-scene[data-phase="fly"] .reng-home,
.reng-scene[data-phase="filled"] .reng-home { opacity: 0; pointer-events: none; }

.reng-scene[data-phase="open"] .reng-app,
.reng-scene[data-phase="cold"] .reng-app,
.reng-scene[data-phase="profile"] .reng-app,
.reng-scene[data-phase="match"] .reng-app,
.reng-scene[data-phase="rank"] .reng-app,
.reng-scene[data-phase="fly"] .reng-app,
.reng-scene[data-phase="filled"] .reng-app { opacity: 1; transform: scale(1); }

/* finger tap on the Store icon */
.reng-scene[data-phase="idle"] .reng-finger { opacity: 1; }
.reng-scene[data-phase="tap"] .reng-finger { opacity: 1; transform: translate(-50%, -50%) scale(.82); }
.reng-scene[data-phase="tap"] .reng-ripple { animation: rengTap .55s var(--ease) 1; }
@keyframes rengTap { 0% { opacity: .6; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.7); } }

/* =========================================================================
   TWEAK 2 — APP-OPEN FOCUS
   When the Store app is tapped/opening (tap → open), every OTHER home app
   and the dock dim back (lower opacity + desaturate + slight scale-down)
   while the tapped Store cell stays full-strength and leads the transition,
   so it reads like a real iOS app launch.
   ========================================================================= */
.reng-appcell, .reng-store-cell, .reng-dock {
  transition: opacity .42s var(--ease), filter .42s var(--ease), transform .42s var(--ease);
  transform-origin: center;
}
.reng-scene[data-phase="tap"] .reng-appcell,
.reng-scene[data-phase="open"] .reng-appcell,
.reng-scene[data-phase="tap"] .reng-dock,
.reng-scene[data-phase="open"] .reng-dock {
  opacity: .34; filter: saturate(.55) brightness(.82); transform: scale(.94);
}
/* the tapped Store cell leads — full strength, a touch forward */
.reng-scene[data-phase="tap"] .reng-store-cell { transform: scale(1.04); }
.reng-scene[data-phase="open"] .reng-store-cell { opacity: 1; filter: none; transform: scale(1.02); }

/* cold-start skeleton breathing until resolved */
.reng-scene[data-phase="cold"] .reng-q,
.reng-scene[data-phase="profile"] .reng-q,
.reng-scene[data-phase="match"] .reng-q,
.reng-scene[data-phase="rank"] .reng-q{ box-shadow:inset 0 0 0 1px var(--scr-line); }

/* STAGE A reveal */
.reng-scene[data-phase="profile"] .reng-eprofile,
.reng-scene[data-phase="match"] .reng-eprofile,
.reng-scene[data-phase="rank"] .reng-eprofile,
.reng-scene[data-phase="fly"] .reng-eprofile,
.reng-scene[data-phase="filled"] .reng-eprofile { opacity: 1; transform: none; }
.reng-scene[data-phase="profile"] .reng-erow,
.reng-scene[data-phase="match"] .reng-erow,
.reng-scene[data-phase="rank"] .reng-erow,
.reng-scene[data-phase="fly"] .reng-erow,
.reng-scene[data-phase="filled"] .reng-erow { opacity: 1; transform: none; }

/* STAGE B reveal */
.reng-scene[data-phase="match"] .reng-ematch,
.reng-scene[data-phase="rank"] .reng-ematch,
.reng-scene[data-phase="fly"] .reng-ematch,
.reng-scene[data-phase="filled"] .reng-ematch { opacity: 1; transform: none; }
.reng-scene[data-phase="match"] .reng-cand,
.reng-scene[data-phase="rank"] .reng-cand,
.reng-scene[data-phase="fly"] .reng-cand,
.reng-scene[data-phase="filled"] .reng-cand { opacity: 1; transform: translateY(0); }
.reng-scene[data-phase="match"] .reng-cand.dimcand,
.reng-scene[data-phase="rank"] .reng-cand.dimcand,
.reng-scene[data-phase="fly"] .reng-cand.dimcand,
.reng-scene[data-phase="filled"] .reng-cand.dimcand{ opacity:.5; }
/* candidates cascade in (rank order top→bottom) */
.reng-scene[data-phase="match"] .reng-cand:nth-child(1){ transition-delay:.05s; }
.reng-scene[data-phase="match"] .reng-cand:nth-child(2){ transition-delay:.12s; }
.reng-scene[data-phase="match"] .reng-cand:nth-child(3){ transition-delay:.19s; }
.reng-scene[data-phase="match"] .reng-cand:nth-child(4){ transition-delay:.26s; }
.reng-scene[data-phase="match"] .reng-cand:nth-child(5){ transition-delay:.33s; }
.reng-scene[data-phase="match"] .reng-cand:nth-child(6){ transition-delay:.40s; }
.reng-scene[data-phase="match"] .reng-scanline{ animation: rengScan 1.4s var(--ease) .15s 1 both; }
@keyframes rengScan { 0% { opacity: 0; top: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { opacity: 0; top: 100%; } }

/* =========================================================================
   DEPTH-OF-FIELD RACK FOCUS
   Only the active subject is crisp; everything else is blurred + dimmed.
   Focus racks: phone (idle→cold) → Stage A (profile) → Stage B (match/rank)
   → back to the phone (fly→filled).
   ========================================================================= */
.reng-scene[data-phase="idle"]  .reng-eprofile, .reng-scene[data-phase="tap"]   .reng-eprofile,
.reng-scene[data-phase="open"]  .reng-eprofile, .reng-scene[data-phase="cold"]  .reng-eprofile,
.reng-scene[data-phase="idle"]  .reng-ematch,   .reng-scene[data-phase="tap"]   .reng-ematch,
.reng-scene[data-phase="open"]  .reng-ematch,   .reng-scene[data-phase="cold"]  .reng-ematch{
  filter: blur(7px) saturate(.7);
}
.reng-scene[data-phase="profile"] .reng-screen{ filter: blur(4px) brightness(.82); }
.reng-scene[data-phase="profile"] .reng-ematch{ filter: blur(6px) saturate(.72); opacity:.5; }
.reng-scene[data-phase="profile"] .reng-eprofile{ filter:none; }
.reng-scene[data-phase="match"] .reng-screen,
.reng-scene[data-phase="rank"]  .reng-screen{ filter: blur(4px) brightness(.82); }
.reng-scene[data-phase="match"] .reng-eprofile,
.reng-scene[data-phase="rank"]  .reng-eprofile{ filter: blur(3px) brightness(.8); opacity:.7; }
.reng-scene[data-phase="match"] .reng-ematch,
.reng-scene[data-phase="rank"]  .reng-ematch{ filter:none; }
.reng-scene[data-phase="fly"] .reng-screen,
.reng-scene[data-phase="filled"] .reng-screen{ filter:none; }
.reng-scene[data-phase="fly"] .reng-eprofile{ filter: blur(4px) brightness(.78); opacity:.55; }
.reng-scene[data-phase="fly"] .reng-ematch{ filter: blur(2.5px) brightness(.88); opacity:.78; }
/* at rest (filled) the whole composed scene is crisp — right side de-blurred */
.reng-scene[data-phase="filled"] .reng-eprofile,
.reng-scene[data-phase="filled"] .reng-ematch{ filter: none; opacity: 1; }

/* glow tracks the phone's importance */
.reng-scene[data-phase="profile"] .reng-glow,
.reng-scene[data-phase="match"] .reng-glow,
.reng-scene[data-phase="rank"] .reng-glow{ opacity: .28; }
.reng-scene[data-phase="fly"] .reng-glow,
.reng-scene[data-phase="filled"] .reng-glow{ opacity: .5; }

/* success sweep across the feed at 'filled' */
.reng-shelf-sweep{ position:absolute; inset:0; z-index:30; pointer-events:none; opacity:0; border-radius:14px; overflow:hidden; }
.reng-shelf-sweep::before{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--pos) 30%, transparent), transparent);
  filter:blur(6px);
}
.reng-scene[data-phase="filled"] .reng-shelf-sweep.swept::before{ animation:rengSweep 1s var(--ease) 1; }
@keyframes rengSweep{ 0%{ left:-40%; } 100%{ left:110%; } }

/* =========================================================================
   RESPONSIVE — stacked ≤1024
   ========================================================================= */
@media (max-width: 1024px) {
  .reng-stage { position: static; height: auto; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 28px; --reng-slide: 0px; }
  .reng-ph-pos { position: static; left: auto; top: auto; transform: none; z-index: 1; order: 1; }
  .reng-engine { position: static; left: auto; top: auto; width: 100%; max-width: 480px; order: 2; }
  .reng-fph { width: min(320px, 86vw); transform: none !important; transition: none; filter: none !important; }
  .reng-foot { flex-direction: column; align-items: flex-start; max-width: 560px; }
  /* stacked layout: no depth-of-field — every panel stays crisp & full opacity */
  .reng-eprofile, .reng-ematch { opacity: 1 !important; transform: none; filter: none !important; }
  .reng-erow, .reng-cand { opacity: 1; transform: none; }
  .reng-cand.dimcand{ opacity:.55 !important; }
  .reng-erow-l, .reng-erow-v, .reng-erow-ic { opacity: 1 !important; transform: none !important; }
}
@media (max-width: 480px) {
  .reng-fph { width: min(280px, 90vw); }
}

@media (prefers-reduced-motion: reduce) {
  .reng-home, .reng-app, .reng-prod, .reng-q, .reng-eprofile,
  .reng-ematch, .reng-erow, .reng-cand, .reng-finger,
  .reng-fph, .reng-glow, .reng-carriage, .reng-cbar > i { transition: none !important; }
  .reng-scanline, .reng-ripple, .reng-q::after { animation: none !important; }
  .reng-escan, .reng-flow, .reng-shelf-sweep, .reng-carriage, .reng-ghost { display: none !important; }
  .reng-erow-l, .reng-erow-v, .reng-erow-ic { opacity: 1 !important; transform: none !important; }
  .reng-erow-ic svg .draw { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .reng-erow-ic::after { opacity: 0 !important; }
  .reng-erow-v .caret { display: none !important; }
  .reng-prod { filter: none !important; }
  .reng-grid { transition: none !important; }
  /* neutralise the depth-of-field rack focus — composed state is fully crisp */
  .reng-fph, .reng-eprofile, .reng-ematch, .reng-glow { filter: none !important; }
  /* jump straight to composed final state */
  .reng-home { opacity: 0; }
  .reng-app { opacity: 1; transform: none; }
  .reng-q { opacity: 0; }
  .reng-prod { opacity: 1; transform: none; }
  .reng-eprofile, .reng-ematch { opacity: 1 !important; transform: none; }
  .reng-erow { opacity: 1; transform: none; }
  .reng-cand { opacity: 1; transform: none; }
  .reng-cand.dimcand{ opacity:.5; }
  .reng-cand.locked{ box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-2) 45%, transparent); }
  .reng-finger { opacity: 0; }
  .reng-ematch .reng-rail::after { opacity:.55 !important; }
}

/* ============================================================
   RECOMMENDER — A/B EXPERIMENT (mbab/mbd/mbc) — fraud-console-style window
   ("Inside the decision" language): reuses .fd-stage/.fd-win/.fd-chrome/.fd-lights.
   Phases (cumulative): idle → sample → split → run → win (rests on win).
   accent-2 (cyan) = variant; accent-soft (violet) = control; pos (green) = win.
   Choreography in recommender.js (initABTest) via data-phase on [data-mbab].
   ============================================================ */
/* console window = reused .fd-win, content-driven height (not the 16/10 device box) */
.abx-win { width: min(1080px, 100%); aspect-ratio: auto; min-height: 0;
  --d-line: rgba(255,255,255,.09); --d-line2: rgba(255,255,255,.14);
  --d-faint: #7C8396; --d-muted: #A2A9BA; --d-body: #DfE2EA; --d-strong: #F5F6FA;
  --d-panel: rgba(255,255,255,.022); }

/* chrome row (reuses .fd-chrome + .fd-lights) → experiment path + live status */
.mbd-path { font: 500 12px/1 var(--font-mono); color: var(--d-muted); letter-spacing: .02em; margin-left: 14px; }
.mbd-path b { color: var(--d-body); font-weight: 500; }
.mbd-status { margin-left: auto; font: 500 11px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--d-faint); transition: color .5s var(--ease); display: inline-flex; align-items: center; gap: 7px; }
.mbd-status .mbd-spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid currentColor; border-right-color: transparent; opacity: 0; }
.mbab[data-phase="sample"] .mbd-spin, .mbab[data-phase="split"] .mbd-spin, .mbab[data-phase="run"] .mbd-spin { opacity: .8; animation: mbSpin 1s linear infinite; }
@keyframes mbSpin { to { transform: rotate(360deg); } }

/* dashboard fills the window below the chrome */
.mbd { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px 22px;
  background: radial-gradient(130% 120% at 82% -20%, rgba(6,182,212,.08), transparent 55%); }
.mbd-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1.92fr; gap: 26px; }
.mbd-label { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--d-muted); }

/* cohort panel */
.mbd-cohort { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mbd-pop { display: flex; flex-direction: column; gap: 4px; }
.mbd-pop-n { font: 600 30px/1 var(--font-display); color: var(--d-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mbd-pop-l { font: 400 11px/1 var(--font-mono); color: var(--d-muted); }
.mbd-dots { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; padding: 2px 0; }
.mbd-dot { width: 100%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.12); opacity: 0; transform: scale(.3); transition: opacity .45s var(--ease), transform .5s var(--ease-spring), background .55s var(--ease); }
.mbab:is([data-phase="sample"],[data-phase="split"],[data-phase="run"],[data-phase="win"]) .mbd-dot { opacity: 1; transform: none; }
.mbab:is([data-phase="split"],[data-phase="run"],[data-phase="win"]) .mbd-dot.a { background: var(--accent-soft); }
.mbab:is([data-phase="split"],[data-phase="run"],[data-phase="win"]) .mbd-dot.b { background: var(--accent-2); }
.mbd-assign { display: flex; flex-wrap: wrap; gap: 16px; margin-top: auto; }
.mbd-arm { display: inline-flex; align-items: center; gap: 7px; font: 400 12px/1.2 var(--font-mono); color: var(--d-muted); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mbd-arm b { color: var(--d-body); font-weight: 500; }
.mbab:is([data-phase="split"],[data-phase="run"],[data-phase="win"]) .mbd-arm { opacity: 1; transform: none; }
.mbab:is([data-phase="split"],[data-phase="run"],[data-phase="win"]) .mbd-arm:nth-child(2) { transition-delay: .1s; }
.mbd-sw { width: 13px; height: 13px; border-radius: 3px; flex: none; }
.mbd-sw.a { background: var(--accent-soft); }
.mbd-sw.b { background: var(--accent-2); }

/* chart panel */
.mbd-chart { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mbd-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.mbd-legend { display: inline-flex; gap: 16px; }
.mbd-leg { display: inline-flex; align-items: center; gap: 7px; font: 400 11px/1 var(--font-mono); color: var(--d-muted); }
.mbd-line { width: 18px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }
.mbd-line.b { border-top-color: var(--accent-2); }
.mbd-line.a { border-top-color: var(--accent-soft); border-top-style: dashed; }
.mbc { width: 100%; height: auto; display: block; overflow: visible; }
.mbd-xaxis { font: 400 11px/1 var(--font-mono); color: var(--d-muted); text-align: center; }

/* chart elements */
.mbc-grid { stroke: var(--d-line); stroke-width: 1; }
.mbc-axis { stroke: var(--d-line2); stroke-width: 1.2; }
.mbc-ylab { font: 500 9.5px/1 var(--font-mono); fill: var(--d-muted); text-anchor: end; }
.mbc-band { fill: var(--accent-2); opacity: 0; transition: opacity 1.1s var(--ease) .35s; }
.mbab:is([data-phase="run"],[data-phase="win"]) .mbc-band { opacity: .13; }
.mbc-line { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mbc-line.a { stroke: var(--accent-soft); stroke-dasharray: 5 5; opacity: 0; transition: opacity 1s var(--ease) .2s; }
.mbab:is([data-phase="run"],[data-phase="win"]) .mbc-line.a { opacity: .75; }
.mbc-line.b { stroke: var(--accent-2); stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-2) 55%, transparent)); transition: stroke-dashoffset 2.2s var(--ease); }
.mbab:is([data-phase="run"],[data-phase="win"]) .mbc-line.b { stroke-dashoffset: 0; }
.mbc-scrub { stroke: var(--accent-2); stroke-width: 1.4; opacity: 0; }
.mbab[data-phase="run"] .mbc-scrub { animation: mbScrub 2.2s var(--ease) 1 forwards; }
@keyframes mbScrub { 0% { transform: translateX(0); opacity: 0; } 8% { opacity: .85; } 88% { opacity: .85; } 100% { transform: translateX(462px); opacity: 0; } }
.mbc-sig { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .55s var(--ease), transform .55s var(--ease-spring); }
.mbab[data-phase="win"] .mbc-sig { opacity: 1; transform: none; }
.mbc-sig-ring { fill: none; stroke: var(--pos); stroke-width: 1.6; }
.mbc-sig-dot { fill: var(--pos); }
.mbab[data-phase="win"] .mbc-sig-ring { animation: mbPulse 1.8s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mbPulse { 0% { transform: scale(.7); opacity: .9; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
.mbc-sig-l { font: 500 11px/1 var(--font-mono); fill: var(--pos); }

/* KPI row */
.mbd-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mbd-kpi { border: 1px solid var(--d-line); border-radius: 12px; background: var(--d-panel); padding: 13px 15px 11px; display: flex; flex-direction: column; gap: 6px; }
.mbd-kpi-v { font: 600 26px/1 var(--font-display); color: var(--d-strong); letter-spacing: -.02em; font-variant-numeric: tabular-nums; transition: color .55s var(--ease); }
.mbab[data-phase="win"] .mbd-kpi-v { color: var(--pos); }
.mbd-kpi-l { font: 400 10.5px/1.2 var(--font-mono); color: var(--d-muted); }

/* verdict bar */
.mbd-verdict { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--pos) 32%, var(--d-line));
  background: color-mix(in srgb, var(--pos) 9%, transparent);
  font: 500 13px/1.3 var(--font-mono); color: var(--d-body); letter-spacing: .02em;
  opacity: 0; transform: translateY(7px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.mbab[data-phase="win"] .mbd-verdict { opacity: 1; transform: none; }
.mbd-verdict .mbd-check { width: 22px; height: 22px; border-radius: 50%; background: var(--pos); color: #04130d; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mbd-verdict b { color: var(--pos); font-weight: 600; }

/* responsive: stack cohort over chart, 2-col KPIs on small screens */
@media (max-width: 1024px) { .mbd-body { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 600px) { .mbd { padding: 16px; } .mbd-kpis { grid-template-columns: repeat(2, 1fr); } .mbd-path { display: none; } }

/* ---- footer: caption + replay ---- */
.mbab-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1000px; margin: 30px auto 0; }
.mbab-caption { font: 400 13.5px/1.5 var(--font-body); color: var(--text-muted); margin: 0; max-width: 720px; }
.mbab-replay { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); font: 500 13px var(--font-display); cursor: pointer; transition: background .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease); }
.mbab-replay:hover { background: var(--surface-2); border-color: var(--text-faint); }
.mbab-replay:active { transform: scale(.97); }
.mbab-replay:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.mbab-replay svg { transition: transform .5s var(--ease); }
.mbab-replay:hover svg { transform: rotate(-180deg); }
@media (max-width: 620px) { .mbab-foot { flex-direction: column; align-items: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  .mbd-dot, .mbd-arm, .mbc-line.a, .mbc-line.b, .mbc-band, .mbc-sig, .mbd-kpi-v, .mbd-verdict { transition: none !important; }
  .mbc-scrub, .mbc-sig-ring, .mbd-spin { animation: none !important; }
  .mbc-line.b { stroke-dashoffset: 0; }
}

/* ============================================================
   SMART SEARCH — "Ask your company" search + RAG console
   ============================================================ */
.ss-srch { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-card); }
.ss-bar { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--border); background: var(--bg-deep); }
.ss-dots { display: flex; gap: 7px; }
.ss-dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); opacity: .6; }
.ss-title { font-family: var(--font-display); font-weight: 500; font-size: 14px; color: var(--text); }
.ss-title b { color: var(--text-faint); font-weight: 400; }
.ss-scope { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
.ss-q { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.ss-q svg { flex: 0 0 auto; color: var(--accent-2); }
.ss-q-text { font-family: var(--font-display); font-size: clamp(15px, 1.7vw, 19px); color: var(--text); letter-spacing: -.01em; }
.ss-caret { display: inline-block; width: 2px; height: 19px; background: var(--accent-2); margin-left: 1px; animation: ssBlink 1s step-end infinite; }
@keyframes ssBlink { 50% { opacity: 0; } }
.ss-body { display: grid; grid-template-columns: 1fr 1.1fr; min-height: 300px; }
.ss-sources { border-right: 1px solid var(--border); padding: 16px 0; }
.ss-h { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-faint); padding: 0 18px 12px; display: flex; justify-content: space-between; align-items: center; }
.ss-src { padding: 11px 18px; border-top: 1px solid rgba(255,255,255,.04); opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.ss-src.in { opacity: 1; transform: none; }
.ss-src-top { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.ss-src-score { font-family: var(--font-mono); font-size: 11px; color: var(--accent-2); }
.ss-src-type { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; }
.ss-src-title { font-family: var(--font-display); font-size: 13px; color: var(--text); font-weight: 500; }
.ss-src-snip { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); line-height: 1.5; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-answer { padding: 16px 20px; background: var(--bg-deep); display: flex; flex-direction: column; }
.ss-grounded { font-family: var(--font-mono); font-size: 10px; color: var(--pos); text-transform: none; letter-spacing: .02em; opacity: 0; transition: opacity .4s var(--ease); }
.ss-grounded.in { opacity: 1; }
.ss-ans { font-family: var(--font-body); font-size: 14.5px; line-height: 1.65; color: var(--text); margin-top: 6px; }
.ss-ans .ss-w { opacity: 0; transition: opacity .25s var(--ease); }
.ss-ans .ss-w.in { opacity: 1; }
.ss-cite { display: inline-block; font-family: var(--font-mono); font-size: 10px; color: var(--accent-2); border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent); border-radius: 4px; padding: 0 4px; margin: 0 1px; transform: translateY(-1px); opacity: 0; transition: opacity .25s var(--ease); }
.ss-cite.in { opacity: 1; }
.ss-ans-foot { margin-top: auto; padding-top: 14px; font-family: var(--font-mono); font-size: 10.5px; color: var(--text-faint); display: flex; gap: 8px; align-items: center; opacity: 0; transition: opacity .4s var(--ease); }
.ss-ans-foot.in { opacity: 1; }
.ss-ans-foot .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); }
@media (max-width: 720px) { .ss-body { grid-template-columns: 1fr; } .ss-sources { border-right: none; border-bottom: 1px solid var(--border); } }
@media (prefers-reduced-motion: reduce) { .ss-src, .ss-ans .ss-w, .ss-cite { transition: none !important; } .ss-caret { animation: none; } }

/* ============================================================
   AI AGENTS — hero metrics, sticky "agent at work" demo, department directory
   ============================================================ */
/* hero: metrics promoted (right column) */
.ag-hm{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);backdrop-filter:blur(var(--card-blur));padding:8px 28px 20px}
.ag-hm-tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-soft);padding:16px 0;border-bottom:1px solid var(--border)}
.ag-hm-row{display:flex;align-items:baseline;gap:18px;padding:18px 0;border-bottom:1px solid var(--border)}
.ag-hm-row .v{font-family:var(--font-display);font-weight:500;font-size:46px;letter-spacing:-.03em;
  line-height:1;color:var(--text);flex:0 0 auto;min-width:120px;
  background:linear-gradient(135deg,var(--text),var(--accent-soft));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ag-hm-row .v.cy{background:none;-webkit-text-fill-color:initial;color:var(--accent-2)}
.ag-hm-row .l{font-family:var(--font-mono);font-size:11.5px;color:var(--text-faint);line-height:1.45}
.ag-hm-foot{font-family:var(--font-mono);font-size:10.5px;color:var(--text-faint);padding-top:14px}

/* signature: sticky agent-flow demo */
.agf{display:grid;grid-template-columns:1fr .82fr;gap:64px;align-items:start;margin-top:8px}
.agf-stage-wrap{position:sticky;top:104px;align-self:start}
.agf-stage{position:relative;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:26px 26px 22px;overflow:hidden}
.agf-stage::before{content:"";position:absolute;inset:-30% 30% auto -10%;height:320px;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent);
  filter:blur(40px);opacity:.5;pointer-events:none}
.agf-canvas{position:relative;display:flex;flex-direction:column;gap:14px}
.agf-cl{position:relative;opacity:.32;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)}
.agf-cl.lit{opacity:1;transform:none}
.agf-tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.agf-ticket{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 16px}
.agf-ticket p{margin:6px 0 0;font-family:var(--font-body);font-size:14.5px;color:var(--text);line-height:1.4}
.agf-core{display:flex;align-items:center;gap:13px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));border-radius:14px;padding:13px 16px}
.agf-core-ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid var(--border);color:var(--accent-soft)}
.agf-core-ic svg{width:21px;height:21px}
.agf-core b{font-family:var(--font-display);font-weight:500;font-size:15px;color:var(--text);display:block}
.agf-core i{font-family:var(--font-mono);font-size:11px;color:var(--text-faint);font-style:normal}
.agf-core.lit .agf-core-ic{animation:agfPulse 2.6s var(--ease) infinite}
@keyframes agfPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}50%{box-shadow:0 0 0 7px transparent}}
.agf-plan{display:flex;gap:8px;flex-wrap:wrap}
.agf-pl{display:flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);
  background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 11px}
.agf-pl i{font-style:normal;width:16px;height:16px;border-radius:5px;display:grid;place-items:center;font-size:9.5px;
  color:var(--accent-soft);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.agf-tools{display:flex;flex-direction:column;gap:8px}
.agf-tool{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-mono);font-size:12px;
  color:var(--text-muted);background:var(--bg-deep);border:1px solid var(--border);border-radius:9px;padding:9px 13px}
.agf-tool .tk{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--border-strong);position:relative;transition:border-color .3s var(--ease)}
.agf-tools.lit .agf-tool .tk{border-color:var(--pos)}
.agf-tools.lit .agf-tool .tk::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid var(--pos);border-width:0 1.7px 1.7px 0;transform:rotate(45deg)}
.agf-tool:nth-child(1){transition-delay:0s}
.agf-tools.lit .agf-tool:nth-child(2) .tk{transition-delay:.25s}
.agf-tools.lit .agf-tool:nth-child(3) .tk{transition-delay:.5s}
.agf-approve{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11.5px;color:var(--text-muted);
  background:color-mix(in srgb,var(--warn) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--warn) 32%,var(--border));
  border-radius:12px;padding:11px 14px}
.agf-approve b{color:var(--pos);margin-left:auto}
.agf-ap-ic{color:var(--warn);display:grid;place-items:center}
.agf-approve.lit{animation:agfApr 1.4s var(--ease)}
@keyframes agfApr{0%{border-color:var(--warn);background:color-mix(in srgb,var(--warn) 20%,var(--surface))}100%{}}
.agf-sys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.agf-sysit{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:11px 6px;transition:border-color .4s var(--ease),color .4s var(--ease)}
.agf-sysit i{display:block;font-style:normal;font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-top:4px}
.agf-sys.lit .agf-sysit{border-color:color-mix(in srgb,var(--pos) 38%,var(--border));color:var(--text)}
.agf-sys.lit .agf-sysit i{color:var(--pos)}
.agf-out{font-family:var(--font-mono);font-size:12.5px;color:var(--text-faint);border-top:1px solid var(--border);padding-top:14px}
.agf-out.lit{color:var(--pos)}
.agf-steps{display:flex;flex-direction:column}
.agf-step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;
  opacity:.4;transition:opacity .45s var(--ease)}
.agf-step.is-active{opacity:1}
.agf-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-soft);
  display:flex;align-items:center;gap:10px;margin-bottom:14px}
.agf-k::before{content:"";width:26px;height:1px;background:var(--accent-soft);opacity:.6;transition:width .45s var(--ease)}
.agf-step.is-active .agf-k::before{width:44px}
.agf-step h3{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;color:var(--text);line-height:1.1}
.agf-step p{margin-top:14px;font-size:15.5px;line-height:1.6;color:var(--text-muted);max-width:42ch}

/* department directory (master-detail) */
.agt{display:grid;grid-template-columns:248px 1fr;background:var(--bg-elev);border:1px solid var(--border);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-card);overflow:hidden;min-height:352px}
.agt-rail{display:flex;flex-direction:column;gap:2px;padding:10px;background:var(--bg-deep);border-right:1px solid var(--border)}
.agt-row{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;cursor:pointer;text-align:left;
  font-family:var(--font-display);font-weight:500;font-size:14.5px;color:var(--text-muted);
  background:transparent;border:1px solid transparent;position:relative;transition:color .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease)}
.agt-row:hover{color:var(--text);background:var(--surface)}
.agt-row.on{color:var(--text);background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 26%,var(--border))}
.agt-row.on::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--accent)}
.agt-ric{flex:0 0 auto;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 11%,transparent);color:var(--accent-soft);transition:background .22s var(--ease)}
.agt-ric svg{width:17px;height:17px}
.agt-row.on .agt-ric{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.agt-detail{position:relative;padding:32px 36px;display:flex;flex-direction:column;overflow:hidden}
.agt-detail::before{content:"";position:absolute;inset:-44% -10% auto 38%;height:300px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent);filter:blur(46px);opacity:.55}
.agt-detail.swap{animation:agtFade .34s var(--ease)}
@keyframes agtFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.agt-d-ic{position:relative;width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);border:1px solid var(--border);color:var(--accent-soft);margin-bottom:17px}
.agt-d-ic svg{width:26px;height:26px}
.agt-detail h4{position:relative;font-family:var(--font-display);font-weight:500;font-size:24px;letter-spacing:-.02em;color:var(--text)}
.agt-d-p{position:relative;margin-top:10px;font-size:15px;line-height:1.6;color:var(--text-muted);max-width:52ch}
.agt-d-tasks{position:relative;margin-top:auto;padding-top:22px;display:grid;grid-template-columns:1fr 1fr;gap:11px 26px}
.agt-d-tl{grid-column:1/-1;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);margin-bottom:2px}
.agt-d-task{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-muted)}
.agt-d-task svg{flex:0 0 auto;width:15px;height:15px;color:var(--accent-2)}

@media (max-width:1024px){
  .agf{grid-template-columns:1fr;gap:32px}
  .agf-stage-wrap{position:static}
  .agf-step{min-height:0;opacity:1;margin-bottom:14px}
  .agf-cl{opacity:1;transform:none}
}
@media (max-width:760px){.agt{grid-template-columns:1fr}.agt-rail{flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border)}.agt-row{white-space:nowrap}.agt-row.on::before{display:none}.agt-d-tasks{grid-template-columns:1fr}}
@media (prefers-reduced-motion: reduce){.agf-cl{opacity:1;transform:none}.agf-core.lit .agf-core-ic{animation:none}.agt-detail.swap{animation:none}}

/* ---- The challenge: before / after ---- */
.agc{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.agc-col{position:relative;border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px 26px;background:var(--surface);overflow:hidden}
.agc-col.after{border-color:color-mix(in srgb,var(--accent) 28%,var(--border));background:color-mix(in srgb,var(--accent) 6%,var(--surface))}
.agc-col.after::before{content:"";position:absolute;inset:-40% 30% auto -10%;height:240px;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 18%,transparent),transparent);filter:blur(44px);opacity:.6}
.agc-tag{position:relative;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.agc-col.after .agc-tag{color:var(--accent-soft)}
.agc-h{position:relative;font-family:var(--font-display);font-weight:500;font-size:19px;letter-spacing:-.01em;color:var(--text);margin:8px 0 14px}
.agc-row{position:relative;display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-top:1px solid var(--border);font-size:14px;line-height:1.45}
.agc-col.before .agc-row{color:var(--text-faint)}
.agc-col.after .agc-row{color:var(--text-muted)}
.agc-mk{flex:0 0 auto;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;margin-top:1px}
.agc-mk svg{width:13px;height:13px}
.agc-col.before .agc-mk{color:var(--text-faint);background:color-mix(in srgb,var(--text-faint) 14%,transparent)}
.agc-col.after .agc-mk{color:var(--pos);background:color-mix(in srgb,var(--pos) 14%,transparent)}
@media (max-width:760px){.agc{grid-template-columns:1fr}}

/* ---- How we deliver: connected process cards ---- */
.agp{position:relative}
.agp-nodes{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.agp-node{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-card);padding:22px 22px 24px;opacity:.45;transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s var(--ease)}
.agp-node.lit{opacity:1;transform:none;border-color:color-mix(in srgb,var(--accent) 24%,var(--border))}
.agp-dot{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid var(--border);color:var(--text-faint);
  transition:color .45s var(--ease),background .45s var(--ease)}
.agp-node.lit .agp-dot{color:var(--accent-soft);background:color-mix(in srgb,var(--accent) 16%,transparent)}
.agp-dot svg{width:22px;height:22px}
.agp-node h4{font-family:var(--font-display);font-weight:500;font-size:16.5px;color:var(--text);letter-spacing:-.01em}
.agp-node p{margin-top:9px;font-size:13.5px;line-height:1.55;color:var(--text-muted)}
.agp-node:not(:last-child)::after{content:"";position:absolute;right:-18px;top:43px;width:18px;height:2px;background:var(--border);z-index:2;transition:background .5s var(--ease)}
.agp-node.lit:not(:last-child)::after{background:linear-gradient(90deg,var(--accent),var(--accent-2))}
@media (max-width:900px){.agp-nodes{grid-template-columns:1fr 1fr;gap:16px}.agp-node::after{display:none}}
@media (max-width:560px){.agp-nodes{grid-template-columns:1fr}}

/* ---- What we build: bento ---- */
.agb{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.agb-tile{--tc:var(--accent);position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);padding:24px 26px;display:flex;flex-direction:column;
  transition:transform .5s var(--ease-spring),border-color .4s var(--ease),box-shadow .5s var(--ease)}
.agb-tile.c-cyan{--tc:var(--accent-2)}
.agb-tile.c-green{--tc:var(--pos)}
.agb-tile.c-amber{--tc:var(--warn)}
.agb-tile:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--tc) 45%,var(--border-strong));box-shadow:var(--shadow-hover)}
.agb-tile.lg{grid-column:span 2;grid-row:span 2}
.agb-tile.wide{grid-column:span 3}
.agb-tile::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.55;transition:opacity .5s var(--ease);
  background:radial-gradient(120% 78% at 100% 0%,color-mix(in srgb,var(--tc) 13%,transparent),transparent 58%)}
.agb-tile:hover::after{opacity:1}
.agb-tile > *{position:relative;z-index:1}
.agb-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;margin-bottom:auto;
  background:color-mix(in srgb,var(--tc) 14%,transparent);border:1px solid color-mix(in srgb,var(--tc) 28%,var(--border));color:var(--tc)}
.agb-ic svg{width:22px;height:22px}
.agb-num{font-family:var(--font-display);font-weight:600;letter-spacing:-.04em;line-height:.95;margin-top:20px;font-size:clamp(32px,3.4vw,42px);color:var(--tc)}
.agb-tile.lg .agb-num{font-size:clamp(46px,5vw,68px)}
.agb-h{font-family:var(--font-display);font-weight:500;font-size:16.5px;color:var(--text);margin-top:12px;letter-spacing:-.01em}
.agb-p{margin-top:8px;font-size:13.5px;line-height:1.55;color:var(--text-muted);max-width:52ch}
.agb-chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.agb-chip{font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--chip-bg);border:1px solid var(--border);border-radius:999px;padding:4px 11px}
@media (max-width:900px){.agb{grid-template-columns:1fr 1fr}.agb-tile.lg{grid-column:span 2;grid-row:auto}.agb-tile.wide{grid-column:span 2}}
@media (max-width:600px){.agb{grid-template-columns:1fr}.agb-tile.lg,.agb-tile.wide{grid-column:auto}}
@media (prefers-reduced-motion: reduce){.agp-node{opacity:1;transform:none}}

/* =====================================================================
   Demand-forecasting console (#dfEngine) — solution-ai-prediction
   "engine reveal": noise -> drivers/scenarios -> forecast. Driven by
   js/forecast.js. Colours via tokens (growth = --pos, forecast = --accent-2);
   no own background — the global wave (shell.js) shows through the glass.
   ===================================================================== */
.dfe{
  --ac: var(--pos);
  --ac-hi: color-mix(in srgb, var(--pos) 52%, #ffffff);
  --ac-2: var(--accent-2);
  --ac-wash: color-mix(in srgb, var(--pos) 14%, transparent);
  --ac-faint: color-mix(in srgb, var(--pos) 7%, transparent);
  --ac-ring: color-mix(in srgb, var(--pos) 32%, transparent);
  --dfe-soft: var(--border);
  position:relative;
}
.dfe-bar{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:16px; margin-bottom:22px; border-bottom:1px solid var(--dfe-soft); flex-wrap:wrap; }
.dfe-feed{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-faint); }
.dfe-bar-r{ display:flex; align-items:center; gap:20px; font-family:var(--font-mono); font-size:11px; color:var(--text-muted); flex-wrap:wrap; }
.dfe-tk{ display:inline-flex; align-items:center; gap:7px; }
.dfe-tk b{ color:var(--text); font-weight:500; font-variant-numeric:tabular-nums; }
.dfe-pulse{ width:8px; height:1px; background:var(--ac); display:inline-block; }

.dfe-grid{ display:grid; grid-template-columns:0.86fr 1.14fr; gap:clamp(18px,2.4vw,30px); align-items:stretch; }

.dfe-panel{ position:relative; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); backdrop-filter:blur(var(--card-blur)); -webkit-backdrop-filter:blur(var(--card-blur)); box-shadow:var(--shadow-card); overflow:hidden; }
.dfe-phead{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--dfe-soft); }
.dfe-ptitle{ font-family:var(--font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); }
.dfe-ptitle b{ color:var(--text); font-weight:500; }

.dfe-stream{ display:flex; flex-direction:column; min-height:482px; }
.dfe-state{ font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); transition:color .6s var(--ease); }
.dfe-state.resolved{ color:var(--ac); }
.dfe-leftbody{ position:relative; flex:1; min-height:420px; }
.dfe-view{ position:absolute; inset:0; display:flex; flex-direction:column; transition:opacity .7s var(--ease); }
.dfe-streamview.out{ opacity:0; pointer-events:none; }
.dfe-buildview{ opacity:0; pointer-events:none; padding:14px 16px 16px; gap:8px; overflow:auto; }
.dfe-buildview.in{ opacity:1; pointer-events:auto; }

.dfe-cols{ display:grid; grid-template-columns:auto auto auto 1fr auto; gap:0 12px; padding:7px 16px 6px; border-bottom:1px solid var(--dfe-soft); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.dfe-cols span:last-child{ text-align:right; }
.dfe-ticker{ position:relative; flex:1; padding:6px 16px 12px; overflow:hidden; -webkit-mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent); mask:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent); }
.dfe-row{ display:grid; grid-template-columns:auto auto auto 1fr auto; gap:0 12px; align-items:center; font-family:var(--font-mono); font-size:11px; line-height:1.9; color:var(--text-muted); white-space:nowrap; transition:color .5s var(--ease), filter .6s var(--ease); }
.dfe-row .dfe-sku{ color:var(--text); }
.dfe-row .dfe-date{ color:var(--text-faint); }
.dfe-row .dfe-spark{ color:var(--text-faint); letter-spacing:-.5px; overflow:hidden; }
.dfe-row .dfe-qty{ text-align:right; font-variant-numeric:tabular-nums; color:var(--text-muted); }
.dfe-row .dfe-qty.up{ color:var(--ac); }
.dfe-row .dfe-qty.dn{ color:#C77; }
.dfe-ticker.resolved .dfe-row{ color:var(--text-faint); filter:blur(.2px); }
.dfe-ticker.resolved .dfe-row .dfe-qty.up{ color:var(--ac); }
.dfe-beam{ position:absolute; left:0; right:0; height:46%; top:-50%; background:linear-gradient(180deg,transparent,var(--ac-wash),transparent); pointer-events:none; opacity:0; }

.dfe-model{ display:flex; align-items:center; gap:11px; flex:none; border:1px solid var(--ac-ring); border-radius:12px; background:var(--ac-faint); padding:10px 13px; }
.dfe-sigma{ width:34px; height:34px; border-radius:9px; flex:none; background:var(--ac-wash); color:var(--ac); display:flex; align-items:center; justify-content:center; font:18px var(--font-mono); }
.dfe-mt{ font:500 13px/1.1 var(--font-display); color:var(--text); }
.dfe-ms{ font:10.5px/1.3 var(--font-mono); color:var(--text-muted); margin-top:3px; }
.dfe-dlab{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin:3px 2px 1px; }
.dfe-driver{ display:flex; align-items:center; gap:10px; flex:none; padding:8px 11px; border:1px solid var(--dfe-soft); border-radius:10px; background:var(--chip-bg); opacity:.34; transition:opacity .5s var(--ease), border-color .5s var(--ease), background .5s var(--ease); }
.dfe-driver.on{ opacity:1; border-color:var(--ac-ring); background:var(--ac-faint); }
.dfe-dic{ width:26px; height:26px; border-radius:7px; flex:none; background:var(--ac-wash); color:var(--ac); display:flex; align-items:center; justify-content:center; }
.dfe-dl{ font:500 12.5px/1.2 var(--font-display); color:var(--text); }
.dfe-dv{ font:10px/1 var(--font-mono); color:var(--text-muted); margin-top:3px; }
.dfe-dck{ color:var(--ac); flex:none; opacity:0; transform:scale(.6); transition:opacity .4s var(--ease), transform .4s var(--ease-spring); }
.dfe-driver.on .dfe-dck{ opacity:1; transform:none; }
.dfe-fitmeter{ margin-top:auto; padding-top:8px; flex:none; }
.dfe-fitmeter-l{ display:flex; justify-content:space-between; align-items:baseline; font-family:var(--font-mono); font-size:10px; color:var(--text-muted); margin-bottom:6px; }
.dfe-fitmeter-l b{ color:var(--ac); font-weight:500; font-variant-numeric:tabular-nums; }
.dfe-fitbar{ height:6px; border-radius:6px; background:var(--bg-deep); overflow:hidden; }
.dfe-fitfill{ height:100%; width:0%; border-radius:6px; background:linear-gradient(90deg,var(--ac),var(--ac-hi)); transition:width .6s var(--ease); }

.dfe-viz{ display:flex; flex-direction:column; }
.dfe-vctl{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dfe-seg{ display:inline-flex; padding:3px; gap:2px; border:1px solid var(--border); border-radius:999px; background:var(--chip-bg); }
.dfe-seg button{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--text-muted); background:transparent; border:0; cursor:pointer; padding:5px 11px; border-radius:999px; transition:color .3s var(--ease), background .3s var(--ease); }
.dfe-seg button:hover{ color:var(--text); }
.dfe-seg button[aria-pressed="true"]{ color:#04130F; background:var(--ac); font-weight:500; }
.dfe-obj{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); }
.dfe-objtrack{ width:46px; height:22px; border-radius:999px; border:1px solid var(--border); background:var(--chip-bg); position:relative; cursor:pointer; flex:none; transition:background .35s var(--ease), border-color .35s var(--ease); }
.dfe-objtrack::after{ content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-muted); transition:transform .4s var(--ease-spring), background .35s var(--ease); }
.dfe-objtrack[aria-pressed="true"]{ background:var(--ac-wash); border-color:var(--ac-ring); }
.dfe-objtrack[aria-pressed="true"]::after{ transform:translateX(24px); background:var(--ac); }
.dfe-objlab{ transition:color .3s var(--ease); white-space:nowrap; }
.dfe-objlab.on{ color:var(--ac); }
.dfe-plotwrap{ position:relative; padding:14px 14px 6px; }
.dfe-plot{ width:100%; height:auto; display:block; }
.dfe-plot text{ font-family:var(--font-mono); }
.dfe-gridlines line{ stroke:var(--grid-line); }
.dfe-axis text{ fill:var(--text-faint); font-size:10px; }
.dfe-today{ stroke:var(--border-strong); }
.dfe-todaytxt{ fill:var(--text-faint); }
.dfe-band{ fill:var(--ac-wash); }
.dfe-scatter circle{ fill:var(--ac); }
.dfe-actuals{ stroke:var(--text-muted); }
.dfe-curve{ stroke:var(--ac); }
.dfe-curvefc{ stroke:var(--ac-2); }
.dfe-nowdot{ fill:var(--ac-hi); }
.dfe-peakline{ stroke:var(--ac-2); }
.dfe-peaklabel{ fill:var(--ac-2); }
/* two-sided cost: simple danger zones (top=overstock amber, bottom=stockout red) */
.dfe-err{ fill:rgba(245,158,11,0.14); }
.dfe-ghost{ fill:none; stroke:#F59E0B; stroke-width:1.5; stroke-dasharray:6 5; stroke-linecap:round; }
.dfe-zlab{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; }
.dfe-zlab.over{ fill:#D89A4A; }
.dfe-zlab.under{ fill:#D89A4A; }

.dfe-legend{ display:flex; gap:18px; padding:2px 16px 12px; font-family:var(--font-mono); font-size:10px; color:var(--text-muted); flex-wrap:wrap; }
.dfe-legend span{ display:inline-flex; align-items:center; gap:6px; }
.dfe-sw{ width:14px; height:0; border-top:2px solid var(--ac); display:inline-block; }
.dfe-sw.band{ height:8px; border:0; background:var(--ac-wash); border-radius:2px; }
.dfe-sw.actual{ border-top:2px solid var(--text-muted); }
.dfe-sw.fc{ border-top:2px dashed var(--ac-2); }
.dfe-narrate{ font-family:var(--font-body); font-weight:300; font-size:13px; line-height:1.55; color:var(--text-muted); padding:0 16px 14px; max-width:52ch; transition:opacity .5s var(--ease); }
.dfe-narrate b{ color:var(--text); font-weight:500; }

.dfe-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(18px,2.4vw,26px); }
.dfe-kpi{ position:relative; border:1px solid var(--border); border-radius:14px; background:var(--surface); backdrop-filter:blur(var(--card-blur)); -webkit-backdrop-filter:blur(var(--card-blur)); padding:15px 16px 14px; box-shadow:var(--shadow-card); opacity:0; transform:translateY(14px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.dfe-kpi.in{ opacity:1; transform:none; }
.dfe-kpi-lab{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); }
.dfe-kpi-val{ display:flex; align-items:baseline; gap:3px; margin-top:9px; font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:clamp(24px,2.6vw,32px); color:var(--text); font-variant-numeric:tabular-nums; }
.dfe-sign{ color:var(--ac); font-size:.72em; font-weight:500; }
.dfe-unit{ color:var(--text-muted); font-size:.5em; font-weight:400; font-family:var(--font-mono); margin-left:1px; }
.dfe-num{ font-variant-numeric:tabular-nums; }
.dfe-kpi-sub{ font-family:var(--font-body); font-weight:300; font-size:11px; color:var(--text-faint); margin-top:6px; }

@media (max-width:980px){
  .dfe-grid{ grid-template-columns:1fr; }
  .dfe-kpis{ grid-template-columns:repeat(2,1fr); }
  .dfe-stream{ min-height:440px; }
}
@media (max-width:760px){
  .dfe-bar{ flex-direction:column; align-items:flex-start; gap:12px; }
  .dfe-vctl{ flex-wrap:wrap; }
}
@media (max-width:440px){ .dfe-kpis{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  .dfe *{ animation:none !important; transition:none !important; }
  .dfe-kpi{ opacity:1 !important; transform:none !important; }
  .dfe-ticker.resolved .dfe-row{ filter:none; }
}

/* =====================================================================
   AI-prediction — "one block" wrapper (challenge · build · console)
   + legibility / colour pass on the console
   ===================================================================== */
.fc-block{ display:flex; flex-direction:column; }
.fc-part + .fc-part{ margin-top:clamp(48px,6vw,72px); }
.fc-sub{ display:flex; align-items:center; gap:11px; font-family:var(--font-mono); font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; margin-bottom:26px; }
.fc-sub .rule{ width:28px; height:1px; display:inline-block; }
.fc-sub-chal{ color:var(--accent-2); } .fc-sub-chal .rule{ background:var(--accent-2); }
.fc-sub-build{ color:var(--accent-soft); } .fc-sub-build .rule{ background:var(--accent-soft); }
.fc-sub-how{ color:var(--accent-soft); } .fc-sub-how .rule{ background:var(--accent-soft); }

/* ── Challenge → solution flip cards + reveal-speed control (forecast) ── */
.df-flip-tools{ display:flex; align-items:center; justify-content:space-between; gap:18px 28px; flex-wrap:wrap; margin-bottom:24px; }
.df-flip-hint{ display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-faint); }
.df-flip-hint::before{ content:""; width:22px; height:1px; background:var(--text-faint); display:inline-block; flex:none; }

.df-flip-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; --df-flip-dur:.665s; }
.df-flip{ position:relative; min-height:186px; cursor:pointer; border-radius:var(--radius); transition:transform .45s var(--ease), box-shadow .45s var(--ease); }
.df-flip:hover, .df-flip:focus-visible{ transform:translateY(-5px); box-shadow:0 30px 60px -22px rgba(0,0,0,.62), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); outline:none; }
.df-flip-inner{ position:absolute; inset:0; border-radius:var(--radius); overflow:hidden; }
.df-flip-face{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:26px 28px; border-radius:var(--radius); }

.df-flip-face > *{ position:relative; z-index:1; }
.df-flip-front{ background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 42%), var(--surface-solid); border:1px solid var(--border); transform-origin:top center; transition:transform calc(var(--df-flip-dur) * .9) cubic-bezier(.55,0,.1,1), opacity calc(var(--df-flip-dur) * .6) var(--ease); z-index:2; }
.df-flip-front::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background-image:var(--grain); background-size:140px 140px; opacity:.05; mix-blend-mode:overlay; pointer-events:none; }
.df-flip:hover .df-flip-front, .df-flip:focus-visible .df-flip-front{ transform:scaleY(0); opacity:0; }

.df-flip-back{ background:linear-gradient(142deg, color-mix(in srgb, var(--accent) 20%, var(--bg-elev)), color-mix(in srgb, var(--accent-2) 13%, var(--bg-elev))); border:1px solid color-mix(in srgb, var(--accent) 42%, transparent); transform:translateY(101%); opacity:0; transition:transform var(--df-flip-dur) var(--ease) calc(var(--df-flip-dur) * .1), opacity calc(var(--df-flip-dur) * .62) var(--ease) calc(var(--df-flip-dur) * .1); z-index:1; }
.df-flip-back::before{ content:""; position:absolute; inset:0; z-index:0; border-radius:inherit; background-image:var(--grain); background-size:140px 140px; opacity:.06; mix-blend-mode:overlay; pointer-events:none; }
.df-flip:hover .df-flip-back, .df-flip:focus-visible .df-flip-back{ transform:translateY(0); opacity:1; }

.df-flip-tag{ display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px; color:var(--accent-soft); }
.df-flip-tag::before{ content:""; width:16px; height:1px; background:var(--accent-soft); display:inline-block; flex:none; }
.df-flip-tag.is-pain{ color:var(--warn); } .df-flip-tag.is-pain::before{ background:var(--warn); }
.df-flip-q{ font-family:var(--font-display); font-weight:500; font-size:16.5px; letter-spacing:-.015em; line-height:1.36; color:var(--text); }
.df-flip-a{ font-family:var(--font-display); font-weight:500; font-size:15px; letter-spacing:-.01em; line-height:1.42; color:#fff; }
.df-flip-m{ margin-top:11px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; color:var(--accent-soft); font-variant-numeric:tabular-nums; }
.df-flip-cue{ position:absolute; right:18px; bottom:15px; font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; color:var(--text-faint); transition:opacity .2s var(--ease); }
.df-flip:hover .df-flip-cue, .df-flip:focus-visible .df-flip-cue{ opacity:0; }

/* two-sided cost — chart + description folded under the console */
.df-cost{ display:grid; grid-template-columns:1fr minmax(280px,460px); gap:clamp(24px,4vw,52px); align-items:center; margin-top:clamp(40px,5vw,64px); }
.df-cost-title{ font-family:var(--font-display); font-weight:600; font-size:clamp(23px,2.6vw,32px); letter-spacing:-.02em; line-height:1.08; margin:0 0 16px; }
.df-cost-desc{ font-family:var(--font-body); font-weight:300; font-size:15.5px; line-height:1.62; color:var(--text-muted); margin:0; }
.df-cost .dfp-band{ width:100%; max-width:460px; margin-inline:auto; }
/* no red in the cost band — both failure sides are amber (see EMPHASIS-PATTERNS §❌) */
.df-cost .dfp-z-under{ fill:color-mix(in srgb, var(--warn) 12%, transparent); }
.df-cost .dfp-naive-u{ stroke:var(--warn); }
.df-cost .dfp-zlabel.u{ fill:var(--warn); }

@media (max-width:860px){ .df-cost{ grid-template-columns:1fr; gap:28px; } }
@media (max-width:760px){ .df-flip-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .df-flip-front, .df-flip-back{ transition-duration:.001s !important; transition-delay:0s !important; }
  .df-flip{ transition:none; }
}

/* opaque panels so text reads over the global wave background;
   no backdrop blur (panels are solid) — keeps glyphs crisp, no GPU layer */
.dfe-panel, .dfe-kpi{ background:var(--bg-elev); border-color:var(--border-strong); backdrop-filter:none; -webkit-backdrop-filter:none; }
.dfe-phead, .dfe-bar{ border-bottom-color:var(--border-strong); }
.dfe-stream{ min-height:500px; }
.dfe-leftbody{ min-height:440px; }

/* bigger, brighter text */
.dfe-feed, .dfe-bar-r{ font-size:12px; }
.dfe-bar-r{ color:var(--text-muted); }
.dfe-ptitle{ font-size:12px; letter-spacing:.1em; color:var(--text-muted); }
.dfe-state{ font-size:10.5px; }
.dfe-cols{ font-size:10.5px; color:var(--text-muted); }
.dfe-row{ font-size:12.5px; color:var(--text-muted); }
.dfe-ticker.resolved .dfe-row{ filter:none; color:var(--text-muted); }
.dfe-dlab{ font-size:10px; color:var(--text-muted); }
.dfe-dl{ font-size:13.5px; }
.dfe-dv{ font-size:10.5px; color:var(--text-muted); }
.dfe-fitmeter-l{ font-size:11px; color:var(--text-muted); }
.dfe-legend{ font-size:11px; color:var(--text-muted); }
.dfe-narrate{ font-size:15px; line-height:1.6; color:var(--text); }
.dfe-narrate b{ color:var(--pos); font-weight:600; }
.dfe-kpi-lab{ font-size:10.5px; color:var(--text-muted); }
.dfe-kpi-sub{ font-size:12px; color:var(--text-muted); }
.dfe-axis text{ fill:var(--text-muted); font-size:11.5px; }
.dfe-todaytxt, .dfe-peaklabel{ font-size:11.5px; }
.dfe-todaytxt{ fill:var(--text-muted); }

/* canonical colour: model = brand purple; metrics cyan (reduction) / green (growth) */
.dfe-model{ border-color:color-mix(in srgb, var(--accent) 34%, transparent); background:color-mix(in srgb, var(--accent) 9%, transparent); }
.dfe-sigma{ color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); }
.dfe-kpi{ overflow:hidden; }
/* grain + soft per-metric top glow — no static stripe (canon: EMPHASIS-PATTERNS §7) */
.dfe-kpi::before{ content:""; position:absolute; inset:0; z-index:0; background-image:var(--grain); background-size:140px 140px; opacity:.05; mix-blend-mode:overlay; pointer-events:none; }
.dfe-kpi > *{ position:relative; z-index:1; }
.dfe-kpi[data-kpi="mape"], .dfe-kpi[data-kpi="oos"]{ background:linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 42%), var(--bg-elev); }
.dfe-kpi[data-kpi="revenue"], .dfe-kpi[data-kpi="roi"]{ background:linear-gradient(180deg, color-mix(in srgb, var(--pos) 12%, transparent), transparent 42%), var(--bg-elev); }
/* hover glow — grainy panels light up, accent per metric (canon приём 7 + 1) */
.dfe-kpi{ transition:opacity .7s var(--ease), transform .5s var(--ease-spring), border-color .4s var(--ease), box-shadow .5s var(--ease); }
.dfe-kpi:hover{ transform:translateY(-4px); }
.dfe-kpi[data-kpi="mape"]:hover, .dfe-kpi[data-kpi="oos"]:hover{ border-color:color-mix(in srgb, var(--accent-2) 40%, var(--border)); box-shadow:var(--shadow-card), 0 20px 48px -26px color-mix(in srgb, var(--accent-2) 45%, transparent); }
.dfe-kpi[data-kpi="revenue"]:hover, .dfe-kpi[data-kpi="roi"]:hover{ border-color:color-mix(in srgb, var(--pos) 40%, var(--border)); box-shadow:var(--shadow-card), 0 20px 48px -26px color-mix(in srgb, var(--pos) 45%, transparent); }
.dfe-kpi[data-kpi="mape"] .dfe-num, .dfe-kpi[data-kpi="mape"] .dfe-unit,
.dfe-kpi[data-kpi="oos"] .dfe-num, .dfe-kpi[data-kpi="oos"] .dfe-sign{ color:var(--accent-2); }
.dfe-kpi[data-kpi="revenue"] .dfe-num, .dfe-kpi[data-kpi="revenue"] .dfe-sign,
.dfe-kpi[data-kpi="roi"] .dfe-num{ color:var(--pos); }

/* ---- console head: title sits on the same row/level as the horizon
   buttons; objective toggle gets its own centred row ---- */
.dfe-phead{ flex-wrap:nowrap; }
.dfe-phead .dfe-ptitle{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dfe-phead .dfe-seg{ flex:0 0 auto; }
.dfe-objrow{ display:flex; justify-content:center; padding:12px 16px 2px; }

/* ---- stable sizes: pre-size dynamic-text areas to their tallest content,
   so blocks never resize as the text changes and never show a scrollbar ---- */
.dfe-narrate{ min-height:136px; }
.dfe-stream{ min-height:520px; }
.dfe-leftbody{ min-height:460px; }
.dfe-buildview{ overflow:hidden; }

/* =====================================================================
   AI-prediction — extra sections: stakes / horizons / proof
   (FAQ reuses .sol-faq). Colours via tokens.
   ===================================================================== */

/* --- stakes: two failure modes around a tight forecast band --- */
.dfp-stakes{ display:grid; grid-template-columns:1fr 1.25fr 1fr; gap:20px; align-items:stretch; }
.dfp-fail{ position:relative; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-elev); padding:22px 22px 20px; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-card); }
.dfp-fail::before{ content:""; position:absolute; left:0; right:0; top:0; height:2px; }
.dfp-fail-under::before{ background:var(--neg); }
.dfp-fail-over::before{ background:var(--warn); }
.dfp-fail-h{ font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:-.01em; margin-bottom:10px; }
.dfp-fail-under .dfp-fail-h{ color:var(--neg); }
.dfp-fail-over .dfp-fail-h{ color:var(--warn); }
.dfp-fail p{ font-family:var(--font-body); font-weight:300; font-size:14px; line-height:1.55; color:var(--text-muted); margin:0 0 18px; }
.dfp-fail-m{ margin-top:auto; display:flex; flex-direction:column; gap:3px; }
.dfp-fail-v{ font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:-.02em; color:var(--accent-2); font-variant-numeric:tabular-nums; }
.dfp-fail-l{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); }
.dfp-band{ display:flex; flex-direction:column; }
.dfp-band-svg{ width:100%; height:auto; border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-elev); display:block; box-shadow:var(--shadow-card); }
.dfp-band-svg text{ font-family:var(--font-mono); }
.dfp-band-cap{ font-family:var(--font-mono); font-size:11px; color:var(--text-muted); text-align:center; margin-top:12px; line-height:1.5; }
.dfp-z-over{ fill:color-mix(in srgb, var(--warn) 11%, transparent); }
.dfp-z-under{ fill:color-mix(in srgb, var(--neg) 11%, transparent); }
.dfp-fc-band{ fill:color-mix(in srgb, var(--pos) 18%, transparent); stroke:none; }
.dfp-demand{ fill:none; stroke:var(--text-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dfp-naive-o{ fill:none; stroke:var(--warn); stroke-width:1.6; stroke-dasharray:5 5; opacity:.85; stroke-linecap:round; }
.dfp-naive-u{ fill:none; stroke:var(--neg); stroke-width:1.6; stroke-dasharray:5 5; opacity:.85; stroke-linecap:round; }
.dfp-zlabel{ font-size:10.5px; letter-spacing:.04em; }
.dfp-zlabel.o{ fill:var(--warn); }
.dfp-zlabel.u{ fill:var(--neg); }
.dfp-zlabel.f{ fill:var(--pos); }
@media (max-width:900px){ .dfp-stakes{ grid-template-columns:1fr; } .dfp-band{ order:-1; } }

/* --- horizons: day -> quarter, one card each --- */
.dfp-horizons{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.dfp-hz{ position:relative; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius); background:linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 38%), var(--bg-elev); padding:20px 20px 22px; box-shadow:var(--shadow-card); transition:border-color .4s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease-spring); }
.dfp-hz::before{ content:""; position:absolute; inset:0; z-index:0; background-image:var(--grain); background-size:140px 140px; opacity:.05; mix-blend-mode:overlay; pointer-events:none; }
.dfp-hz > *{ position:relative; z-index:1; }
.dfp-hz:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent-2) 38%, var(--border)); box-shadow:var(--shadow-card), 0 22px 54px -26px color-mix(in srgb, var(--accent-2) 42%, transparent); }
.dfp-hz-k{ font-family:var(--font-mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-2); margin-bottom:14px; }
.dfp-hz-t{ font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em; color:var(--text); margin-bottom:8px; }
.dfp-hz p{ font-family:var(--font-body); font-weight:300; font-size:13.5px; line-height:1.55; color:var(--text-muted); margin:0; }
.dfp-hz-note{ font-family:var(--font-mono); font-size:12px; color:var(--text-faint); text-align:center; margin-top:24px; }
@media (max-width:900px){ .dfp-horizons{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .dfp-horizons{ grid-template-columns:1fr; } }

/* ── Dynamic pricing (self-storage) — embedded Rate Engine consoles (iframe tabs) ── */
.dpx-tabs{ display:inline-flex; gap:4px; padding:4px; border:1px solid var(--border); border-radius:12px; background:rgba(255,255,255,.025); margin-bottom:20px; flex-wrap:wrap; }
.dpx-tabs button{ font-family:var(--font-mono); font-size:12px; letter-spacing:.03em; color:var(--text-muted); background:transparent; border:0; cursor:pointer; padding:8px 16px; border-radius:8px; transition:color .25s var(--ease), background .25s var(--ease); }
.dpx-tabs button:hover{ color:var(--text); }
.dpx-tabs button[aria-selected="true"]{ color:var(--text); background:color-mix(in srgb, var(--accent) 20%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 32%, transparent); }
.dpx-frames{ position:relative; width:100%; aspect-ratio:1.42/1; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-strong); box-shadow:var(--shadow-card); background:var(--bg); }
.dpx-frame{ position:absolute; inset:0; width:100%; height:100%; border:0; opacity:0; pointer-events:none; transition:opacity .4s var(--ease); }
.dpx-frame.is-on{ opacity:1; pointer-events:auto; }
.dpx-note{ margin-top:14px; font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:var(--text-faint); display:flex; align-items:center; gap:9px; }
.dpx-note::before{ content:""; width:20px; height:1px; background:var(--text-faint); flex:none; }
@media (max-width:840px){ .dpx-frames{ aspect-ratio:auto; height:1020px; } }
@media (max-width:520px){ .dpx-frames{ height:1120px; } }

/* --- proof: cumulative-uplift A/B chart + stats --- */
.dfp-proof{ display:grid; grid-template-columns:1.55fr 1fr; gap:24px; align-items:stretch; }
.dfp-proof-chart{ border:1px solid var(--border); border-radius:var(--radius); background:var(--bg-elev); padding:18px 18px 14px; display:flex; flex-direction:column; box-shadow:var(--shadow-card); }
.dfp-proof-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.dfp-proof-lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.dfp-proof-metric{ font-family:var(--font-display); font-weight:600; font-size:22px; color:var(--pos); font-variant-numeric:tabular-nums; }
.dfp-proof-svg{ width:100%; height:auto; display:block; }
.dfp-proof-svg text{ font-family:var(--font-mono); }
.dfp-proof-x{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint); margin-top:6px; }
.dfp-proof-side{ display:flex; flex-direction:column; justify-content:center; gap:20px; }
.dfp-stat{ display:flex; flex-direction:column; gap:4px; }
.dfp-stat-v{ font-family:var(--font-display); font-weight:600; font-size:clamp(28px,3vw,38px); letter-spacing:-.025em; color:var(--text); font-variant-numeric:tabular-nums; }
.dfp-stat:first-child .dfp-stat-v{ color:var(--pos); }
.dfp-stat-l{ font-family:var(--font-body); font-weight:300; font-size:13px; line-height:1.45; color:var(--text-muted); max-width:30ch; }
.dfp-proof-status{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); padding-top:14px; border-top:1px solid var(--border); }
.dfp-nda{ color:var(--accent-2); }
.dfp-grid line{ stroke:var(--grid-line); }
.dfp-uplift{ fill:color-mix(in srgb, var(--pos) 14%, transparent); stroke:none; }
.dfp-ctrl{ fill:none; stroke:var(--text-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.dfp-var{ fill:none; stroke:var(--pos); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.dfp-var-dot{ fill:var(--pos); }
.dfp-proof-leg{ font-size:10.5px; }
.dfp-proof-leg.t{ fill:var(--pos); }
.dfp-proof-leg.c{ fill:var(--text-muted); }
@media (max-width:900px){ .dfp-proof{ grid-template-columns:1fr; } }

/* proof line draws in on reveal */
.dfp-var{ stroke-dasharray:760; stroke-dashoffset:760; }
.dfp-proof.reveal.in .dfp-var{ animation:dfpDraw 1.5s var(--ease) forwards; }
@keyframes dfpDraw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){ .dfp-var{ stroke-dashoffset:0 !important; animation:none !important; } }

/* ============================================================
   COMPANY PAGE (about.html) — scoped .ab-* components
   Tokens only; works in concepts A/B/C. No static accent bars,
   no decorative numbering, no status dots, no --neg decoration.
   Signature motion (GSAP) lives in js/about.js.
   ============================================================ */

/* ---- hero trust strip ---- */
.ab-trust{ display:flex; flex-wrap:wrap; gap:14px 28px; margin-top:38px; }
.ab-trust-i{ font:500 12.5px/1 var(--font-mono); color:var(--text-muted); letter-spacing:.02em; }
.ab-trust-i b{ font-family:var(--font-display); font-weight:600; color:var(--text); margin-right:6px; font-size:15px; }

/* ---- the gap (manifesto) ---- */
.ab-gap-grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
.ab-gap-points{ display:flex; flex-direction:column; }
.ab-gap-pt{ font:400 16px/1.6 var(--font-body); color:var(--text-muted); padding:18px 0; border-top:1px solid var(--border); }
.ab-gap-pt b{ color:var(--text); font-weight:500; }
.ab-gap-bridge{ font:500 17px/1.5 var(--font-display); letter-spacing:-.01em; color:var(--text); margin:24px 0 0; padding-top:22px; border-top:1px solid var(--border-strong); }
.ab-gap-bridge b{ color:var(--accent-soft); font-weight:600; }
.ab-gap-viz{ padding:26px 24px; }
.ab-gap-viz-head{ margin-bottom:8px; }
.ab-gap-cap{ font:500 11.5px var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); }
#ab-gap-funnel{ width:100%; height:auto; display:block; }
.ab-gap-legend{ display:flex; gap:18px; margin-top:10px; }
.ab-gap-leg{ display:inline-flex; align-items:center; gap:7px; font:500 11.5px var(--font-mono); color:var(--text-muted); }
.ab-gap-leg::before{ content:""; width:11px; height:3px; border-radius:2px; }
.ab-gap-leg-warn::before{ background:var(--warn); }
.ab-gap-leg-pos::before{ background:var(--pos); }

/* ---- delivery spine (set-piece 1) ---- */
.ab-spine-stage{ position:relative; }
.ab-spine-pin{ min-height:100vh; display:flex; align-items:center; }
.ab-spine-pin > .wrap{ width:100%; }
.ab-spine-inner{ display:flex; flex-direction:column; }
.ab-spine-meta{ display:flex; justify-content:space-between; align-items:center; gap:16px; font:500 12px var(--font-mono); color:var(--text-faint); text-transform:uppercase; letter-spacing:.14em; margin:34px 0 2px; }
.ab-spine-meta b{ font-family:var(--font-display); color:var(--text); text-transform:none; letter-spacing:-.01em; font-size:15px; font-weight:600; }

.ab-spine{ --spine-progress:0; position:relative; padding:14px 0 72px; }
.ab-spine-rail{ position:relative; height:2px; background:var(--border); border-radius:999px; }
.ab-spine-fill, .ab-spine-fill-glow{ position:absolute; left:0; top:0; height:2px; width:100%; transform:scaleX(var(--spine-progress)); transform-origin:left center; border-radius:999px; }
.ab-spine.scanning .ab-spine-fill, .ab-spine.scanning .ab-spine-fill-glow{ will-change:transform; }
.ab-spine-fill{ background:var(--accent); }
.ab-spine-fill-glow{ background:var(--accent); filter:blur(7px); opacity:.5; }
.ab-spine-scan{ position:absolute; top:-11px; height:24px; width:2px; left:calc(var(--spine-progress) * 100%); background:linear-gradient(180deg, transparent, var(--accent), transparent); box-shadow:0 0 16px 3px color-mix(in srgb, var(--accent) 70%, transparent); opacity:0; transition:opacity .3s var(--ease); pointer-events:none; }
.ab-spine.scanning .ab-spine-scan{ opacity:1; }

.ab-spine-nodes{ position:absolute; left:0; right:0; top:1px; height:0; }
.ab-spine-node{ position:absolute; top:0; display:flex; flex-direction:column; align-items:center; transform:translateX(-50%); cursor:pointer; background:none; border:none; padding:0; }
.ab-spine-node:first-child{ transform:translateX(0); align-items:flex-start; }
.ab-spine-node:last-child{ transform:translateX(-100%); align-items:flex-end; }
.ab-spine-dot{ width:12px; height:12px; margin-top:-6px; border-radius:999px; background:var(--bg-deep); border:1.5px solid var(--border-strong); transition:border-color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), transform .4s var(--ease-spring); }
.ab-spine-name{ margin-top:14px; max-width:130px; font:500 11.5px/1.3 var(--font-mono); color:var(--text-faint); letter-spacing:.01em; text-align:center; transition:color .4s var(--ease); }
.ab-spine-node:first-child .ab-spine-name{ text-align:left; }
.ab-spine-node:last-child .ab-spine-name{ text-align:right; }
.ab-spine-node.on .ab-spine-dot{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 30%, var(--bg-deep)); }
.ab-spine-node.on .ab-spine-name{ color:var(--text-muted); }
.ab-spine-node.active .ab-spine-dot{ border-color:var(--accent); background:var(--accent); transform:scale(1.18); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 0 14px 2px color-mix(in srgb, var(--accent) 55%, transparent); }
.ab-spine-node.active .ab-spine-name{ color:var(--text); font-weight:600; }
.ab-spine-node:focus-visible{ outline:2px solid transparent; outline-offset:4px; border-radius:6px; }
.ab-spine-node:focus-visible .ab-spine-dot{ box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-soft) 70%, transparent); }
@media (forced-colors:active){ .ab-spine-node:focus-visible{ outline:2px solid CanvasText; } }

.ab-spine-detail{ margin-top:34px; min-height:158px; }
.ab-spine-detail-inner{ opacity:0; transform:translateY(8px); transition:opacity .4s var(--ease), transform .4s var(--ease); max-width:680px; }
.ab-spine-detail-inner.show{ opacity:1; transform:none; }
.ab-spine-detail-inner h3{ font:600 23px var(--font-display); letter-spacing:-.02em; margin:0 0 8px; }
.ab-spine-what{ color:var(--text-muted); font:400 16px/1.55 var(--font-body); margin:0 0 16px; max-width:60ch; }
.ab-spine-roles{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.ab-spine-chip{ font:500 11.5px var(--font-mono); color:var(--text-muted); background:var(--chip-bg); border:1px solid var(--border); border-radius:999px; padding:6px 12px; }
.ab-spine-outcome{ display:inline-flex; align-items:center; gap:10px; font:400 14px var(--font-body); color:var(--text-muted); }
.ab-spine-outcome .rule{ flex:none; width:18px; height:1px; display:inline-block; background:linear-gradient(90deg, var(--accent-soft), transparent); }
.ab-spine-outcome b{ color:var(--text); font-weight:500; }
.ab-spine-anchor{ margin:38px 0 0; font:400 15px var(--font-body); color:var(--text-faint); }
.ab-spine-anchor b{ color:var(--accent-soft); font-weight:500; }

/* mobile vertical timeline (built by JS, hidden on desktop) */
.ab-spine-list{ display:none; }
.ab-spine-step{ position:relative; padding:0 0 26px 30px; }
.ab-spine-step::before{ content:""; position:absolute; left:5px; top:8px; bottom:-4px; width:2px; background:var(--border); }
.ab-spine-step:last-child::before{ display:none; }
.ab-spine-step::after{ content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:999px; background:var(--bg-deep); border:1.5px solid var(--border-strong); }
.ab-spine-step h3{ font:600 18px var(--font-display); letter-spacing:-.02em; margin:0 0 6px; }

/* ---- team: archetypes by discipline (set-piece 2) ---- */
.ab-team-head{ display:flex; flex-wrap:wrap; align-items:baseline; gap:18px 40px; margin-bottom:40px; padding-bottom:28px; border-bottom:1px solid var(--border); }
.ab-team-stat{ display:flex; flex-direction:column; gap:4px; }
.ab-team-num{ font:600 40px/1 var(--font-display); letter-spacing:-.03em; background:linear-gradient(135deg, var(--text), var(--accent)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ab-team-lbl{ font:500 12px var(--font-mono); color:var(--text-faint); text-transform:uppercase; letter-spacing:.08em; }
.ab-team-note{ flex:1 1 280px; min-width:240px; color:var(--text-muted); font:400 15px/1.5 var(--font-body); margin:0; }

.ab-team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.ab-disc-card{ position:relative; overflow:hidden; background-color:var(--surface); background-image:linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 130px); border:1px solid var(--border); border-radius:var(--radius-lg); padding:26px 24px 22px; box-shadow:var(--shadow-card); transform-style:preserve-3d; transition:border-color .45s var(--ease), box-shadow .5s var(--ease); }
.ab-disc-card::before{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:linear-gradient(90deg, var(--accent), transparent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); z-index:2; }
.ab-disc-card::after{ content:""; position:absolute; inset:0; background-image:var(--grain); background-size:140px 140px; opacity:.04; mix-blend-mode:overlay; pointer-events:none; }
.ab-disc-card:hover, .ab-disc-card:focus-within{ border-color:color-mix(in srgb, var(--accent) 36%, var(--border)); box-shadow:var(--shadow-hover), 0 26px 60px -30px color-mix(in srgb, var(--accent) 45%, transparent); }
.ab-disc-card:hover::before, .ab-disc-card:focus-within::before{ transform:scaleX(1); }
.ab-disc-scan{ position:absolute; left:0; right:0; top:0; height:55%; pointer-events:none; opacity:0; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent); transform:translateY(-120%); z-index:1; }
.ab-disc-card:hover .ab-disc-scan, .ab-disc-card:focus-within .ab-disc-scan{ animation:abScan 1.05s var(--ease); }
@keyframes abScan{ 0%{ opacity:0; transform:translateY(-120%); } 18%,82%{ opacity:.85; } 100%{ opacity:0; transform:translateY(240%); } }
.ab-disc-glyph{ position:relative; z-index:1; display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:13px; border:1px solid var(--border); background:var(--chip-bg); color:var(--accent-soft); margin-bottom:18px; transition:color .45s var(--ease), border-color .45s var(--ease); }
.ab-disc-glyph svg{ width:24px; height:24px; }
.ab-disc-card:hover .ab-disc-glyph, .ab-disc-card:focus-within .ab-disc-glyph{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 30%, var(--border)); }
.ab-disc-name{ position:relative; z-index:1; font:600 19px var(--font-display); letter-spacing:-.015em; margin:0 0 8px; }
.ab-disc-what{ position:relative; z-index:1; color:var(--text-muted); font:400 14.5px/1.55 var(--font-body); margin:0 0 16px; }
.ab-disc-roles{ position:relative; z-index:1; display:block; font:500 11.5px var(--font-mono); color:var(--text-faint); letter-spacing:.02em; padding-top:14px; border-top:1px solid var(--border); }

/* ---- engagement ---- */
.ab-engage-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ab-engage-card{ position:relative; padding:30px 28px; }
.ab-engage-card::before{ content:""; position:absolute; left:0; top:0; height:2px; width:100%; background:linear-gradient(90deg, var(--accent), transparent); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.ab-engage-card:hover::before{ transform:scaleX(1); }
.ab-engage-body{ color:var(--text-muted); font:400 16px/1.6 var(--font-body); margin:14px 0 18px; }
.ab-engage-when{ padding-top:16px; border-top:1px solid var(--border); font:400 14.5px/1.5 var(--font-body); color:var(--text-muted); margin:0; }
.ab-engage-when-lbl{ display:inline-block; font:500 11px var(--font-mono); text-transform:uppercase; letter-spacing:.1em; color:var(--accent-soft); margin-right:8px; }

/* ---- guardrails (rough grain panel) ---- */
.ab-guard-panel{ position:relative; overflow:hidden; background-color:var(--surface); background-image:linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 160px); border:1px solid var(--border); border-radius:var(--radius-lg); padding:32px 30px; box-shadow:var(--shadow-card); transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.ab-guard-panel::before{ content:""; position:absolute; inset:0; background-image:var(--grain); background-size:140px 140px; opacity:.05; mix-blend-mode:overlay; pointer-events:none; }
.ab-guard-panel > *{ position:relative; z-index:1; }
.ab-guard-panel:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow:var(--shadow-hover), 0 24px 54px -28px color-mix(in srgb, var(--accent) 40%, transparent); }
.ab-guard-chips{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-bottom:22px; }
.ab-guard-line{ color:var(--text-muted); font:400 15.5px/1.6 var(--font-body); margin:0; max-width:72ch; }

/* ---- proof (industries + track record) ---- */
.ab-proof-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.ab-proof-card{ display:flex; flex-direction:column; gap:10px; padding:26px 22px; }
.ab-proof-ind{ font:500 12px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); }
.ab-proof-num{ font:600 34px/1 var(--font-display); letter-spacing:-.02em; }
.ab-proof-num.m-up{ color:var(--pos); }
.ab-proof-num.m-down{ color:var(--accent-2); }
.ab-proof-num.m-neu{ color:var(--text); }
/* light concepts: darken metric hues toward text so they clear large-text contrast on white cards */
[data-concept="b"] .ab-proof-num.m-up, [data-concept="c"] .ab-proof-num.m-up{ color:color-mix(in srgb, var(--pos) 78%, var(--text)); }
[data-concept="b"] .ab-proof-num.m-down, [data-concept="c"] .ab-proof-num.m-down{ color:color-mix(in srgb, var(--accent-2) 70%, var(--text)); }
.ab-proof-note{ font:400 14px/1.45 var(--font-body); color:var(--text-muted); }
.ab-proof-foot{ display:flex; justify-content:space-between; align-items:center; gap:24px; margin-top:30px; flex-wrap:wrap; }
.ab-proof-track{ flex:1 1 360px; color:var(--text-muted); font:400 15px/1.5 var(--font-body); margin:0; max-width:62ch; }
.ab-proof-nda{ color:var(--text-faint); }
.ab-hq{ margin-top:26px; text-align:center; font:500 12px var(--font-mono); color:var(--text-faint); letter-spacing:.08em; }

/* ---- responsive ---- */
@media (max-width:1080px){
  .ab-gap-grid{ gap:44px; }
  .ab-proof-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:1024px){
  .ab-team-grid{ grid-template-columns:repeat(2,1fr); }
  .ab-engage-grid{ grid-template-columns:1fr; }
  .ab-gap-grid{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:920px){
  .ab-spine-stage{ height:auto; }
  .ab-spine-pin{ position:static; min-height:0; display:block; }
  .ab-spine, .ab-spine-detail, .ab-spine-meta{ display:none; }
  .ab-spine-list{ display:block; margin-top:26px; }
}
@media (max-width:640px){
  .ab-team-grid{ grid-template-columns:1fr; }
  .ab-proof-grid{ grid-template-columns:1fr; }
  .ab-proof-foot{ flex-direction:column; align-items:flex-start; gap:14px; }
  .ab-trust{ gap:10px 18px; }
  .ab-trust-i{ font-size:11.5px; }
  .ab-team-num{ font-size:34px; }
}
@media (prefers-reduced-motion:reduce){
  .ab-spine-stage{ height:auto; }
  .ab-spine-pin{ position:static; min-height:0; }
  .ab-spine-dot, .ab-spine-name, .ab-spine-detail-inner, .ab-spine-scan, .ab-disc-card, .ab-disc-card::before, .ab-disc-scan{ transition:none !important; animation:none !important; }
  .ab-spine-detail-inner{ opacity:1 !important; transform:none !important; }
}
/* ===== end Company page (about.html) ===== */

/* ============================================================
   BACK-TO-TOP — global chrome, injected by js/shell.js on every
   page. Glass FAB, tokens-only, works in concepts A/B/C. Appears
   after ~1 viewport of scroll; smooth scroll (auto if reduced).
   ============================================================ */
.to-top{
  position:fixed; right:clamp(16px,3vw,32px); bottom:clamp(16px,3vw,32px);
  width:46px; height:46px; border-radius:999px;
  display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-muted);
  -webkit-backdrop-filter:blur(var(--card-blur)); backdrop-filter:blur(var(--card-blur));
  box-shadow:var(--shadow-card);
  cursor:pointer; z-index:90; padding:0;
  opacity:0; transform:translateY(12px) scale(.94); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease),
             color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.to-top.is-on{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ color:var(--text); border-color:var(--border-strong); background:var(--surface-solid); transform:translateY(-3px); box-shadow:var(--shadow-hover); }
.to-top:active{ transform:translateY(-1px); }
.to-top:focus-visible{ outline:2px solid var(--accent-soft); outline-offset:3px; }
.to-top svg{ width:18px; height:18px; display:block; }
@media (max-width:600px){ .to-top{ width:42px; height:42px; } }
@media (prefers-reduced-motion:reduce){
  .to-top{ transition:opacity .2s linear; transform:none; }
  .to-top.is-on{ transform:none; }
  .to-top:hover{ transform:none; }
}
@media (forced-colors:active){ .to-top{ border-color:CanvasText; } }