// ConceptB.jsx — "Research Dashboard"
// Product-forward. Leads with a live-looking Mira dashboard widget.
// Dense, data-rich, enterprise-buyer coded. Lots of mono labels + metrics.

const B_css = `
.cB{background:var(--ink-900);color:var(--cream-50);font-family:var(--font-sans);}
.cB > .site-nav{background:transparent;transition:background-color 240ms ease;}
.cB > .site-nav.site-nav--scrolled{background:var(--ink-900);}
.cB > .site-nav__hairline{opacity:0;transition:opacity 240ms ease;}
.cB > .site-nav.site-nav--scrolled ~ .site-nav__hairline{opacity:1;}

/* ---------- HERO ---------- */
.cB-hero{padding:132px 40px 60px;position:relative;overflow:hidden;
  min-height:100vh;display:flex;flex-direction:column;}
.cB-hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 40% 50% at 80% 20%, rgba(92,50,240,0.25) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 80%, rgba(193,250,29,0.05) 0%, transparent 60%),
    var(--ink-900);
}
.cB--galaxy .cB-hero__bg{
  background:
    radial-gradient(ellipse 60% 70% at 60% 40%, rgba(193,250,29,0.04) 0%, transparent 55%),
    url('assets/galaxy-bg.png') center/cover no-repeat,
    var(--ink-900);
}
.cB--galaxy .cB-hero__bg::after{
  background-image:linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
}
.cB-deploy{position:relative;}
.cB--galaxy .cB-deploy{
  background:
    linear-gradient(180deg, rgba(22,20,30,0.6) 0%, rgba(22,20,30,0.92) 100%),
    url('assets/galaxy-bg.png') center/cover no-repeat,
    var(--ink-900);
}
.cB--galaxy .cB-deploy > *{position:relative;z-index:1;}
.cB-hero__bg::after{
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, black 30%, transparent 80%);
}
.cB-hero__eyebrow{position:relative;z-index:1;font-family:var(--font-serif);font-style:italic;
  font-size:clamp(16px,1.4vw,22px);color:rgba(255,255,255,0.95);
  margin:0 0 clamp(14px,1.6vw,24px);}
.cB-hero__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;max-width:1280px;margin:auto auto;width:100%;}

.cB-hero__chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 14px;border-radius:999px;
  background:rgba(193,250,29,0.08);border:1px solid rgba(193,250,29,0.25);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.04em;
  color:var(--lime-500);margin-bottom:28px;
}
.cB-hero__chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime-500);
  box-shadow:0 0 8px var(--lime-500);}
.cB-hero__title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(48px,5.5vw,76px);line-height:1.02;letter-spacing:-0.035em;
  margin:0 0 24px;color:var(--cream-50);
}
.cB-hero__title em{font-family:var(--font-serif);font-style:italic;font-weight:400;color:var(--cream-50);}
.cB-hero__graphic{display:flex;flex-direction:column;align-items:stretch;}
.cB-hero__sub{
  font-size:18px;line-height:1.55;color:rgba(247,247,237,0.72);
  max-width:480px;margin:0 0 36px;
}
.cB-hero__ctas{display:flex;gap:12px;flex-wrap:wrap;}
.cB-hero__trust{
  margin-top:auto;padding-top:28px;display:flex;align-items:center;gap:28px;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(247,247,237,0.20) 50%,transparent) 1;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.1em;
  color:rgba(247,247,237,0.4);text-transform:uppercase;flex-wrap:wrap;
  max-width:1400px;margin-left:auto;margin-right:auto;position:relative;z-index:1;
}
.cB-hero__trust__label{flex-shrink:0;}
.cB-hero__trust__logos{display:flex;align-items:center;gap:36px;flex-wrap:wrap;row-gap:20px;}
.cB-hero__trust__logo{
  height:32px;opacity:0.85;
  transition:opacity 200ms;
  color:var(--cream-50);
  display:inline-flex;align-items:center;
}
.cB-hero__trust__logo:hover{opacity:1;}
.cB-hero__trust__logo svg{height:100%;width:auto;display:block;}
.cB-hero__trust__logo img{height:100%;width:auto;display:block;object-fit:contain;}

/* ---------- RESEARCH GRAPH ---------- */
.cB-rg{
  position:relative;background:var(--ink-800);
  border:1px solid rgba(255,255,255,0.1);border-radius:12px;
  overflow:hidden;min-height:560px;
  box-shadow:0 32px 80px rgba(0,0,0,0.5);
}
.cB-rg__grid{position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse at 50% 50%, black 40%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, black 40%, transparent 85%);
}
.cB-rg__head{
  position:absolute;top:16px;left:18px;right:18px;
  display:flex;justify-content:space-between;align-items:center;z-index:3;
  font-family:var(--font-mono);font-size:11px;letter-spacing:-0.02em;
  color:rgba(247,247,237,0.55);
}
.cB-rg__title{display:flex;align-items:center;gap:8px;color:var(--cream-50);}
.cB-rg__live{display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;
  background:rgba(193,250,29,0.08);border:1px solid rgba(193,250,29,0.25);
  color:var(--lime-500);}
.cB-rg__live::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--lime-500);box-shadow:0 0 6px var(--lime-500);
  animation:cBPulse 1.6s ease-in-out infinite;}
@keyframes cBPulse{0%,100%{opacity:0.5}50%{opacity:1}}

.cB-rg__svg{position:absolute;inset:0;width:100%;height:100%;z-index:1;}

.cB-rg__foot{
  position:absolute;bottom:0;left:0;right:0;
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(255,255,255,0.08);
  background:rgba(0,0,0,0.3);backdrop-filter:blur(8px);z-index:3;
}
.cB-rg__stat{padding:14px 18px;border-right:1px solid rgba(255,255,255,0.06);}
.cB-rg__stat:last-child{border-right:0;}
.cB-rg__sv{font-family:var(--font-display);font-size:22px;font-weight:400;
  letter-spacing:-0.02em;line-height:1;color:var(--cream-50);}
.cB-rg__sl{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;
  text-transform:uppercase;color:rgba(247,247,237,0.5);margin-top:4px;}

.cB-rg__legend{
  position:absolute;left:18px;bottom:90px;
  display:flex;gap:12px;z-index:3;
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.04em;
  color:rgba(247,247,237,0.55);text-transform:uppercase;
}
.cB-rg__legend span{display:inline-flex;align-items:center;gap:6px;}
.cB-rg__legend span::before{content:"";width:8px;height:8px;border-radius:50%;}
.cB-rg__legend .win::before{background:var(--lime-500);box-shadow:0 0 8px rgba(193,250,29,0.5);}
.cB-rg__legend .run::before{background:var(--violet-400);box-shadow:0 0 8px rgba(178,162,255,0.5);}
.cB-rg__legend .dead::before{background:rgba(247,247,237,0.2);}

.cB-node{transform-box:fill-box;transform-origin:center;}
/* Do NOT set transform on the node <g> — it would overwrite the SVG translate() attribute.
   Scale the inner visuals via a child group instead (see .cB-node__inner). */
.cB-node__inner{transform-box:fill-box;transform-origin:center;
  transition:transform 200ms var(--ease-out);}
.cB-node--focus .cB-node__inner{transform:scale(1.12);}
.cB-node--win circle{filter:drop-shadow(0 0 8px rgba(193,250,29,0.6));}
.cB-node--run circle{filter:drop-shadow(0 0 6px rgba(178,162,255,0.5));
  animation:cBNodePulse 2s ease-in-out infinite;}
@keyframes cBNodePulse{0%,100%{opacity:0.9}50%{opacity:0.6}}
.cB-node text{font-family:var(--font-mono);font-size:9px;letter-spacing:-0.02em;
  fill:rgba(247,247,237,0.7);transition:opacity 200ms;}
.cB-node--win text{fill:var(--lime-500);}
.cB-node--focus text{fill:var(--cream-50);font-weight:500;}
.cB-node--dim{transition:opacity 220ms;}
.cB-edge{transition:opacity 220ms, stroke-width 220ms;}
.cB-edge--active{filter:drop-shadow(0 0 4px rgba(193,250,29,0.5));}

/* hint pill in header */
.cB-rg__hint{
  font-family:var(--font-mono);font-size:10px;letter-spacing:0.04em;
  color:rgba(247,247,237,0.55);text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
  padding:3px 10px 3px 8px;border-radius:999px;
  background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);
}
.cB-rg__spin{
  width:10px;height:10px;border-radius:50%;
  border:1.5px solid rgba(193,250,29,0.2);
  border-top-color:var(--lime-500);
  animation:cBSpin 900ms linear infinite;
  flex-shrink:0;
}
@keyframes cBSpin{to{transform:rotate(360deg);}}

/* tooltip — follows the active node */
.cB-tip{
  position:absolute;z-index:5;pointer-events:none;
  transform:translate(16px, -50%);
  min-width:220px;max-width:260px;
  padding:12px 14px;border-radius:8px;
  background:rgba(15,14,22,0.94);
  border:1px solid rgba(193,250,29,0.32);
  backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(0,0,0,0.55),
             0 0 0 1px rgba(193,250,29,0.08);
  font-family:var(--font-mono);font-size:11px;line-height:1.45;
  letter-spacing:-0.01em;color:rgba(247,247,237,0.85);
  opacity:1;
  transition:opacity 150ms, transform 200ms var(--ease-out);
}
/* flip tooltip to the left when node is near right edge */
.cB-tip--left{
  transform:translate(calc(-100% - 16px), -50%);
}
.cB-tip__row{display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom:8px;gap:12px;}
.cB-tip__kind{font-size:9px;letter-spacing:0.1em;text-transform:uppercase;
  font-weight:500;}
.cB-tip__id{font-size:9px;color:rgba(247,247,237,0.35);letter-spacing:0.04em;text-transform:uppercase;}
.cB-tip__label{font-family:var(--font-display);font-size:17px;font-weight:400;
  letter-spacing:-0.01em;color:var(--cream-50);margin-bottom:10px;line-height:1.15;}
.cB-tip__paper{color:rgba(247,247,237,0.55);margin-bottom:8px;font-size:10.5px;}
.cB-tip__delta{color:var(--cream-50);margin-bottom:8px;
  padding:5px 8px;border-radius:4px;background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.06);font-size:11px;}
.cB-tip__status{font-size:10px;letter-spacing:0.02em;}
.cB-tip__foot{margin-top:10px;padding-top:8px;
  border-top:1px dashed rgba(255,255,255,0.08);
  font-size:9px;color:rgba(247,247,237,0.35);letter-spacing:0.04em;text-transform:uppercase;}

.cB-callout{
  position:absolute;z-index:2;pointer-events:none;
  font-family:var(--font-mono);font-size:10px;letter-spacing:-0.02em;
  padding:6px 10px;border-radius:6px;
  background:rgba(22,20,30,0.88);border:1px solid rgba(193,250,29,0.3);
  color:var(--cream-50);backdrop-filter:blur(8px);
  white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.cB-callout strong{color:var(--lime-500);font-weight:500;}
.cB-callout--violet{border-color:rgba(178,162,255,0.35);}
.cB-callout--violet strong{color:var(--violet-400);}

.cB-row{
  display:grid;grid-template-columns:20px 1fr 90px 80px 70px 70px 24px;
  gap:14px;align-items:center;padding:12px 14px;
  border-radius:8px;background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.05);font-size:13px;
  transition:all 200ms var(--ease-out);
}
.cB-row:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);}
.cB-row.on{background:rgba(92,50,240,0.1);border-color:rgba(92,50,240,0.35);}
.cB-row__dot{width:6px;height:6px;border-radius:50%;}
.cB-row__dot.low{background:var(--mint);}
.cB-row__dot.med{background:var(--amber);}
.cB-row__dot.high{background:var(--amber-alt);}
.cB-row__title{color:var(--cream-50);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cB-row__meta{font-family:var(--font-mono);font-size:11px;color:rgba(247,247,237,0.55);letter-spacing:-0.02em;}
.cB-row__delta{font-family:var(--font-mono);font-size:11px;display:inline-flex;align-items:center;gap:3px;
  padding:2px 6px;border-radius:4px;letter-spacing:-0.02em;}
.cB-row__delta.up{color:var(--mint);background:rgba(62,199,150,0.1);}
.cB-row__delta.down{color:#ff9b85;background:rgba(255,155,133,0.1);}
.cB-row__status{font-family:var(--font-mono);font-size:10px;letter-spacing:0.06em;text-transform:uppercase;}
.cB-row__status.live{color:var(--lime-500);}
.cB-row__status.queue{color:rgba(247,247,237,0.4);}
.cB-row__status.merged{color:var(--violet-400);}
.cB-row__arr{color:rgba(247,247,237,0.4);text-align:right;}

/* ---------- LOGOS STRIP ---------- */
.cB-logos{
  padding:40px 40px;
  border-top:1px solid transparent;border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(247,247,237,0.20) 50%,transparent) 1;
  display:flex;align-items:center;gap:56px;flex-wrap:wrap;justify-content:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:rgba(247,247,237,0.35);
}
.cB-logos__label{color:rgba(247,247,237,0.55);}
.cB-logos__item{font-family:var(--font-display);font-size:22px;color:rgba(247,247,237,0.5);letter-spacing:-0.015em;
  font-style:italic;font-weight:400;}

/* ---------- PROBLEM / SOLUTION ---------- */
/* shared */
.cB-ps{position:relative;}
.cB-ps__eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:rgba(247,247,237,0.45);display:inline-flex;align-items:center;gap:10px;}
.cB-ps__eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:0.5;}

/* --- V3: Problem-as-chart --- */
.cB-ps--v3{display:grid;grid-template-columns:1.1fr 1fr;background:var(--ink-900);}
.cB-ps--v3 .side{padding:96px 56px;}
.cB-ps--v3 .viz{border-right:1px solid rgba(255,255,255,0.08);position:relative;}
.cB-ps--v3 .txt{background:var(--cream-50);color:var(--ink-900);}
.cB-ps--v3 .txt .cB-ps__eyebrow{color:rgba(22,20,30,0.5);}
.cB-ps--v3 h2{font-family:var(--font-display);font-size:clamp(40px,4.4vw,56px);font-weight:400;
  letter-spacing:-0.025em;line-height:1.08;margin:20px 0 24px;max-width:16ch;}
.cB-ps--v3 p{font-size:16px;line-height:1.55;margin:0 0 14px;max-width:42ch;}
.cB-ps--v3 .viz p{color:rgba(247,247,237,0.7);}
.cB-ps--v3 .txt p{color:rgba(22,20,30,0.72);}
.cB-ps--v3 .chart{margin-top:40px;height:280px;position:relative;}
.cB-ps--v3 .chart svg{width:100%;height:100%;overflow:visible;}
.cB-ps--v3 .chart__cap{display:flex;justify-content:space-between;align-items:baseline;
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08);
  font-family:var(--font-mono);font-size:11px;color:rgba(247,247,237,0.55);letter-spacing:-0.01em;}
.cB-ps--v3 .chart__cap strong{color:var(--cream-50);font-weight:500;}
.cB-ps--v3 .prp{
  margin-top:40px;background:var(--cream-50);border:1px solid rgba(22,20,30,0.14);
  border-radius:6px;overflow:hidden;box-shadow:0 1px 0 rgba(22,20,30,0.04), 0 24px 48px -32px rgba(22,20,30,0.25);
  font-family:var(--font-sans);color:var(--ink-900);
}
.cB-ps--v3 .prp__head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 16px;border-bottom:1px solid rgba(22,20,30,0.1);
  background:rgba(22,20,30,0.02);
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.02em;
}
.cB-ps--v3 .prp__meta{display:flex;gap:12px;align-items:center;color:rgba(22,20,30,0.65);}
.cB-ps--v3 .prp__num{color:var(--ink-900);font-weight:600;}
.cB-ps--v3 .prp__branch{color:rgba(22,20,30,0.55);}
.cB-ps--v3 .prp__status{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 9px;border-radius:999px;background:#2DA44E;color:#fff;
  font-size:10px;letter-spacing:0.1em;font-weight:600;
}
.cB-ps--v3 .prp__status::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;}
.cB-ps--v3 .prp__title{
  font-family:var(--font-display);font-size:20px;font-weight:400;line-height:1.3;
  letter-spacing:-0.015em;padding:18px 20px 6px;
}
.cB-ps--v3 .prp__byline{
  padding:0 20px 16px;font-size:12.5px;color:rgba(22,20,30,0.6);
  display:flex;align-items:center;gap:8px;border-bottom:1px solid rgba(22,20,30,0.08);
}
.cB-ps--v3 .prp__byline strong{color:var(--ink-900);font-weight:500;}
.cB-ps--v3 .prp__byline code{
  font-family:var(--font-mono);font-size:11px;background:rgba(22,20,30,0.06);
  padding:1px 6px;border-radius:3px;color:var(--ink-900);
}
.cB-ps--v3 .prp__av{
  width:18px;height:18px;border-radius:4px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--lime-500),#86c015);
  box-shadow:inset 0 0 0 1px rgba(22,20,30,0.2);
}
.cB-ps--v3 .prp__diff{border-bottom:1px solid rgba(22,20,30,0.08);}
.cB-ps--v3 .prp__diffhead{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 20px;font-family:var(--font-mono);font-size:11px;
  color:rgba(22,20,30,0.65);background:rgba(22,20,30,0.025);
}
.cB-ps--v3 .prp__diffstat .add{color:#1f883d;}
.cB-ps--v3 .prp__diffstat .del{color:#cf222e;}
.cB-ps--v3 .prp__code{
  padding:10px 0;font-family:var(--font-mono);font-size:11.5px;
  line-height:1.7;overflow-x:auto;
}
.cB-ps--v3 .prp__code .row{display:flex;align-items:baseline;white-space:pre;}
.cB-ps--v3 .prp__code .row--rm{background:rgba(255,129,130,0.14);}
.cB-ps--v3 .prp__code .row--ad{background:rgba(46,160,67,0.14);}
.cB-ps--v3 .prp__code .ln{
  flex:0 0 44px;padding-right:12px;text-align:right;
  color:rgba(22,20,30,0.35);user-select:none;
}
.cB-ps--v3 .prp__code .sign{
  flex:0 0 14px;text-align:center;font-weight:600;
}
.cB-ps--v3 .prp__code .row--rm .sign{color:#82071e;}
.cB-ps--v3 .prp__code .row--ad .sign{color:#116329;}
.cB-ps--v3 .prp__code .ctx{color:rgba(22,20,30,0.8);}
.cB-ps--v3 .prp__code .rm{color:#82071e;}
.cB-ps--v3 .prp__code .ad{color:#116329;}
.cB-ps--v3 .prp__result{padding:16px 20px 12px;border-bottom:1px solid rgba(22,20,30,0.08);}
.cB-ps--v3 .prp__resHead{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.06em;
  text-transform:uppercase;color:rgba(22,20,30,0.6);margin-bottom:8px;
}
.cB-ps--v3 .prp__resLabel{letter-spacing:0.08em;}
.cB-ps--v3 .prp__resDelta{
  font-family:var(--font-display);font-size:18px;font-weight:500;
  color:#116329;letter-spacing:-0.01em;text-transform:none;
}
.cB-ps--v3 .prp__sparkWrap{position:relative;}
.cB-ps--v3 .prp__spark{width:100%;height:56px;display:block;}
.cB-ps--v3 .prp__sparkLbl{
  position:absolute;font-family:var(--font-mono);font-size:10px;
  color:rgba(22,20,30,0.55);letter-spacing:-0.01em;pointer-events:none;
}
.cB-ps--v3 .prp__sparkLbl--base{top:0;left:8px;background:var(--cream-50);padding:0 4px;}
.cB-ps--v3 .prp__sparkLbl--mira{bottom:2px;right:8px;color:var(--ink-900);font-weight:500;background:var(--cream-50);padding:0 4px;}
.cB-ps--v3 .prp__steps{
  display:flex;justify-content:space-between;margin-top:4px;
  font-family:var(--font-mono);font-size:10px;color:rgba(22,20,30,0.4);
}
.cB-ps--v3 .prp__checks{
  display:flex;flex-wrap:wrap;gap:14px;padding:12px 20px;
  font-family:var(--font-mono);font-size:11px;color:rgba(22,20,30,0.6);
  background:rgba(22,20,30,0.02);
}
.cB-ps--v3 .prp__chk--ok{color:#1f883d;}
.cB-ps--v3 .prp__chk--dot{position:relative;padding-left:14px;}
.cB-ps--v3 .prp__chk--dot::before{
  content:"";position:absolute;left:0;top:50%;width:5px;height:5px;border-radius:50%;
  background:rgba(22,20,30,0.3);transform:translateY(-50%);
}

/* ---------- HOW IT WORKS ---------- */
.cB-how{background:var(--ink-900);padding:120px 40px;border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(247,247,237,0.20) 50%,transparent) 1;}
.cB-how__inner{max-width:1280px;margin:0 auto;}
.cB-how__head{display:flex;justify-content:space-between;align-items:flex-end;
  margin-bottom:72px;flex-wrap:wrap;gap:20px;}
.cB-how__title{font-family:var(--font-display);font-size:clamp(40px,4.4vw,56px);font-weight:400;
  letter-spacing:-0.03em;line-height:1.05;margin:0;}
.cB-how__sub{font-family:var(--font-display);font-size:26px;font-weight:400;
  letter-spacing:-0.015em;line-height:1.2;margin:14px 0 0;
  color:rgba(247,247,237,0.55);}
.cB-how__title em{font-family:var(--font-serif);font-style:italic;}
.cB-how__kicker{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;
  text-transform:uppercase;color:rgba(247,247,237,0.5);}
.cB-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.08);border-radius:8px;overflow:hidden;}
.cB-step{background:var(--ink-900);padding:32px 24px;min-height:280px;
  display:flex;flex-direction:column;position:relative;}
.cB-step--verify{background:linear-gradient(180deg, rgba(193,250,29,0.06) 0%, var(--ink-900) 100%);}
.cB-step--verify::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--lime-500);opacity:0.7;}
.cB-step__num{font-family:var(--font-mono);font-size:11px;letter-spacing:0.08em;
  color:var(--lime-500);margin-bottom:20px;}
.cB-step__icon{height:120px;display:flex;align-items:stretch;
  margin:-4px -8px 22px;padding:14px;border-radius:6px;
  background:rgba(255,255,255,0.025);
  border:1px solid rgba(255,255,255,0.06);
  color:rgba(247,247,237,0.85);position:relative;overflow:hidden;}
.cB-step__icon svg{height:100%;width:100%;display:block;}
.cB-step__icon .accent{color:var(--lime-500);}
.cB-step__icon .dim{color:rgba(247,247,237,0.35);}
.cB-step__icon .ink{color:rgba(247,247,237,0.7);}
.cB-step--verify .cB-step__icon{
  background:rgba(193,250,29,0.04);
  border-color:rgba(193,250,29,0.18);}
.cB-step__title{font-family:var(--font-display);font-size:22px;font-weight:400;
  letter-spacing:-0.015em;margin:0 0 12px;}
.cB-step__desc{font-size:14px;line-height:1.55;color:rgba(247,247,237,0.68);margin:0 0 20px;}
.cB-step__mono{font-family:var(--font-mono);font-size:11px;color:rgba(247,247,237,0.4);
  letter-spacing:-0.02em;margin-top:auto;padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.08);}
.cB-step__mono strong{color:var(--cream-50);font-weight:500;}

/* ---------- VERIFICATION ---------- */
.cB-verify{background:var(--ink-900);padding:120px 40px;border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(247,247,237,0.20) 50%,transparent) 1;}
.cB-verify__inner{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1fr 1.2fr;gap:80px;align-items:center;}
.cB-verify__eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--lime-500);display:inline-flex;align-items:center;gap:10px;}
.cB-verify__eyebrow::before{content:"";width:18px;height:1px;background:currentColor;opacity:0.6;}
.cB-verify__title{font-family:var(--font-display);font-size:clamp(40px,4.4vw,56px);font-weight:400;
  letter-spacing:-0.028em;line-height:1.05;margin:20px 0 28px;}
.cB-verify__title em{font-family:var(--font-serif);font-style:italic;color:var(--cream-50);}
.cB-verify__body{font-size:17px;line-height:1.55;color:rgba(247,247,237,0.72);margin:0 0 16px;max-width:48ch;}
.cB-verify__body strong{color:var(--cream-50);font-weight:500;}

/* Diagram — "agent proposes, verifier decides" */
.cB-vdiag{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;padding:32px;
  font-family:var(--font-mono);font-size:12px;
  position:relative;
}
.cB-vdiag__title{font-size:10px;letter-spacing:0.08em;text-transform:uppercase;
  color:rgba(247,247,237,0.45);margin-bottom:20px;
  display:flex;justify-content:space-between;align-items:center;}
.cB-vdiag__title .dot{width:6px;height:6px;border-radius:50%;background:var(--lime-500);
  box-shadow:0 0 6px var(--lime-500);display:inline-block;margin-right:6px;
  animation:cBPulse 1.6s ease-in-out infinite;}
.cB-vflow{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;}
.cB-vcard{
  border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:16px;
  background:rgba(22,20,30,0.6);
}
.cB-vcard--agent{border-color:rgba(178,162,255,0.25);}
.cB-vcard--verify{border-color:rgba(193,250,29,0.35);background:rgba(193,250,29,0.04);}
.cB-vcard__tag{font-size:10px;letter-spacing:0.06em;text-transform:uppercase;
  color:rgba(247,247,237,0.5);margin-bottom:8px;display:flex;justify-content:space-between;}
.cB-vcard--agent .cB-vcard__tag{color:var(--violet-400);}
.cB-vcard--verify .cB-vcard__tag{color:var(--lime-500);}
.cB-vcard__body{color:rgba(247,247,237,0.85);line-height:1.5;letter-spacing:-0.01em;}
.cB-vcard__body .muted{color:rgba(247,247,237,0.5);}
.cB-vcard__body .ok{color:var(--lime-500);}
.cB-vcard__body .bad{color:#ff9b85;}
.cB-vgate{
  grid-row:1 / span 2;align-self:center;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:rgba(247,247,237,0.5);font-size:18px;min-width:40px;
}
.cB-vgate svg{width:32px;height:32px;}
.cB-vlist{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.cB-vrow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding:4px 0;border-bottom:1px dashed rgba(255,255,255,0.06);font-size:11px;}
.cB-vrow:last-child{border-bottom:0;}
.cB-vrow__k{color:rgba(247,247,237,0.55);}
.cB-vrow__v{color:var(--cream-50);letter-spacing:-0.01em;}
.cB-vrow__v.ok{color:var(--lime-500);}
.cB-vrow__v.bad{color:#ff9b85;}
.cB-vdiag__foot{margin-top:20px;padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:11px;color:rgba(247,247,237,0.55);letter-spacing:-0.01em;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;}
.cB-vdiag__foot strong{color:var(--lime-500);font-weight:500;}

/* ---------- QUOTE ---------- */
.cB-quote{padding:120px 40px;background:var(--ink-900);border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(247,247,237,0.20) 50%,transparent) 1;}
.cB-quote__inner{max-width:900px;margin:0 auto;}
.cB-quote__body{font-family:var(--font-display);font-size:clamp(32px,4vw,48px);
  font-weight:300;line-height:1.25;letter-spacing:-0.025em;margin:0 0 32px;}
.cB-quote__body::before{content:"\\201C";color:var(--lime-500);margin-right:4px;}
.cB-quote__cite{display:flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:13px;color:rgba(247,247,237,0.6);letter-spacing:-0.02em;}
.cB-quote__avatar{width:44px;height:44px;border-radius:50%;
  background:url('assets/dario.png') 52% 40% / cover no-repeat, var(--ink-600);
  border:1px solid rgba(255,255,255,0.15);}
.cB-quote__cite strong{color:var(--cream-50);font-weight:500;}

/* ---------- CTA ---------- */
.cB-cta{padding:120px 40px;border-top:1px solid rgba(255,255,255,0.08);
  text-align:center;background:linear-gradient(180deg, var(--ink-900) 0%, var(--ink-800) 100%);}
.cB-cta__title{font-family:var(--font-display);font-size:clamp(44px,6vw,72px);
  font-weight:400;letter-spacing:-0.035em;line-height:1;margin:0 0 24px;}
.cB-cta__sub{font-size:18px;color:rgba(247,247,237,0.7);max-width:520px;
  margin:0 auto 40px;line-height:1.5;}
.cB-cta__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- DEPLOYMENT · TWO PATHS ---------- */
.cB-deploy{
  padding:88px 40px 96px;background:var(--ink-900);
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(247,247,237,0.20) 50%,transparent) 1;
}
.cB-deploy__kicker{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:rgba(247,247,237,0.55);
  text-align:center;margin-bottom:48px;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.cB-deploy__eclipse{
  position:relative;width:22px;height:22px;flex-shrink:0;
}
.cB-deploy__eclipse::before,
.cB-deploy__eclipse::after{
  content:"";position:absolute;border:1px solid rgba(247,247,237,0.55);border-radius:50%;
}
.cB-deploy__eclipse::before{inset:0;}
.cB-deploy__eclipse::after{width:13px;height:13px;left:8px;top:5px;}
.cB-deploy__grid{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;
  max-width:760px;margin:0 auto;justify-content:center;
}
.cB-deploy__col{display:flex;flex-direction:column;align-items:center;text-align:center;}
.cB-deploy__cta{margin-top:40px;display:flex;justify-content:center;}
.cB-deploy__h{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--cream-50);
  margin-bottom:16px;font-weight:500;
}
.cB-deploy__p{
  font-size:15px;line-height:1.55;color:rgba(247,247,237,0.72);
  margin:0;max-width:340px;
}
.cB-deploy__btn{
  font-family:var(--font-mono);font-size:11px;letter-spacing:0.14em;
  text-transform:uppercase;white-space:nowrap;
  padding:13px 22px;border-radius:4px;cursor:pointer;
  transition:transform 150ms, background 150ms, border-color 150ms;
}
.cB-deploy__btn--solid{
  background:var(--cream-50);color:var(--ink-900);border:1px solid var(--cream-50);
}
.cB-deploy__btn--solid:hover{transform:translateY(-1px);background:#fff;}
.cB-deploy__btn--ghost{
  background:rgba(255,255,255,0.06);color:var(--cream-50);
  border:1px solid rgba(255,255,255,0.18);
}
.cB-deploy__btn--ghost:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.3);}

@media(max-width:1000px){
  .cB-hero__inner{grid-template-columns:1fr;}
  .cB-ps--v3{grid-template-columns:1fr;}
  .cB-ps--v3 .viz{border-right:0;border-bottom:1px solid rgba(255,255,255,0.08);}
  .cB-steps{grid-template-columns:1fr 1fr;}  .cB-row{grid-template-columns:14px 1fr 60px 20px;}
  .cB-row__meta:not(:first-of-type),.cB-row__delta{display:none;}
  .cB-verify__inner{grid-template-columns:1fr;gap:40px;}
  .cB-vflow{grid-template-columns:1fr;}
  .cB-vgate{grid-row:auto;transform:rotate(90deg);}
}
@media(max-width:640px){
  .cB-hero{padding:112px 20px 48px;min-height:auto;}
  .cB-hero__inner{gap:48px;margin:0 auto;}
  .cB-hero__inner > *{min-width:0;}
  .cB-hero__title{font-size:clamp(48px,14vw,60px);}
  .cB-hero__sub{max-width:none;font-size:17px;}
  .cB-hero__graphic{min-width:0;overflow:hidden;}
  .cB-rg{min-height:420px;}
}
`;

