/* ========================================
   Flowix - paginagroep "bedrijf": websites.html en over-ons.html
   Laadt na site-2026.css. Alleen wat daar ontbreekt.
   fx-browser = browserkader, fx-web-* = websites, fx-ons-* = over ons.
   ======================================== */

.fx [id] { scroll-margin-top: 104px; }
.fx-pkop .fx-zeker { margin-top: 26px; }

/* ---------- Browserkader ---------- */
.fx-browser { margin: 0; border-radius: 18px; overflow: hidden; background: var(--fx-wit); box-shadow: 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-l); }
.fx-browser-balk { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 10px; padding: 10px 14px; background: #fbf8f4; border-bottom: 1px solid var(--fx-lijn); }
.fx-browser-adres { justify-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 16px; border-radius: 999px; background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn); font-size: 0.8rem; font-weight: 500; color: var(--fx-ink-2); white-space: nowrap; }
.fx-browser-adres .fx-i { width: 12px; height: 12px; color: var(--fx-groen); }
a.fx-browser-adres { transition: color 0.25s, box-shadow 0.25s; }
a.fx-browser-adres:hover { color: var(--fx-ink); box-shadow: inset 0 0 0 1.5px var(--fx-oranje); }
.fx-browser-scherm { container-type: inline-size; position: relative; overflow: hidden; }

/* ========================================
   WEBSITES
   ======================================== */

/* ---------- Kop met podium ---------- */
.fx-web-kop { padding-bottom: 0; }
.fx-web-podium { position: relative; max-width: 1040px; margin: 68px auto 0; padding: 0 clamp(18px, 7vw, 96px); }
.fx-web-vloer { position: absolute; inset: 86px 0 0 0; border-radius: var(--fx-r-xl) var(--fx-r-xl) 0 0; background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 -30px 80px -30px rgba(255, 106, 18, 0.55); overflow: hidden; }
.fx-web-vloer::before { content: ''; position: absolute; inset: 0; 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: 52px 52px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); }
.fx-web-podium .fx-browser { position: relative; z-index: 1; border-radius: 20px 20px 0 0; text-align: left; box-shadow: 0 0 0 1px var(--fx-lijn), 0 -10px 60px -20px rgba(26, 20, 16, 0.35); }
.fx-web-podium .fx-zweef--a { left: -18px; top: auto; bottom: 56px; }
.fx-web-podium .fx-zweef--b { right: -18px; top: 250px; }

