/* ========================================
   Flowix - modulepagina's (Support, Call, Social, Agents, Auto Page)
   Laadt na site-2026.css. Alleen wat daar ontbreekt; klassen: fx-mod-.
   ======================================== */

/* ---------- Kop: tekst links, interface rechts ---------- */
.fx-mod-kop { padding-bottom: 56px; }
.fx-mod-kop-raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.fx-mod-kop h1 { max-width: 15ch; font-size: clamp(2.3rem, 4.5vw, 4rem); margin-top: 22px; }
.fx-mod-kop--lang h1 { max-width: 19ch; font-size: clamp(2.1rem, 3.7vw, 3.3rem); line-height: 1.03; }
.fx-mod-kop .fx-pkop-sub { max-width: 52ch; }
.fx-mod-kop:not(.fx-mod-kop--lang) h1 em { display: block; }
.fx-mod-kop .fx-zeker { justify-content: flex-start; }
.fx-mod-kop .fx-pil, .fx-mod-kop h1, .fx-mod-kop .fx-pkop-sub, .fx-mod-kop .fx-pkop-knoppen { animation: fx-op 0.9s var(--fx-ease) both; }
.fx-mod-kop h1 { animation-delay: 0.08s; } .fx-mod-kop .fx-pkop-sub { animation-delay: 0.16s; } .fx-mod-kop .fx-pkop-knoppen { animation-delay: 0.24s; }

.fx-mod-beeld {
  position: relative; display: grid; place-items: center;
  min-height: 520px; padding: clamp(28px, 4vw, 52px);
  border-radius: var(--fx-r-xl); background: var(--fx-verloop);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 50px 90px -44px rgba(255, 106, 18, 0.85);
}
.fx-mod-beeld::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-image: linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(#000, transparent 90%); mask-image: linear-gradient(#000, transparent 90%);
}
.fx-mod-beeld::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(60% 50% at 78% 0%, rgba(255, 255, 255, 0.5), transparent 70%); pointer-events: none; }
.fx-mod-beeld .fx-kaart-beeld { width: min(100%, 430px); z-index: 1; }
.fx-mod-beeld:hover .fx-kaart-beeld { transform: rotate(0deg) translateY(-4px); }
.fx-mod-beeld .fx-paneel-chip { right: -14px; bottom: 34px; }
.fx-mod-chip2 { position: absolute; z-index: 2; left: -18px; top: -22px; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 10px; border-radius: 16px; background: rgba(255, 255, 255, 0.95); box-shadow: var(--fx-schaduw-m); font-size: 0.86rem; font-weight: 700; animation: fx-zweven 7s ease-in-out -2s infinite; }
.fx-mod-chip2 small { display: block; font-size: 0.76rem; font-weight: 500; color: var(--fx-ink-2); }
.fx-mod-kaartkop { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--fx-lijn); }
.fx-mod-kaartkop b { font-size: 0.98rem; }
.fx-mod-beeld .fx-groot-cijfer b { font-size: 3.2rem; }
.fx-mod-beeld .fx-beeld-uitleg { margin-bottom: 16px !important; padding-bottom: 16px; }
.fx-mod-beeld .fx-voorbeeld { text-align: left; }
.fx-mod-beeld .fx-bel + .fx-bel--klant { margin-top: 10px; }
.fx-mod-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px !important; padding-top: 14px; border-top: 1px solid var(--fx-lijn); font-size: 0.82rem; font-weight: 700; color: var(--fx-ink-2); }
.fx-mod-post { padding: 14px; border-radius: var(--fx-r-m); background: var(--fx-zand); margin-bottom: 16px !important; }
.fx-mod-post small { display: block; font-size: 0.74rem; font-weight: 700; color: var(--fx-oranje-tekst); margin-bottom: 6px; }
.fx-mod-post p { font-size: 0.93rem; line-height: 1.4; font-weight: 500; }
.fx-mod-post .fx-tags { margin-top: 12px !important; }