// ---------- HOW-IT-WORKS step diagrams (concept B variant) ----------
// Each one is a miniature of the actual artifact for that step:
//   1  arXiv paper card (title + abstract lines + tag)
//   2  loss-curve experiment plot
//   3  eval results table with pass/fail rows
//   4  GitHub PR diff with +/- rows

// 1 — Paper preview. Mimics an arXiv abstract card.
const HowIcon_Paper = () =>
<svg viewBox="0 0 220 120" preserveAspectRatio="xMidYMid meet">
    {/* page — narrower, taller, paper-like proportions */}
    <rect x="38" y="4" width="144" height="112" rx="1.5"
  fill="rgba(247,247,237,0.06)"
  stroke="currentColor" strokeOpacity="0.4" strokeWidth="0.7" />
    {/* dog-ear corner */}
    <path d="M174 4 L182 4 L182 12 Z"
  fill="currentColor" fillOpacity="0.15"
  stroke="currentColor" strokeOpacity="0.4" strokeWidth="0.5" />
    <path d="M174 4 L174 12 L182 12"
  fill="none" stroke="currentColor" strokeOpacity="0.4" strokeWidth="0.5" />

    {/* arxiv tag — top-left */}
    <rect className="accent" x="42" y="9" width="32" height="7" rx="1"
  fill="currentColor" fillOpacity="0.2"
  stroke="currentColor" strokeOpacity="0.6" strokeWidth="0.5" />
    <text className="accent" x="44" y="14.4" fontSize="4.6"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  letterSpacing="0.4" fill="currentColor">arXiv:2503</text>

    {/* TITLE — centered, 2 lines, prominent */}
    <rect x="62" y="22" width="96" height="3.4" rx="0.5"
  fill="currentColor" fillOpacity="0.95" />
    <rect x="76" y="28" width="68" height="3.4" rx="0.5"
  fill="currentColor" fillOpacity="0.95" />

    {/* AUTHORS — short centered line */}
    <rect x="80" y="36" width="60" height="1.6" rx="0.4"
  fill="currentColor" fillOpacity="0.5" />
    {/* affiliation */}
    <rect x="88" y="40" width="44" height="1.3" rx="0.4"
  fill="currentColor" fillOpacity="0.32" />

    {/* "Abstract" label */}
    <text x="110" y="49" fontSize="3.6"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  textAnchor="middle"
  fill="currentColor" fillOpacity="0.8"
  letterSpacing="0.4">Abstract</text>

    {/* TWO-COLUMN BODY — left column */}
    <g fill="currentColor" fillOpacity="0.45">
      <rect x="44" y="56" width="62" height="1.5" rx="0.3" />
      <rect x="44" y="60" width="62" height="1.5" rx="0.3" />
      <rect x="44" y="64" width="62" height="1.5" rx="0.3" />
      <rect x="44" y="68" width="54" height="1.5" rx="0.3" />
      <rect x="44" y="72" width="62" height="1.5" rx="0.3" />
      <rect x="44" y="76" width="40" height="1.5" rx="0.3" />
    </g>
    {/* small inline figure box */}
    <rect x="44" y="82" width="62" height="14"
  fill="currentColor" fillOpacity="0.06"
  stroke="currentColor" strokeOpacity="0.3" strokeWidth="0.5" />
    {/* tiny chart — both lines must stay inside the box (y 82–96) */}
    <path d="M48 93 L56 91 L62 92 L72 89 L80 90 L92 88 L102 89"
  fill="none" stroke="currentColor" strokeOpacity="0.5" strokeWidth="0.6"
  strokeLinecap="round" strokeLinejoin="round" />
    <path className="accent"
  d="M48 92 L56 89 L62 88 L72 86 L80 85 L92 84 L102 84"
  fill="none" stroke="currentColor" strokeWidth="0.9"
  strokeLinecap="round" strokeLinejoin="round" />
    <text x="44" y="101" fontSize="3.2"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.5">Fig. 1</text>
    <g fill="currentColor" fillOpacity="0.45">
      <rect x="44" y="105" width="62" height="1.5" rx="0.3" />
      <rect x="44" y="109" width="46" height="1.5" rx="0.3" />
    </g>

    {/* RIGHT column */}
    <g fill="currentColor" fillOpacity="0.45">
      <rect x="114" y="56" width="62" height="1.5" rx="0.3" />
      <rect x="114" y="60" width="62" height="1.5" rx="0.3" />
      <rect x="114" y="64" width="44" height="1.5" rx="0.3" />
    </g>
    {/* section header */}
    <text x="114" y="72" fontSize="3.6"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.85" letterSpacing="0.3">
      1   Introduction
    </text>
    <g fill="currentColor" fillOpacity="0.45">
      <rect x="114" y="78" width="62" height="1.5" rx="0.3" />
      <rect x="114" y="82" width="62" height="1.5" rx="0.3" />
      <rect x="114" y="86" width="56" height="1.5" rx="0.3" />
      <rect x="114" y="90" width="62" height="1.5" rx="0.3" />
      <rect x="114" y="94" width="62" height="1.5" rx="0.3" />
      <rect x="114" y="98" width="36" height="1.5" rx="0.3" />
    </g>
    {/* equation pseudo-line */}
    <text x="144" y="107" fontSize="4.5"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  textAnchor="middle"
  fill="currentColor" fillOpacity="0.75"
  fontStyle="italic">L = Σ ℓᵢ  (1)</text>
  </svg>;

