/* ===== Honeycomb hex-grid mosaic structure ===== */
.hex-hero { display: flex; flex-wrap: wrap; gap: 2.6rem; align-items: center; }
.hex-hero__copy { flex: 1 1 420px; min-width: 0; }
.hex-hero__widget { flex: 1 1 340px; min-width: 0; }
.hex-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.hex-tag {
  display: inline-flex; align-items: center; gap: 0.5em; background: var(--color-bg-alt); color: var(--color-primary);
  font-weight: 600; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.4em 0.9em;
  border-radius: 999px; margin-bottom: 0.8em; border: 1px solid var(--footer-border);
}

/* ===== Hex liquid-fill widget ===== */
.hex-widget { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.hex-widget__shape { position: relative; width: 220px; height: 220px; }
.hex-widget__shape svg { width: 100%; height: 100%; display: block; }
.hex-outline { fill: var(--color-bg); stroke: var(--color-primary); stroke-width: 3; }
.hex-fill { fill: var(--color-primary); opacity: 0.85; }
.hex-widget__readout { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.hex-widget__score { display: block; font-family: var(--ff-head); font-size: 2.6rem; line-height: 1; color: var(--color-ink); }
.hex-widget__category { display: block; font-size: 0.74rem; color: var(--color-ink); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.3rem; max-width: 120px; }
.hex-widget__card { background: var(--color-surface); border: 1px solid var(--footer-border); border-radius: var(--radius); padding: 1.2rem 1.6rem; width: 100%; max-width: 320px; }
.hex-widget__field-top { display: flex; justify-content: space-between; font-size: 0.86rem; font-weight: 600; margin-bottom: 0.5rem; }
.hex-widget__field-top span:last-child { color: var(--color-primary); }

/* ===== Honeycomb pillar mosaic ===== */
.hex-grid { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }
.hex-card {
  width: 220px; height: 254px; display: flex; align-items: center; justify-content: center;
  clip-path: polygon(25% 3%, 75% 3%, 99% 50%, 75% 97%, 25% 97%, 1% 50%);
  background: var(--color-bg-alt);
}
.hex-card__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; max-width: 150px; gap: 0.5rem; }
.hex-card__inner svg { width: 30px; height: 30px; color: var(--color-primary); }
.hex-card__inner h3 { font-size: 0.98rem; margin: 0; }
.hex-card__inner p { font-size: 0.78rem; color: var(--color-muted); margin: 0; }