/* ==========================================================================
   Product – Integrations
   ========================================================================== */

/* ---------- Hero + all integrations ---------- */
.int-hero {
  position: relative;
  overflow: hidden;
  padding: 44px 0 60px;
  background: linear-gradient(90deg, #fff 0%, #f5f5ff 100%);
}
.int-hero__intro { text-align: center; }
.int-hero__title { max-width: 900px; margin: 28px auto 0; }
.int-hero__lead { max-width: 860px; margin: 12px auto 0; }
.int-hero__cta { margin-top: 22px; }

.int-connect {
  display: grid;
  grid-template-columns: 470px minmax(0, 1fr);
  align-items: center;
  margin-top: 120px;
}
/* text may run into the orbit's empty corner, as in the design */
.int-connect__text { position: relative; z-index: 1; width: 470px; }
.int-connect__title {
  margin-top: 43px;
  font-size: 56px;
  line-height: 66px;
  font-weight: 700;
  letter-spacing: -0.038em;
}
.int-connect__lead { margin-top: 37px; }

/* Orbit: the Lottie canvas is 1000² with the outer ring at ~94.6%; the box is
   the outer ring, so the canvas bleeds out slightly. The logos sit inside ~75% of
   the ring, so the orbit may run 86px past its column: only the faint outer ring
   reaches into the gutter / viewport edge (.int-hero clips it). 960px at 1440 =
   1.17× the former 824px. */
.int-orbit { position: relative; width: min(960px, calc(100% + 86px)); aspect-ratio: 1; }
.int-orbit__anim { position: absolute; inset: -2.86%; width: auto; }
.int-orbit .lottie__fallback { inset: 2.78%; width: auto; height: auto; }
.int-orbit__glow {
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(53, 90, 240, 0.12), transparent);
  filter: blur(20px);
  animation: int-breathe 6s var(--ease-in-out) infinite alternate;
  pointer-events: none;
}
@keyframes int-breathe { from { transform: scale(0.85); opacity: 0.6; } to { transform: scale(1.15); opacity: 1; } }

/* ---------- Security ---------- */
.int-sec { background: #eef2fe; padding: 119px 0 110px; }
.int-sec__head { text-align: center; }
.int-sec__title { margin-top: 28px; font-size: 56px; line-height: 67px; }
.int-sec__lead { max-width: 700px; margin: 13px auto 0; }

.int-badges {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 60px;
}
.int-badge { width: 168px; }
.int-badge__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 230px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out);
}
.int-badge__card:hover { box-shadow: var(--shadow-float); }
.int-badge__img { transition: transform 0.9s var(--ease-spring); }
.int-badge__img--gdpr { width: 111px; height: 109px; margin-top: 29px; }
.int-badge__img--ai { width: 90px; height: 118px; margin-top: 24px; }
/* hover: a calm zoom only — no tilt/rotation (client feedback) */
.int-badge__card:hover .int-badge__img { transform: scale(1.06); }
.int-badge__name {
  margin-top: 23px;
  font-size: 21px;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
  letter-spacing: -0.02em;
}
.int-badge__img--ai + .int-badge__name { margin-top: 23px; }
.int-badge__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  margin-top: 9px;
  border-radius: 4px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 16px 30px -10px rgba(53, 90, 240, 0.28);
}
.int-badge__pill img { width: 12px; height: 12px; }
.int-badge__pill--pink { background: var(--pink); box-shadow: 0 16px 30px -10px rgba(213, 113, 229, 0.45); }
.int-badge__pill--blue { background: var(--blue); }

.int-values__title { display: none; }
.int-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 496px));
  justify-content: center;
  gap: 22px;
  margin-top: 60px;
}
.int-value {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 154px;
  padding: 27px 24px;
  border-color: #fff;
  box-shadow: 0 1px 2px rgba(7, 26, 95, 0.03), 0 10px 30px -14px rgba(53, 90, 240, 0.18);
}
.int-value > div { align-self: center; }
.int-value__icon { width: 40px; height: 40px; flex: none; align-self: flex-start; margin-top: var(--icon-top, 2px); transition: transform 0.6s var(--ease-spring); }
.int-value:hover .int-value__icon { transform: scale(1.06); }
/* reveal sets transform:none with higher specificity — restore the hover lift */
.int-value.is-in:hover { transform: translateY(-6px); transition-delay: 0s; box-shadow: var(--shadow-float); }
.int-value { transition: opacity 1s var(--ease-out), transform 0.8s var(--ease-out), box-shadow 0.6s var(--ease-out); transition-delay: calc(var(--d, 0) * 1s); }
.int-value__title { font-size: 20px; line-height: 30px; font-weight: 700; }
.int-value__text { margin-top: 8px; font-size: 16px; line-height: 22px; max-width: 386px; }
.int-value:nth-child(3) .int-value__text, .int-value:nth-child(6) .int-value__text { max-width: 362px; }