// 2 — Loss curve. Two runs (baseline ghost, candidate accent) plus axes.
const HowIcon_Loss = () =>
<svg viewBox="0 0 220 120" preserveAspectRatio="xMidYMid meet">
    {/* axes */}
    <line x1="22" y1="14" x2="22" y2="100" stroke="currentColor" strokeOpacity="0.35" strokeWidth="0.6" />
    <line x1="22" y1="100" x2="206" y2="100" stroke="currentColor" strokeOpacity="0.35" strokeWidth="0.6" />
    {/* y ticks */}
    {[24, 44, 64, 84].map((y, i) =>
  <g key={"ty" + i}>
        <line x1="20" y1={y} x2="22" y2={y} stroke="currentColor" strokeOpacity="0.35" strokeWidth="0.6" />
        <line x1="22" y1={y} x2="206" y2={y} stroke="currentColor" strokeOpacity="0.06" strokeWidth="0.5" strokeDasharray="1.5 2" />
      </g>
  )}
    {/* x ticks */}
    {[60, 100, 140, 180].map((x, i) =>
  <line key={"tx" + i} x1={x} y1="100" x2={x} y2="102" stroke="currentColor" strokeOpacity="0.35" strokeWidth="0.6" />
  )}
    {/* axis labels */}
    <text x="10" y="22" fontSize="5" fontFamily="ui-monospace,SFMono-Regular,monospace" fill="currentColor" fillOpacity="0.45">score</text>
    <text x="184" y="112" fontSize="5" fontFamily="ui-monospace,SFMono-Regular,monospace" fill="currentColor" fillOpacity="0.45">step</text>
    {/* baseline run — climbs, plateaus high */}
    <path
    d="M22 86 C36 80, 50 70, 70 58 S110 40, 140 36 S180 32, 206 32"
    fill="none" stroke="currentColor" strokeOpacity="0.45" strokeWidth="1.2" strokeDasharray="2 2.2" />
    <text x="180" y="42" fontSize="5" fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.45">baseline</text>
    {/* candidate run — climbs higher, plateaus near top */}
    <path className="accent"
  d="M22 84 C36 76, 52 64, 72 50 S114 28, 144 22 S188 18, 206 18"
  fill="none" stroke="currentColor" strokeWidth="1.6" />
    {/* current step marker */}
    <circle className="accent" cx="206" cy="18" r="2.4" fill="currentColor" />
    <circle className="accent" cx="206" cy="18" r="4.2" fill="none" stroke="currentColor" strokeWidth="0.8" strokeOpacity="0.5" />
    <text className="accent" x="158" y="14" fontSize="5" fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor">candidate +12.4%</text>
  </svg>;

