/* page-specific */
.hero { padding: clamp(3.5rem, 9vh, 7rem) 0 clamp(3rem, 7vh, 5.5rem); }
.hero-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 5vw, 6rem); align-items: center; }
.kicker { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--jbmono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); background: var(--blue-tint); padding: .4rem .8rem; border-radius: 99px; margin-bottom: 1.4rem; }
.kicker .dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
/* Smaller than the line this hero opened with (2.6–4.4rem): the headline grew
   from three words to five and "bedrijfsdatabase" is sixteen characters, which
   at the old top end pushed the h1 to three lines on a laptop and crowded the
   16px gutter on a phone. Erik 2026-09-22. */
.hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); font-weight: 700; line-height: 1.08;
  text-wrap: balance; }
.hero h1 em { font-style: normal; color: var(--blue); }
.hero .lede { font-size: clamp(1.1rem, 1.5vw, 1.3rem); color: var(--ink-60); margin-top: 1.3rem; max-width: 36rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }
/* No user since Erik removed the AVG line under the hero buttons (2026-09-22).
   Kept because the hero still has a slot for a quiet line under the actions and
   the next thing that goes there wants this exact size and colour; delete it if
   the slot is still empty when the homepage gets its pass. */
.hero-note { font-size: .85rem; color: var(--ink-40); margin-top: 1rem; }

/* ── hero demo: 3 acts — bedrijfsdata (chat→record) · vacatures · aanbestedingen ── */
.hero-demo { position: relative; }
#heroStat { display: inline-block; transition: opacity .3s ease; }
.hd-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.hd-tab { font-family: var(--jbmono); font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-60); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 99px; padding: .42rem .85rem; cursor: pointer; transition: color .15s, background .15s, border-color .15s; }
.hd-tab:hover:not(.on) { color: var(--ink); border-color: var(--ink-40); }
.hd-tab.on { color: #fff; background: var(--blue); border-color: var(--blue); }
/* 640, not 580: act 1 carries eight evidence rows and an as-of stamp now that
   it renders a real record, and the scene is absolutely positioned — a row
   too many is a clipped card rather than a taller one. */
.hd-stage { position: relative; min-height: 640px; }
.hd-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .45s ease; pointer-events: none; display: flex; flex-direction: column; gap: .9rem; }

/* generic staggered reveal for the jobs/tender scenes */
.hd-rise { opacity: 0; transform: translateY(12px); transition: opacity .45s, transform .45s; }
.hd-rise.show { opacity: 1; transform: none; }

/* act 2 — vacatures */
.hd-jobs { gap: .7rem; }
.hj-bar { display: flex; align-items: center; gap: .6rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .8rem 1rem; }
.hj-bar .q-icon { font-family: var(--jbmono); color: var(--blue); font-size: 1.1rem; }
.hj-bar p { font-size: .92rem; color: var(--ink); }
.hj-count { font-size: .9rem; color: var(--ink-60); }
.hj-count b { color: var(--ink); }
.hj-list { display: flex; flex-direction: column; gap: .55rem; }
.hj-job { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .75rem .95rem; }
.hj-role { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .96rem; }
.hj-new { font-family: var(--jbmono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; color: var(--green); background: var(--green-tint); padding: .12rem .45rem; border-radius: 99px; }
.hj-co { font-size: .86rem; color: var(--ink-60); margin-top: .2rem; }
.hj-co b { color: var(--ink); }
.hj-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-top: .5rem; font-size: .78rem; color: var(--ink-60); }
.hj-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-family: var(--jbmono); font-size: .66rem; color: var(--ink-40); border-top: 1px solid var(--line); padding-top: .7rem; }

