/* Home: Parallax Vision Tab Bars (7px segmented tabs with captions) */
.parallax-vision .tab-index{ 
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; 
  align-items: center; width: min(100vw, 100%); margin: 0 auto 16px; 
}
.parallax-vision .tab-button{ 
  min-height: 7px; padding: 0; border: 0; border-radius: 9999px; 
  background: rgba(255,255,255,0.35); cursor: pointer; 
  position: relative; overflow: visible; 
  /* hide text visually but keep in a11y tree */
  color: transparent; line-height: 0; font-size: 0; 
}
.parallax-vision .tab-button.active{ background: #c8005f; }
.parallax-vision .tab-button:focus-visible{ outline: 2px solid #fff; outline-offset: 2px; }
/* caption under the bar */
.parallax-vision .tab-button::after{
  content: attr(data-label);
  display: inline-block; margin-top: 8px; 
  font-size: 13px; line-height: 1.2; font-weight: 700; letter-spacing: 0.2px;
  padding: 6px 12px 12px 12px; border-radius: 16px;
  color: #ffffff; text-align: center; background: transparent;
}
.parallax-vision .tab-button[aria-selected="true"]::after{ color: #ffffff; opacity: 1; background: #c8005f; }
.parallax-vision .tab-button[aria-selected="false"]::after{ color: rgba(255,255,255,1); background: rgba(255,255,255,0); }
@media (max-width: var(--bp-sm)){
  .parallax-vision .tab-index{ gap: 8px; margin-bottom: 12px; }
}