/* ==========================================================
   Signatuuronderdelen: het vertrekbord met split-flap letters,
   de knoppendock met glijdende pil en de zwevende contactcapsule.
   ========================================================== */

/* ============ Vertrekbord (diensten-index) ============ */
.board { --fw: 24px; position: relative; z-index: 2; padding: 30px 0 70px; }
.board__frame { position: relative; padding: 20px 22px 14px; border-radius: 22px; background: linear-gradient(180deg, #0a1730, #050d1c); border: 1px solid rgba(142,197,255,.18);
  box-shadow: 0 50px 90px -50px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 6px rgba(7,20,42,.55), 0 0 0 7px rgba(142,197,255,.08); }
.board__frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px); }
.board__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 0 4px 16px; border-bottom: 1px solid rgba(142,197,255,.12); font: 600 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.board__title { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.board__title em { font-style: normal; color: var(--muted); }
.board__title i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 10px var(--ok); animation: blink 2.4s ease-in-out infinite; }
.board__meta { white-space: nowrap; }
.board__meta b { margin-left: 10px; padding: 4px 9px; border-radius: 6px; background: #0e1d38; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
@keyframes blink { 50% { opacity: .35; } }

.board__cols, .board__row { display: grid; grid-template-columns: 62px max-content max-content max-content 1fr; column-gap: 26px; align-items: center; }
.board__cols { padding: 14px 14px 8px; font: 600 10px var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--steel); }
.board__cols span:nth-child(2) { width: calc(17 * var(--fw)); }
.board__cols span:nth-child(3) { width: calc(8 * var(--fw)); }
.board__cols span:nth-child(4) { width: calc(4 * var(--fw)); }
.board__cols span:last-child { justify-self: end; }
.board__rows { display: grid; gap: 4px; }
.board__row { position: relative; width: 100%; padding: 9px 14px; border: 0; border-radius: 12px; background: none; color: var(--ink); text-align: left; transition: background .35s var(--ease); }
.board__row::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: linear-gradient(var(--accent), var(--accent-2)); transform: scaleY(0); transition: transform .45s var(--ease); }
.board__row:hover, .board__row:focus-visible { background: rgba(142,197,255,.06); outline: none; }
.board__row.is-active { background: rgba(142,197,255,.08); }
.board__row.is-active::before, .board__row:hover::before, .board__row:focus-visible::before { transform: scaleY(1); }

/* Eén tegel per letter, met de horizontale naad van een echt flapbord */
.flaps { display: flex; gap: 2px; }
.fl { position: relative; width: calc(var(--fw) - 2px); height: 32px; display: grid; place-items: center; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, #16284a 0 50%, #10203d 50% 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 2px 3px rgba(0,0,0,.5);
  font: 600 16px/1 var(--font-mono); color: var(--ink); transition: color .3s; }
.fl::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.65); }
.fl.is-blank { color: transparent; }
.fl.is-flip { animation: flap .09s linear; }
@keyframes flap { 50% { transform: scaleY(.15); filter: brightness(1.6); } }
.board__row.is-active .flaps--name .fl, .board__row:hover .flaps--name .fl { color: var(--accent); }
.flaps--price .fl { color: var(--warn); }

