.integration-section{background:var(--cx-surface-dark);color:var(--cx-color-white)}.integration-content{display:grid;grid-template-columns:minmax(280px,.82fr) minmax(360px,1fr);gap:clamp(2rem,6vw,5rem);align-items:center;width:min(1100px,100%);margin:0 auto}.integration-copy{display:grid;gap:var(--space-5)}.integration-copy h2{margin:0;color:var(--cx-color-white);font-family:var(--cx-font-display);font-size:clamp(1.65rem,2.6vw,2.25rem);font-weight:var(--cx-weight-display);letter-spacing:0;line-height:var(--leading-tight)}.integration-copy p{margin:0;color:rgba(255,255,255,.74);font-size:1.02rem;line-height:1.65}.integration-step-list{display:grid;gap:.7rem}.integration-step-list span{border:1px solid rgba(255,255,255,.14);border-radius:8px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.88);font-weight:var(--cx-weight-semibold);line-height:1.35;padding:.8rem .9rem}.integration-dev-link{display:inline-flex;align-items:center;justify-content:center;width:fit-content;border-radius:var(--radius-action-button-primary);background:var(--color-primary);color:var(--cx-color-white);font-weight:var(--cx-weight-semibold);padding:.78rem 1rem;text-decoration:none}.integration-dev-link:focus-visible,.integration-dev-link:hover{background:var(--color-secondary);color:var(--cx-color-white);outline:0}.integration-api-visual{position:relative;isolation:isolate;display:grid;gap:.9rem;min-height:360px;border:1px solid rgba(116,28,190,.28);border-radius:18px;background:radial-gradient(circle at 15% 15%,rgba(207,24,225,.2),transparent 28%),radial-gradient(circle at 88% 18%,rgba(32,133,227,.2),transparent 30%),linear-gradient(145deg,rgba(14,17,26,.96),rgba(28,24,42,.98));box-shadow:0 28px 80px rgba(0,0,0,.38);overflow:hidden;padding:clamp(1rem,2vw,1.5rem)}.integration-api-orbit{position:absolute;inset:auto -8% -28% auto;width:58%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(32,133,227,.34);box-shadow:0 0 0 26px rgba(32,133,227,.06),0 0 0 58px rgba(207,24,225,.045);z-index:-1}.integration-api-panel{border:1px solid rgba(148,163,184,.22);border-radius:14px;background:rgba(9,13,24,.78);box-shadow:0 18px 44px rgba(0,0,0,.28);color:var(--cx-palette-dbeafe)}.integration-api-request{align-self:start;overflow:hidden}.integration-api-window-bar{display:flex;gap:.36rem;border-bottom:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.05);padding:.7rem .85rem}.integration-api-window-bar span{width:.5rem;height:.5rem;border-radius:50%;background:var(--cx-palette-cf18e1)}.integration-api-window-bar span:nth-child(2){background:var(--cx-color-blue-bright)}.integration-api-window-bar span:nth-child(3){background:var(--cx-color-mint)}.integration-api-chip-row{display:flex;align-items:center;gap:.6rem;padding:.9rem .95rem .35rem}.integration-api-chip-row span,.integration-api-status{border-radius:999px;background:rgba(34,197,94,.14);color:var(--cx-palette-86efac);font-size:.72rem;font-weight:var(--cx-weight-heavy);padding:.28rem .5rem}.integration-api-chip-row code{color:var(--cx-palette-bfdbfe);font-size:.84rem}.integration-api-request pre{margin:0;color:var(--cx-palette-dbeafe);font-size:clamp(.72rem,1vw,.9rem);line-height:1.55;overflow:hidden;padding:.35rem .95rem 1rem;white-space:pre-wrap}.integration-api-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.integration-api-flow span{border:1px solid rgba(255,255,255,.12);border-radius:999px;background:rgba(255,255,255,.08);color:var(--cx-color-white);font-size:.76rem;font-weight:var(--cx-weight-heavy);padding:.55rem .35rem;text-align:center}.integration-api-response{display:grid;gap:.85rem;padding:1rem}.integration-api-response strong{display:block;margin-top:.65rem;color:var(--cx-color-white);font-size:clamp(1rem,1.35vw,1.25rem);line-height:1.15}.integration-api-response ul{display:grid;gap:.55rem;margin:0;padding:0}.integration-api-response li{display:flex;align-items:center;gap:.55rem;color:rgba(255,255,255,.82);font-size:.9rem;list-style:none}.integration-api-response li span{width:.55rem;height:.55rem;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,var(--cx-palette-cf18e1),var(--cx-color-blue-bright))}@media screen and (max-width:900px){.integration-content{grid-template-columns:1fr}.integration-api-visual{min-height:auto}}