/* Voorbeeldsite in de kop */
.fx-proef-nav { display: flex; align-items: center; gap: 3cqw; padding: 2.4cqw 4cqw; border-bottom: 1px solid var(--fx-lijn); }
.fx-proef-nav b { width: 4.4cqw; height: 4.4cqw; border-radius: 1.3cqw; background: var(--fx-verloop); margin-right: auto; }
.fx-proef-nav i { width: 6cqw; height: 1cqw; border-radius: 1cqw; background: #ddd4ca; }
.fx-proef-nav em { font-style: normal; font-size: 1.7cqw; font-weight: 700; padding: 1.2cqw 2.4cqw; border-radius: 99px; background: var(--fx-ink); color: #fff; }
.fx-proef-held { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 4cqw; align-items: center; padding: 6cqw 4cqw 5cqw; background: radial-gradient(70% 90% at 100% 0%, var(--fx-perzik-2), transparent 70%), linear-gradient(160deg, #fff, var(--fx-perzik)); }
.fx-proef-label { font-size: 1.5cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-oranje-tekst); }
.fx-proef-titel { display: block; margin-top: 1.4cqw; font-family: var(--fx-display); font-weight: 800; font-size: 6.4cqw; line-height: 0.98; letter-spacing: -0.03em; }
.fx-proef-titel em { font-style: normal; color: var(--fx-oranje-diep); }
.fx-proef-regels { display: grid; gap: 1cqw; margin-top: 2.4cqw; }
.fx-proef-regels i { height: 1.1cqw; border-radius: 1cqw; background: rgba(26, 20, 16, 0.16); width: 92%; }
.fx-proef-regels i + i { width: 66%; }
.fx-proef-knoppen { display: flex; gap: 1.6cqw; margin-top: 3cqw; }
.fx-proef-knoppen span { font-size: 1.75cqw; font-weight: 700; padding: 1.5cqw 2.6cqw; border-radius: 1.4cqw; background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn); white-space: nowrap; }
.fx-proef-knoppen span:first-child { background: var(--fx-verloop); box-shadow: 0 1.4cqw 2.6cqw -1.2cqw rgba(255, 106, 18, 0.9); }
.fx-proef-figuur { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1.6cqw; aspect-ratio: 1 / 0.78; padding: 2cqw; border-radius: 3cqw; background: var(--fx-wit); box-shadow: var(--fx-schaduw-m); }
.fx-proef-figuur i { border-radius: 1.6cqw; background: var(--fx-zand); }
.fx-proef-figuur i:first-child { grid-row: 1 / span 2; background: var(--fx-verloop); }
.fx-proef-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; padding: 3cqw 4cqw 4cqw; }
.fx-proef-rij div { padding: 2.4cqw; border-radius: 2.2cqw; background: var(--fx-zand); display: grid; gap: 1.2cqw; }
.fx-proef-rij b { width: 4cqw; height: 4cqw; border-radius: 1.2cqw; background: var(--fx-perzik-2); }
.fx-proef-rij i { height: 1cqw; border-radius: 1cqw; background: #ddd4ca; }
.fx-proef-rij i + i { width: 60%; }
.fx-proef-chat { position: absolute; right: 3cqw; bottom: 3cqw; width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; background: var(--fx-verloop); color: var(--fx-ink); font-size: 3cqw; box-shadow: 0 1.6cqw 3cqw -1.2cqw rgba(255, 106, 18, 0.95); }

/* ---------- Vier kenmerken ---------- */
.fx-web-bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
.fx-web-bento > * { display: flex; flex-direction: column; }
.fx-web-bento .is-smal { grid-column: span 5; }
.fx-web-bento .is-breed { grid-column: span 7; }
.fx-web-bento h3 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
.fx-web-bento p { font-size: 1.04rem; }
.fx-web-feit { margin-top: auto !important; padding-top: 26px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.fx-web-feit .fx-getal { color: var(--fx-oranje-diep); }
.fx-web-feit span:last-child { font-weight: 500; color: var(--fx-ink-2); }
.fx-web-balk { margin-top: 14px; height: 10px; border-radius: 99px; background: var(--fx-zand); overflow: hidden; }
.fx-web-balk i { display: block; height: 100%; width: var(--w, 30%); border-radius: inherit; background: var(--fx-verloop); }
.fx-web-punten { margin-top: auto !important; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; }
.fx-web-punten li, .fx-web-punten a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--fx-zand); font-weight: 700; font-size: 0.95rem; }
.fx-web-punten li:has(a) { padding: 0; background: none; }
.fx-web-punten .fx-i { color: var(--fx-oranje-tekst); }
.fx-kaart--oranje .fx-web-punten a { background: rgba(255, 255, 255, 0.92); color: var(--fx-ink); box-shadow: var(--fx-schaduw-s); transition: transform 0.3s var(--fx-ease), background-color 0.3s; }
.fx-kaart--oranje .fx-web-punten a:hover { background: #fff; transform: translateY(-2px); }
.fx-kaart--oranje .fx-icoonvlak { background: rgba(255, 255, 255, 0.92); color: var(--fx-ink); }

/* ---------- Gebouwde sites ---------- */
.fx-web-cases { display: grid; gap: 22px; }
.fx-web-case { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4.4vw, 64px); align-items: center; padding: clamp(20px, 3.6vw, 52px); border-radius: var(--fx-r-xl); background: radial-gradient(60% 80% at 0% 0%, rgba(255, 196, 150, 0.5), transparent 70%), linear-gradient(160deg, var(--fx-perzik), var(--fx-zand)); overflow: hidden; }
.fx-web-case:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); background: radial-gradient(60% 80% at 100% 0%, rgba(255, 196, 150, 0.5), transparent 70%), linear-gradient(200deg, var(--fx-perzik), var(--fx-zand)); }
.fx-web-case:nth-child(even) .fx-web-case-beeld { order: 2; }
.fx-web-case-beeld .fx-browser { transition: transform 0.7s var(--fx-ease), box-shadow 0.7s var(--fx-ease); }
.fx-web-case:hover .fx-browser { transform: translateY(-6px); box-shadow: 0 0 0 1px var(--fx-lijn), 0 50px 90px -40px rgba(26, 20, 16, 0.55); }
.fx-web-case-tekst h3 { font-size: clamp(2rem, 3.4vw, 3rem); margin-top: 16px; }
.fx-web-case-tekst > p:not(.fx-tag) { margin-top: 14px; font-size: 1.15rem; color: var(--fx-ink-2); }
.fx-web-case-tekst .fx-tag { display: inline-block; font-size: 0.82rem; padding: 6px 12px; background: var(--fx-wit); color: var(--fx-oranje-tekst); box-shadow: var(--fx-schaduw-s); }
.fx-web-case-tekst .fx-vinkjes { margin: 22px 0 28px !important; }

