/* ═══════════════════════════════════════════════════════════════
   Homepage only — surface finish, no layout changes:
     · a faint film grain over the flat navy
     · About badges as plain text instead of bordered boxes

   Delete this file (and its <link> in index.html) to go back.
   ═══════════════════════════════════════════════════════════════ */

/* Grain: static SVG noise laid over the whole page. pointer-events:none
   so it never blocks a click; fixed so it doesn't scroll with content */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}

/* Badges: plain text with thin separators, no boxes */
#about .badges { gap: 0.5rem 0; }
#about .badges li {
  padding: 0;
  border: 0;
  color: #94A3B8;
}
#about .badges li + li::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  margin: 0 0.875rem;
  vertical-align: middle;
  background-color: rgba(6, 182, 212, 0.5);
}