// 3 — Eval results table. Header + 4 rows, last row is the candidate (green).
const HowIcon_Eval = () =>
<svg viewBox="0 0 220 120" preserveAspectRatio="xMidYMid meet">
    {/* table frame */}
    <rect x="14" y="6" width="192" height="108" rx="2"
  fill="rgba(247,247,237,0.03)"
  stroke="currentColor" strokeOpacity="0.25" strokeWidth="0.6" />
    {/* header bar */}
    <rect x="14" y="6" width="192" height="14" rx="2"
  fill="currentColor" fillOpacity="0.06" />
    <text x="22" y="15" fontSize="5.5" fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.55" letterSpacing="0.4">METRIC</text>
    <text x="120" y="15" fontSize="5.5" fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.55" letterSpacing="0.4">SCORE</text>
    <text x="170" y="15" fontSize="5.5" fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.55" letterSpacing="0.4">PASS</text>
    {/* divider */}
    <line x1="14" y1="20" x2="206" y2="20" stroke="currentColor" strokeOpacity="0.18" strokeWidth="0.5" />
    {/* rows */}
    {[
  { y: 30, label: "MMLU-Pro", score: "78.2", pass: true, hl: false },
  { y: 46, label: "GSM8K", score: "92.4", pass: true, hl: false },
  { y: 62, label: "HumanEval", score: "84.1", pass: true, hl: false },
  { y: 78, label: "Long-context", score: "91.6", pass: true, hl: false },
  { y: 94, label: "Custom eval", score: "+5.4", pass: true, hl: true }].
  map((r, i) =>
  <g key={"r" + i}>
        {r.hl &&
    <rect x="14" y={r.y - 8} width="192" height="14"
    fill="currentColor" fillOpacity="0.1" className="accent" />
    }
        <text x="22" y={r.y} fontSize="6" fontFamily="ui-monospace,SFMono-Regular,monospace"
    fill="currentColor" fillOpacity={r.hl ? 0.95 : 0.78}>
          {r.label}
        </text>
        <text x="120" y={r.y} fontSize="6" fontFamily="ui-monospace,SFMono-Regular,monospace"
    fill="currentColor" fillOpacity={r.hl ? 0.95 : 0.78}>
          {r.score}
        </text>
        {/* check */}
        <path className={r.hl ? "accent" : ""}
    d={"M170 " + (r.y - 2) + " l3 3 l6 -7"}
    fill="none" stroke="currentColor" strokeOpacity={r.hl ? 1 : 0.55}
    strokeWidth={r.hl ? 1.6 : 1.1} strokeLinecap="round" strokeLinejoin="round" />
      </g>
  )}
  </svg>;

