/* ============================================================
   integration.css — 徽章头部 + 六边形蜂窝 logo 阵
   ============================================================ */

.integration { padding: 110px 0 0; background: var(--white); overflow: clip; }
.integration h2 { max-width: 22ch; }

.integration__trust { display: grid; justify-items: center; gap: 12px; margin-top: 8px; }
.integration__trust img { height: 48px; width: auto; }
.integration__trust p {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--body-lg);
  color: var(--ink);
}
.integration__trust p img { height: 17px; }

.integration__hexes {
  position: relative;
  margin-top: 20px;
  padding: 20px 0 30px;
}
.integration__streaks {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ---------- 蜂窝网格（pointy-top 六边形） ---------- */
.integration__grid { position: relative; display: grid; }
.integration__row {
  display: flex;
  justify-content: center;
  gap: 22px;
}
.integration__row + .integration__row { margin-top: -66px; }
.integration__row:nth-child(2) { translate: 118px; }

.hex {
  position: relative;
  flex: none;
  width: 214px;
  height: 246px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 30px 34px rgb(3 0 40 / .08));
}
.hex::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--white);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.hex img { position: relative; }
.hex .is-dim { opacity: .3; }

@media (max-width: 809px) {
  .integration { padding-top: 80px; }
  .integration__hexes { margin-top: 40px; padding-bottom: 50px; }
  .integration__row { gap: 14px; }
  .integration__row + .integration__row { margin-top: -34px; }
  .integration__row:nth-child(2) { translate: 71px; }
  .hex { width: 128px; height: 148px; }
  .hex img { max-width: 30px; }
}