/* Atelier Yaar */
.fx-mock-yaar { background: #f6f1ea; color: #2a2420; font-family: Georgia, 'Times New Roman', serif; }
.fx-mock-yaar-top { display: flex; align-items: center; justify-content: space-between; padding: 2.2cqw 4cqw; background: #fff; }
.fx-mock-yaar-top img { height: 5.2cqw; width: auto; }
.fx-mock-yaar-top span { font-size: 1.55cqw; letter-spacing: 0.18em; text-transform: uppercase; color: #6b5f55; }
.fx-mock-yaar-held { position: relative; aspect-ratio: 1200 / 470; background: #cfc8be center / cover no-repeat; display: flex; align-items: flex-end; }
.fx-mock-yaar-held::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 16, 12, 0.72), rgba(20, 16, 12, 0.1) 62%, transparent); }
.fx-mock-yaar-held div { position: relative; padding: 4cqw; color: #fff; }
.fx-mock-yaar-held small { display: block; font-family: var(--fx-body); font-size: 1.4cqw; font-weight: 700; letter-spacing: 0.24em; }
.fx-mock-yaar-held strong { display: block; margin-top: 1.4cqw; font-weight: 400; font-size: 5.4cqw; line-height: 1.05; }
.fx-mock-yaar-held em { font-style: italic; }
.fx-mock-yaar-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6cqw; padding: 2.4cqw 4cqw 3.4cqw; }
.fx-mock-yaar-rij span { position: relative; display: block; aspect-ratio: 1 / 1.08; border-radius: 0.8cqw; background: #d8d0c6 center 20% / cover no-repeat; overflow: hidden; }
.fx-mock-yaar-rij b { position: absolute; inset: auto 0 0 0; padding: 4cqw 1.4cqw 1.2cqw; background: linear-gradient(transparent, rgba(20, 16, 12, 0.75)); color: #fff; font-weight: 400; font-style: italic; font-size: 2cqw; }

/* Illegal Events: de echte site is donker, daarom dit kader ook */
.fx-mock-ill { background: #0a070d; color: #f5f2f0; font-family: var(--fx-body); }
.fx-mock-ill-top { display: flex; align-items: center; gap: 3cqw; padding: 2.2cqw 4cqw; }
.fx-mock-ill-top img { width: 5cqw; height: 5cqw; border-radius: 50%; }
.fx-mock-ill-top p { display: flex; gap: 3cqw; margin-left: auto; font-size: 1.5cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #cfc6cf; }
.fx-mock-ill-top em { display: inline-flex; align-items: center; gap: 1cqw; font-style: normal; font-size: 1.4cqw; font-weight: 700; padding: 0.9cqw 1.8cqw; border-radius: 99px; background: rgba(255, 255, 255, 0.1); }
.fx-mock-ill-top em::before { content: ''; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: #ff3d8b; }
.fx-mock-ill-podium { position: relative; aspect-ratio: 16 / 8.4; background: #1a0f1e center 30% / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; padding: 4cqw; }
.fx-mock-ill-podium::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 7, 13, 0.88), rgba(10, 7, 13, 0.25) 60%, rgba(10, 7, 13, 0.1)), linear-gradient(0deg, #0a070d, transparent 40%); }
.fx-mock-ill-podium > * { position: relative; }
.fx-mock-ill-podium small { font-size: 1.4cqw; font-weight: 700; letter-spacing: 0.22em; color: #ff8fc0; }
.fx-mock-ill-podium strong { display: block; margin-top: 1.4cqw; font-family: var(--fx-display); font-weight: 800; font-size: 7cqw; line-height: 0.92; letter-spacing: -0.02em; text-transform: uppercase; }
.fx-mock-ill-podium strong em { font-style: normal; color: #ff3d8b; }
.fx-mock-ill-onder { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4cqw; align-items: center; padding: 2.6cqw 4cqw; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.fx-mock-ill-onder p { font-size: 1.75cqw; font-weight: 700; }
.fx-mock-ill-onder p small { display: block; font-size: 1.25cqw; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #9d909e; }
.fx-mock-ill-onder span { display: inline-flex; align-items: center; gap: 1cqw; font-size: 1.7cqw; font-weight: 700; padding: 1.4cqw 2.6cqw; border-radius: 99px; background: #fff; color: #0a070d; }
.fx-mock-ill-galerij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 1.4cqw; align-items: center; padding: 0 4cqw 3.4cqw; }
.fx-mock-ill-galerij i { aspect-ratio: 16 / 9; border-radius: 1cqw; background: #1a0f1e center / cover no-repeat; }
.fx-mock-ill-galerij img { width: 13cqw; height: auto; margin-left: 2cqw; opacity: 0.9; }

/* Helloglass */
.fx-mock-hg { background: #fff; color: #1d2a33; font-family: var(--fx-body); }
.fx-mock-hg-top { display: flex; align-items: center; gap: 3cqw; padding: 2.2cqw 4cqw; border-bottom: 1px solid #eef1f3; }
.fx-mock-hg-top img { width: 4.6cqw; height: 4.6cqw; border-radius: 1.2cqw; }
.fx-mock-hg-top b { font-size: 2.3cqw; font-weight: 700; margin-left: -1.6cqw; }
.fx-mock-hg-top p { display: flex; gap: 3cqw; margin-left: auto; font-size: 1.65cqw; font-weight: 500; color: #56646e; }
.fx-mock-hg-top em { position: relative; display: grid; place-items: center; width: 5cqw; height: 5cqw; border-radius: 50%; background: #f3f6f8; font-size: 2.2cqw; font-style: normal; }
.fx-mock-hg-top em u { position: absolute; right: -0.6cqw; top: -0.6cqw; min-width: 2.4cqw; height: 2.4cqw; border-radius: 99px; display: grid; place-items: center; background: #ff7a1a; color: #1d2a33; font-size: 1.3cqw; font-weight: 700; text-decoration: none; }
.fx-mock-hg-held { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 30cqw; align-items: end; padding: 5cqw 4cqw 0; background: radial-gradient(60% 90% at 90% 20%, #ffe3cd, transparent 70%), linear-gradient(160deg, #f4f9fc, #e6f1f7); overflow: hidden; }
.fx-mock-hg-held div { padding-bottom: 5cqw; }
.fx-mock-hg-held small { display: inline-block; font-size: 1.4cqw; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.8cqw 1.8cqw; border-radius: 99px; background: #fff; color: #b84a06; }
.fx-mock-hg-held strong { display: block; margin-top: 1.8cqw; font-family: var(--fx-display); font-weight: 800; font-size: 6cqw; line-height: 1; letter-spacing: -0.025em; }
.fx-mock-hg-held strong em { font-style: normal; color: #d85a08; }
.fx-mock-hg-held span { display: inline-flex; align-items: center; gap: 1cqw; margin-top: 2.6cqw; font-size: 1.8cqw; font-weight: 700; padding: 1.5cqw 2.8cqw; border-radius: 1.4cqw; background: #ff7a1a; color: #1d2a33; }
.fx-mock-hg-held img { width: 100%; height: 34cqw; object-fit: cover; object-position: top; align-self: end; }
.fx-mock-hg-rij { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; padding: 3cqw 4cqw 3.6cqw; }
.fx-mock-hg-rij p { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1.6cqw; align-items: center; padding: 1.6cqw; border-radius: 1.6cqw; box-shadow: inset 0 0 0 1px #e8edf0; font-size: 1.6cqw; font-weight: 700; }
.fx-mock-hg-rij i { grid-row: 1 / span 2; width: 6cqw; height: 6cqw; border-radius: 1.2cqw; background: linear-gradient(135deg, #e9f6fc, #bfe0ee); box-shadow: inset 0 0 0 1px rgba(29, 42, 51, 0.08); }
.fx-mock-hg-rij p:nth-child(2) i { background: linear-gradient(135deg, #f1f4f5, #cfd8dc); }
.fx-mock-hg-rij p:nth-child(3) i { background: linear-gradient(135deg, #fff, #c9d3d8 45%, #f6f8f9 55%, #b4c0c6); }
.fx-mock-hg-rij small { font-size: 1.5cqw; font-weight: 500; color: #56646e; }

/* ---------- Wat zit er in elke build ---------- */
.fx-web-inhoud h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.fx-web-inhoud-tekst > p { margin-top: 18px; font-size: 1.15rem; color: var(--fx-ink-2); max-width: 46ch; }
.fx-web-prijs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.fx-web-prijs p { flex: 1 1 180px; padding: 20px 22px; 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-web-prijs p:first-child { background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 30px 50px -30px rgba(255, 106, 18, 0.9); }
.fx-web-prijs small { display: block; font-size: 0.86rem; font-weight: 700; color: var(--fx-ink-2); }
.fx-web-prijs p:first-child small { color: var(--fx-ink); }
.fx-web-prijs b { display: block; margin-top: 4px; font-family: var(--fx-display); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; }
.fx-web-inhoud-tekst .fx-btn { margin-top: 26px; }
.fx-web-lijst { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--fx-r-xl); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-m); }
.fx-web-lijst h3 { font-size: 1.45rem; }
.fx-web-lijst .fx-vinkjes { margin: 22px 0 0 !important; gap: 0; }
.fx-web-lijst .fx-vinkjes li { padding: 15px 0 15px 36px; font-size: 1.06rem; }
.fx-web-lijst .fx-vinkjes li::before { top: 16px; }
.fx-web-lijst .fx-vinkjes li + li { border-top: 1px solid var(--fx-lijn); }
.fx-web-lijst .fx-vinkjes a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--fx-oranje); }

/* ---------- Vergelijking ---------- */
.fx-web-vergelijk { max-width: 1040px; margin-inline: auto; padding: 14px; border-radius: var(--fx-r-xl); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-m); }
.fx-web-vergelijk table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.fx-web-vergelijk th, .fx-web-vergelijk td { padding: 19px 22px; text-align: left; vertical-align: middle; font-size: 1.02rem; }
.fx-web-vergelijk thead th { font-family: var(--fx-display); font-weight: 800; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--fx-ink-2); padding-top: 24px; padding-bottom: 24px; }
.fx-web-vergelijk tbody th { font-weight: 700; color: var(--fx-ink); }
.fx-web-vergelijk tbody td { color: var(--fx-ink-2); font-weight: 500; }
.fx-web-vergelijk tbody tr > * { border-top: 1px solid var(--fx-lijn); }
.fx-web-vergelijk .is-flowix { background: var(--fx-perzik); color: var(--fx-ink); font-weight: 700; border-top-color: rgba(184, 60, 6, 0.14); }
.fx-web-vergelijk thead .is-flowix { background: var(--fx-verloop); color: var(--fx-ink); font-size: 1.45rem; border-radius: var(--fx-r-l) var(--fx-r-l) 0 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4); }
.fx-web-vergelijk tbody tr:last-child .is-flowix { border-radius: 0 0 var(--fx-r-l) var(--fx-r-l); }
.fx-web-cel { display: inline-flex; align-items: center; gap: 9px; }
.fx-web-ja, .fx-web-nee { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; flex: none; font-size: 0.8rem; vertical-align: middle; }
.fx-web-ja { background: var(--fx-groen-licht); color: var(--fx-groen); }
.is-flowix .fx-web-ja { background: var(--fx-groen); color: #fff; }
.fx-web-nee { background: var(--fx-zand); color: var(--fx-ink-3); }
.fx-web-ja .fx-i, .fx-web-nee .fx-i { stroke-width: 3; }

/* ---------- Klant aan het woord ---------- */
.fx-web-stem { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(26px, 4.6vw, 64px); border-radius: var(--fx-r-xl); background: linear-gradient(160deg, var(--fx-perzik), var(--fx-perzik-2)); overflow: hidden; }
.fx-web-stem::before { content: ''; position: absolute; inset: auto -10% -60% 30%; height: 110%; background: radial-gradient(closest-side, rgba(255, 143, 71, 0.45), transparent); }
.fx-web-stem > * { position: relative; }
.fx-web-stem-quote { margin: 0; }
.fx-web-stem-teken { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--fx-verloop); color: var(--fx-ink); font-size: 1.6rem; box-shadow: 0 16px 30px -14px rgba(255, 106, 18, 0.9); }
.fx-web-stem blockquote { margin-top: 26px; font-family: var(--fx-display); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.25; letter-spacing: -0.015em; text-wrap: pretty; }
.fx-web-stem figcaption { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.fx-web-stem figcaption .fx-avatar { width: 52px; height: 52px; font-size: 1rem; background: var(--fx-verloop); color: var(--fx-ink); }
.fx-web-stem figcaption b { display: block; font-size: 1.08rem; }
.fx-web-stem figcaption small { color: var(--fx-ink-2); font-size: 0.95rem; }
.fx-web-stem-kaart { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: var(--fx-schaduw-l); }
.fx-web-stem-kaart h3 { font-size: 1.3rem; }
.fx-web-stem-kaart .fx-vinkjes { margin: 18px 0 0 !important; gap: 11px; }
.fx-web-stem-tijd { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 22px !important; padding-top: 20px; border-top: 1px solid var(--fx-lijn); }
.fx-web-stem-tijd b { font-family: var(--fx-display); font-weight: 800; font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em; color: var(--fx-oranje-diep); white-space: nowrap; }
.fx-web-stem-tijd span { font-weight: 500; color: var(--fx-ink-2); }

/* ========================================
   OVER ONS
   ======================================== */

/* ---------- Cijfers onder de kop ---------- */
.fx-ons-kop { padding-bottom: 40px; overflow: visible; }
.fx-ons-kop::before { -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.fx-ons-cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 1000px; margin: 60px auto 0 !important; padding: 10px; border-radius: var(--fx-r-xl); background: var(--fx-wit); box-shadow: inset 0 0 0 1px var(--fx-lijn), var(--fx-schaduw-l); text-align: left; }
.fx-ons-cijfers li { padding: 26px 24px; border-radius: var(--fx-r-l); background: var(--fx-zand); }
.fx-ons-cijfers li:first-child { background: var(--fx-verloop); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 26px 44px -26px rgba(255, 106, 18, 0.9); }
.fx-ons-cijfers span { display: block; margin-top: 10px; font-weight: 500; color: var(--fx-ink-2); }
.fx-ons-cijfers li:first-child span { color: var(--fx-ink); }

/* ---------- Verhaal ---------- */
.fx-ons-verhaal h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); }
.fx-ons-verhaal p { margin-top: 20px; font-size: 1.12rem; color: var(--fx-ink-2); }
.fx-ons-verhaal p:first-of-type { font-size: 1.28rem; font-weight: 500; color: var(--fx-ink); margin-top: 26px; }
.fx-ons-bouw { position: relative; padding: clamp(22px, 3.4vw, 44px); 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 -50px rgba(255, 106, 18, 0.95); }
.fx-ons-bouw::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: 44px 44px; -webkit-mask-image: radial-gradient(80% 80% at 100% 0%, #000, transparent); mask-image: radial-gradient(80% 80% at 100% 0%, #000, transparent); }
.fx-ons-bouw-kaart { position: relative; padding: 20px; border-radius: var(--fx-r-l); background: var(--fx-wit); box-shadow: var(--fx-schaduw-l); }
.fx-ons-bouw-kaart header { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--fx-lijn); }
.fx-ons-bouw-kaart header b { font-size: 1rem; }
.fx-ons-bouw-kaart header .fx-tag { margin-left: auto; }
.fx-ons-bouw-label { margin-top: 16px !important; font-size: 0.82rem; font-weight: 700; color: var(--fx-ink-3); }
.fx-ons-stenen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px !important; }
.fx-ons-stenen a { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--fx-r-s); background: var(--fx-zand); font-weight: 700; font-size: 0.95rem; transition: transform 0.35s var(--fx-ease), background-color 0.3s, box-shadow 0.3s; }
.fx-ons-stenen a:hover { background: var(--fx-perzik); transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--fx-oranje); }
.fx-ons-stenen span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--fx-wit); color: var(--fx-oranje-tekst); box-shadow: var(--fx-schaduw-s); flex: none; }
.fx-ons-bouw-voet { display: flex; align-items: center; gap: 10px; margin-top: 14px !important; padding: 12px 14px; border-radius: var(--fx-r-s); background: var(--fx-groen-licht); color: var(--fx-groen); font-weight: 700; font-size: 0.92rem; }
.fx-ons-bouw .fx-zweef { right: -14px; top: -22px; }

/* ---------- Waarden ---------- */
.fx-ons-waarden h3 { font-size: 1.5rem; }

/* ---------- Team ---------- */
.fx-ons-team > li { display: flex; }
.fx-ons-lid { display: flex; flex-direction: column; width: 100%; padding: 0; overflow: hidden; }
.fx-ons-lid-kop { position: relative; display: flex; align-items: center; gap: 18px; padding: clamp(22px, 2.6vw, 30px); background: radial-gradient(80% 120% at 100% 0%, var(--fx-perzik-2), transparent 70%), linear-gradient(160deg, var(--fx-perzik), #fff8f1); }
.fx-ons-lid-kop .fx-avatar { width: 76px; height: 76px; font-family: var(--fx-display); font-weight: 800; font-size: 1.5rem; background: var(--fx-verloop); color: var(--fx-ink); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45), 0 18px 30px -14px rgba(255, 106, 18, 0.9); transition: transform 0.5s var(--fx-ease); }
.fx-ons-lid:hover .fx-avatar { transform: rotate(-6deg) scale(1.06); }
.fx-ons-lid-kop h3 { font-size: 1.5rem; }
.fx-ons-lid-kop .fx-tag { display: inline-block; margin-top: 8px; background: var(--fx-wit); color: var(--fx-oranje-tekst); font-size: 0.82rem; box-shadow: var(--fx-schaduw-s); }
.fx-ons-lid-tekst { display: flex; flex-direction: column; flex: 1; padding: clamp(22px, 2.6vw, 30px); }
.fx-ons-lid-tekst p { margin-top: 0; color: var(--fx-ink-2); }
.fx-ons-lid-tekst p + p { margin-top: 12px; }
.fx-ons-lid-tekst p:first-child { color: var(--fx-ink); font-weight: 700; font-size: 1.08rem; }
.fx-ons-lid-tekst .fx-btn { margin-top: auto; align-self: flex-start; }
.fx-ons-lid-tekst p:last-of-type { margin-bottom: 24px; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .fx-web-podium .fx-zweef--a { left: -4px; bottom: 40px; }
  .fx-web-podium .fx-zweef--b { right: -4px; top: 210px; }
  .fx-web-case, .fx-web-case:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .fx-web-case:nth-child(even) .fx-web-case-beeld { order: 0; }
  .fx-web-stem { grid-template-columns: minmax(0, 1fr); }
  .fx-ons-team { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-inline: auto; }
}

/* ---------- Telefoon ---------- */
@media (max-width: 768px) {
  .fx [id] { scroll-margin-top: 88px; }
  .fx-web-podium { margin-top: 44px; padding: 0 12px; }
  .fx-web-vloer { inset: 44px 0 0 0; border-radius: var(--fx-r-l) var(--fx-r-l) 0 0; }
  .fx-web-podium .fx-browser { border-radius: 14px 14px 0 0; }
  .fx-web-podium .fx-zweef { display: none; }
  .fx-browser { border-radius: 14px; }
  .fx-browser-balk { grid-template-columns: 40px minmax(0, 1fr) 40px; padding: 8px 10px; gap: 6px; }
  .fx-browser-balk .fx-venster { gap: 4px; }
  .fx-browser-balk .fx-venster i { width: 8px; height: 8px; }
  .fx-browser-adres { font-size: 0.72rem; padding: 5px 12px; }

  .fx-web-bento { grid-template-columns: minmax(0, 1fr); }
  .fx-web-bento .is-smal, .fx-web-bento .is-breed { grid-column: auto; }
  .fx-web-case { padding: 14px 14px 26px; border-radius: var(--fx-r-l); gap: 22px; }
  .fx-web-case-tekst { padding: 0 6px; }
  .fx-web-case-tekst .fx-btn, .fx-web-inhoud-tekst .fx-btn { width: 100%; }
  .fx-web-lijst { border-radius: var(--fx-r-l); }

  /* Vergelijking: elke rij wordt een eigen kaart, niets schuift opzij */
  .fx-web-vergelijk { padding: 0; background: none; box-shadow: none; border-radius: 0; }
  .fx-web-vergelijk table, .fx-web-vergelijk tbody, .fx-web-vergelijk tr, .fx-web-vergelijk th, .fx-web-vergelijk td { display: block; }
  .fx-web-vergelijk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .fx-web-vergelijk tbody tr { padding: 8px; 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-web-vergelijk tbody tr + tr { margin-top: 12px; }
  .fx-web-vergelijk tbody tr > * { border-top: 0; }
  .fx-web-vergelijk tbody th { padding: 12px 12px 10px; font-family: var(--fx-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; }
  .fx-web-vergelijk tbody td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; font-size: 0.98rem; text-align: right; }
  .fx-web-vergelijk tbody td::before { content: attr(data-kolom); flex: none; max-width: 46%; text-align: left; font-size: 0.86rem; font-weight: 700; color: var(--fx-ink-3); }
  .fx-web-vergelijk tbody td + td { border-top: 1px solid var(--fx-lijn); }
  .fx-web-vergelijk tbody td.is-flowix, .fx-web-vergelijk tbody tr:last-child .is-flowix { border-top: 0; margin-top: 6px; border-radius: var(--fx-r-s); }
  .fx-web-vergelijk tbody td.is-flowix::before { color: var(--fx-oranje-tekst); }

  .fx-web-stem { border-radius: var(--fx-r-l); }
  .fx-web-stem-teken { width: 46px; height: 46px; border-radius: 14px; font-size: 1.3rem; }

  .fx-ons-kop h1 { font-size: clamp(1.8rem, 8.4vw, 2.4rem); overflow-wrap: break-word; }
  .fx-ons-cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 40px !important; padding: 8px; gap: 8px; border-radius: var(--fx-r-l); }
  .fx-ons-cijfers li { padding: 20px 16px; border-radius: var(--fx-r-m); }
  .fx-ons-cijfers span { font-size: 0.92rem; }
  .fx-ons-bouw { border-radius: var(--fx-r-l); margin-top: 8px; }
  .fx-ons-bouw .fx-zweef { right: 10px; top: -24px; }
  .fx-ons-bouw-kaart { padding: 16px; }
  .fx-ons-stenen a { padding: 10px; font-size: 0.88rem; gap: 8px; }
  .fx-ons-stenen span { width: 30px; height: 30px; }
  .fx-ons-lid-kop .fx-avatar { width: 64px; height: 64px; font-size: 1.3rem; }
  .fx-slot-vlak .fx-btn { width: 100%; }
}

/* ---------- Team: een brede kaart per persoon (oranje zijpaneel, verhaal, focus) ---------- */
.ons-team { display: grid; gap: 18px; max-width: 1120px; margin-inline: auto; }
.ons-lid { display: grid; grid-template-columns: 290px minmax(0, 1.25fr) minmax(0, 1fr); border-radius: var(--fx-r-xl); background: var(--fx-wit); box-shadow: 0 1px 2px rgba(26, 20, 16, 0.04), 0 44px 80px -50px rgba(184, 60, 6, 0.55); overflow: hidden; transition: transform 0.6s var(--fx-ease), box-shadow 0.6s var(--fx-ease); }
.ons-lid:hover { transform: translateY(-5px); box-shadow: 0 1px 2px rgba(26, 20, 16, 0.04), 0 54px 90px -46px rgba(184, 60, 6, 0.65); }
.ons-lid-zij { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; padding: 32px; background: var(--fx-verloop); }
.ons-lid-zij::before { content: ''; position: absolute; right: -110px; top: -130px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.55), transparent); pointer-events: none; }
.ons-lid-zij::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.45) 1.200px, transparent 1.600px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(20deg, #000, transparent 55%); mask-image: linear-gradient(20deg, #000, transparent 55%); pointer-events: none; }
.ons-lid-zij > * { position: relative; z-index: 1; }
.ons-foto { width: 92px; height: 92px; border-radius: 28px; display: grid; place-items: center; font-family: var(--fx-display); font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em; background: var(--fx-wit); color: var(--fx-ink); box-shadow: 0 22px 36px -18px rgba(26, 20, 16, 0.55); transition: transform 0.6s var(--fx-ease); }
.ons-lid:hover .ons-foto { transform: rotate(-5deg) scale(1.05); }
.ons-lid-zij h3 { margin-top: 26px; font-size: 1.9rem; line-height: 1.02; }
.ons-rol { margin-top: 10px; padding: 6px 13px; border-radius: 999px; background: var(--fx-ink); color: #fff; font-size: 0.82rem; font-weight: 700; }
.ons-linkedin { margin-top: auto; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 14px; border-radius: 14px; background: var(--fx-wit); color: var(--fx-ink); font-weight: 700; font-size: 0.95rem; box-shadow: var(--fx-schaduw-s); transition: transform 0.4s var(--fx-ease), background-color 0.3s, color 0.3s; }
.ons-rol + .ons-linkedin { margin-top: 36px; }
.ons-linkedin .fx-i { width: 20px; height: 20px; color: #0a66c2; transition: color 0.3s; }
.ons-linkedin::after { content: 'LinkedIn'; }
.ons-linkedin:hover { background: #0a66c2; color: #fff; transform: translateY(-2px); }
.ons-linkedin:hover .fx-i { color: #fff; }
.ons-lid-midden { padding: 36px clamp(24px, 3vw, 40px); align-self: center; }
.ons-lid-lead { font-family: var(--fx-display); font-weight: 800; font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.12; letter-spacing: -0.02em; }
.ons-lid-bio { margin-top: 14px; color: var(--fx-ink-2); }
.ons-focus { margin: 18px 18px 18px 0; padding: 26px; border-radius: var(--fx-r-l); background: var(--fx-zand); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.ons-focus > p { font-size: 0.9rem; font-weight: 700; color: var(--fx-oranje-tekst); }
.ons-focus .fx-vinkjes { margin: 16px 0 0 !important; gap: 12px; }
.ons-kennis { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px 40px; padding: clamp(24px, 3vw, 34px) clamp(26px, 3vw, 40px); border-radius: var(--fx-r-xl); background: linear-gradient(160deg, var(--fx-perzik), var(--fx-perzik-2)); box-shadow: inset 0 0 0 1.5px rgba(255, 106, 18, 0.3); }
.ons-kennis h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.ons-kennis p { margin-top: 6px; color: var(--fx-ink-2); max-width: 54ch; }
.ons-kennis-acties { flex: none; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.ons-kennis-of { margin: 0 !important; text-align: center; }
.ons-kennis-of a { font-weight: 700; color: var(--fx-ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1000px) {
  .ons-lid { grid-template-columns: 240px minmax(0, 1fr); }
  .ons-focus { grid-column: 1 / -1; margin: 0 18px 18px; }
  .ons-kennis { flex-wrap: wrap; }
}
@media (max-width: 768px) {
  .ons-lid { grid-template-columns: minmax(0, 1fr); }
  .ons-lid-zij { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 22px; }
  .ons-foto { width: 68px; height: 68px; border-radius: 22px; font-size: 1.4rem; }
  .ons-lid-zij h3 { margin: 0; font-size: 1.5rem; flex: 1; min-width: 0; }
  .ons-rol { margin: 0; }
  .ons-linkedin, .ons-rol + .ons-linkedin { margin: 0 0 0 auto; }
  .ons-lid-midden { padding: 24px 22px 8px; }
  .ons-focus { margin: 14px; padding: 22px; }
  .ons-kennis-acties, .ons-kennis-acties .fx-btn { width: 100%; }
}
@media (max-width: 768px) {
  .ons-lid-zij { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; }
  .ons-foto { grid-row: 1 / span 2; }
  .ons-lid-zij h3 { align-self: end; }
  .ons-rol { justify-self: start; align-self: start; }
  .ons-linkedin, .ons-rol + .ons-linkedin { grid-column: 1 / -1; justify-self: start; margin: 14px 0 0; }
}