/* EXPERIMENT: neutral frosted glass for the cards, the "How Matrix works" frames and the nav. Founder asked for a frosted glass look instead of the blue top tint on cards, then for the same on the nav.
   To drop it, delete the <link> to this file in index.html; the cards fall back to the plain dark card in section-base.css.
   Neutral only: white at low alpha, no blue. The glass blurs whatever is behind the card (the faint honeycomb), so it
   reads as frosted rather than as a flat grey panel. Lighter than the page by design, which departs from the spec's
   recessed (darker-than-page) cards; logged in content/draft.md.
   Contrast check: the dimmest text (#8A8A8A) on the brightest part of this glass (about #191919) measures about 5.1:1, so the
   4.5:1 floor still holds. */

.card,
.how__col--in, .how__col--out {                  /* the two frames of the "How Matrix works" diagram */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  border-color: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
}
.card:hover { border-color: rgba(255, 255, 255, 0.11); }

/* The sticky nav (all widths): near-solid dark glass. At 96% the page shows through only faintly, so over a white section the
   bar still reads as dark (the blend is about #141414, nearly the hero's own colour; at the earlier 82% it was a washed #363636).
   The blur and saturation stay for the soft edge; the dimmest nav text (#A7A7A7) is about 8:1 on this backing. */
.site-header {
  background: rgba(10, 10, 10, 0.96);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
          backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.10);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
}