/* OCI DigiTech — homepage Technology Stack: pazl-style marquee bands of tech pills. */
#tech-stack{scroll-margin-top:calc(var(--header-h) + 12px)}
.home-tech{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tech-controls{margin:1.4rem 0 .4rem}
.tech-tier-filters{display:flex;gap:.5rem;flex-wrap:wrap;margin:.7rem 0 .2rem}
.theme-tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0 0}
.theme-tabs .filter-btn{font-size:.8rem;padding:.45rem .95rem}
/* Marquee bands */
.marquee-band{margin:1.7rem 0 0;scroll-margin-top:calc(var(--header-h) + 170px)}
.band-label{font-family:var(--font-display);font-weight:800;color:var(--navy);margin:0 0 .6rem;display:flex;gap:.5rem;align-items:baseline}
.marquee{overflow:hidden;border-radius:12px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:flex;width:max-content;padding:.25rem .1rem;animation:mscroll var(--mspeed,55s) linear infinite}
.marquee-track.reverse{animation-direction:reverse}
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes mscroll{to{transform:translateX(-50%)}}
/* Pills */
.tech-pill{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.38rem .9rem .38rem .45rem;margin-right:.6rem;font-weight:700;font-size:.85rem;color:var(--navy);white-space:nowrap;box-shadow:var(--shadow-sm)}
.tech-pill img{width:26px;height:26px;object-fit:contain;flex:none}
.pill-letter{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--teal-950),var(--navy));color:#fff;font-size:.62rem;font-weight:800;font-family:var(--font-display)}
.tier-additional .pill-letter{background:linear-gradient(135deg,#232A6B,#3E49B0)}
.tier-option .pill-letter{background:linear-gradient(135deg,#5B6B7A,#8A99A8)}
.pill-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--accent)}
.tier-additional .pill-dot{background:#8FA2FF}
.tier-option .pill-dot{background:#B9C4CE}
.tech-pill.tier-option{border-style:dashed;color:var(--muted)}
.tech-method{border-left:4px solid var(--accent);margin-top:1.8rem}
.tech-cta-row{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin-top:1.4rem}
@media(max-width:960px){
  .tech-controls{position:static}
  .theme-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
  .theme-tabs .filter-btn{flex:none}
}
@media(max-width:620px){
  .tech-controls{padding:1rem}
  .tech-tier-filters{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
  .tech-tier-filters .filter-btn{flex:none;min-height:44px}
  .tech-search input{font-size:1rem}
  .tech-pill{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}