// 4 — PR diff. Header + a few +/- diff lines. Uses real GitHub colors.
const HowIcon_PR = () =>
<svg viewBox="0 0 220 120" preserveAspectRatio="xMidYMid meet">
    {/* outer card */}
    <rect x="14" y="6" width="192" height="108" rx="2"
  fill="rgba(247,247,237,0.03)"
  stroke="currentColor" strokeOpacity="0.25" strokeWidth="0.6" />

    {/* HEADER bar */}
    <rect x="14" y="6" width="192" height="22" rx="2"
  fill="currentColor" fillOpacity="0.06" />
    <line x1="14" y1="28" x2="206" y2="28" stroke="currentColor" strokeOpacity="0.18" strokeWidth="0.5" />

    {/* MERGED chip — GitHub purple #8957e5 */}
    <rect x="22" y="11" width="48" height="13" rx="6.5"
  fill="rgba(137,87,229,0.22)"
  stroke="#a371f7" strokeOpacity="0.85" strokeWidth="0.6" />
    <g stroke="#c4b1f7" fill="none" strokeWidth="0.9" strokeLinecap="round">
      <circle cx="29" cy="14.8" r="1.2" fill="#c4b1f7" />
      <circle cx="29" cy="20.2" r="1.2" fill="#c4b1f7" />
      <circle cx="35" cy="17.5" r="1.2" fill="#c4b1f7" />
      <path d="M29 16 Q 29 17.5 33.8 17.5" />
      <path d="M29 19 Q 29 17.5 33.8 17.5" />
    </g>
    <text x="40" y="20" fontSize="6.5"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="#c4b1f7" letterSpacing="0.4">MERGED</text>

    {/* PR title */}
    <text x="78" y="20" fontSize="7"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.92">attn-kernel sweep</text>

    {/* PR number */}
    <text x="178" y="20" fontSize="6.5"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.55">#247</text>

    {/* SUBHEADER — branch info */}
    <text x="22" y="40" fontSize="5.5"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.5">mira/attn-kernel</text>
    <path d="M76 38.4 L82 38.4 M80 36.4 L82 38.4 L80 40.4"
  stroke="currentColor" strokeOpacity="0.5" strokeWidth="0.8"
  fill="none" strokeLinecap="round" strokeLinejoin="round" />
    <text x="86" y="40" fontSize="5.5"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.5">main</text>
    <text x="138" y="40" fontSize="5.5"
  fontFamily="ui-monospace,SFMono-Regular,monospace"
  fill="currentColor" fillOpacity="0.45">src/attention.py</text>

    <line x1="14" y1="46" x2="206" y2="46" stroke="currentColor" strokeOpacity="0.12" strokeWidth="0.5" />

    {/* DIFF block */}
    <rect x="14" y="46" width="22" height="68" fill="currentColor" fillOpacity="0.04" />
    <line x1="36" y1="46" x2="36" y2="114" stroke="currentColor" strokeOpacity="0.12" strokeWidth="0.5" />

    {[
  { y: 56, lineL: "42", lineR: "42", sign: " ", op: "context", w: 132, dim: true },
  { y: 67, lineL: "43", lineR: "", sign: "−", op: "del", w: 110, dim: false },
  { y: 78, lineL: "44", lineR: "", sign: "−", op: "del", w: 88, dim: false },
  { y: 89, lineL: "", lineR: "43", sign: "+", op: "add", w: 124, dim: false },
  { y: 100, lineL: "", lineR: "44", sign: "+", op: "add", w: 142, dim: false },
  { y: 111, lineL: "45", lineR: "45", sign: " ", op: "context", w: 76, dim: true }].
  map((l, i) => {
    const isAdd = l.op === "add";
    const isDel = l.op === "del";
    // Brand lime for additions, muted red for deletions
    const rowFill =
    isAdd ? "rgba(193,250,29,0.14)" :
    isDel ? "rgba(248,81,73,0.08)" :
    "transparent";
    const signColor = isAdd ? "#C1FA1D" : isDel ? "#a86862" : "currentColor";
    const barColor = isAdd ? "#C1FA1D" : isDel ? "#a86862" : "currentColor";
    const barOp = l.dim ? 0.3 : isAdd ? 0.95 : 0.6;
    return (
      <g key={"d" + i}>
            <rect x="36" y={l.y - 8} width="170" height="10" fill={rowFill} />
            <text x="22" y={l.y} fontSize="5"
        fontFamily="ui-monospace,SFMono-Regular,monospace"
        textAnchor="middle"
        fill="currentColor" fillOpacity="0.4">{l.lineL}</text>
            <text x="32" y={l.y} fontSize="5"
        fontFamily="ui-monospace,SFMono-Regular,monospace"
        textAnchor="middle"
        fill="currentColor" fillOpacity="0.4">{l.lineR}</text>
            <text x="42" y={l.y} fontSize="6.5"
        fontFamily="ui-monospace,SFMono-Regular,monospace"
        fill={signColor}
        fillOpacity={isAdd || isDel ? 1 : 0.3}>
              {l.sign}
            </text>
            <rect x="50" y={l.y - 4.5} width={l.w} height="2.4" rx="1"
        fill={barColor}
        fillOpacity={barOp} />
          </g>);

  })}
  </svg>;

