/* =========================================================
   Integrations — CSS extra (se monta sobre hub.css)
   ========================================================= */

.int-hero{
  padding: 76px 0 40px;
}

.int-hero__card{
  position: relative;
  overflow: hidden;
}

.int-hero__card::before{
  content:"";
  position:absolute;
  inset:-50%;
  background:
    radial-gradient(circle at 20% 20%, rgba(45,116,156,.18), transparent 40%),
    radial-gradient(circle at 70% 55%, rgba(198,1,107,.14), transparent 42%);
  transform: rotate(14deg);
  pointer-events:none;
}

.int-mini{ margin-top:14px; }
.int-mini__row{ display:flex; gap:10px; flex-wrap:wrap; }
.tag{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(233,238,246,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* Tabs */
.int-tabs{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 8px;
}

.int-tab{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--light-line);
  background: rgba(2,6,23,.03);
  color: var(--light-text);
  font-weight: 800;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.int-tab:hover{ transform: translateY(-1px); background: rgba(2,6,23,.05); border-color: rgba(15,23,42,.18); }
.int-tab.is-active{
  background: linear-gradient(135deg, rgba(45,116,156,.95), rgba(198,1,107,.80));
  color:#fff;
  border-color: rgba(45,116,156,.45);
}

.int-panels{ margin-top: 14px; }
.int-panel{ display:none; }
.int-panel.is-visible{ display:block; }

.int-panel__grid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .int-panel__grid{ grid-template-columns: 1fr; }
}

.int-logo-card{
  border:1px solid var(--light-line);
  background: rgba(255,255,255,.9);
  border-radius: 22px;
  padding: 18px;
  box-shadow: var(--light-shadow);
}

.int-logo-card__top{ display:flex; justify-content:flex-start; margin-bottom:12px; }

.int-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: 18px;
  border: 1px solid var(--light-line);
  background: rgba(2,6,23,.02);
}

.int-brand__logo{
  width: 54px;
  height: 54px;
  border-radius: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
  letter-spacing: .02em;
  color: #fff;
  background: linear-gradient(135deg, rgba(45,116,156,.95), rgba(198,1,107,.80));
}

.int-brand__logo--sap{ background: linear-gradient(135deg, rgba(45,116,156,.95), rgba(45,116,156,.65)); }
.int-brand__logo--sso{ background: linear-gradient(135deg, rgba(198,1,107,.90), rgba(198,1,107,.55)); }
.int-brand__logo--api{ background: linear-gradient(135deg, rgba(35,196,131,.80), rgba(45,116,156,.65)); }

.int-logo-card__cta{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 14px;
}

/* Flow grid */
.int-flow{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  align-items:start;
}
@media (max-width: 980px){
  .int-flow{ grid-template-columns: 1fr; }
}

/* KV rows */
.int-kv{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.int-kv__row{
  display:grid;
  grid-template-columns: 1fr auto auto;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
  border: 1px solid rgba(233,238,246,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
}
.int-kv code{
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(233,238,246,.10);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  max-width: 44ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Accordion */
.int-accordion{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
.int-acc__btn{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 14px 14px;
  border-radius: 18px;
  border: 1px solid rgba(233,238,246,.10);
  background: rgba(255,255,255,.03);
  color: var(--text);
  font-weight: 900;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.int-acc__btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.05);
  border-color: rgba(233,238,246,.16);
}
.int-acc__icon{
  width: 30px; height: 30px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  border: 1px solid rgba(233,238,246,.10);
  background: rgba(0,0,0,.18);
}

.int-acc__panel{
  padding: 0 6px 10px 6px;
  display:none;
}

.int-endpoint{
  border: 1px solid rgba(233,238,246,.10);
  background: rgba(0,0,0,.18);
  border-radius: 18px;
  padding: 12px;
  margin-top: 10px;
}
.int-endpoint__top{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
}
.int-endpoint__top code{
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(233,238,246,.10);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
}

.int-docs{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-top: 14px;
}