/* de inhoud van de kaart komt tot leven zodra het beeld zichtbaar is */
.fx-mod-beeld.is-zichtbaar .fx-bel--klant { animation: fx-bel 0.6s 0.3s var(--fx-ease) backwards; }
.fx-mod-beeld.is-zichtbaar .fx-typ { animation: fx-typ-zicht 1.1s 0.8s linear both; }
.fx-mod-beeld.is-zichtbaar .fx-bel--ai { animation: fx-bel 0.6s 1.9s var(--fx-ease) backwards; }
.fx-mod-beeld.is-zichtbaar .fx-mod-rij { animation: fx-bel 0.6s 2.4s var(--fx-ease) backwards; }
.fx-mod-beeld.is-zichtbaar .fx-balken i::after { animation: fx-vul 1.2s 0.5s var(--fx-ease) backwards; }
.fx-mod-beeld.is-zichtbaar .fx-balken li:nth-child(2) i::after { animation-delay: 0.65s; }
.fx-mod-beeld.is-zichtbaar .fx-taken li { animation: fx-bel 0.6s var(--fx-ease) backwards; }
.fx-mod-beeld.is-zichtbaar .fx-taken li:nth-child(1) { animation-delay: 0.5s; } .fx-mod-beeld.is-zichtbaar .fx-taken li:nth-child(2) { animation-delay: 0.85s; } .fx-mod-beeld.is-zichtbaar .fx-taken li:nth-child(3) { animation-delay: 1.2s; } .fx-mod-beeld.is-zichtbaar .fx-taken li:nth-child(4) { animation-delay: 1.55s; }

/* ---------- Cijferbalk ---------- */
.fx-mod-cijfers-sectie { padding: 24px 0 0; }
.fx-mod-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--fx-r-xl); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-m); overflow: hidden; }
.fx-mod-cijfers li { padding: clamp(22px, 3vw, 36px); }
.fx-mod-cijfers li + li { box-shadow: inset 1px 0 0 var(--fx-lijn); }
.fx-mod-cijfers li:first-child { background: var(--fx-verloop); }
.fx-mod-cijfers .fx-getal { display: block; }
.fx-mod-cijfers span { display: block; margin-top: 10px; font-weight: 500; color: var(--fx-ink-2); font-size: 0.98rem; line-height: 1.35; }
.fx-mod-cijfers li:first-child span { color: var(--fx-ink); }

/* ---------- Op maat: tekst links, bouwstenen rechts ---------- */
.fx-mod-maat { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.fx-mod-maat-tekst { position: sticky; top: 120px; }
.fx-mod-maat-tekst h2 { font-size: clamp(2rem, 3.8vw, 3.2rem); }
.fx-mod-maat-tekst p { margin-top: 20px; font-size: 1.1rem; color: var(--fx-ink-2); max-width: 52ch; }
.fx-mod-maat-tekst .fx-btn { margin-top: 30px; }
.fx-mod-maat-lijst { display: grid; gap: 14px; }
.fx-mod-maat-lijst li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; }
.fx-mod-maat-lijst .fx-icoonvlak { margin-bottom: 0; }
.fx-mod-maat-lijst p { margin-top: 8px; }
.fx-mod-maat-lijst a { font-weight: 700; color: var(--fx-oranje-tekst); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Stappen: eigen ruimte boven de lijn ---------- */
.fx-mod-stappen { padding-top: 40px; }

/* ---------- Agents: de vijf stappen van een agent ---------- */
.fx-mod-keten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: keten; }
.fx-mod-keten li { position: relative; padding: 24px 22px 26px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-s); counter-increment: keten; transition: transform 0.5s var(--fx-ease), box-shadow 0.5s var(--fx-ease); }
.fx-mod-keten li:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 1.5px var(--fx-oranje), var(--fx-schaduw-m); }
.fx-mod-keten li::before { content: counter(keten); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 20px; background: var(--fx-verloop); color: var(--fx-ink); font-family: var(--fx-display); font-weight: 800; font-size: 1.2rem; box-shadow: 0 12px 22px -12px rgba(255, 106, 18, 0.85); }
.fx-mod-keten h3 { font-size: 1.35rem; }
.fx-mod-keten p { margin-top: 10px; font-size: 0.95rem; line-height: 1.5; color: var(--fx-ink-2); }
.fx-mod-wanneer { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.fx-mod-wanneer h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); }
.fx-mod-wanneer p { margin-top: 0; font-weight: 500; }

/* ---------- Koppelingen ---------- */
.fx-mod-koppel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.fx-mod-koppel > li { padding: 26px; border-radius: var(--fx-r-l); background: var(--fx-zand); }
.fx-mod-koppel h3 { font-size: 1.25rem; }
.fx-mod-koppel ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.fx-mod-koppel ul li { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn); font-size: 0.92rem; font-weight: 500; }
.fx-mod-koppel img { width: 18px; height: 18px; }
.fx-mod-eigen { display: flex; align-items: center; gap: 20px; margin-top: 14px; padding: 24px 28px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-s); }
.fx-mod-eigen > span { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--fx-verloop); color: var(--fx-ink); font-size: 1.3rem; }
.fx-mod-eigen div { flex: 1; }
.fx-mod-eigen h3 { font-size: 1.3rem; }
.fx-mod-eigen p { margin-top: 4px; color: var(--fx-ink-2); }

