Anti-Grid Bento

/* Anti-Grid Bento — Connected cards with concave curves */

/* 1. Grid layout: 4 cols, defined rows, gap creates space for bridges */
<div className="grid gap-[28px]" style={{
  gridTemplateColumns: "repeat(4, 1fr)",
  gridTemplateRows: "700px 252px 252px",
}}>

  {/* Hero card — selective border-radius: connected corner = 0 */}
  <div style={{
    gridColumn: "1 / -1",
    borderRadius: "42px 42px 42px 0px",
    border: "1.6px solid #161616",
    backgroundColor: "#0d0d0d",
  }}>...</div>

  {/* Chart card — connected to hero above */}
  <div style={{
    gridColumn: "1 / span 3",
    gridRow: "2 / span 2",
    borderRadius: "0px 0px 42px 42px",
  }}>...</div>

  {/* Feature cards — standalone, full radius */}
  <div style={{ borderRadius: 42 }}>...</div>
</div>

/* 2. Bridge: fills the gap between connected cards */
<div className="pointer-events-none relative z-10"
  style={{ gridColumn: "1 / span 3", gridRow: "2 / span 2" }}>
  <div className="absolute bg-[#0d0d0d]"
    style={{ top: -32, left: -2, width: "calc(100% + 4px)", height: 34 }} />
</div>

/* 3. Concave curve: clipPath triangle + oversized circle */
function AntiGridCurve({ rotate = "0deg" }) {
  return (
    <div style={{ width: 64, height: 64, clipPath: "polygon(0 100%, 100% 0, 0 0)", rotate }}>
      <div style={{ width: 66, height: 66, backgroundColor: "#0d0d0d" }} />
      <div className="absolute inset-0 rounded-full" style={{
        width: 134.5, height: 134.5,
        backgroundColor: "#020202",
        border: "1.6px solid #161616",
      }} />
    </div>
  );
}