/* FFB OS Logos Tabs */
.ffb-os-tabs-section{
  --ffb-max-width: 1200px;
  --ffb-padding-y: 56px;
  --ffb-section-bg: #ffffff;
  --ffb-tab-color: #111827;
  --ffb-tab-active-color: #1d4ed8;
  --ffb-tab-underline: #1d4ed8;
  --ffb-card-bg: #ffffff;
  --ffb-card-border: #e5e7eb;
  --ffb-card-shadow: 0 16px 30px rgba(17,24,39,.08);
  --ffb-card-radius: 14px;
  --ffb-card-name: #111827;
  --ffb-grid-gap: 22px;
  --ffb-tabs-gap: 26px;
  background: var(--ffb-section-bg);
  padding: var(--ffb-padding-y) 0;
  width: 100%;
}
.ffb-os-tabs-section.ffb-fullwidth{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.ffb-os-tabs-inner{
  max-width: var(--ffb-max-width);
  margin: 0 auto;
  padding: 0 18px;
}
.ffb-os-tabs-tabs{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--ffb-tabs-gap);
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.ffb-os-tab{
  appearance:none;
  border:0;
  background: transparent;
  padding: 10px 6px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ffb-tab-color);
  cursor:pointer;
  position: relative;
  outline:none;
}
.ffb-os-tab:after{
  content:"";
  position:absolute;
  left: 10%;
  right: 10%;
  bottom: -2px;
  height: 2px;
  background: transparent;
  border-radius: 999px;
  transition: all .2s ease;
}
.ffb-os-tab.is-active{ color: var(--ffb-tab-active-color); }
.ffb-os-tab.is-active:after{ background: var(--ffb-tab-underline); }
.ffb-os-panel{display:none;}
.ffb-os-panel.is-active{display:block;}
.ffb-os-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--ffb-grid-gap);
}
.ffb-os-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 14px;
  text-decoration:none;
  background: var(--ffb-card-bg);
  border: 1px solid var(--ffb-card-border);
  box-shadow: var(--ffb-card-shadow);
  border-radius: var(--ffb-card-radius);
  padding: 24px 16px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ffb-os-card:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(17,24,39,.12); }
.ffb-os-logo{ width: 54px; height: 54px; object-fit: contain; }
.ffb-os-name{ color: var(--ffb-card-name); font-weight: 700; font-size: 15px; text-align:center; line-height: 1.15; }
@media (max-width: 1024px){ .ffb-os-grid{grid-template-columns: repeat(4, minmax(0, 1fr));} }
@media (max-width: 680px){ .ffb-os-grid{grid-template-columns: repeat(2, minmax(0, 1fr));} .ffb-os-card{padding: 20px 14px;} }