/* ---------- Branchelinks ---------- */
.fx-mod-branche { padding: 0 0 112px; }
.fx-mod-branche .fx-kop { margin-bottom: 32px; }
.fx-mod-branche .fx-kop h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.fx-mod-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fx-mod-links a { display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 100%; padding: 20px 22px; border-radius: var(--fx-r-m); background: var(--fx-zand); font-family: var(--fx-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; transition: background-color 0.4s var(--fx-ease), transform 0.4s var(--fx-ease), box-shadow 0.4s var(--fx-ease); }
.fx-mod-links a .fx-i { width: 34px; height: 34px; padding: 8px; border-radius: 50%; background: var(--fx-wit); transition: background-color 0.3s, transform 0.4s var(--fx-ease); }
.fx-mod-links a:hover { background: var(--fx-wit); transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px var(--fx-oranje), var(--fx-schaduw-m); }
.fx-mod-links a:hover .fx-i { background: var(--fx-oranje); transform: rotate(45deg); }

.fx-js :is(.fx-mod-maat-lijst, .fx-mod-keten, .fx-mod-koppel, .fx-mod-links, .fx-mod-kaarten)[data-toon] { opacity: 1; transform: none; }
.fx-js :is(.fx-mod-maat-lijst, .fx-mod-keten, .fx-mod-koppel, .fx-mod-links, .fx-mod-kaarten)[data-toon]:not(.is-zichtbaar) > * { opacity: 0; }
.fx-js :is(.fx-mod-maat-lijst, .fx-mod-keten, .fx-mod-koppel, .fx-mod-links, .fx-mod-kaarten)[data-toon].is-zichtbaar > * { animation: fx-kind 0.8s var(--fx-ease) backwards; }
.fx-js [data-toon].is-zichtbaar > :nth-child(6) { animation-delay: 0.35s; }

@media (max-width: 1100px) {
  .fx-mod-keten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fx-mod-koppel, .fx-mod-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-mod-beeld .fx-paneel-chip { right: 12px; }
  .fx-mod-chip2 { left: 12px; top: -22px; }
}
@media (max-width: 900px) {
  .fx-mod-kop-raster, .fx-mod-maat, .fx-mod-wanneer { grid-template-columns: minmax(0, 1fr); }
  .fx-mod-maat-tekst { position: static; }
  .fx-mod-kop h1, .fx-mod-kop--lang h1 { max-width: none; }
  .fx-mod-beeld { min-height: 0; }
}
@media (max-width: 768px) {
  .fx-mod-kop { padding-bottom: 32px; }
  .fx-mod-kop .fx-zeker { align-items: flex-start; }
  .fx-mod-beeld { padding: 44px 16px 20px; border-radius: var(--fx-r-l); margin-top: 22px; }
  .fx-mod-beeld .fx-kaart-beeld { padding: 20px; }
  .fx-mod-beeld .fx-paneel-chip { right: auto; padding: 9px 14px; }
  .fx-mod-chip2 { left: 12px; top: -20px; }
  .fx-mod-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--fx-r-l); }
  .fx-mod-cijfers li:nth-child(3) { box-shadow: inset 0 1px 0 var(--fx-lijn); }
  .fx-mod-cijfers li:nth-child(4) { box-shadow: inset 1px 0 0 var(--fx-lijn), inset 0 1px 0 var(--fx-lijn); }
  .fx-mod-cijfers .fx-getal { font-size: 2.1rem; }
  .fx-mod-cijfers span { font-size: 0.9rem; }
  .fx-mod-maat-lijst li { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fx-mod-maat-tekst .fx-btn { width: 100%; }
  .fx-mod-stappen { padding-top: 0; }
  .fx-mod-keten, .fx-mod-koppel, .fx-mod-links { grid-template-columns: minmax(0, 1fr); }
  .fx-mod-eigen { flex-direction: column; align-items: stretch; padding: 22px; }
  .fx-mod-eigen .fx-btn { width: 100%; }
  .fx-mod-branche { padding-bottom: 72px; }
  .fx-mod-links a { font-size: 1.05rem; padding: 16px 18px; }
}