/* act 3 — aanbestedingen */
.hd-tender { gap: .7rem; }
.ht-alert { display: flex; align-items: center; gap: .8rem; background: var(--blue); color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: .85rem 1.1rem; }
.ht-bolt { font-size: 1.3rem; }
.ht-alert b { display: block; font-size: .96rem; }
.ht-alert span { font-size: .8rem; color: rgba(255,255,255,.82); }
.ht-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.2rem; }
.ht-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ht-head h3 { font-size: 1.05rem; line-height: 1.3; }
.ht-buyer { font-size: .85rem; color: var(--ink-60); }
.ht-rows { margin-top: .9rem; display: grid; gap: .4rem; }
.ht-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-top: 1px dashed var(--line); padding-top: .4rem; }
.ht-rows dt { font-family: var(--jbmono); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-40); }
.ht-rows dd { font-size: .88rem; color: var(--ink); text-align: right; }
.ht-update { display: flex; align-items: center; gap: .6rem; background: var(--green-tint); border: 1px solid #bfe3d2; border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; color: #15533c; }
.ht-update b { color: var(--green); }
.ht-dot { flex: none; width: .5rem; height: .5rem; border-radius: 50%; background: var(--green); }
.ht-subsidie { display: flex; align-items: center; gap: .6rem; background: #fdf3e3; border: 1px solid #f0dcb8; border-radius: 10px; padding: .7rem .9rem; font-size: .85rem; color: #7a5314; }
.ht-subsidie b { color: var(--amber); }
.ht-eur { flex: none; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: #fff; font-weight: 700; font-size: .85rem; }
.hd-scene.on { opacity: 1; pointer-events: auto; }
.hd-msg { max-width: 88%; border-radius: var(--radius); padding: 1rem 1.2rem; font-size: .95rem; line-height: 1.5; opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .4s; }
.hd-msg.show { opacity: 1; transform: none; }
.hd-user { align-self: flex-end; background: var(--blue); color: #fff; border-bottom-right-radius: 4px; box-shadow: var(--shadow); }
.hd-user .hd-user-label { display: flex; align-items: center; gap: .45rem; font-family: var(--jbmono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.75); margin-bottom: .5rem; }
.hd-user .hd-user-label::before { content: "?"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 4px; background: rgba(255,255,255,.18); color: #fff; font-size: .7rem; font-weight: 600; }
.hd-bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; box-shadow: var(--shadow); color: var(--ink-60); }
.hd-bot b { color: var(--ink); }
.hd-bot .hd-bot-label { display: flex; align-items: center; gap: .45rem; font-family: var(--jbmono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: .5rem; }
.hd-bot .hd-bot-label::before { content: "DD"; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 4px; background: var(--blue); color: #fff; font-size: .55rem; }
.hd-bot ol { list-style: none; counter-reset: q; margin-top: .6rem; }
.hd-bot ol li { counter-increment: q; padding: .3rem 0; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.hd-bot ol li::before { content: counter(q); font-family: var(--jbmono); font-size: .66rem; color: var(--blue-deep); background: var(--blue-tint); border-radius: 99px; padding: .12rem .5rem; margin-right: .55rem; }
.hd-bot ol li.show { opacity: 1; transform: none; }
.hd-answers { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.hd-chip { font-size: .85rem; font-weight: 500; color: var(--blue-deep); background: var(--blue-tint); border: 1px solid rgba(21,101,232,.25); border-radius: 99px; padding: .45rem .95rem; opacity: 0; transform: translateY(8px) scale(.95); transition: opacity .35s, transform .35s; }
.hd-chip.show { opacity: 1; transform: none; }
.hd-summary { font-family: var(--jbmono); font-size: .7rem; letter-spacing: .04em; color: var(--ink-60); background: var(--bg-soft); border: 1px solid var(--line); border-radius: 99px; padding: .5rem 1rem; align-self: center; }
.hd-summary i { font-style: normal; color: var(--green); }
.hd-result .record { opacity: 0; transform: translateY(22px) scale(.96); transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1); }
.hd-result.on .record { opacity: 1; transform: none; }
.hd-count { display: flex; align-items: baseline; justify-content: center; gap: .55rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: .9rem 1.2rem; opacity: 0; transform: translateY(10px); transition: opacity .45s .25s, transform .45s .25s; }
.hd-result.on .hd-count { opacity: 1; transform: none; }
.hd-count b { font-family: var(--jbmono); font-size: 1.45rem; font-weight: 400; color: var(--blue-deep); }
.hd-count span { font-size: .85rem; color: var(--ink-60); }
/* Below 1080 the demo column narrows; under ~560 each record row also stacks
   its source chip onto a second line, so the same eight rows need a third
   step rather than one. */
@media (max-width: 1080px) { .hd-stage { min-height: 700px; } }
@media (max-width: 560px) { .hd-stage { min-height: 920px; } }
@media (prefers-reduced-motion: reduce) {
  .hd-scene, .hd-msg, .hd-bot ol li, .hd-chip, .hd-result .record, .hd-count, .hd-rise { transition: none; }
}

.stats { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.stat { padding: 1.7rem 1rem; text-align: center; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font-family: var(--jbmono); font-size: clamp(1.35rem, 2.4vw, 2rem); font-weight: 400; }
.stat span { font-size: .84rem; color: var(--ink-60); }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.9rem 1.7rem; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card h3 { font-size: 1.18rem; margin-bottom: .5rem; }
.card p { font-size: .94rem; color: var(--ink-60); }

.teaser { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.teaser-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(2.5rem, 5vw, 6rem); align-items: center; }
.query-mock { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.query-bar { display: flex; gap: .8rem; align-items: center; padding: 1rem 1.3rem; border-bottom: 1px solid var(--line); }
.query-bar .q-icon { color: var(--blue); font-family: var(--jbmono); }
.query-bar p { font-size: .95rem; font-weight: 500; }
.query-bar .caret { display: inline-block; width: 2px; height: 1.1em; background: var(--blue); vertical-align: text-bottom; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.query-resp { padding: 1.1rem 1.3rem; font-size: .9rem; color: var(--ink-60); border-bottom: 1px solid var(--line); }
.query-resp b { color: var(--ink); }
.query-result { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.3rem; background: var(--blue-tint); }
.query-result b { font-family: var(--jbmono); font-size: 1.3rem; font-weight: 400; color: var(--blue-deep); }
.query-result span { font-size: .85rem; color: var(--ink-60); }


.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; counter-reset: step; }
.step { padding: 1.5rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.step::before { counter-increment: step; content: counter(step); width: 1.9rem; height: 2.1rem; display: grid; place-items: center; background: var(--blue); color: #fff; font-family: var(--jbmono); font-size: .75rem; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.step h3 { font-size: 1.08rem; margin: .5rem 0 .4rem; }
.step p { font-size: .88rem; color: var(--ink-60); }
.step .meta { display: block; font-family: var(--jbmono); font-size: .65rem; color: var(--ink-40); margin-top: .8rem; padding-top: .7rem; border-top: 1px dashed var(--line); }

@media (max-width: 1080px) {
  .hero-grid, .teaser-grid { grid-template-columns: 1fr; }
  .cards-3, .steps { grid-template-columns: 1fr 1fr; }
  .stat:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) { .cards-3, .steps { grid-template-columns: 1fr; } }


/* ── drie datalagen: a real honeycomb — distinct cells, shared walls ── */
.sec-head-center { margin-left: auto; margin-right: auto; text-align: center; margin-bottom: 1.2rem; }

.layer-legend { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.1rem; }
.legend-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; max-width: 76rem; margin: 2.6rem auto 0; }
.legend-row li { font-size: .9rem; }
.layer-legend li { display: flex; gap: .8rem; align-items: baseline; font-size: .95rem; color: var(--ink-60); }
.layer-legend b { color: var(--ink); }
.layer-legend em { font-style: normal; color: var(--ink); }
.hb-green { background: var(--green); }
.hb-amber { background: var(--amber); }
.layers-foot { font-family: var(--jbmono); font-size: .7rem; color: var(--ink-40); margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px dashed var(--line); }
.foot-center { text-align: center; border-top: 0; padding-top: 0; margin-top: 2.2rem; }

/* stage geometry: fixed 640×600 canvas, scaled per breakpoint */
.stage-wrap { display: flex; justify-content: center; }
.stage { position: relative; width: 640px; height: 600px; flex: none; }

.stage-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage-svg .ghost { fill: none; stroke: var(--ink-40); stroke-width: 1.2; stroke-dasharray: 5 8; opacity: .22; }
.stage-svg .cell { stroke-width: 2; transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.9); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); }
.stage-svg .cell-v { fill: var(--green-tint); stroke: var(--green); transition-delay: .25s; }
.stage-svg .cell-g { fill: #f7ecd9; stroke: var(--amber); transition-delay: .4s; }
.stage-svg .cell-c { fill: #fff; stroke: var(--blue); stroke-width: 2.5; transition-delay: .1s;
  filter: drop-shadow(0 10px 22px rgba(21,101,232,.18)); animation: corebreathe 3.4s ease-in-out infinite; }
@keyframes corebreathe {
  0%, 100% { filter: drop-shadow(0 10px 22px rgba(21,101,232,.16)); }
  50% { filter: drop-shadow(0 12px 30px rgba(21,101,232,.32)); }
}
.reveal.in .stage-svg .cell { opacity: 1; transform: none; }

.cell-text { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; text-align: center; width: 168px; pointer-events: none; opacity: 0; transition: opacity .6s ease .5s; }
.reveal.in .cell-text { opacity: 1; }
.ct-v { left: 35.2%; top: 22.5%; }
.ct-c { left: 50%; top: 50%; }
.ct-g { left: 64.8%; top: 77.5%; }
.cell-text h3 { font-size: 1.06rem; letter-spacing: -.01em; }
.cell-kicker { font-family: var(--jbmono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.ck-green { color: var(--green); }
.ck-amber { color: var(--amber); }
.cell-sub { font-family: var(--jbmono); font-size: .62rem; color: var(--ink-60); }

/* pulses: signals crossing the shared edges into the core */
.pulse-dot { stroke: #fff; stroke-width: 1.2; }
.pulse-halo { opacity: .18; }
.pulse-green .pulse-dot, .pulse-green .pulse-halo { fill: var(--green); }
.pulse-amber .pulse-dot, .pulse-amber .pulse-halo { fill: var(--amber); }
.pulse { opacity: 0; }

@media (max-width: 1280px) {
  .stage { transform: scale(.85); transform-origin: center; margin: -45px 0; }
}
@media (max-width: 1080px) {
  .legend-row { grid-template-columns: 1fr 1fr; }
  .stage { transform: scale(.7); margin: -90px 0; }
}
@media (max-width: 560px) {
  .legend-row { grid-template-columns: 1fr; }
  .stage { transform: scale(.52); margin: -144px -60px; }
  .cell-text h3 { font-size: 1.35rem; }
  .cell-sub { font-size: .8rem; }
  .cell-kicker { font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-svg .cell-c { animation: none; }
  .pulses { display: none; }
}

/* ── ring cells: sources around the core ── */
.stage-svg .cell-src { fill: var(--bg-soft); stroke: var(--ink-40); stroke-opacity: .5; }
.stage-svg .cell-web { fill: var(--blue-tint); stroke: var(--blue); stroke-opacity: .45; }
.stage-svg .cell-web { transition-delay: .3s; }
.stage-svg .cell-kvk { transition-delay: .5s; }
.stage-svg .cell-bag { transition-delay: .35s; }
.stage-svg .cell-markt { transition-delay: .45s; }
.ct-web { left: 20.3%; top: 50%; }
.ct-kvk { left: 64.8%; top: 22.5%; }
.ct-bag { left: 79.7%; top: 50%; }
.ct-markt { left: 35.2%; top: 77.5%; }
.ck-muted { color: var(--ink-40); }
.pulse-blue .pulse-dot, .pulse-blue .pulse-halo { fill: var(--blue); }
.hb-muted { background: var(--ink-40); }

/* ── blog cards ── */
.post-card { text-decoration: none; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.post-hero { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line); }
.post-hero svg { display: block; width: 100%; height: 100%; }
.post-body { display: flex; flex-direction: column; gap: .6rem; padding: 1.3rem 1.5rem 1.2rem; flex: 1; }
.post-card .article-meta { margin-bottom: 0; }
.post-card h3 { font-size: 1.18rem; }
.post-card p { font-size: .94rem; color: var(--ink-60); }
.post-more { margin-top: auto; padding-top: .6rem; font-family: var(--jbmono); font-size: .74rem; color: var(--blue); }
.blog-foot { text-align: center; margin-top: 2.4rem; }