.integrations-hero .lead{max-width:850px}
.catalog-shell{position:relative}
.catalog-controls{position:sticky;top:72px;z-index:20;background:rgba(7,8,16,.92);backdrop-filter:blur(18px);border:1px solid var(--line);padding:1rem;margin-bottom:1.5rem}
.search-wrap{position:relative;display:flex;align-items:center}
.search-icon{position:absolute;left:1rem;color:var(--mint);font-family:var(--mono)}
.integration-search{width:100%;height:58px;background:#0d101d;border:1px solid var(--line);color:var(--ink);font:400 1rem var(--display);padding:0 3.4rem 0 3rem;outline:none}
.integration-search:focus{border-color:rgba(127,240,211,.68);box-shadow:0 0 0 3px rgba(127,240,211,.07)}
.integration-search::placeholder{color:#7d839c}
.clear-search{position:absolute;right:.75rem;background:transparent;border:0;color:var(--dim);font-size:1.15rem;cursor:pointer;padding:.5rem}
.clear-search:hover{color:var(--ink)}
.filter-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.85rem}
.filter-chip{border:1px solid var(--line);background:#0d101d;color:var(--dim);font:500 .65rem var(--mono);letter-spacing:.05em;padding:.56rem .72rem;cursor:pointer}
.filter-chip:hover,.filter-chip.active{border-color:var(--mint);color:var(--mint);background:rgba(127,240,211,.045)}
.catalog-meta{display:flex;justify-content:space-between;gap:1rem;align-items:center;margin:1.25rem 0 .9rem}
.catalog-meta p{margin:0;color:var(--dim);font-size:.8rem}
.results-count{font:500 .68rem var(--mono);color:var(--mint);letter-spacing:.08em;text-transform:uppercase}
.integrations-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.integration-card{min-height:310px;background:var(--bg2);padding:1.35rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem;cursor:pointer;transition:transform .2s ease,background .2s ease,box-shadow .2s ease;outline:none}
.integration-card:hover,.integration-card:focus-visible{position:relative;z-index:2;background:#121626;transform:translateY(-3px);box-shadow:0 20px 45px rgba(0,0,0,.32)}
.integration-card-top{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}
.integration-icon{width:60px;height:60px}
.integration-card-tags,.modal-tags{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:flex-end}
.integration-badge,.integration-status{font:500 .57rem var(--mono);letter-spacing:.07em;text-transform:uppercase;padding:.28rem .43rem;border:1px solid var(--line);border-radius:999px}
.badge-native{color:var(--mint);background:rgba(127,240,211,.055)}
.badge-mcp{color:#c5b7ff;background:rgba(154,128,255,.06)}
.badge-api{color:#92c8ff;background:rgba(96,165,250,.055)}
.status-ready{color:#8ce8b4}
.status-soon{color:#ffd17c}
.integration-category{display:block;font:500 .59rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--mint);margin-bottom:.55rem}
.integration-card h3{font:500 1.18rem var(--display);margin:0 0 .65rem;color:var(--ink)}
.integration-card p{margin:0;color:var(--dim);font-size:.82rem;line-height:1.58}
.integration-footer{border-top:1px solid var(--line);padding-top:.85rem;display:flex;justify-content:space-between;gap:1rem;color:#949bb6;font-size:.69rem}
.empty-state{border:1px solid var(--line);background:var(--bg2);padding:3rem;text-align:center}
.empty-state strong{display:block;font:500 1.2rem var(--display);color:var(--ink)}
.empty-state span{display:block;color:var(--dim);margin-top:.5rem}
.integration-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:1.25rem}
.integration-modal[hidden]{display:none}
.integration-modal-backdrop{position:absolute;inset:0;background:rgba(2,3,8,.82);backdrop-filter:blur(8px)}
.integration-modal-panel{position:relative;width:min(620px,100%);max-height:90vh;overflow:auto;border:1px solid var(--line);background:#0d101d;padding:1.55rem;box-shadow:0 40px 100px rgba(0,0,0,.55)}
.modal-close{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border:1px solid var(--line);background:#111526;color:var(--ink);cursor:pointer;font-size:1rem}
.modal-product{display:flex;gap:1rem;align-items:center;padding-right:3rem}
.modal-product img{width:68px;height:68px}
.modal-product h2{font:500 1.8rem var(--display);margin:0}
.modal-tags{justify-content:flex-start;margin:1.25rem 0}
.modal-description{color:var(--dim);font-size:.94rem;line-height:1.65}
.modal-section{border-top:1px solid var(--line);padding-top:1rem;margin-top:1rem}
.modal-label{font:500 .61rem var(--mono);color:var(--mint);text-transform:uppercase;letter-spacing:.09em}
.modal-section ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:.8rem 0 0}
.modal-section li{border:1px solid var(--line);padding:.48rem .6rem;color:var(--dim);font-size:.75rem}
.modal-section p{color:var(--dim);font-size:.82rem;line-height:1.55}
.modal-cta{margin-top:1.3rem}
.modal-open{overflow:hidden}
.integration-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.integration-principle{background:var(--bg2);padding:1.3rem}
.integration-principle .code{margin-bottom:.7rem}
.integration-principle h3{font:500 1rem var(--display);margin:0 0 .5rem}
.integration-principle p{font-size:.79rem;color:var(--dim);margin:0}
@media(max-width:980px){.integrations-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.integration-principles{grid-template-columns:1fr}}
@media(max-width:650px){
  .catalog-controls{top:60px;padding:.75rem}
  .integrations-grid{grid-template-columns:1fr}
  .integration-card{min-height:280px}
  .catalog-meta{align-items:flex-start;flex-direction:column}
}