const HOW_ICONS = [HowIcon_Paper, HowIcon_Loss, HowIcon_Eval, HowIcon_PR];
window.HOW_ICONS = HOW_ICONS;


const ConceptB = () =>
<div className="cB concept cB--galaxy">
    <style dangerouslySetInnerHTML={{ __html: B_css }} />
    <Nav />

    {/* HERO */}
    <section className="cB-hero" data-screen-label="01 Hero">
      <div className="cB-hero__bg" />
      <div className="cB-hero__inner">
        <div>
          <p className="cB-hero__eyebrow">Mira &mdash;</p>
          <h1 className="cB-hero__title">
            <em>ML Research</em>.<br />
            Fully Automated.
          </h1>
          <p className="cB-hero__sub">For companies building state-of-the-art machine learning. Complete the frontier work your competitors are skipping — on autopilot.</p>
          <div className="cB-hero__ctas">
            <a className="pill-btn pill-btn--violet" href="/get-started">Book a demo <span style={{ opacity: 0.7 }}>→</span></a>
          </div>
        </div>

        <div className="cB-hero__graphic">
          <PSA_SwarmHero />
        </div>
      </div>
    </section>


    {/* ======== HOW IT WORKS ======== */}
    {window.HeroMorph && <window.HeroMorph />}

    {/* ======== OPTIMIZE FOR ======== */}
    {window.Outcomes && <window.Outcomes />}

    {/* ======== QUOTE ======== */}
    <section className="cB-quote">
      <div className="cB-quote__inner">
        <p className="cB-quote__body">The biggest thing to watch is this issue of AI systems building AI systems.

      </p>
        <div className="cB-quote__cite">
          <div className="cB-quote__avatar" />
          <div>
            <strong>Dario Amodei</strong>, CEO Anthropic<br />
            <span style={{ opacity: 0.6 }}>World Economic Forum · Davos 2026</span>
          </div>
        </div>
      </div>
    </section>

    {/* DEPLOYMENT */}
    <section className="cB-deploy">
      <div className="cB-deploy__kicker"><span className="cB-deploy__eclipse" aria-hidden="true" /> Secure for enterprises</div>
      <div className="cB-deploy__grid">
        <div className="cB-deploy__col">
          <div className="cB-deploy__h">In the cloud</div>
          <p className="cB-deploy__p">Your model, your data, and our GPUs. Start receiving PRs the same week.</p>
        </div>
        <div className="cB-deploy__col">
          <div className="cB-deploy__h">On your infra</div>
          <p className="cB-deploy__p">Full on-prem deployment. Your data never leaves your network. Same agents, same results.</p>
        </div>
      </div>
      <div className="cB-deploy__cta">
        <a className="cB-deploy__btn cB-deploy__btn--solid" href="/get-started">Get started</a>
      </div>
    </section>

    <Footer accent="#C1FA1D" />
  </div>;


window.ConceptB = ConceptB;