/* Bedankpagina na installatie (kamelo.eu/welcome). Bouwt voort op site.css. */
.wl-hero { max-width: 900px; margin: 0 auto; padding: 150px var(--gutter) 50px; text-align: center; }
.wl-badge { position: relative; width: 108px; height: 108px; margin: 0 auto 34px; border-radius: 14px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #359cff, #1e8eff 45%, #0e7df4); box-shadow: 0 16px 40px rgba(10, 132, 255, .22); }
.wl-check { position: absolute; right: -8px; bottom: -8px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #34c759; box-shadow: 0 0 0 4px var(--bg); }
.wl-check svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.js .wl-check { animation: wlPop .6s var(--spring) .5s backwards; }
@keyframes wlPop { from { transform: scale(0); } }
.wl-hero h1 { font-size: var(--h1); font-weight: var(--hw); letter-spacing: var(--track); line-height: 1.05; text-wrap: balance; }
.wl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 30px var(--gutter) 40px; }
.wl-card .num { display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 22px 4px 0; border-radius: 50%; font-size: 14px; font-weight: 700; color: #fff; background: var(--action); }
.wl-card h3 { margin: 12px 4px 0; font-size: clamp(20px, 2vw, 23px); letter-spacing: -.02em; }
.wl-card p { margin: 6px 4px 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.wl-viz { height: 240px; border-radius: 14px; display: grid; place-items: center; padding: 0 26px; overflow: hidden; position: relative; }
.wl-viz.v1 { background: radial-gradient(90% 80% at 20% 15%, #e3f1ff, transparent 60%), linear-gradient(140deg, #bcdcff, #93c7ff); align-content: center; gap: 10px; }
.wl-viz.v2 { background: radial-gradient(90% 80% at 80% 15%, #e2f4ff, transparent 60%), linear-gradient(140deg, #a6d3ff, #8ad9e6); grid-template-columns: repeat(3, auto); justify-content: center; gap: 14px; }
.wl-viz.v3 { background: radial-gradient(90% 80% at 20% 85%, #e6fbf4, transparent 60%), linear-gradient(140deg, #9be7e2, #b7ecc9); }
.tb { width: 100%; max-width: 300px; display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 14px; background: var(--card); box-shadow: 0 10px 30px rgba(20, 70, 140, .12); }
.tb-url { flex: 1; height: 22px; border-radius: 7px; background: var(--soft); }
.tb-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; }
.tb-ico.puzzle { box-shadow: inset 0 0 0 2px var(--action); }
.tb-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--action); stroke-width: 1.8; stroke-linejoin: round; }
.tb-menu { justify-self: end; margin-right: calc(50% - 150px); display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: var(--card); font-size: 14px; box-shadow: 0 10px 30px rgba(20, 70, 140, .12); }
.pin-ico { width: 16px; height: 16px; fill: var(--action); }
.js .wl-card.in .tb-ico.pin { animation: wlPin .5s var(--spring) 1s backwards; }
@keyframes wlPin { from { transform: scale(0); opacity: 0; } }
.wl-app { display: grid; justify-items: center; gap: 10px; color: #10233d; font-size: 14px; font-weight: 600; }
.wl-app:hover { text-decoration: none; }
.wl-app img { box-sizing: content-box; padding: 18px; border-radius: 12px; background: var(--card); box-shadow: 0 10px 30px rgba(20, 70, 140, .12); transition: transform .4s var(--spring); }
.wl-app:hover img { transform: translateY(-3px) scale(1.05); }
.pop { width: 100%; max-width: 270px; padding: 8px 14px; border-radius: 12px; background: var(--card); box-shadow: 0 10px 30px rgba(20, 80, 90, .12); font-size: 14px; }
.pop-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pop-row:last-child { border-bottom: 0; }
.pop-row.status { justify-content: flex-start; gap: 8px; font-weight: 600; color: var(--action); }
.pop-row .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--action); }
.pop-row b { font-weight: 600; }
.wl-more { padding: 70px var(--gutter) 110px; text-align: center; }
.wl-more .ctas { justify-content: center; }
/* Echte Kamelo herkennen: een rustige kaart met het ID per browser */
.wl-more .official { max-width: 520px; margin: 40px auto 0; padding: 22px 24px; border-radius: 12px; background: var(--soft); text-align: left; }
.official-h { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 15px; font-weight: 600; color: var(--ink); }
.official-h svg { width: 18px; height: 18px; fill: none; stroke: var(--action); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.official-ids { margin: 0; display: grid; gap: 8px; }
.official-ids div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg); }
.official-ids dt { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--ink); }
.official-ids dd { margin: 0; min-width: 0; }
.official-ids code { font-family: var(--mono); font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.official-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 560px) { .official-ids div { flex-direction: column; align-items: flex-start; gap: 4px; } }
@media (max-width: 900px) { .wl-steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }
@media (max-width: 560px) { .wl-hero { padding-top: 120px; } .wl-viz.v2 { gap: 8px; } .wl-app img { padding: 14px; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wl-viz.v1 { background: linear-gradient(140deg, #0e2f5c, #154a86); }
  :root:not([data-theme="light"]) .wl-viz.v2 { background: linear-gradient(140deg, #11406f, #135a63); }
  :root:not([data-theme="light"]) .wl-viz.v3 { background: linear-gradient(140deg, #114a4a, #1b4f37); }
  :root:not([data-theme="light"]) .wl-app { color: #f5f5f7; }
  :root:not([data-theme="light"]) .wl-app img.lg-openai, :root:not([data-theme="light"]) .wl-app img[src$="openai.svg"] { filter: invert(1); }
}
/* Meer kleur dan alleen blauw (10 okt) */
.wl-viz.v1 { background: radial-gradient(90% 80% at 20% 15%, #f3f0ff, transparent 60%), linear-gradient(140deg, #e4ddff, #d3e2ff); }
.wl-viz.v2 { background: radial-gradient(90% 80% at 80% 15%, #fff4ec, transparent 60%), linear-gradient(140deg, #ffe0cf, #ffd2e1); }
.wl-viz.v3 { background: radial-gradient(90% 80% at 20% 85%, #f0fbf5, transparent 60%), linear-gradient(140deg, #d6f3e4, #e8f5d2); }