/* ============================================================
   /integraties — de logo-ring in de hero, de MCP-band, het raamwerk met
   alle koppelingen en de tussensectie met de locatie.

   LET OP: dit is een v1-pagina. Daar staat Bootstrap naast, en van het
   designsysteem zijn alléén tokens.css en de gescopte chrome.css geladen —
   geen base.css en geen components.css. Alles hieronder is daarom
   zelfdragend en draagt de prefix `int-`; de kleuren, maten en fonts komen
   uit de tokens, zodat het toch bij de rest van de site hoort.
   ============================================================ */

.int {
  --int-max: 76rem;
  font-family: var(--font-body);
  color: var(--c-ink);
}
.int * { box-sizing: border-box; }
.int-binnen {
  max-width: var(--int-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.int-band { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.int-band--inkt { background: var(--c-ink); color: var(--c-on-dark); }
.int-band--zacht { background: var(--c-surface); }
.int-band--steen { background: var(--c-bg-shade); }

.int h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 var(--sp-4);
}
.int h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  margin: 0;
}
.int p { margin: 0 0 var(--sp-4); }
.int .int-lead {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  line-height: 1.65;
  max-width: 46ch;
  color: var(--c-ink-soft);
}
.int-band--inkt .int-lead { color: rgba(244, 244, 245, 0.82); }
.int-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-orange-deep);
  margin: 0 0 var(--sp-3);
}
.int-band--inkt .int-eyebrow { color: var(--c-orange); }

/* ---------- 1. De ring in de hero ------------------------------------
   Twee ringen die traag tegen elkaar in draaien om de ster. De chips
   staan met een transform op hun plek; het binnenste laagje draait de
   ringrotatie er weer uit, zodat elk logo rechtop blijft staan. */
/* --wrap volgt de maat die de v1-stylesheet aan .circle-wrap geeft (693px,
   en 397px onder 1200px), zodat de banen precies tussen de bestaande
   cirkels vallen. */
.int-orbit { position: relative; --wrap: 693px; }
.int-ring--buiten { --straal: calc(var(--wrap) * 0.455); }
.int-ring--binnen { --straal: calc(var(--wrap) * 0.335); }
@media (max-width: 1199px) { .int-orbit { --wrap: 397px; } }
@media (max-width: 460px) { .int-orbit { --wrap: 88vw; } }
.int-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  animation: int-draai var(--duur, 90s) linear infinite;
}
.int-ring--tegen { animation-direction: reverse; }
.int-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--maat, 58px);
  height: var(--maat, 58px);
  margin: calc(var(--maat, 58px) / -2) 0 0 calc(var(--maat, 58px) / -2);
  transform: rotate(var(--hoek)) translateY(calc(-1 * var(--straal))) rotate(calc(-1 * var(--hoek)));
}
.int-chip > i {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--c-surface);
  box-shadow: 0 10px 22px -10px rgba(23, 23, 29, 0.28), 0 0 0 1px rgba(23, 23, 29, 0.06);
  animation: int-draai var(--duur, 90s) linear infinite reverse;
}
.int-ring--tegen .int-chip > i { animation-direction: normal; }
.int-chip img {
  width: 56%;
  height: 56%;
  object-fit: contain;
  display: block;
}
.int-baan {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  border: 1px dashed rgba(23, 23, 29, 0.16);
  transform: translate(-50%, -50%);
  z-index: 1;
}
@keyframes int-draai { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .int-chip { --maat: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .int-ring, .int-chip > i { animation: none; }
}

/* ---------- 2. De MCP-band ------------------------------------------- */
.int-mcp { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.int-mcp-punten { display: grid; gap: var(--sp-5); margin-top: var(--sp-6); }
.int-punt { display: grid; grid-template-columns: 2rem 1fr; gap: var(--sp-4); align-items: start; }
.int-punt svg { width: 2rem; height: 2rem; stroke: var(--c-orange); fill: none; stroke-width: 1.5; }
.int-punt b { display: block; font-weight: 500; margin-bottom: 2px; }
.int-punt span { color: rgba(244, 244, 245, 0.72); font-size: 0.94rem; line-height: 1.6; }

/* De assistenten die er vandaag op aansluiten. */
.int-mcp-logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(244, 244, 245, 0.14);
}
.int-mcp-logos > p {
  margin: 0 var(--sp-2) 0 0;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(244, 244, 245, 0.5);
}
.int-mcp-logo {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px;
  border-radius: var(--r-pill);
  background: rgba(244, 244, 245, 0.07);
  border: 1px solid rgba(244, 244, 245, 0.14);
  font-size: 0.9rem;
}
.int-mcp-logo img {
  width: 26px; height: 26px; object-fit: contain; display: block;
  border-radius: 6px; background: var(--c-surface); padding: 3px;
}

/* Het praatje: een AI die iets aan Constell vraagt en antwoord krijgt. */
.int-praat {
  background: rgba(244, 244, 245, 0.05);
  border: 1px solid rgba(244, 244, 245, 0.14);
  border-radius: var(--r-media);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.int-praat-kop {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(244, 244, 245, 0.5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(244, 244, 245, 0.12);
}
.int-praat-kop i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-orange); display: block; }
.int-bel { margin-top: var(--sp-4); font-size: 0.95rem; line-height: 1.6; }
.int-bel span {
  display: inline-block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: 14px;
  max-width: 92%;
}
.int-bel--vraag { text-align: right; }
.int-bel--vraag span { background: var(--c-orange); color: var(--c-ink); border-bottom-right-radius: 4px; }
.int-bel--antwoord span { background: rgba(244, 244, 245, 0.1); border-bottom-left-radius: 4px; }
.int-bel small { display: block; margin-top: var(--sp-2); font-size: 0.75rem; color: rgba(244, 244, 245, 0.45); }

@media (max-width: 860px) { .int-mcp { grid-template-columns: 1fr; } }

/* ---------- 3. Het raamwerk met alle koppelingen ---------------------- */
.int-raam-kop { max-width: 44rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.int-groep + .int-groep { margin-top: clamp(2.5rem, 5vw, 4rem); }
.int-groep-kop {
  display: flex; align-items: baseline; gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.int-groep-kop h3 {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.6rem);
  font-weight: 400;
}
.int-groep-kop span { font-size: 0.8rem; color: var(--c-ink-40); letter-spacing: 0.04em; }

.int-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: var(--sp-4); }
.int-tegel {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--sp-5);
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: var(--sp-4);
  align-items: start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.int-tegel:hover { transform: translateY(-3px); box-shadow: var(--shadow-tile); }
.int-tegel-logo {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-tile);
  background: var(--c-surface-soft);
  display: grid; place-items: center;
  overflow: hidden;
}
.int-tegel-logo img { width: 76%; height: 76%; object-fit: contain; display: block; }
.int-tegel p { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.55; color: var(--c-ink-soft); }

