Redesign homepage as an Apple-style bento grid

Replace the flat minimal sections with a bento layout (ui-ux-pro-max "Bento
Box Grid" style) while keeping the light theme and single blue accent.

- Bento grid system in CSS: 4-col -> 2-col -> 1-col, varied spans (span-2,
  row-2), 22px tiles, hover lift, dark/accent/tint tile variants
- Hero is now a bento: dark name/anchor tile + value-prop tile + accent
  availability tile + social tile
- Services: bento tiles with a tinted featured tile and a dark AI tile
- Stack: four category tiles (AI/ML tinted)
- Portfolio: featured 2x2 tile + colored covers per project
- Pipeline / expertise / blog / contact kept as different layouts for rhythm

Verified: 4-col desktop, clean 1-col mobile with no horizontal overflow,
no console errors. Tailwind bundle rebuilt.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

wwwroot/css/site.css

@@ -172,6 +172,39 @@ body.site {
 .cover > * { transition: transform .45s cubic-bezier(.22,1,.36,1); }
 .card-link:hover .cover > * { transform: scale(1.04); }
 
+/* ─── Bento grid (Apple-style tiles, varied spans) ───────────────────── */
+.bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-auto-rows: minmax(158px, auto); gap: 14px; }
+.tile {
+  position: relative; display: flex; flex-direction: column;
+  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
+  padding: 1.5rem; overflow: hidden;
+  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease;
+}
+.tile-link { cursor: pointer; }
+.tile-link:hover { transform: translateY(-4px); box-shadow: 0 22px 48px -26px rgba(24,24,27,.4); border-color: var(--line-strong); }
+.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
+.row-2 { grid-row: span 2; }
+.tile-dark   { background: #18181b; border-color: #18181b; }
+.tile-accent { background: var(--accent); border-color: var(--accent); }
+.tile-tint   { background: var(--accent-weak); border-color: #dbe3ff; }
+.tile-icon { color: var(--accent); }
+.tile-dark .tile-icon, .tile-accent .tile-icon { color: #fff; }
+.tile-dark h1, .tile-dark h2, .tile-dark h3, .tile-accent h1, .tile-accent h2, .tile-accent h3 { color: #fafafa; }
+.t-sub { color: #d4d4d8; }
+.tile-accent .t-sub { color: rgba(255,255,255,.85); }
+.btn-on-dark { color: #fafafa; background: transparent; border-color: rgba(255,255,255,.28); }
+.btn-on-dark:hover { color: #fafafa; background: rgba(255,255,255,.08); border-color: #fafafa; }
+.pcover { display: flex; align-items: center; justify-content: center; }
+@media (max-width: 1023px) {
+  .bento { grid-template-columns: repeat(2, minmax(0,1fr)); }
+  .span-3, .span-4 { grid-column: span 2; }
+}
+@media (max-width: 639px) {
+  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
+  .span-2, .span-3, .span-4 { grid-column: span 1; }
+  .row-2 { grid-row: span 1; }
+}
+
 /* ─── Form fields ────────────────────────────────────────────────────── */
 .flabel { display: block; font-size: .85rem; font-weight: 500; color: var(--text-2); margin-bottom: .4rem; }
 .field {