/* Uitgelijnde verbindingen. Elke lijn heeft een eigen route en aansluitpunt. */
.system-flow { border: 1px solid #3b463e; background: #1b221e; }
.system-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px; border-bottom: 1px solid #343e36; color: #b5c3b7; font-size: 0.73rem; }
.system-flow-head > span:first-child { display: flex; align-items: center; gap: 9px; color: var(--on-dark); }
.system-flow-head i { width: 5px; height: 5px; background: var(--yellow); }
.system-flow-map { position: relative; aspect-ratio: 600 / 330; margin: 32px 24px; }
.system-flow-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.system-flow-mobile { display: none; }
.system-flow-route { stroke: #54644f; stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.system-flow-packet { stroke: var(--yellow); stroke-width: 2.5; stroke-dasharray: 4 96; stroke-dashoffset: 60; vector-effect: non-scaling-stroke; }
.flow-system { position: absolute; display: grid; place-items: center; width: 26%; min-height: clamp(44px, 4.7vw, 64px); padding: 11px 10px; background: #28322a; border: 1px solid #4a594b; color: #e0e8da; text-align: center; font-size: clamp(0.65rem, 0.95vw, 0.87rem); line-height: 1.35; transform: translateY(-50%); }
.flow-source { left: 0; }
.flow-target { right: 0; border-color: #556446; background: #252e23; }
.flow-top { top: 17.5758%; }
.flow-middle { top: 50%; }
.flow-bottom { top: 82.4242%; }
.flow-core { position: absolute; left: 39%; top: 33%; width: 22%; height: 34%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: #283523; border: 1px solid #80976b; color: #e4eadf; padding: 5px; }
.flow-core > svg { width: clamp(20px, 2.8vw, 40px); height: clamp(20px, 2.8vw, 40px); color: var(--yellow); }
.flow-core > span { font-size: clamp(8px, 0.92vw, 13px); line-height: 1.2; }
.flow-result { position: absolute; right: 0; top: 28%; width: 28%; height: 44%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--yellow); color: var(--ink); padding: 7px; }
.flow-result strong { display: inline-flex; align-items: baseline; font: 700 clamp(15px, 1.9vw, 29px)/1 var(--display); letter-spacing: -0.06em; }
.flow-result i { width: 0.2em; height: 0.2em; background: currentColor; margin-left: 0.08em; }
.flow-result > span { text-align: center; font-size: clamp(8px, 0.8vw, 12px); line-height: 1.4; }
.hero-first { display: block; }
.hero-rotator { display: block; height: 1.14em; line-height: 1.12; overflow: hidden; color: var(--yellow); white-space: nowrap; }
.hero-rotator-track { display: block; }
.hero-rotator-track > span { display: block; height: 1.12em; line-height: 1.12; }

/* Zes zelfstandige interfaceontwerpen. Alle inhoud past binnen het venster. */
.portal-preview { container: portal / inline-size; color: #24372d; width: 100%; text-align: left; }
.portal-window { --ui-line: #dfe5dd; border: 1px solid #c0cbbf; background: #fff; box-shadow: 0 20px 50px -30px #1a352844; font: 400 12px/1.4 var(--text); }
.portal-window h4, .portal-window p, .portal-window dl, .portal-window dd { margin: 0; }
.portal-window h4 { font: 500 clamp(16px, 3.5cqi, 26px)/1.15 var(--text); letter-spacing: -0.035em; color: #203629; }
.portal-window strong, .portal-window b { font-weight: 500; }
.portal-window svg { width: 18px; height: 18px; flex: none; }
.portal-chrome { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--ui-line); background: #f8faf6; color: #596956; font-size: 10px; }
.portal-window-dots { display: flex; gap: 4px; }
.portal-window-dots i { width: 5px; height: 5px; border-radius: 50%; background: #b5bfb1; }
.portal-chrome > span:nth-child(3) { font-size: 10px; border: 1px solid #c7d1bf; padding: 2px 6px; color: #56694b; }
.portal-layout { display: grid; grid-template-columns: 52px minmax(0, 1fr); }
.portal-rail { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 5px; background: #edf2e9; border-right: 1px solid var(--ui-line); }
.portal-rail > span:not(:first-child) { display: grid; place-items: center; width: 34px; height: 32px; color: #75816f; }
.portal-rail > span.is-current { background: #cedcb8; color: #273c24; border-radius: 5px; }
.portal-rail .portal-rail-mark { font: 700 20px/1 var(--display); letter-spacing: -0.1em; margin-bottom: 16px; color: #20392a; }
.portal-rail-mark > span { color: #718748; }
.portal-rail-user { display: grid; place-items: center; margin-top: auto; width: 26px; height: 26px; background: #d0dbca; border-radius: 50%; font-style: normal; font-size: 10px; }
.portal-content { display: flex; flex-direction: column; min-width: 0; min-height: 438px; padding: clamp(16px, 3.8cqi, 34px); }
.ui-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 62px; margin-bottom: 18px; }
.ui-title > div > span { display: block; font-size: 10px; letter-spacing: 0.07em; color: #718066; margin-bottom: 8px; }
.ui-date { flex: none; font-size: 10px; padding-top: 20px; color: #64745c; }
.ui-badge { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 10px; white-space: nowrap; background: #ebeee7; color: #5a6555; padding: 5px 8px; border-radius: 4px; line-height: 1.2; }
.ui-badge.sage { background: #e2edda; color: #456335; }
.ui-badge.amber { background: #f8edca; color: #765a1e; }
.ui-metrics { display: flex; gap: 28px; padding-block: 0 20px; border-bottom: 1px solid var(--ui-line); margin-bottom: 20px; }
.ui-metrics > div { display: flex; align-items: baseline; gap: 7px; }
.ui-metrics strong { font-size: 24px; line-height: 1; letter-spacing: -0.04em; }
.ui-metrics span { font-size: 10px; color: #65755e; }
.ui-calendar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ui-day { min-width: 0; }
.ui-day > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--ui-line); font-size: 10px; color: #687561; }
.ui-day > header b { color: #314730; font-size: 13px; }
.ui-event { padding: 11px 10px; min-height: 95px; margin-bottom: 8px; background: #f0f3ed; border-left: 2px solid #c0cfb2; display: flex; flex-direction: column; gap: 7px; }
.ui-event small { font-size: 10px; color: #63745a; }
.ui-event strong { font-size: 11px; line-height: 1.35; overflow-wrap: anywhere; }
.ui-event > span { color: #67765d; font-size: 10px; margin-top: auto; }
.ui-event.sage { background: #e4ecd9; border-color: #829e59; }
.ui-event.free { border: 1px dashed #b8c8a9; background: #fafcf7; }
.ui-event.free strong { color: #5c7345; }
.ui-bottom-note { display: flex; align-items: center; gap: 7px; padding-top: 20px; margin-top: auto; font-size: 10px; color: #68785f; }
.ui-bottom-note svg { width: 14px; height: 14px; }
.portal-status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--ui-line); background: #f8faf6; color: #718067; font-size: 10px; }
.portal-status > span:first-child { display: flex; align-items: center; gap: 6px; }
.portal-status i { width: 5px; height: 5px; border-radius: 50%; background: #809959; }
.ui-order-list { border-top: 1px solid var(--ui-line); }
.ui-order { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 25px; gap: 8px; align-items: center; padding-block: 15px; border-bottom: 1px solid var(--ui-line); }
.ui-order-nr { font-size: 10px; color: #7e8878; }
.ui-order strong, .ui-invoice strong { display: block; font-size: 11px; line-height: 1.3; }
.ui-order small, .ui-invoice small { display: block; font-size: 10px; color: #75816c; margin-top: 4px; }
.ui-avatar { display: inline-grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #e6ecdf; font-size: 10px; color: #60734f; font-style: normal; }
.ui-project-progress { margin-bottom: 24px; }
.ui-project-progress > span { display: flex; justify-content: space-between; font-size: 10px; color: #63745a; margin-bottom: 10px; }
.ui-project-progress > i, .ui-project-progress > i > i { display: block; height: 5px; border-radius: 3px; background: #eaf0e4; }
.ui-project-progress > i > i { width: 33.33%; background: #8ca65f; }
.ui-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.ui-board-col { min-width: 0; padding: 9px; background: #f4f7ef; border-radius: 5px; }
.ui-col-title { display: flex; align-items: center; gap: 5px; padding: 5px 0 14px; font-size: 10px; color: #63745a; }
.ui-col-title > span { margin-left: auto; font-size: 10px; }
.ui-col-title > i { width: 5px; height: 5px; background: #b7c2a9; border-radius: 50%; }
.ui-col-title .dot-1 { background: #cda858; }
.ui-col-title .dot-2 { background: #7b9a56; }
.ui-task { padding: 12px 9px; margin-bottom: 8px; background: #fff; border: 1px solid #e0e7d9; border-radius: 4px; }
.ui-task strong { display: block; font-size: 11px; min-height: 34px; }
.ui-task > span { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 12px; }
.ui-task small { font-size: 10px; color: #77836d; }
.ui-task .ui-avatar { width: 20px; height: 20px; font-size: 8px; }
.ui-finance-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
.ui-section-label { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 500; color: #627554; margin-bottom: 15px; }
.ui-section-label > span { margin-left: auto; background: #e9eee3; padding: 1px 6px; font-size: 10px; border-radius: 3px; }
.ui-invoice { display: flex; align-items: center; gap: 9px; padding: 18px 10px; border: 1px solid var(--ui-line); margin-bottom: 8px; border-radius: 4px; }
.ui-invoice > svg { width: 18px; color: #7d9167; }
.ui-invoice > div { min-width: 0; }
.ui-invoice > b { font-size: 10px; margin-left: auto; flex: none; }
.ui-invoice.is-selected { background: #f1f5e9; border-color: #a0b17b; }
.ui-invoice-detail { padding: 16px; border: 1px solid var(--ui-line); border-radius: 5px; }
.portal-window dl { display: grid; gap: 15px; }
.portal-window dt { font-size: 10px; color: #7b8772; margin-bottom: 4px; }
.portal-window dd { font-size: 12px; color: #344c2f; }
.ui-approval { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #648242; margin-block: 18px; }
.ui-approval svg { width: 13px; height: 13px; }
.ui-review-note { display: block; border-top: 1px solid #c9d8b8; margin-top: 18px; padding: 11px 10px; background: #edf3e5; color: #354b25; border-radius: 4px; font-size: 10px; font-weight: 500; }
.ui-review-note > span { font-size: 14px; }
.ui-integration { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(85px, 1fr) 28px minmax(0, 1fr); align-items: center; gap: 0; padding-block: 20px 32px; }
.ui-system-pair { display: grid; gap: 10px; }
.ui-system-pair > span { display: flex; align-items: center; gap: 7px; padding: 12px 8px; border: 1px solid var(--ui-line); font-size: 10px; border-radius: 4px; }
.ui-system-pair svg { color: #849b6b; width: 16px; }
.ui-integration-core { display: grid; justify-items: center; gap: 9px; padding: 17px 8px; background: #edf3e3; border: 1px solid #b8ca9a; border-radius: 5px; text-align: center; }
.ui-integration-core b { font: 700 30px/1 var(--display); letter-spacing: -0.12em; color: #375331; }
.ui-integration-core b > span { color: #8aa65b; }
.ui-integration-core > span { font-size: 10px; color: #5a7347; }
.ui-wire { height: 1px; background: #b4c69a; position: relative; }
.ui-wire::after { content: ''; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-top: 1px solid #829d5f; border-right: 1px solid #829d5f; transform: rotate(45deg); }
.ui-sync-log { padding: 17px; background: #f7f9f3; border: 1px solid var(--ui-line); border-radius: 5px; }
.ui-sync-log p { display: flex; align-items: center; gap: 6px; font-size: 10px; padding-top: 11px; }
.ui-sync-log p > span { margin-left: auto; font-size: 10px; color: #7a896d; white-space: nowrap; }
.ui-sync-log svg { width: 13px; height: 13px; color: #7c9b51; }
.ui-ai-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; }
.ui-mail, .ui-ai-proposal { padding: 16px; border: 1px solid var(--ui-line); border-radius: 5px; }
.ui-mail-from { display: flex; gap: 9px; align-items: center; margin-block: 22px; }
.ui-mail-from strong { font-size: 11px; display: block; }
.ui-mail-from small { color: #7a856e; font-size: 10px; display: block; margin-top: 3px; }
.ui-mail p { font-size: 11px; line-height: 1.75; color: #5d6c52; }
.ui-mail-attachment { display: flex; align-items: center; gap: 6px; font-size: 10px; color: #738362; margin-top: 22px; overflow-wrap: anywhere; }
.ui-mail-attachment svg { width: 14px; }
.ui-ai-proposal { background: #f4f8eb; border-color: #c4d6a8; }
.ui-ai-proposal > small { display: block; font-size: 10px; text-align: center; margin-top: 9px; color: #6c8056; }
.detail-shot { max-width: 1000px; }
.detail-shot .portal-content { min-height: 520px; padding: 40px; }
.detail-shot .ui-event { min-height: 120px; }
.detail-shot .ui-order { padding-block: 22px; }

/* Toepassingen zijn ideeën voor een volgend project, zonder verzonnen klantresultaten. */
.applications { padding-block: var(--section); }
.applications-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 80px; align-items: end; margin-bottom: 64px; }
.applications-head > p { max-width: 32em; font-size: 1.1rem; }
.application { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; border-top: 1px solid #a8b1a4; padding-block: 44px; align-items: start; }
.application:last-child { padding-bottom: 0; }
.application-copy { display: grid; gap: 20px; max-width: 36em; }
.application-label { font-size: 0.88rem; font-weight: 500; color: #3f4e38; }
.application h3 { font-size: clamp(1.7rem, 2.7vw, 2.5rem); line-height: 1.08; }
.application-copy > p:not(.application-label) { color: var(--ink-2); font-size: 1rem; }
.application-copy .link { width: fit-content; font-size: 0.95rem; }
.application-flow { display: grid; grid-template-columns: minmax(0, 1fr); padding-left: 36px; max-width: 330px; width: 100%; justify-self: end; }
.application-flow li { display: flex; align-items: center; gap: 10px; padding-block: 18px; border-bottom: 1px solid #b6beb0; font-size: 0.9rem; }

@media (prefers-reduced-motion: no-preference) {
  .system-flow-packet { animation: system-transfer 5s linear infinite; animation-delay: var(--delay); animation-play-state: paused; }
  .hero-rotator-track { animation: hero-roll 15s cubic-bezier(0.76, 0, 0.24, 1) infinite; animation-play-state: paused; }
  .hero.is-live .system-flow-packet, .hero.is-live .hero-rotator-track { animation-play-state: running; }
  .hero-rotator:hover .hero-rotator-track,
  .tab-hidden .hero .hero-rotator-track, .tab-hidden .hero .system-flow-packet { animation-play-state: paused; }
}
@keyframes system-transfer { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hero-roll {
  0%, 14% { transform: translateY(0); }
  20%, 34% { transform: translateY(-1.12em); }
  40%, 54% { transform: translateY(-2.24em); }
  60%, 74% { transform: translateY(-3.36em); }
  80%, 94% { transform: translateY(-4.48em); }
  100% { transform: translateY(-5.6em); }
}
@container portal (min-width: 800px) {
  .portal-window { font-size: 14px; }
  .ui-event strong, .ui-order strong, .ui-invoice strong, .ui-task strong, .ui-mail p { font-size: 14px; }
  .ui-event small, .ui-event > span, .ui-task small, .ui-metrics span, .ui-order small { font-size: 11px; }
}
@container portal (max-width: 520px) {
  .portal-layout { grid-template-columns: minmax(0, 1fr); }
  .portal-rail { display: none; }
  .portal-content { min-height: 420px; padding: 18px; }
  .ui-metrics { gap: 18px; }
  .ui-title h4 { max-width: 16em; }
  .ui-title > .ui-badge, .ui-title > .ui-date { display: none; }
  .ui-finance-grid, .ui-ai-grid { gap: 10px; }
  .ui-invoice { flex-wrap: wrap; gap: 6px; padding: 12px 8px; }
  .ui-invoice > b { margin-left: 24px; }
  .ui-invoice-detail, .ui-mail, .ui-ai-proposal { padding: 12px; }
  .ui-integration { grid-template-columns: minmax(0, 1fr) 14px 78px 14px minmax(0, 1fr); }
  .ui-system-pair > span { padding: 12px 5px; gap: 4px; font-size: 10px; }
  .ui-system-pair svg { width: 12px; }
  .ui-order { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .ui-order > .ui-avatar { display: none; }
  .ui-calendar, .ui-board { gap: 6px; }
  .ui-event { padding: 10px 7px; min-height: 107px; }
  .ui-day > header { font-size: 10px; }
  .ui-task { padding: 10px 7px; }
  .ui-board-col { padding: 6px; }
  .ui-task > span { flex-wrap: wrap; gap: 7px; }
}
@container portal (max-width: 400px) {
  .ui-finance-grid { grid-template-columns: minmax(0, 1fr); }
  .ui-invoice { flex-wrap: nowrap; padding: 12px; }
  .ui-invoice > b { margin-left: auto; }
  .ui-invoice-detail { padding: 16px; }
  .ui-invoice-detail dl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ui-invoice-detail dd { font-size: 11px; }
  .ui-review-note { font-size: 11px; }
  .ui-title { min-height: 54px; }
  .ui-sync-log { padding: 14px 10px; }
  .ui-sync-log p { font-size: 10px; gap: 4px; }
  .ui-sync-log p > span { font-size: 9px; }
}
@container portal (max-width: 310px) {
  .ui-task strong { overflow-wrap: anywhere; }
  .ui-integration { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
  .ui-system-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ui-system-pair > span { justify-content: center; }
  .ui-integration-core { display: flex; align-items: center; justify-content: center; padding: 12px; gap: 16px; }
  .ui-wire { width: 1px; height: 14px; margin-inline: auto; }
  .ui-wire::after { display: none; }
  .ui-wire::after { right: -2px; top: auto; bottom: 0; transform: rotate(135deg); }
}
@media (max-width: 1080px) {
  .application { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
  .application-flow { grid-column: auto; padding-left: 0; justify-self: start; max-width: 420px; }
}
@media (max-width: 600px) {
  .system-flow-head { padding: 16px; font-size: 0.67rem; }
  .system-flow-head > span:last-child { font-size: 0.6rem; }
  .system-flow-map { margin: 28px 14px; }
  .flow-system { padding: 9px 6px; font-size: 0.64rem; }
  .flow-core { gap: 7px; }
  .applications-head { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 44px; }
  .application { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-block: 32px; }
  .application-flow { grid-column: auto; gap: 0; max-width: none; }
  .application-flow li { font-size: 0.82rem; }
  .detail-shot .portal-content { min-height: 420px; padding: 18px; }
  .detail-shot .ui-event { min-height: 107px; }
}
@media print { .hero-visual { display: none; } .portal-window { box-shadow: none; } }

/* Vaste ruimte voor ieder volledig venster voorkomt verspringen tijdens scrollen. */
.preview-frame .portal-window { min-height: var(--preview-height, auto); display: flex; flex-direction: column; }
.preview-frame .portal-layout { flex: 1; }

.contact-strip { padding-block: 52px; }
.contact-strip-inner { display: flex; justify-content: space-between; align-items: center; gap: 28px 56px; padding-block: 36px; border-top: 1px solid #adb6a8; border-bottom: 1px solid #adb6a8; }
.contact-strip h2 { font-size: clamp(1.8rem, 3.1vw, 2.9rem); max-width: 20em; line-height: 1.08; }
.contact-strip p { max-width: 42em; margin-top: 18px; color: var(--ink-2); font-size: 1rem; }
.contact-strip .btn { flex: none; }
@media (max-width: 760px) { .contact-strip-inner { flex-direction: column; align-items: start; } .flow-core { gap: 7px; } .flow-result { gap: 9px; } }

@media (max-width: 600px) {
  .system-flow-map { height: 354px; aspect-ratio: auto; margin: 24px 14px; }
  .system-flow-desktop { display: none; }
  .system-flow-mobile { display: block; }
  .flow-source { top: 0; width: 31%; height: 76px; min-height: 0; transform: none; font-size: 11px; padding: 8px 5px; }
  .flow-source.flow-top { left: 0; }
  .flow-source.flow-middle { left: 34.5%; }
  .flow-source.flow-bottom { left: 69%; }
  .flow-core { left: 29%; top: 146px; width: 42%; height: 76px; gap: 8px; }
  .flow-core > svg { width: 28px; height: 28px; }
  .flow-core > span { font-size: 12px; }
  .flow-result { left: 13%; right: auto; top: 278px; width: 74%; height: 76px; flex-direction: column; gap: 4px; padding: 8px; }
  .flow-result strong { font-size: 24px; }
  .flow-result > span { font-size: 11px; line-height: 1.3; }
}