/* ---------- 4. De tussensectie: de locatie en wat eromheen hangt ------ */
.int-web { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.int-web-beeld { position: relative; aspect-ratio: 1 / 1; }
.int-web-beeld svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.int-lijn { stroke: rgba(23, 23, 29, 0.22); stroke-width: 0.35; stroke-dasharray: 1.6 1.6; fill: none; }
.int-lijn--buiten { stroke: rgba(23, 23, 29, 0.16); }
.int-puls {
  stroke: var(--c-orange-deep); stroke-width: 0.55; fill: none;
  stroke-dasharray: 6 94; stroke-dashoffset: 100;
  animation: int-stroom 4.6s linear infinite; animation-delay: var(--vertraging, 0s);
}
@keyframes int-stroom { to { stroke-dashoffset: 0; } }

.int-huis {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 42%; aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 153, 102, 0.22), rgba(255, 153, 102, 0) 68%), var(--c-surface);
  box-shadow: var(--shadow-card);
  display: grid; place-items: center; text-align: center;
  padding: var(--sp-5);
  z-index: 2;
}
.int-huis img { width: clamp(2rem, 4vw, 2.75rem); margin-bottom: var(--sp-2); }
.int-huis b { display: block; font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 400; }
.int-huis span { display: block; font-size: 0.78rem; color: var(--c-ink-40); margin-top: 2px; }

.int-knoop {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%, -50%);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 6px 12px 6px 6px;
  display: flex; align-items: center; gap: 8px;
  font-size: 0.76rem; white-space: nowrap;
  box-shadow: var(--shadow-tile);
  z-index: 3;
  animation: int-zweef 9s ease-in-out infinite;
  animation-delay: var(--vertraging, 0s);
}
.int-knoop img { width: 18px; height: 18px; object-fit: contain; display: block; }
.int-knoop--binnen { background: var(--c-ink); color: var(--c-on-dark); border-color: transparent; padding: 6px 12px; }
.int-knoop--binnen i {
  width: 7px; height: 7px; border-radius: 50%; background: var(--c-orange); display: block;
}
@keyframes int-zweef { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) {
  .int-knoop, .int-puls { animation: none; }
}
@media (max-width: 900px) {
  .int-web { grid-template-columns: 1fr; }
  .int-knoop { font-size: 0.68rem; padding: 4px 9px 4px 4px; }
  .int-knoop img { width: 14px; height: 14px; }
}