/* ---------- CTA (page variant) ---------- */
.int-cta { padding: 64px 0 60px; }
.int-cta .eyebrow { max-width: none; margin: 0 auto 26px; }
.int-cta h2 { max-width: none; font-size: 56px; line-height: 67px; }
.int-cta .lead { max-width: 880px; margin: 18px auto 19px; }
/* design break after the first sentence (desktop + tablet) */
.int-br { display: inline; }

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 1199px) {
  .int-hero { padding: 63px 0 63px; }
  .int-hero__title { margin-top: 19px; font-size: 44px; line-height: 48px; }
  .int-hero__lead { max-width: 690px; margin-top: 10px; font-size: 16px; line-height: 22px; }
  .int-hero__cta { margin-top: 16px; }
  .int-hero__cta .btn { width: 100%; }

  .int-connect { grid-template-columns: 1fr; margin-top: 68px; }
  .int-connect__text { width: auto; max-width: 690px; margin: 0 auto; text-align: center; }
  .int-connect__title { margin-top: 22px; font-size: 43px; line-height: 48px; }
  .int-connect__lead { margin-top: 14px; font-size: 16px; line-height: 22px; }
  /* 660px of the 688px column at 768 (1.3× the former 508px); grows with the column up to 900px */
  .int-orbit { width: min(calc(100% * 0.96), 900px); margin: 18px auto 0; }

  .int-sec { padding: 64px 0 65px; }
  .int-sec__title { margin-top: 20px; font-size: 44px; line-height: 52px; }
  .int-sec__lead { max-width: 690px; margin-top: 15px; font-size: 16px; line-height: 22px; }
  .int-badges { margin-top: 40px; }

  .int-values__title { display: block; margin-top: 41px; font-size: 25px; line-height: 32px; font-weight: 700; letter-spacing: -0.02em; }
  .int-values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 13px; }
  .int-value { align-items: flex-start; min-height: 0; padding: 24px; }
  .int-value > div { align-self: flex-start; }
  .int-value__icon { margin-top: 0; }
  .int-value__title { font-size: 16px; line-height: 24px; }
  .int-value__text, .int-value:nth-child(n) .int-value__text { margin-top: 4px; font-size: 16px; line-height: 22px; max-width: none; }

  .int-cta { padding: 39px 0 40px; }
  .int-cta .eyebrow { margin-bottom: 17px; }
  .int-cta h2 { font-size: 39px; line-height: 48px; }
  /* the second sentence is 1px wider than the column at 768 — keep the wrap free of a one-word last line */
  .int-cta .lead { max-width: 690px; margin: 10px auto 16px; font-size: 16px; line-height: 22px; text-wrap: pretty; }
  .int-cta .btn-row { flex-direction: column; gap: 8px; }
  .int-cta .btn { width: 100%; }
}

/* ==========================================================================
   Phone
   ========================================================================== */
@media (max-width: 767px) {
  .int-hero { padding: 40px 0 4px; }
  .int-hero__title { max-width: 290px; margin-top: 20px; font-size: 39px; line-height: 44px; }
  .int-hero__lead { margin-top: 12px; }
  .int-hero__cta { margin-top: 16px; }

  .int-connect { margin-top: 40px; }
  .int-connect__text { text-align: left; }
  .int-connect__title { margin-top: 17px; font-size: 39px; line-height: 44px; }
  .int-connect__lead { margin-top: 15px; }
  /* 446px at 360 (1.2× the former 370px): the logo ring (~75%) spans the column plus 4px of
     each gutter; only the faint outer rings run past the viewport (.int-hero clips them) */
  .int-orbit { width: calc(100% * 1.36); margin: 16px 0 0 calc(100% * -0.18); }

  .int-sec { padding: 40px 0 40px; }
  .int-sec__head { text-align: left; }
  .int-sec__title { margin-top: 20px; font-size: 39px; line-height: 44px; }
  .int-sec__lead { margin-top: 12px; }
  .int-badges { flex-direction: column; gap: 16px; margin-top: 40px; }
  .int-badge { width: 100%; }
  .int-badge__pill { height: 40px; margin-top: 9px; font-size: 14px; gap: 8px; }
  .int-badge__pill img { width: 14px; height: 14px; }

  .int-values__title { margin-top: 41px; }
  .int-values { grid-template-columns: 1fr; gap: 16px; margin-top: 13px; }
  .int-value { flex-direction: column; gap: 17px; padding: 24px; }
  .int-value__title { font-size: 20px; line-height: 32px; }

  .int-cta { padding: 40px 0 40px; }
  .int-cta .eyebrow { margin-bottom: 18px; }
  .int-cta h2 { font-size: 39px; line-height: 44px; }
  .int-cta .lead { margin: 14px auto 16px; }
  .int-br { display: none; }
}

/* ==========================================================================
   German (html[lang="de"]) — wrap tuning for the longer copy. EN is untouched.
   ========================================================================== */
html[lang="de"] .nobr { white-space: nowrap; }
/* card titles sit inside <li> (inherits the shared DE hyphenation) — keep headings whole */
html[lang="de"] .int-value__title { -webkit-hyphens: manual; hyphens: manual; }
/* Centred leads: even line lengths instead of a one/two-word last line */
html[lang="de"] .int-hero__lead,
html[lang="de"] .int-cta .lead { text-wrap: balance; }
@media (min-width: 768px) {
  html[lang="de"] .int-sec__lead { text-wrap: balance; }
}
/* the shared DE rule `html[lang="de"] .cta-band .lead { max-width: 440px }` out-specifies .int-cta .lead
   and squeezed this page's lead into six 440px lines — restore the page widths */
html[lang="de"] .int-cta .lead { max-width: 880px; }
/* the German first sentence is longer than a line — let `balance` distribute it instead of the EN break */
html[lang="de"] .int-br { display: none; }
@media (max-width: 1199px) {
  html[lang="de"] .int-cta .lead { max-width: 690px; }
}