.board__status { justify-self: end; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font: 600 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.board__status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.board__status.is-go { color: var(--ok); background: rgba(110,231,183,.1); }
.board__status.is-go i { animation: blink 1.2s ease-in-out infinite; }
.board__status.is-ok { color: var(--accent); background: rgba(142,197,255,.08); }

/* ============ Dock: één capsule, een witte pil glijdt naar de knop onder je muis ============ */
@property --spin { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.dock { position: relative; isolation: isolate; display: inline-flex; padding: 6px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(22,46,86,.92), rgba(7,20,42,.95)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -28px rgba(0,0,0,.95); }
.dock::before { content: ""; position: absolute; inset: 0; z-index: -2; padding: 1px; border-radius: inherit;
  background: conic-gradient(from var(--spin), rgba(142,197,255,.16) 0 62%, var(--accent) 78%, var(--accent-2) 86%, rgba(142,197,255,.16) 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: dockspin 7s linear infinite; }
@keyframes dockspin { to { --spin: 360deg; } }
.dock__pill { position: absolute; z-index: -1; top: 6px; bottom: 6px; left: 0; width: var(--w, 0px); border-radius: 999px; background: var(--ink); transform: translateX(var(--x, 6px));
  box-shadow: 0 12px 30px -10px rgba(243,240,234,.45), inset 0 -2px 0 rgba(11,27,52,.12); transition: transform .55s var(--ease), width .55s var(--ease); }
.dock:not(.is-ready) .dock__pill { transition: none; }
.dock__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 26px; border: 0; border-radius: 999px; background: none;
  color: var(--ink); font: 600 16px var(--font-body); white-space: nowrap; transition: color .4s var(--ease); }
.dock__btn .ico { width: 18px; height: 18px; flex: none; }
.dock__btn.is-lit { color: var(--navy); }
.dock__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ============ Zwevende contactcapsule ============ */
.floaters { position: fixed; right: 18px; bottom: 18px; z-index: 70; display: grid; justify-items: center; gap: 5px; padding: 5px; border-radius: 999px;
  background: linear-gradient(180deg, rgba(22,46,86,.94), rgba(7,20,42,.97)); border: 1px solid rgba(142,197,255,.22);
  box-shadow: 0 26px 50px -18px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08); }
.floaters__sep { width: 20px; height: 1px; background: rgba(142,197,255,.2); }
.floater { position: relative; width: 48px; height: 48px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink); transition: background .3s, transform .35s var(--ease); }
.floater:hover { transform: scale(1.06); }
.floater:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.floater--wa { color: #25d366; }
.floater--wa:hover { background: rgba(37,211,102,.12); }
.orb { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; color: #fff; box-shadow: 0 0 26px -4px rgba(142,197,255,.75); }
.orb::before { content: ""; position: absolute; inset: -30%; background: conic-gradient(#8ec5ff, #c7b8ff, #6ee7b7, #8ec5ff); animation: orbspin 4s linear infinite; }
.orb::after { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #34609f, #0b1b34 72%); }
.orb svg { position: relative; z-index: 1; filter: drop-shadow(0 0 6px rgba(142,197,255,.9)); animation: orbglow 3s ease-in-out infinite; }
@keyframes orbspin { to { transform: rotate(360deg); } }
@keyframes orbglow { 50% { transform: scale(1.12); } }
.floater__tip { position: absolute; right: calc(100% + 16px); top: 50%; padding: 9px 14px; border-radius: 12px; background: var(--ink); color: var(--navy); font: 600 13.5px var(--font-head); font-style: normal; white-space: nowrap;
  box-shadow: 0 16px 30px -12px rgba(0,0,0,.7); opacity: 0; transform: translate(10px, -50%); pointer-events: none; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.floater__tip::after { content: ""; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; background: inherit; border-radius: 2px; transform: rotate(45deg); }
.floater--ai:hover .floater__tip, .floater--ai:focus-visible .floater__tip, .floaters.is-hint .floater__tip { opacity: 1; transform: translate(0, -50%); }

/* ============ Responsive ============ */
@media (max-width: 1100px) {
  .board { --fw: 20px; }
  .board__cols, .board__row { grid-template-columns: 52px max-content max-content 1fr; column-gap: 18px; }
  .board__cols span:nth-child(4), .flaps--price { display: none; }
  .fl { height: 28px; font-size: 14px; }
}
@media (max-width: 760px) {
  .board { --fw: 15px; padding: 10px 0 50px; }
  .board__frame { padding: 14px 10px 8px; border-radius: 18px; }
  .board__head { font-size: 10px; letter-spacing: .1em; }
  .board__title em, .board__cols span:nth-child(3), .board__cols span:last-child, .flaps--live { display: none; }
  .board__cols, .board__row { grid-template-columns: 38px max-content 1fr; column-gap: 10px; }
  .board__row { padding: 8px 6px; }
  .fl { height: 24px; font-size: 11.5px; border-radius: 3px; }
  .board__status { padding: 0; background: none !important; font-size: 0; gap: 0; }
  .board__status i { width: 8px; height: 8px; }
  .dock { display: flex; width: 100%; }
  .dock__btn { flex: 1 1 0; min-width: 0; padding: 14px 6px; font-size: 14.5px; gap: 7px; }
  .dock__btn .ico { width: 16px; height: 16px; }
  .dock__more { display: none; }
  .floaters { right: 12px; bottom: 12px; }
  .floater { width: 44px; height: 44px; }
  .orb { width: 40px; height: 40px; }
}
@media (max-width: 380px) {
  .board { --fw: 13.5px; }
  .dock__btn .ico { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dock::before, .orb::before, .orb svg, .board__title i, .board__status i { animation: none; }
}

/* ============ Prijzen: excl./incl. btw-schakelaar ============ */
.pbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.vat { --pos: 0; position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 5px; border-radius: 14px; background: rgba(7,20,42,.6); border: 1px solid var(--line); }
.vat::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 10px; background: linear-gradient(135deg, rgba(142,197,255,.28), rgba(142,197,255,.1)); border: 1px solid rgba(142,197,255,.55); transform: translateX(calc(var(--pos) * 100%)); transition: transform .35s var(--ease); }
.vat button { position: relative; z-index: 1; border: 0; background: none; padding: 9px 16px; border-radius: 10px; font: 600 13px var(--font-mono); letter-spacing: .03em; color: var(--muted); transition: color .25s; }
.vat button[aria-pressed="true"] { color: var(--ink); }
.vat button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.price__amount small { line-height: 1.35; }
.price__alt { margin: 6px 0 0; font: 500 12px var(--font-mono); color: var(--muted); opacity: .8; }
.care__vat { font: 600 13px var(--font-mono); color: var(--muted); letter-spacing: .03em; }
.care__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.care__cta span { font-size: 13px; color: var(--muted); }

/* ============ Onderhoud via automatische incasso ============ */
.incasso { text-align: left; }
.incasso form { display: grid; gap: 12px; }
.incasso__sum { display: grid; gap: 4px; margin: -4px 0 18px; padding: 16px 18px; border-radius: 14px; background: linear-gradient(135deg, rgba(142,197,255,.16), rgba(142,197,255,.04)); border: 1px solid rgba(142,197,255,.35); }
.incasso__sum div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.incasso__sum span { font-size: 13px; color: var(--muted); }
.incasso__sum b { font: 800 34px/1 var(--font-head); letter-spacing: -.03em; }
.incasso__sum small { font: 500 12px var(--font-mono); color: var(--muted); }
.incasso .check { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 10px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.incasso .check input { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--accent); }
.incasso .check b { color: var(--accent); }
.incasso__steps { margin: 0; padding: 12px 14px 12px 32px; border-radius: 12px; background: rgba(243,240,234,.04); font-size: 13px; color: var(--muted); display: grid; gap: 4px; }
.incasso__go { width: 100%; }
.incasso__go[disabled] { opacity: .6; cursor: progress; }
.incasso p.incasso__safe { margin: 0; text-align: center; font-size: 12px; }
@media (max-width: 640px) {
  .pbar { justify-content: flex-start; }
}
.care__tag { display: block; }