/* Homepage: Opery Workspace. Builds on the light theme tokens in style.css. */
.theme-light {
  --brand-flow: linear-gradient(90deg, #ec4899, #f2994a 50%, #4f7cf7);
  --ws-ink: #24252b;
  --ws-soft: #f6f6f3;
  --ws-card: #ffffff;
  --ws-hair: #e3e3de;
  --ws-warn: #b4572a;
}

/* Hero: copy on top, the working demo as the centrepiece. */
.theme-light .ws-hero { padding: 84px 0 80px; }
.ws-hero-copy { display: grid; gap: 14px; max-width: 1100px; margin-bottom: 42px; }
.ws-hero-copy h1 { max-width: 1100px; margin-bottom: 0; font-size: clamp(2.9rem, 4.6vw, 4.3rem); }
.ws-hero-side .hero-lead { max-width: 720px; margin-bottom: 24px; font-size: clamp(1.04rem, 1.35vw, 1.16rem); line-height: 1.62; }

/* Demo window */
.ws-demo { position: relative; max-width: 1080px; margin-inline: auto; border: 1px solid var(--ws-hair); border-radius: 20px; background: var(--ws-card); box-shadow: 0 40px 80px -60px rgba(29, 34, 40, .45); }
.ws-demo::before { position: absolute; top: -1px; right: 24px; left: 24px; height: 3px; border-radius: 0 0 3px 3px; background: var(--brand-flow); content: ""; }
.ws-demo-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--ws-hair); }
.ws-demo-title { display: flex; align-items: center; gap: 14px; font-size: .9rem; }
.ws-dots { display: inline-flex; gap: 6px; }
.ws-dots i { width: 10px; height: 10px; border-radius: 50%; background: #dddcd6; }
.ws-role { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ws-hair); border-radius: 999px; background: var(--ws-soft); }
.ws-role-label { padding: 0 8px 0 10px; color: var(--text-3); font-size: .78rem; }
.ws-role button { min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: .82rem; font-weight: 600; cursor: pointer; transition: background .2s ease, color .2s ease; }
.ws-role button[aria-pressed="true"] { background: var(--ws-ink); color: #fff; }

.ws-demo-body { display: grid; grid-template-columns: 180px minmax(0, 1fr); }
.ws-side { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 22px 18px; border-right: 1px solid var(--ws-hair); background: var(--ws-soft); border-radius: 0 0 0 20px; }
.ws-menu { margin: 0; padding: 0; list-style: none; }
.ws-menu li { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; color: var(--text-2); font-size: .88rem; }
.ws-menu li.is-active { background: var(--ws-card); color: var(--ws-ink); font-weight: 600; box-shadow: 0 1px 0 var(--ws-hair); }
.ws-badge { min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; text-align: center; }
.ws-sources p { margin: 0 0 10px 12px; color: var(--text-3); font-size: .78rem; font-weight: 600; }
.ws-sources ul { margin: 0 0 10px; padding: 0; list-style: none; }
.ws-sources li { display: flex; align-items: center; gap: 10px; padding: 5px 12px; color: var(--text-2); font-size: .84rem; }
.ws-ok { width: 8px; height: 8px; border-radius: 50%; background: #3d8a62; box-shadow: 0 0 0 3px rgba(61, 138, 98, .14); }
.ws-sources small { display: block; padding: 0 12px; color: var(--text-3); font-size: .74rem; }

.ws-main { display: grid; gap: 16px; padding: 22px 24px 24px; }
.ws-greet { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ws-greet p { margin: 0; color: var(--ws-ink); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }
.ws-greet span { color: var(--text-3); font-size: .84rem; }

.ws-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ws-kpis > div { display: grid; gap: 4px; padding: 13px; border: 1px solid var(--ws-hair); border-radius: 14px; }
.ws-kpis span { color: var(--text-3); font-size: .78rem; }
.ws-kpis strong { color: var(--ws-ink); font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.ws-kpis em { color: var(--text-2); font-size: .76rem; font-style: normal; }
.ws-kpis em.ws-warn { color: var(--ws-warn); }

.ws-attention h3 { margin: 0 0 10px; font-size: .95rem; letter-spacing: -.01em; }
.ws-attention ul { margin: 0; padding: 0; border-top: 1px solid var(--ws-hair); list-style: none; }
.ws-attention li { display: flex; align-items: baseline; gap: 12px; padding: 11px 2px; border-bottom: 1px solid var(--ws-hair); color: var(--text); font-size: .9rem; line-height: 1.5; }
.ws-tag { flex: 0 0 auto; min-width: 82px; color: var(--text-3); font-size: .76rem; font-weight: 600; }
.ws-tag-ai { background: var(--brand-flow); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ws-ask { padding: 18px; border-radius: 14px; background: var(--ws-soft); }
.ws-ask-label { margin: 0 0 12px; color: var(--ws-ink); font-size: .88rem; font-weight: 600; }
.ws-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ws-chips button { min-height: 38px; padding: 0 14px; border: 1px solid var(--field-line, #d6d7d2); border-radius: 999px; background: var(--ws-card); color: var(--ws-ink); font-size: .84rem; font-weight: 500; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.ws-chips button:hover { border-color: var(--accent); }
.ws-chips button[aria-pressed="true"] { border-color: var(--ws-ink); background: var(--ws-ink); color: #fff; }
.ws-answer { min-height: 76px; padding: 14px 16px; border: 1px solid var(--ws-hair); border-radius: 12px; background: var(--ws-card); }
.ws-answer p { margin: 0; font-size: .9rem; line-height: 1.6; }
.ws-answer-q { margin-bottom: 6px !important; color: var(--text-3); font-size: .8rem !important; }
.ws-answer-a { color: var(--text); }
.ws-answer-a.is-typing::after { display: inline-block; width: 7px; height: 1em; margin-left: 2px; background: var(--accent); vertical-align: -2px; content: ""; animation: ws-caret 1s steps(1) infinite; }
@keyframes ws-caret { 50% { opacity: 0; } }

.ws-demo-note { margin: 0; padding: 14px 22px; border-top: 1px solid var(--ws-hair); color: var(--text-3); font-size: .8rem; }
.ws-demo-more { min-width: 0; }
.ws-demo-more summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0 0; border-top: 1px solid var(--ws-hair); color: var(--ws-ink); font-size: .9rem; font-weight: 600; cursor: pointer; list-style: none; }
.ws-demo-more summary::-webkit-details-marker { display: none; }
.ws-demo-more summary span { color: var(--accent); transition: transform .2s ease; }
.ws-demo-more[open] summary span { transform: rotate(180deg); }
.ws-demo-more summary:hover { color: var(--accent); }
.ws-demo-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.ws-kpis-extra { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 18px; }
.ws-demo-more[open] .ws-attention { margin-top: 18px; }
.ws-demo-more .ws-ask { margin-top: 18px; }

/* Role switching: hide what the other role does not see. */
.ws-demo[data-role="directie"] [data-only="medewerker"],
.ws-demo[data-role="medewerker"] [data-only="directie"] { display: none; }

/* What you get */
.theme-light .ws-parts { padding: 78px 0 86px; border-top: 1px solid var(--ws-hair); background: var(--ws-card); }
.ws-parts-heading { max-width: 790px; margin-bottom: 28px; }
.ws-parts-heading .kicker { margin-bottom: 16px; }
.ws-parts-heading h2 { margin-bottom: 0; }
.ws-part-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ws-hair); }
.ws-part-list > div { min-width: 0; padding: 24px 20px 0; border-right: 1px solid var(--ws-hair); }
.ws-part-list > div:first-child { padding-left: 0; }
.ws-part-list > div:last-child { padding-right: 0; border-right: 0; }
.ws-part-list dt { margin-bottom: 10px; color: var(--ws-ink); font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; }
.ws-part-list dd { margin: 0; color: var(--text-2); font-size: .94rem; line-height: 1.58; }

/* A working day */
.theme-light .ws-day { border-top: 1px solid var(--ws-hair); background: var(--ws-soft); }
.ws-timeline { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: stretch; }
.ws-times { position: relative; margin: 0; padding: 0; list-style: none; }
.ws-times::before { position: absolute; top: 22px; bottom: 22px; left: 33px; width: 1px; background: var(--ws-hair); content: ""; }
.ws-times button { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font-size: .92rem; text-align: left; cursor: pointer; transition: background .2s ease, color .2s ease; }
.ws-times time { position: relative; z-index: 1; padding: 3px 0; border-radius: 6px; background: var(--ws-soft); color: var(--text-3); font-size: .8rem; font-variant-numeric: tabular-nums; font-weight: 600; text-align: center; }
.ws-times button:hover { color: var(--ws-ink); }
.ws-times button[aria-selected="true"] { background: var(--ws-card); color: var(--ws-ink); font-weight: 600; box-shadow: 0 1px 0 var(--ws-hair); }
.ws-times button[aria-selected="true"] time { background: var(--ws-ink); color: #fff; }
.ws-day-panels { position: relative; overflow: hidden; padding: 40px; border: 1px solid var(--ws-hair); border-radius: 20px; background: var(--ws-card); }
.ws-day-panels::after { position: absolute; bottom: 0; left: 0; height: 3px; width: var(--ws-progress, 0%); background: var(--brand-flow); content: ""; transition: width .2s linear; }
.ws-day-panels article { display: flex; flex-direction: column; min-height: 260px; }
.ws-day-panels article[hidden] { display: none; }
.ws-day-panels h3 { max-width: 520px; margin-bottom: 14px; font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.2; letter-spacing: -.03em; }
.ws-day-panels p { max-width: 560px; }
.ws-mini { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 28px; }
.ws-mini span { padding: 8px 12px; border: 1px solid var(--ws-hair); border-radius: 999px; color: var(--text-2); font-size: .82rem; }
.ws-day-panels article.is-entering { animation: ws-in .35s ease both; }
@keyframes ws-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Data sources */
.theme-light .ws-sources-section { border-top: 1px solid var(--ws-hair); background: var(--ws-card); }
.ws-flow { --flow-gap: 20px; display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, .8fr); gap: var(--flow-gap); align-items: center; }
.ws-flow ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ws-flow-in, .ws-flow-out { position: relative; }
.ws-flow-in::after, .ws-flow-out::before { position: absolute; top: 50%; width: var(--flow-gap); height: 1px; background: rgba(157, 61, 109, .28); content: ""; }
.ws-flow-in::after { right: calc(-1 * var(--flow-gap)); }
.ws-flow-out::before { left: calc(-1 * var(--flow-gap)); }
.ws-flow-in::before, .ws-flow-out::after { position: absolute; z-index: 1; top: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: var(--accent); content: ""; opacity: 0; }
.ws-flow-in::before { right: -6px; }
.ws-flow-out::after { left: calc(-1 * var(--flow-gap)); }
.ws-flow.is-active .ws-flow-in::before { animation: ws-flow-dot 3.6s ease-in-out infinite; }
.ws-flow.is-active .ws-flow-out::after { animation: ws-flow-dot 3.6s ease-in-out 1.5s infinite; }
.ws-flow.is-active .ws-flow-core { animation: ws-flow-core 3.6s ease-in-out infinite; }
@keyframes ws-flow-dot { 0%, 12% { transform: translateX(0); opacity: 0; } 22% { opacity: 1; } 58% { transform: translateX(var(--flow-gap)); opacity: 1; } 68%, 100% { transform: translateX(var(--flow-gap)); opacity: 0; } }
@keyframes ws-flow-core { 0%, 35%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
.ws-flow li { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--ws-hair); border-radius: 14px; background: var(--ws-card); }
.ws-flow li strong { color: var(--ws-ink); font-size: .95rem; }
.ws-flow li span { color: var(--text-3); font-size: .82rem; }
.ws-flow-core { display: grid; place-items: center; gap: 6px; align-self: center; min-height: 150px; padding: 18px 14px; border: 2px solid transparent; border-radius: 18px; background: linear-gradient(var(--ws-ink), var(--ws-ink)) padding-box, var(--brand-flow) border-box; }
.ws-flow-core img { width: 96px; height: auto; filter: brightness(0) invert(1); }
.ws-flow-core span { color: #c9c7cf; font-size: .8rem; }
.ws-flow-note { grid-column: 1 / -1; margin: 2px 0 0; color: var(--text-3); font-size: .86rem; }

@media (max-width: 1024px) {
  .ws-hero-copy { max-width: 760px; }
  .ws-demo-body { grid-template-columns: 1fr; }
  .ws-side { display: none; }
  .ws-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-flow { --flow-gap: 12px; grid-template-columns: minmax(0, 1fr) 120px minmax(0, .8fr); }
  .ws-flow-core img { width: 80px; }
  .ws-timeline { grid-template-columns: 1fr; }
  .ws-times { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  .ws-times::before { content: none; }
  .ws-times li { flex: 0 0 auto; }
  .ws-times button { grid-template-columns: auto; gap: 4px; padding: 10px 14px; }
  .ws-times button span { white-space: nowrap; }
}
@media (max-width: 760px) {
  .theme-light .ws-hero { padding: 60px 0 56px; }
  .ws-hero-copy { gap: 14px; margin-bottom: 28px; }
  .ws-hero-copy h1 { font-size: clamp(2.65rem, 10vw, 3.5rem); }
  .ws-hero-side .hero-lead { margin-bottom: 20px; }
  .ws-demo-bar { flex-wrap: wrap; padding: 14px 16px; }
  .ws-role-label { display: none; }
  .ws-demo-body { grid-template-columns: 1fr; }
  .ws-side { display: none; }
  .ws-main { padding: 20px 16px; }
  .ws-greet p { font-size: 1.15rem; }
  .ws-kpis { gap: 8px; }
  .ws-kpis > div { padding: 12px; }
  .ws-kpis strong { font-size: 1.15rem; }
  .ws-demo-more summary { font-size: .86rem; }
  .ws-attention li { flex-direction: column; gap: 2px; }
  .ws-demo-note { padding: 12px 16px; }
  .theme-light .ws-parts { padding: 64px 0 70px; }
  .ws-parts-heading { margin-bottom: 26px; }
  .ws-part-list { grid-template-columns: 1fr; }
  .ws-part-list > div { padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--ws-hair); }
  .ws-part-list > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .ws-part-list dt { margin-bottom: 5px; }
  .ws-day-panels { padding: 26px 22px; }
  .ws-flow { --flow-gap: 14px; grid-template-columns: 1fr; }
  .ws-flow-in::after, .ws-flow-out::before { top: auto; left: 50%; width: 1px; height: var(--flow-gap); }
  .ws-flow-in::after { right: auto; bottom: calc(-1 * var(--flow-gap)); }
  .ws-flow-out::before { top: calc(-1 * var(--flow-gap)); }
  .ws-flow-in::before, .ws-flow-out::after { left: calc(50% - 3px); right: auto; }
  .ws-flow-in::before { top: auto; bottom: -6px; }
  .ws-flow-out::after { top: calc(-1 * var(--flow-gap)); }
  .ws-flow.is-active .ws-flow-in::before, .ws-flow.is-active .ws-flow-out::after { animation-name: ws-flow-dot-mobile; }
  @keyframes ws-flow-dot-mobile { 0%, 12% { transform: translateY(0); opacity: 0; } 22% { opacity: 1; } 58% { transform: translateY(var(--flow-gap)); opacity: 1; } 68%, 100% { transform: translateY(var(--flow-gap)); opacity: 0; } }
  .ws-flow-core { padding: 16px; }
}
@media (max-width: 400px) {
  .ws-kpis > div { padding: 10px; }
  .ws-kpis strong { font-size: 1.05rem; }
  .homepage.theme-light .site-header .nav { gap: 6px; padding-left: 10px; padding-right: 6px; }
  .homepage.theme-light .site-header .logo { width: 92px; }
  .homepage.theme-light .site-header .lang-switch { min-width: 32px; min-height: 32px; padding-inline: 5px; font-size: .65rem; }
  .homepage.theme-light .site-header .nav-cta { min-height: 34px; padding-inline: 9px; gap: 4px; font-size: .72rem; }
  .homepage.theme-light .site-header .nav-toggle { flex: 0 0 34px; width: 34px; padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ws-day-panels article.is-entering { animation: none; }
  .ws-answer-a.is-typing::after { animation: none; }
  .ws-day-panels::after { transition: none; }
  .ws-flow.is-active .ws-flow-in::before, .ws-flow.is-active .ws-flow-out::after, .ws-flow.is-active .ws-flow-core { animation: none; }
}

/* ------------------------------------------------------------------
   Liquid glass: translucent, blurred surfaces over soft brand light.
   ------------------------------------------------------------------ */
.theme-light {
  --glass-fill: rgba(255, 255, 255, .52);
  --glass-fill-strong: rgba(255, 255, 255, .7);
  --glass-edge: rgba(255, 255, 255, .78);
  --glass-line: rgba(36, 37, 43, .08);
  --glass-blur: blur(28px) saturate(180%);
  --glass-shine: linear-gradient(160deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, .3));
  --glass-shadow: inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(29, 34, 40, .05), 0 24px 60px -32px rgba(29, 34, 40, .32);
}

/* Soft light from the logo colours, spread down the page, so the glass has something to refract. */
body.homepage.theme-light {
  background-color: #f4f4f1;
  background-image:
    radial-gradient(520px 420px at 8% 4%, rgba(236, 72, 153, .16), transparent 70%),
    radial-gradient(560px 460px at 94% 9%, rgba(79, 124, 247, .15), transparent 70%),
    radial-gradient(520px 420px at 60% 21%, rgba(242, 153, 74, .13), transparent 70%),
    radial-gradient(600px 480px at 4% 38%, rgba(79, 124, 247, .12), transparent 70%),
    radial-gradient(560px 460px at 96% 50%, rgba(236, 72, 153, .12), transparent 70%),
    radial-gradient(560px 460px at 12% 66%, rgba(242, 153, 74, .12), transparent 70%),
    radial-gradient(620px 520px at 92% 88%, rgba(79, 124, 247, .12), transparent 70%);
  background-repeat: no-repeat;
}
.homepage.theme-light .hero,
.homepage.theme-light .ws-parts,
.homepage.theme-light .ws-day,
.homepage.theme-light .ws-sources-section,
.homepage.theme-light .cases-section,
.homepage.theme-light .contact-section,
.homepage.theme-light .site-footer { border-color: transparent; background: transparent; }

/* Shared glass recipe */
.homepage.theme-light .ws-demo,
.homepage.theme-light .ws-day-panels,
.homepage.theme-light .ws-flow li,
.homepage.theme-light .case-list-compact .case,
.homepage.theme-light .contact-form,
.homepage.theme-light .contact-form:hover,
.homepage.theme-light .contact-person {
  border: 1px solid var(--glass-line);
  background: var(--glass-shine), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.homepage.theme-light .case-list-compact .case { border-radius: 24px; }
.homepage.theme-light .case-list-compact .case:hover { border-color: rgba(157, 61, 109, .22); }
.homepage.theme-light .contact-form,
.homepage.theme-light .contact-person { border-radius: 24px; }
.homepage.theme-light .field input,
.homepage.theme-light .field textarea { border-color: rgba(36, 37, 43, .12); background: rgba(255, 255, 255, .72); }

/* Floating glass navigation */
.homepage.theme-light .site-header { top: 12px; border: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.homepage.theme-light .site-header .nav {
  min-height: 64px;
  margin-top: 12px;
  padding: 0 10px 0 24px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-shine), var(--glass-fill-strong);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.homepage.theme-light .lang-switch { border-color: rgba(36, 37, 43, .12); background: rgba(255, 255, 255, .5); }
.homepage { scroll-padding-top: 100px; }
html:has(body.homepage) { scroll-padding-top: 100px; }

/* Secondary call to action as a glass pill */
.homepage.theme-light .ws-hero .text-link {
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid var(--glass-line);
  border-radius: 999px;
  background: var(--glass-shine), var(--glass-fill);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.homepage.theme-light .ws-hero .text-link:hover { border-color: rgba(157, 61, 109, .3); }

/* Demo window: glass shell, lighter glass inside */
.homepage.theme-light .ws-demo { border-radius: 28px; }
.homepage.theme-light .ws-demo::before { right: 32px; left: 32px; }
.homepage.theme-light .ws-demo-bar,
.homepage.theme-light .ws-demo-note { border-color: var(--glass-line); }
.homepage.theme-light .ws-side { border-color: var(--glass-line); border-radius: 0 0 0 28px; background: rgba(255, 255, 255, .22); }
.homepage.theme-light .ws-menu li.is-active { background: rgba(255, 255, 255, .78); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(29, 34, 40, .35); }
.homepage.theme-light .ws-kpis > div { border-color: rgba(255, 255, 255, .7); border-radius: 18px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 #fff; }
.homepage.theme-light .ws-attention ul,
.homepage.theme-light .ws-attention li { border-color: var(--glass-line); }
.homepage.theme-light .ws-ask { border: 1px solid rgba(255, 255, 255, .7); border-radius: 20px; background: rgba(255, 255, 255, .34); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.homepage.theme-light .ws-answer { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .72); }
.homepage.theme-light .ws-chips button { border-color: rgba(36, 37, 43, .1); background: rgba(255, 255, 255, .62); box-shadow: inset 0 1px 0 #fff; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.homepage.theme-light .ws-chips button[aria-pressed="true"] { border-color: var(--ws-ink); background: var(--ws-ink); box-shadow: none; }
.homepage.theme-light .ws-role { border-color: rgba(36, 37, 43, .1); background: rgba(255, 255, 255, .45); box-shadow: inset 0 1px 0 #fff; }
.homepage.theme-light .ws-role button[aria-pressed="true"] { background: rgba(255, 255, 255, .95); color: var(--ws-ink); box-shadow: 0 1px 1px rgba(29, 34, 40, .06), 0 6px 16px -8px rgba(29, 34, 40, .35); }
.homepage.theme-light .ws-dots i { background: rgba(36, 37, 43, .14); }

/* Keep the value statements lighter than the interactive demo. */
.homepage.theme-light .ws-part-list { border-color: var(--glass-line); }
.homepage.theme-light .ws-part-list > div { border-color: var(--glass-line); }

/* Timeline */
.homepage.theme-light .ws-day-panels { border-radius: 28px; }
.homepage.theme-light .ws-times button[aria-selected="true"] {
  background: var(--glass-shine), var(--glass-fill-strong);
  box-shadow: var(--glass-shadow);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}
.homepage.theme-light .ws-times time { background: transparent; }
.homepage.theme-light .ws-times::before { background: rgba(36, 37, 43, .1); }
.homepage.theme-light .ws-mini span { border-color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .5); box-shadow: inset 0 1px 0 #fff; }

/* Data flow */
.homepage.theme-light .ws-flow li { border-radius: 18px; }
.homepage.theme-light .ws-flow-core { border-radius: 26px; box-shadow: 0 24px 50px -24px rgba(36, 37, 43, .55); }

/* Dark band: smoked glass */
.homepage.theme-light .assurance-section { background: #23262d radial-gradient(700px 360px at 85% 0%, rgba(236, 72, 153, .18), transparent 70%), radial-gradient(640px 360px at 5% 100%, rgba(79, 124, 247, .18), transparent 70%); }
.homepage.theme-light .approach-grid article,
.homepage.theme-light .approach-grid article + article,
.homepage.theme-light .approach-grid article:nth-child(3) {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03) 45%, rgba(255, 255, 255, .07));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 24px 60px -36px rgba(0, 0, 0, .6);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}

@media (max-width: 760px) {
  .homepage.theme-light .site-header { top: 8px; }
  .homepage.theme-light .site-header .nav { min-height: 56px; margin-top: 8px; padding: 0 6px 0 18px; }
  .homepage.theme-light .nav-links {
    inset: calc(100% + 8px) 0 auto;
    padding: 8px 20px 16px;
    border: 1px solid var(--glass-line);
    border-radius: 24px;
    background: var(--glass-shine), rgba(255, 255, 255, .86);
    box-shadow: var(--glass-shadow);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
  }
  .homepage.theme-light .nav-links a:last-child { border-bottom: 0; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .theme-light { --glass-fill: rgba(255, 255, 255, .9); --glass-fill-strong: rgba(255, 255, 255, .96); }
}

/* Single anonymous practice case. */
.theme-light .case-list-single { grid-template-columns: minmax(0, 820px); }
.case-context { max-width: 820px; margin: 18px 0 0; color: var(--text-3); font-size: .84rem; line-height: 1.6; }

/* Data-flow diagram: drawn connectors instead of the single dot and pulsing core. */
.ws-flow { position: relative; }
.ws-flow.has-lines { --flow-gap: 52px; }
.ws-flow-lines { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ws-flow > ul, .ws-flow > .ws-flow-core { position: relative; z-index: 1; }
.ws-flow.has-lines .ws-flow-in::before, .ws-flow.has-lines .ws-flow-in::after,
.ws-flow.has-lines .ws-flow-out::before, .ws-flow.has-lines .ws-flow-out::after { content: none; }
.ws-flow.is-active .ws-flow-core { animation: none; }
.ws-flow-line { fill: none; stroke: rgba(36, 37, 43, .2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ws-flow-pulse { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 16 130; stroke-dashoffset: 16; opacity: 0; vector-effect: non-scaling-stroke; }
.ws-flow.is-active .ws-flow-pulse { animation: ws-flow-travel 3.4s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes ws-flow-travel {
  0% { stroke-dashoffset: 16; opacity: 0; }
  8% { opacity: 1; }
  52% { opacity: 1; }
  60%, 100% { stroke-dashoffset: -100; opacity: 0; }
}
@media (max-width: 1024px) { .ws-flow.has-lines { --flow-gap: 36px; } }
@media (max-width: 760px) {
  .ws-flow.has-lines { --flow-gap: 14px; }
  .ws-flow-lines { display: none; }
  .ws-flow.has-lines .ws-flow-in::after, .ws-flow.has-lines .ws-flow-out::before { content: ""; }
  .ws-flow.has-lines .ws-flow-in::after, .ws-flow.has-lines .ws-flow-out::before { background: rgba(36, 37, 43, .18); }
}

/* Hover: value statements draw an accent line along their top edge; approach cards lift slightly. */
.homepage.theme-light .ws-part-list > div { position: relative; }
.homepage.theme-light .ws-part-list > div::before { position: absolute; top: -1px; right: 20px; left: 20px; height: 2px; border-radius: 2px; background: var(--accent); content: ""; transform: scaleX(0); transform-origin: left center; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
.homepage.theme-light .ws-part-list > div:first-child::before { left: 0; }
.homepage.theme-light .ws-part-list > div:last-child::before { right: 0; }
.homepage.theme-light .ws-part-list dd { transition: color .25s ease; }
.homepage.theme-light .approach-grid article { transition: transform .35s cubic-bezier(.22, .61, .36, 1), border-color .35s ease, background-color .35s ease, box-shadow .35s ease; }
.homepage.theme-light .approach-grid span { transition: color .35s ease, letter-spacing .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .homepage.theme-light .ws-part-list > div:hover::before { transform: scaleX(1); }
  .homepage.theme-light .ws-part-list > div:hover dd { color: var(--ws-ink); }
  .homepage.theme-light .approach-grid article:hover { border-color: rgba(255, 255, 255, .3); background-color: rgba(255, 255, 255, .04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 34px 70px -34px rgba(0, 0, 0, .75); transform: translateY(-4px); }
  .homepage.theme-light .approach-grid article:hover span { color: #f0a3c6; }
}
@media (max-width: 760px) {
  .homepage.theme-light .ws-part-list > div::before { right: 0; left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .homepage.theme-light .ws-part-list > div::before { transition: none; }
  .homepage.theme-light .approach-grid article { transition: border-color .2s ease, box-shadow .2s ease; }
  .homepage.theme-light .approach-grid article:hover { transform: none; }
}

/* Link from the value statements to the "Is dit voor jou?" page. */
.ws-parts-more { margin: 40px 0 0; }