.srs-integrations{ display:block; }

.srs-integrations{
  color-scheme: light;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --maxw: 1400px;

  --title: #0b1220;
  --muted: #3b4a66;
  --line: #e8ecf4;
  --card: #fff;

  --radius-lg: 16px;
  --radius-md: 12px;

  --shadow-1: 0 10px 26px rgba(15,37,96,.08);
  --shadow-2: 0 22px 44px rgba(15,37,96,.10);

  --padX: clamp(14px, 2.6vw, 22px);
  --padY: 28px;

  --safeL: env(safe-area-inset-left, 0px);
  --safeR: env(safe-area-inset-right, 0px);
  --safeT: env(safe-area-inset-top, 0px);
  --safeB: env(safe-area-inset-bottom, 0px);

  --grid-gap: 12px;
  --card-pad: 12px;
  margin: 0;
  width: 100%;
  max-width: 100%;

  padding-top: calc(var(--padY) + var(--safeT));
  padding-bottom: calc(var(--padY) + var(--safeB));
  padding-left: 0;
  padding-right: 0;

  color: var(--title);
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;

  position: relative;
  isolation: isolate;

  overflow: hidden;
  overflow-x: clip;

  contain: layout paint;
}

@supports not (overflow-x: clip){
  .srs-integrations{ overflow-x: hidden; }
}

.srs-integrations :where(*, *::before, *::after){ box-sizing: border-box; }
.srs-integrations :where(h2, h3, p){ margin: 0; }

.srs-integrations::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(124,58,237,.14), transparent 55%),
    radial-gradient(900px 420px at 95% 10%, rgba(34,211,238,.14), transparent 55%),
    radial-gradient(1000px 520px at 40% 110%, rgba(52,211,153,.12), transparent 60%),
    linear-gradient(180deg, #f6f8ff, #ffffff 55%);
}

.srs-integrations .srs-integrations__wrap{
  position: relative;
  z-index: 1;

  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;

  padding: 0;
}

.srs-integrations .srs-integrations__container{
  width: 100%;
  max-width: var(--maxw);
  min-width: 0;
  margin-inline: auto;

  padding-inline:
    calc(var(--padX) + var(--safeL))
    calc(var(--padX) + var(--safeR));
}

.srs-integrations .srs-integrations__header{ margin: 0 0 14px; }

.srs-integrations .srs-integrations__title{
  margin: 0;
  font-size: clamp(22px, 4.2vw, 30px);
  font-weight: 900;
  letter-spacing: .01em;

  background: linear-gradient(100deg, #7c3aed, #60a5fa 35%, #22d3ee 70%, #34d399);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.srs-integrations .srs-integrations__subtitle{
  margin: 4px 0 0;
  font-size: clamp(13px, 2vw, 15px);
  color: var(--muted);
}

.srs-integrations .srs-integrations__title,
.srs-integrations .srs-integrations__subtitle,
.srs-integrations .srs-integrations__name,
.srs-integrations .srs-integrations__meta,
.srs-integrations .srs-integrations__chip{
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

.srs-integrations .srs-integrations__chips{
  min-width: 0;
  max-width: 100%;
}

.srs-integrations .srs-integrations__grid{
  list-style: none;
  padding: 0;
  margin: 0;

  display: grid;
  gap: var(--grid-gap);

  grid-template-columns: 1fr;
  align-items: stretch;

  min-width: 0;
  max-width: 100%;
}
@media (min-width: 640px){
  .srs-integrations .srs-integrations__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 1100px){
  .srs-integrations .srs-integrations__grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.srs-integrations .srs-integrations__card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--card-pad);
  box-shadow: 0 10px 24px rgba(15,37,96,.06);

  min-width: 0;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .18s ease, border-color .18s ease;
}

@media (hover:hover){
  .srs-integrations .srs-integrations__card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
    border-color: rgba(124,58,237,.22);
  }
}

.srs-integrations .srs-integrations__row{
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 8px;

  flex-wrap: wrap;
  min-width: 0;
}

.srs-integrations .srs-integrations__ic{
  width: 36px;
  height: 36px;

  display: inline-grid;
  place-items: center;

  border-radius: 12px;
  background: rgba(124,58,237,.10);

  font-size: 18px;
  line-height: 1;

  flex: 0 0 auto;
}

.srs-integrations .srs-integrations__name{
  font-weight: 900;
  letter-spacing: .01em;
  line-height: 1.25;
  min-width: 0;
}

.srs-integrations__note{
  margin-left: auto;
  font-size: .86rem;
  font-weight: 800;
  color: #4b5563;
  padding-top: 2px;

  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;

  min-width: 0;
  max-width: 100%;
}

.srs-integrations .srs-integrations__meta{
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.35;
}

.srs-integrations .srs-integrations__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.srs-integrations .srs-integrations__chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 10px;

  font-size: .86rem;
  font-weight: 800;
  color: #2b3345;

  background: rgba(15,37,96,.02);
}

.srs-integrations .srs-integrations__card--primary{
  border-color: rgba(124,58,237,.20);
}
.srs-integrations .srs-integrations__card--primary .srs-integrations__ic{
  background: rgba(124,58,237,.12);
}

.srs-integrations .srs-integrations__card--teal{
  border-color: rgba(34,211,238,.25);
}
.srs-integrations .srs-integrations__card--teal .srs-integrations__ic{
  background: rgba(34,211,238,.14);
}

.srs-integrations .srs-integrations__card--blue{
  border-color: rgba(96,165,250,.28);
}
.srs-integrations .srs-integrations__card--blue .srs-integrations__ic{
  background: rgba(96,165,250,.16);
}

.srs-integrations .srs-integrations__card--violet{
  border-color: rgba(167,139,250,.26);
}
.srs-integrations .srs-integrations__card--violet .srs-integrations__ic{
  background: rgba(167,139,250,.16);
}

@media (max-width: 600px){
  .srs-integrations{ --padY: 20px; }
}

/* reduced motion: clean cascade, no !important */
@media (prefers-reduced-motion: reduce){
  .srs-integrations,
  .srs-integrations *{
    scroll-behavior: auto;
  }

  .srs-integrations *,
  .srs-integrations *::before,
  .srs-integrations *::after{
    animation: none;
    transition: none;
  }
}