.integration-page-grid { position: relative; overflow: hidden; background: var(--color-bg-light); }
.integration-page-grid::after { position: absolute; right: -50px; bottom: -45px; width: 310px; height: 190px; opacity: .42; background-image: radial-gradient(circle, rgba(41,47,51,.18) 1.3px, transparent 1.7px); background-size: 22px 22px; content: ""; }
.integration-page-grid .container { position: relative; z-index: 1; }
.integration-page-grid__header { max-width: 910px; margin-bottom: 42px; }
.integration-page-grid__header > span { display: block; margin-bottom: 14px; color: var(--color-accent); font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.integration-page-grid__header h2 { margin-bottom: 16px; }
.integration-page-grid__header p { max-width: 720px; margin: 0; color: var(--color-text); font-size: 17px; line-height: 1.6; }
.integration-page-grid__items { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.integration-page-grid__card { padding: 14px 14px 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: #fff; transition: border-color var(--transition), transform var(--transition); }
.integration-page-grid__card:hover { border-color: var(--color-accent); transform: translateY(-3px); }
.integration-page-grid__logo { display: grid; height: 126px; margin-bottom: 20px; padding: 18px; border-radius: var(--radius-control); background: var(--color-bg-muted); place-items: center; }
.integration-page-grid__logo img { width: auto; max-width: 100%; height: auto; max-height: 72px; object-fit: contain; }
.integration-page-grid__card h3 { margin: 0 10px 8px; font-size: 18px; }
.integration-page-grid__card p,
.integration-page-grid__text { margin: 0 10px; color: var(--color-text); font-size: 14px; line-height: 1.55; }
.integration-page-grid__text > :last-child { margin-bottom: 0; }
.integration-page-grid__empty { margin: 0; color: var(--color-text); }

@media (max-width: 1080px) { .integration-page-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .integration-page-grid__items { grid-template-columns: 1fr; } .integration-page-grid__logo { height: 112px; } }