/* backsound.nl — the backsoundstream look (black, neon cyan, white; Inter).
   Tokens copied from backsoundstream/src/theme/theme.js so both sites read as one company. */
:root {
  --bg: #000000;
  --bg-elev: #06070d;
  --bg-surface: #0b0d18;
  --panel: rgba(10, 12, 22, 0.85);
  --cyan: #00f5ff;
  --cyan-soft: #22e1ff;
  --cyan-deep: #0099b3;
  --cyan-glow: rgba(0, 245, 255, 0.55);
  --cyan-faint: rgba(0, 245, 255, 0.15);
  --purple: #b042ff;
  --purple-faint: rgba(176, 66, 255, 0.18);
  --text: #e9f6ff;
  --text-dim: #9fb0c8;
  --text-muted: #6b7a93;
  --border: rgba(0, 245, 255, 0.18);
  --border-strong: rgba(0, 245, 255, 0.45);
  --divider: rgba(122, 138, 166, 0.18);
  --star: #ffd145;
  --radius: 18px;
  --radius-sm: 10px;
  --max: 1200px;
  --gap: clamp(16px, 3vw, 32px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(0, 245, 255, 0.35); }
img { max-width: 100%; height: auto; }
a { color: var(--text); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 4px;
}
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; background: var(--cyan); color: #000; padding: 8px 14px; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); }
.topbar { border-bottom: 1px solid var(--divider); font-size: 13px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 36px; }
.rating { display: inline-flex; align-items: center; gap: 8px; color: var(--text-dim); }
.rating:hover { text-decoration: none; color: var(--text); }
.rating-score { color: var(--star); font-weight: 800; }
.rating-stars { color: var(--star); letter-spacing: 1px; }
.rating-google { color: var(--text-muted); }
.topbar-links { display: flex; align-items: center; gap: 18px; }
.topbar-links a { color: var(--text); font-weight: 600; }
.topbar-links .login { color: var(--text); background: rgba(0, 245, 255, 0.13); border: 1px solid rgba(0, 245, 255, 0.35); box-shadow: 0 0 8px rgba(0, 245, 255, 0.25); padding: 2px 11px; border-radius: 999px; }
.topbar-links .login:hover { text-decoration: none; color: var(--text); background: rgba(0, 245, 255, 0.2); border-color: var(--cyan); box-shadow: 0 0 16px rgba(0, 245, 255, 0.6); }

.navbar-inner { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.logo { display: flex; flex-direction: column; line-height: 1; color: var(--text); margin-right: auto; }
.logo:hover { text-decoration: none; }
.logo-word { font-weight: 900; font-size: 26px; letter-spacing: 0.04em; background: linear-gradient(90deg, #ffffff 0%, var(--cyan) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo-tag { font-size: 12px; color: var(--text-dim); margin-top: 4px; font-style: italic; }
.main-nav { display: flex; align-items: center; gap: 22px; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px; }
.menu > li { position: relative; }
.menu > li > a { display: block; padding: 10px 12px; color: var(--text); font-weight: 600; font-size: 15px; border-radius: 10px; }
.menu > li > a:hover, .menu > li:focus-within > a { color: #ffffff; text-decoration: none; background: var(--cyan-faint); }
.menu a[aria-current="page"] { color: #ffffff; text-decoration: underline; text-decoration-color: var(--cyan); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.has-sub > a::after { content: "▾"; font-size: 11px; margin-left: 6px; opacity: 0.7; }
.sub { list-style: none; margin: 0; padding: 8px; position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 24px rgba(0, 245, 255, 0.08); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s, transform 0.15s, visibility 0.15s; }
.has-sub:hover > .sub, .has-sub:focus-within > .sub { opacity: 1; visibility: visible; transform: none; }
.sub a { display: block; padding: 8px 12px; color: var(--text); font-size: 15px; border-radius: 8px; }
.sub a:hover { background: var(--cyan-faint); color: #ffffff; text-decoration: none; }
.nav-actions { display: flex; align-items: center; gap: 14px; }
.nav-actions .btn, .topbar-links a { white-space: nowrap; }
.stream-link { font-size: 13px; font-weight: 700; color: var(--text); border: 1px solid var(--border-strong); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.stream-link span { color: var(--text); font-weight: 700; }
.stream-link:hover { text-decoration: none; box-shadow: 0 0 16px var(--cyan-faint); }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }
.nav-burger { display: none; cursor: pointer; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 12px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; }

@media (max-width: 1080px) {
  .nav-burger { display: flex; }
  .main-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 12px; padding: 12px 20px 24px; background: #000; border-bottom: 1px solid var(--border); max-height: calc(100vh - 110px); overflow-y: auto; }
  .nav-toggle:checked ~ .main-nav { display: flex; }
  .navbar-inner { position: relative; }
  .menu { flex-direction: column; align-items: stretch; }
  .menu > li > a { padding: 12px 8px; font-size: 17px; }
  .sub { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: transparent; padding: 0 0 6px 14px; min-width: 0; }
  .sub a { color: var(--text-dim); }
  .has-sub > a::after { content: ""; }
  .nav-actions { flex-direction: column; align-items: stretch; }
  .nav-actions .btn { text-align: center; }
}
@media (max-width: 640px) {
  .rating-count, .rating-google { display: none; }
  .topbar-links { gap: 12px; }
  .topbar-links a[href^="https://wa.me"] { display: none; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 700; font-size: 16px; line-height: 1.2; border: 1px solid transparent; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s, background 0.15s; font-family: inherit; text-align: center; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
/* See-through like Stream's Pre-order button (Daniel, 03-10-2026: all filled buttons transparent). */
.btn-primary { background: rgba(0, 245, 255, 0.13); color: var(--text); border-color: rgba(0, 245, 255, 0.35); box-shadow: 0 0 8px rgba(0, 245, 255, 0.25); }
.btn-primary:hover { background: rgba(0, 245, 255, 0.2); border-color: var(--cyan); box-shadow: 0 0 16px rgba(0, 245, 255, 0.6); color: var(--text); text-shadow: 0 0 10px rgba(0, 245, 255, 0.9); }
.btn-secondary, .btn-custom2 { background: transparent; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover, .btn-custom2:hover { background: var(--cyan-faint); }
.content p > .btn, .content .btn { margin: 6px 10px 6px 0; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--divider); background:
  radial-gradient(900px 400px at 15% 0%, rgba(0, 245, 255, 0.16), transparent 60%),
  radial-gradient(700px 380px at 90% 20%, rgba(176, 66, 255, 0.14), transparent 60%), var(--bg); }
.hero-inner { position: relative; z-index: 1; padding: clamp(40px, 7vw, 88px) 20px clamp(28px, 5vw, 56px); }
.hero h1 { margin: 0; font-size: clamp(32px, 5.2vw, 58px); line-height: 1.08; font-weight: 900; letter-spacing: -0.02em; max-width: 920px; text-wrap: balance; }
.hero-home h1 { font-size: clamp(36px, 6.4vw, 72px); background: linear-gradient(90deg, #ffffff 0%, #d4e6ec 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow { margin: 0 0 12px; color: var(--text-dim); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px; }
.hero-buttons { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.hero-banner { display: block; margin-top: 36px; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 245, 255, 0.08); width: 100%; height: auto; }
.hero-thumb { display: block; margin-top: 28px; max-width: 800px; width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }
.usps { position: relative; z-index: 1; border-top: 1px solid var(--divider); background: rgba(0, 0, 0, 0.55); }
.usps ul { list-style: none; margin: 0 auto; padding: 14px 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 14px; font-weight: 600; color: var(--text-dim); }
.usps li::before { content: "✓"; color: var(--cyan); margin-right: 8px; font-weight: 900; }

/* ---------- Content (converted WordPress blocks) ---------- */
.content { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(28px, 4vw, 56px); }
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 { line-height: 1.2; margin: 1.4em 0 0.5em; font-weight: 800; letter-spacing: -0.01em; }
.content h2 { font-size: clamp(26px, 3.4vw, 38px); }
.content h3 { font-size: clamp(21px, 2.4vw, 26px); }
.content h4 { font-size: 20px; }
.content h5 { font-size: 18px; color: var(--text); }
.content h6 { font-size: 13px; color: var(--text-dim); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 0.2em; }
.content h6 + h2 { margin-top: 0.2em; }
.content p, .content ul, .content ol { margin: 0 0 1em; color: var(--text-dim); }
.content strong, .content b { color: var(--text); }
.content li { margin: 0.25em 0; }
.content ul li::marker { color: var(--cyan); }
.content img { border-radius: var(--radius-sm); }
.content table { width: 100%; border-collapse: collapse; margin: 1.2em 0 1.6em; font-size: 15px; display: block; overflow-x: auto; }
.content th, .content td { border: 1px solid var(--divider); padding: 10px 12px; text-align: left; vertical-align: top; color: var(--text-dim); }
.content th, .content thead td { background: var(--bg-surface); color: var(--text); font-weight: 700; }
.content blockquote { margin: 1em 0; padding: 0.6em 1em; border-left: 3px solid var(--cyan); color: var(--text); background: var(--cyan-faint); border-radius: 0 10px 10px 0; }
.content > :first-child, .b-col > :first-child { margin-top: 0; }

.b-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin: clamp(24px, 4vw, 52px) 0; align-items: start; }
.b-row.b-inner { margin: 18px 0; }
.b-col { grid-column: span 12; min-width: 0; }
@media (min-width: 768px) {
  .b-col[data-w="1"] { grid-column: span 1; } .b-col[data-w="2"] { grid-column: span 2; }
  .b-col[data-w="3"] { grid-column: span 3; } .b-col[data-w="4"] { grid-column: span 4; }
  .b-col[data-w="5"] { grid-column: span 5; } .b-col[data-w="6"] { grid-column: span 6; }
  .b-col[data-w="7"] { grid-column: span 7; } .b-col[data-w="8"] { grid-column: span 8; }
  .b-col[data-w="9"] { grid-column: span 9; } .b-col[data-w="10"] { grid-column: span 10; }
  .b-col[data-w="11"] { grid-column: span 11; }
}
@media (min-width: 560px) and (max-width: 767px) {
  .b-row[data-cols="3"] > .b-col, .b-row[data-cols="4"] > .b-col, .b-row[data-cols="6"] > .b-col { grid-column: span 6; }
}
/* Tiles: rows of 3+ small columns (feature icons, branch tiles, help topics) become panels. */
.b-row[data-cols="3"] > .b-col, .b-row[data-cols="4"] > .b-col, .b-row[data-cols="6"] > .b-col {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; height: 100%;
}
.b-row[data-cols="3"] > .b-col img, .b-row[data-cols="4"] > .b-col img, .b-row[data-cols="6"] > .b-col img { display: block; margin: 0 auto 12px; }

/* Accordions (WPBakery tabs/accordion) are <details>: the answer is in the HTML. */
.b-acc { display: grid; gap: 10px; margin: 1.2em 0 2em; }
.b-acc details { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 0 18px; }
.b-acc details[open] { border-color: var(--border-strong); box-shadow: 0 0 20px rgba(0, 245, 255, 0.06); }
.b-acc summary { cursor: pointer; list-style: none; padding: 16px 30px 16px 0; font-weight: 700; color: var(--text); position: relative; }
.b-acc summary::-webkit-details-marker { display: none; }
.b-acc summary::after { content: "+"; position: absolute; right: 0; top: 12px; font-size: 22px; color: var(--cyan); }
.b-acc details[open] summary::after { content: "–"; }
.b-acc-body { padding: 0 0 12px; }

.b-video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); background: #05060a; margin: 0 0 12px; }
.b-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Price cards (the "ONZE TARIEVEN" block). */
.tarief-item { background: var(--panel); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 26px; height: 100%; box-shadow: 0 0 30px rgba(0, 245, 255, 0.07); }
.tarief-item__wrapper { display: flex; flex-direction: column; height: 100%; }
.tarief-title { font-weight: 800; font-size: 22px; color: var(--text); }
.tarief-price { margin: 8px 0 14px; display: flex; align-items: baseline; gap: 10px; }
.tarief-price strong { font-size: 40px; font-weight: 900; color: #ffffff; }
.tarief-price span { color: var(--text-dim); font-size: 14px; }
.tarief-description ul { padding-left: 0; list-style: none; }
.tarief-description li::before, .tarief-more li::before { content: "✓"; color: var(--cyan); margin-right: 8px; }
.tarief-more { margin: 4px 0 16px; }
.tarief-more summary { cursor: pointer; color: var(--text); font-weight: 600; }
.tarief-more ul { list-style: none; padding-left: 0; margin-top: 10px; }
.tarief-buttons { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; }

/* Reviews: the Google reviews the WordPress widget showed, as static cards. */
.b-reviews { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 340px); gap: 16px; overflow-x: auto; padding: 6px 2px 14px; scroll-snap-type: x mandatory; }
.b-review { margin: 0; scroll-snap-align: start; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.b-review figcaption { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; }
.b-review figcaption img { grid-row: span 2; border-radius: 50%; width: 40px; height: 40px; }
.b-review-name { font-weight: 700; color: var(--text); }
.b-stars { color: var(--star); font-size: 14px; letter-spacing: 1px; }
.b-review-time { grid-column: 2; color: var(--text-muted); font-size: 13px; }
.b-review blockquote { margin: 0; padding: 0; border: 0; background: none; color: var(--text-dim); font-size: 15px; }

/* Blog index cards. */
.page-page article { display: grid; gap: 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; margin: 0 0 18px; }
.page-page article h3 { margin: 6px 0 0; }

/* ---------- Contact section ---------- */
.contact-section { border-top: 1px solid var(--divider); background:
  radial-gradient(700px 300px at 85% 0%, rgba(0, 245, 255, 0.12), transparent 60%), var(--bg-elev); }
.contact-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--gap); padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.contact-intro h2 { margin: 0 0 14px; font-size: clamp(26px, 3.4vw, 38px); font-weight: 900; line-height: 1.1; }
.contact-intro p { color: var(--text-dim); }
.lead-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: clamp(18px, 3vw, 28px); }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 13px; font-weight: 600; color: var(--text-dim); }
.field input[type="text"], .field input[type="search"], .field input[type="email"], .field input[type="tel"], .field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--divider); background: #05060a; color: var(--text); font: inherit; font-size: 16px;
}
.field input:focus, .field textarea:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 0 3px var(--cyan-faint); }
.field input[aria-invalid="true"] { border-color: #ff4f81; }
.field-check { flex-direction: row; align-items: center; gap: 10px; }
.field-check input { width: 20px; height: 20px; accent-color: var(--cyan); }
.field-check label { font-size: 15px; color: var(--text); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin: 0 0 10px; min-height: 1.2em; font-size: 15px; }
.form-status.is-error { color: #ff7a9c; }
.form-status.is-ok { color: var(--text); }
.lead-form .btn { justify-self: start; }
.lead-form button[disabled] { opacity: 0.6; cursor: wait; }
@media (max-width: 860px) {
  .contact-inner { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .lead-form { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: #000; padding-top: 48px; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.footer-title { color: var(--text); font-weight: 800; margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; color: var(--text-dim); }
.site-footer a { color: var(--text-dim); }
.site-footer a:hover { color: #ffffff; text-decoration: underline; }
.footer-stream { color: var(--text-dim); margin: 0 0 12px; }
.footer-stream a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.footer-social { display: flex; gap: 14px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--divider); margin-top: 36px; padding-top: 18px; padding-bottom: 28px; color: var(--text-muted); }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- Cookie bar ---------- */
.cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: rgba(6, 7, 13, 0.96); border-top: 1px solid var(--border); backdrop-filter: blur(10px); }
.cookie-banner[hidden] { display: none; }
.cookie-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 14px; padding-bottom: 14px; flex-wrap: wrap; }
.cookie-inner p { margin: 0; color: var(--text-dim); font-size: 15px; }
.cookie-btns { display: flex; gap: 10px; }
.cookie-btns .btn { padding: 9px 18px; font-size: 15px; }

/* ---------- Quick support dialog (assets/quick-support.js), restyled from its own CSS ---------- */
.bsv-qs-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.78);opacity:0;transition:opacity .16s ease-out}
.bsv-qs-overlay.is-open{opacity:1}
.bsv-qs-dialog{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;overflow:hidden;background:var(--bg-surface);border:1px solid var(--border-strong);border-radius:20px;box-shadow:0 24px 60px rgba(0,0,0,.6),0 0 40px rgba(0,245,255,.1);font-family:inherit;color:var(--text);transform:translateY(14px) scale(.985);transition:transform .22s cubic-bezier(.2,.8,.2,1);outline:0}
.bsv-qs-overlay.is-open .bsv-qs-dialog{transform:none}
.bsv-qs-head{display:flex;align-items:center;gap:12px;padding:22px 60px 22px 28px;border-bottom:1px solid var(--divider)}
.bsv-qs-head img{width:22px;height:26px;display:block;filter:brightness(0) invert(1)}
.bsv-qs-head h2{margin:0;color:var(--text);font-size:24px;line-height:30px;font-weight:800}
.bsv-qs-close{position:absolute;top:14px;right:14px;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--text);font-size:26px;line-height:36px;cursor:pointer}
.bsv-qs-close:hover,.bsv-qs-close:focus-visible{background:var(--cyan-faint);outline:0}
.bsv-qs-body{overflow-y:auto;padding:24px 28px 8px}
.bsv-qs-lead{margin:0 0 20px;font-size:17px;line-height:26px;color:var(--text-dim)}
.bsv-qs-steps{margin:0;padding:0 0 0 20px;color:var(--text-dim)}
.bsv-qs-steps li{margin:0 0 14px;line-height:24px}
.bsv-qs-steps strong{display:block;color:var(--text)}
.bsv-qs-note{margin:18px 0 0;padding:14px 16px;border-left:3px solid var(--cyan);border-radius:6px;background:var(--cyan-faint);font-size:14px;line-height:22px;color:var(--text-dim)}
.bsv-qs-note b{color:var(--text);font-weight:600}
.bsv-qs-note a{color:var(--text);text-decoration:underline}
.bsv-qs-foot{padding:20px 28px 24px;border-top:1px solid var(--divider)}
.bsv-qs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.bsv-qs-meta{margin:14px 0 0;font-size:13px;line-height:20px;color:var(--text-muted)}
.bsv-qs-meta a{color:var(--text);text-decoration:underline}
.bsv-qs-started{display:none;margin:0;padding:16px 18px;border-radius:8px;background:var(--cyan-faint);font-size:16px;line-height:24px;color:var(--text)}
.bsv-qs-dialog.is-started .bsv-qs-actions{display:none}
.bsv-qs-dialog.is-started .bsv-qs-started{display:block}
.bsv-qs-started a{color:var(--text);text-decoration:underline;font-weight:600;white-space:nowrap}
body.bsv-qs-lock{overflow:hidden}
.bsv-qs-btn{display:inline-block;padding:11px 21px;border-radius:999px;background:rgba(0,245,255,.13);border:1px solid rgba(0,245,255,.35);color:var(--text) !important;font-weight:700;text-decoration:none !important;box-shadow:0 0 8px rgba(0,245,255,.25)}
.bsv-qs-btn:hover{background:rgba(0,245,255,.2);border-color:var(--cyan);box-shadow:0 0 16px rgba(0,245,255,.6)}
.bsv-qs-cancel{padding:12px 18px;border:1px solid var(--border-strong);border-radius:999px;background:transparent;color:var(--text);font:inherit;font-weight:600;cursor:pointer}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* Icons drawn for the white WordPress page (navy/red line art), lit up for black. */
.content img.b-icon { filter: brightness(0) invert(1); width: 72px; height: 72px; object-fit: contain; border-radius: 0; }
.content img.b-icon[src*="ai-generator"] { width: auto; height: auto; max-width: 220px; } /* white like the other icons (Daniel, 03-10: "transparant of wit") */
.hero-banner { max-width: 520px; margin-left: auto; margin-right: auto; }
.b-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); margin: 24px 0 8px; align-items: stretch; }
@media (max-width: 640px) {
  .usps ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 13px; padding: 12px 20px; }
}
.lead-form .field > .btn { align-self: flex-start; padding-left: 34px; padding-right: 34px; }

/* ---------- Lighter, like backsoundstream.nl ----------
   Daniel, 2026-10-03: "alles is heel donker op de achtergrond". Stream shows its hero
   photo clearly, tints black towards dark petrol and lets panels glow; same here. */
:root {
  --bg: #04121a;
  --bg-elev: #062029;
  --bg-surface: #0a2a33;
  --panel: rgba(12, 52, 62, 0.55);
  --text-dim: #b3c4d4;
  --border: rgba(0, 245, 255, 0.26);
}
body {
  background:
    radial-gradient(1100px 620px at 85% -5%, rgba(0, 245, 255, 0.13), transparent 60%),
    radial-gradient(900px 600px at -10% 35%, rgba(0, 200, 220, 0.10), transparent 60%),
    radial-gradient(900px 700px at 110% 80%, rgba(176, 66, 255, 0.08), transparent 60%),
    linear-gradient(180deg, #06202a 0%, #04131b 45%, #030d13 100%);
  background-attachment: fixed;
}
.site-header { background: rgba(6, 34, 42, 0.86); }
.hero { background: transparent; }
.hero-inner { min-height: clamp(240px, 30vw, 400px); display: flex; flex-direction: column; justify-content: center; }
.usps { background: rgba(6, 34, 42, 0.72); }
.b-row[data-cols="3"] > .b-col, .b-row[data-cols="4"] > .b-col, .b-row[data-cols="6"] > .b-col,
.b-acc details, .tarief-item, .b-review, .lead-form {
  box-shadow: 0 0 24px rgba(0, 245, 255, 0.10), inset 0 0 0 1px rgba(0, 245, 255, 0.05);
}
.contact-section { background: radial-gradient(700px 300px at 85% 0%, rgba(0, 245, 255, 0.14), transparent 60%), rgba(6, 30, 38, 0.65); }
.site-footer { background: rgba(2, 10, 14, 0.9); }
.cookie-banner { background: rgba(6, 30, 38, 0.97); }

/* ---------- Background video, like backsoundstream.nl ----------
   Daniel, 2026-10-03: "gebruik de filmpjes op de achtergrond die we ook in Stream gebruiken".
   Fixed behind the whole page; the content scrolls over it. Values from Stream's
   VideoBackdrop: 65% opacity, saturate 0.75 (0.3 for the warm dancer clip), a fade to
   black at the top and bottom and a light vignette. Before the video plays the layer is
   the dark petrol background, so nothing flashes. */
body { background: #02090d; }
.backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 85% -5%, rgba(0, 245, 255, 0.13), transparent 60%),
    radial-gradient(900px 600px at -10% 35%, rgba(0, 200, 220, 0.10), transparent 60%),
    linear-gradient(180deg, #06202a 0%, #04131b 45%, #030d13 100%); }
.backdrop video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: saturate(0.75); transition: opacity 1.2s ease; }
.backdrop.is-playing video { opacity: 0.65; }
.backdrop-low-sat video { filter: saturate(0.3); }
.backdrop::after { content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.15) 30%, rgba(0, 0, 0, 0.18) 70%, #000 100%),
    radial-gradient(ellipse at 50% 45%, transparent 28%, rgba(0, 0, 0, 0.28) 100%); }
.site-header, main, .contact-section, .site-footer { position: relative; z-index: 1; }
.site-header { position: sticky; z-index: 50; }
/* The title block lies straight on the video, as on Stream's homepage. */
.hero { background: transparent; border-bottom: 0; }
.hero::before, .hero::after { display: none; }
.hero-inner { min-height: clamp(280px, 38vw, 480px); }
.hero h1 { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }
.usps { background: rgba(3, 14, 20, 0.62); }
/* Long text stays readable over moving pictures: the body sits on a translucent panel. */
main .content { background: rgba(3, 12, 17, 0.78); border: 1px solid var(--border); border-radius: 24px;
  padding: clamp(20px, 4vw, 48px); margin-top: clamp(20px, 3vw, 36px); margin-bottom: clamp(28px, 4vw, 56px); }
@media (max-width: 640px) { main .content { border-radius: 16px; margin-left: 10px; margin-right: 10px; width: auto; } }
.contact-section { background: rgba(3, 14, 20, 0.82); }
.site-footer { background: rgba(0, 0, 0, 0.9); }

/* ---------- Room for the Fungo chat bubble ----------
   The chat widget (fungo.backsound.nl/widget/widget.js) puts a 56-px bubble 20 px from
   the bottom-left corner, above everything and inside its own shadow root, so it cannot
   be moved from here. On phones the cookie bar's buttons wrap onto their own row at the
   bottom left, right under that bubble, which hid "Accepteren". There they now sit on the
   right, and the extra row gap keeps the text clear of the bubble's top edge. */
@media (max-width: 640px) {
  .cookie-inner { row-gap: 26px; }
  .cookie-btns { margin-left: auto; }
}

/* ---------- Light text, cyan only as an accent ----------
   Daniel, 2026-10-03: "de letters in algemeen is veel te veel cyaan, een lichte kleur
   lijkt me beter". All text is light now. Cyan stays on what is not reading text:
   button fills, borders and glows, check marks, the accordion "+", the active-menu
   underline, and the hover feedback of buttons. A link inside running text is marked
   by an underline instead of by colour. */
.content p a, .content li a, .content td a { text-decoration: underline; text-decoration-color: rgba(233, 246, 255, 0.45); text-underline-offset: 3px; }
.content p a:hover, .content li a:hover, .content td a:hover { color: #ffffff; text-decoration-color: var(--cyan); }
.content p.solo-link a { text-decoration: none; }
.content p.solo-link a:hover { text-decoration: underline; text-decoration-color: var(--cyan); }
a:hover { color: #ffffff; }
.btn-secondary:hover, .btn-custom2:hover { color: #ffffff; background: var(--cyan-faint); border-color: var(--cyan); }

/* ---------- The "Demo aanvragen" button: see-through, with a light running round ----------
   Daniel, 2026-10-03: proposal 1 of ten (a light runs around the edge), then "meer zoals
   de pre-order op Stream, transparant". So it copies Stream's Pre-order button
   (NeonButton, solid variant): a 13% cyan tint, a thin cyan edge at about a third
   strength, light text, a small cyan glow that grows on hover. The shape stays a pill
   like the other buttons here; Stream's has 8-px corners.
   Applies to every link button to /demo-aanvragen/ (header, titles, content, price
   cards) and the form's submit button (.btn-demo); menu and footer links stay links.
   The edge is ::before: a conic gradient masked down to a 1.5-px ring, so the inside
   stays truly see-through over the background video, and the light is the gradient's
   angle turning (@property --demo-angle). A browser without @property shows the same
   ring with the light standing still. */
@property --demo-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-primary:is([href="/demo-aanvragen/"],[href="/en/request-a-demo/"]), .btn-demo {
  position: relative; isolation: isolate;
  background: rgba(0, 245, 255, 0.13);
  color: var(--text);
  border-color: transparent;
  box-shadow: 0 0 8px rgba(0, 245, 255, 0.25);
}
.btn-primary:is([href="/demo-aanvragen/"],[href="/en/request-a-demo/"]):hover, .btn-demo:hover {
  background: rgba(0, 245, 255, 0.2);
  color: var(--text);
  box-shadow: 0 0 16px rgba(0, 245, 255, 0.6);
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.9);
}
.btn-primary:is([href="/demo-aanvragen/"],[href="/en/request-a-demo/"]):active, .btn-demo:active { transform: scale(0.97); }
.btn-primary:is([href="/demo-aanvragen/"],[href="/en/request-a-demo/"])::before, .btn-demo::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--demo-angle), rgba(0, 245, 255, 0.35) 0 62%, #ffffff 76%, rgba(0, 245, 255, 0.35) 86% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: demo-rim 2.8s linear infinite;
}
.btn-primary:is([href="/demo-aanvragen/"],[href="/en/request-a-demo/"]):hover::before, .btn-demo:hover::before {
  background: conic-gradient(from var(--demo-angle), rgba(0, 245, 255, 0.9) 0 62%, #ffffff 76%, rgba(0, 245, 255, 0.9) 86% 100%);
}
@keyframes demo-rim { to { --demo-angle: 360deg; } }
/* Visitors who asked for less motion get the still, thin cyan edge. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:is([href="/demo-aanvragen/"],[href="/en/request-a-demo/"])::before, .btn-demo::before { animation: none; background: rgba(0, 245, 255, 0.35); }
}

/* ---------- "Backsound Stream pre-order": a breathing glow ----------
   Daniel, 2026-10-03: proposal 3 of the ten ("Ademende gloed: de gloed rond de knop wordt
   rustig sterker en zwakker") for the Stream button in the header. Only box-shadow
   animates; on hover the glow holds at its strongest. Off for "less motion". */
.stream-link { animation: stream-breathe 2.6s ease-in-out infinite; }
.stream-link:hover { animation: none; box-shadow: 0 0 24px rgba(0, 245, 255, 0.85), 0 0 50px rgba(0, 245, 255, 0.35); border-color: var(--cyan); }
@keyframes stream-breathe {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 245, 255, 0.18); border-color: var(--border-strong); }
  50% { box-shadow: 0 0 24px rgba(0, 245, 255, 0.85), 0 0 50px rgba(0, 245, 255, 0.35); border-color: var(--cyan); }
}
@media (prefers-reduced-motion: reduce) { .stream-link { animation: none; } }

/* ---------- "Hoe werkt het?": a numbered line of steps ----------
   Daniel, 2026-10-03: "dit stuk hoe werkt het kan volgens mij mooier". Page.js tags each
   step (.b-step row, .step column, .step-num number). The number sits in a round badge in
   the style of the buttons, the title and text beside it, and a thin line runs down to the
   next step. The step rows touch, so the line is unbroken; the last step has none. */
.content .b-row.b-step { margin: 0; }
.content .step { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; padding-bottom: 30px; }
.content .step > * { grid-column: 2; }
.content .step > .step-num {
  grid-column: 1; grid-row: 1 / span 2; margin: 0; position: relative; z-index: 1;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; font-weight: 900; line-height: 1; color: var(--text); font-variant-numeric: tabular-nums;
  background: radial-gradient(circle, rgba(0, 245, 255, 0.2), rgba(0, 245, 255, 0.07)), #05181f;
  border: 1px solid rgba(0, 245, 255, 0.45);
  box-shadow: 0 0 14px rgba(0, 245, 255, 0.25);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.content .step > h4 { margin: 14px 0 4px; }
.content .step > p:not(.step-num) { margin: 0; color: var(--text-dim); }
.content .step::before {
  content: ""; position: absolute; left: 25px; top: 52px; bottom: 0; width: 2px;
  background: linear-gradient(rgba(0, 245, 255, 0.55), rgba(0, 245, 255, 0.15));
}
.content .b-step:last-child > .step { padding-bottom: 0; }
.content .b-step:last-child > .step::before { display: none; }
.content .step:hover > .step-num { border-color: var(--cyan); box-shadow: 0 0 22px rgba(0, 245, 255, 0.55); }
@media (max-width: 640px) {
  .content .step { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .content .step > .step-num { width: 44px; height: 44px; font-size: 18px; }
  .content .step > h4 { margin-top: 10px; }
  .content .step::before { left: 21px; top: 44px; }
}

/* ---------- App tiles: "Remote App" / "Request App" on a glass card ----------
   Daniel, 2026-10-03, comparing with the old site ("bij nieuw moet het beter"): the
   tiles stand side by side on one frosted card, icon above label, a small arrow after
   the label, as on the WordPress page. Page.js wraps them (.app-tiles / .app-tile). */
.b-col:has(> .app-tiles) { align-self: center; }
.content .app-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  padding: clamp(18px, 3vw, 30px); border-radius: 22px;
  border: 1px solid rgba(233, 246, 255, 0.2);
  background: rgba(233, 246, 255, 0.07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.content .app-tile { display: grid; justify-items: center; align-content: start; gap: 16px; padding: 14px 10px; border-radius: 16px; transition: background 0.2s; }
.content .app-tile:hover { background: rgba(0, 245, 255, 0.08); }
.content .app-tile > p { margin: 0; }
.content .app-tile img.b-icon { width: 84px; height: 84px; }
.content .app-tile h5 { margin: 0; font-size: 18px; }
.content .app-tile h5 a { text-decoration: none; white-space: nowrap; }
.content .app-tile h5 a::after {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 10px; vertical-align: 2px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg);
  opacity: 0.75; transition: transform 0.2s;
}
.content .app-tile:hover h5 a::after { transform: translateX(3px) rotate(45deg); }

/* ---------- A heading with a logo, set in a one-row table ----------
   Daniel, 2026-10-03, on "Spotify Import Tool" (/pakketten/): "dit is ook niet mooi".
   WordPress put the h3 and the Spotify logo in two table cells; here the grid lines go
   and the logo sits right beside the title. */
.content table:has(td > h3):has(img) { display: block; overflow: visible; margin: 1.6em 0 0.6em; }
.content table:has(td > h3):has(img) tbody { display: block; }
.content table:has(td > h3):has(img) tr { display: flex; align-items: center; gap: 14px; }
.content table:has(td > h3):has(img) td { border: 0; padding: 0; }
.content table:has(td > h3):has(img) h3 { margin: 0; color: var(--text); }
.content table:has(td > h3):has(img) img { display: block; width: 40px; height: 40px; }

/* ---------- Review row: no scrollbar, arrow buttons ----------
   Daniel, 2026-10-03: "scroll bar moet weg". The row still scrolls (swipe, trackpad);
   site.js wraps it and adds the two arrows. On phones the arrows stay away: swiping is
   the natural way there and the arrows would cover the cards. */
.b-reviews { scrollbar-width: none; -ms-overflow-style: none; }
.b-reviews::-webkit-scrollbar { display: none; }
.b-reviews-wrap { position: relative; }
.b-reviews-arrow {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; margin-top: -22px;
  border-radius: 50%; cursor: pointer; display: grid; place-items: center;
  background: rgba(5, 24, 31, 0.85); border: 1px solid rgba(0, 245, 255, 0.45);
  box-shadow: 0 0 10px rgba(0, 245, 255, 0.25); color: var(--text);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: box-shadow 0.15s, border-color 0.15s, opacity 0.15s;
}
.b-reviews-arrow::before {
  content: ""; width: 10px; height: 10px; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}
.b-reviews-prev { left: -22px; }
.b-reviews-prev::before { transform: translateX(2px) rotate(-135deg); }
.b-reviews-next { right: -22px; }
.b-reviews-next::before { transform: translateX(-2px) rotate(45deg); }
.b-reviews-arrow:hover { border-color: var(--cyan); box-shadow: 0 0 18px rgba(0, 245, 255, 0.6); }
.b-reviews-arrow:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.b-reviews-arrow:disabled { opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .b-reviews-arrow { display: none; } }

/* ---------- App card (Remote / Request app pages) ----------
   Replaces the screenshot of a download page: the app's icon, its name and the two
   official store badges on a frosted card, like the app tiles on the home page. */
.content .app-card {
  display: grid; justify-items: center; gap: 14px; text-align: center;
  padding: clamp(24px, 4vw, 40px) clamp(16px, 3vw, 32px); border-radius: 24px;
  border: 1px solid rgba(233, 246, 255, 0.2);
  background: rgba(233, 246, 255, 0.07);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.content .app-card-icon { width: 120px; height: 120px; border-radius: 27px; box-shadow: 0 0 34px rgba(0, 245, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.45); }
.content .app-card-name { margin: 6px 0 0; font-size: 24px; font-weight: 800; color: var(--text); }
.content .app-card-stores { margin: 6px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.content .app-card-stores a { display: block; text-decoration: none; border-radius: 9px; transition: transform 0.15s, box-shadow 0.15s; }
.content .app-card-stores a:hover { transform: translateY(-2px); box-shadow: 0 0 18px rgba(0, 245, 255, 0.45); }
.content .app-card-stores img { display: block; height: 48px; width: auto; }

/* ---------- KVK suggestions under "Bedrijfsnaam" (site.js 2b) ---------- */
.lead-form .field { position: relative; }
.kvk-list {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin: 6px 0 0; padding: 4px; list-style: none;
  max-height: 260px; overflow-y: auto; border-radius: 12px;
  background: #061a21; border: 1px solid rgba(0, 245, 255, 0.35);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 245, 255, 0.15);
}
.kvk-list [role="option"] { display: grid; gap: 1px; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.kvk-list [role="option"]:hover, .kvk-list [role="option"][aria-selected="true"] { background: rgba(0, 245, 255, 0.12); }
.kvk-name { color: var(--text); font-weight: 600; font-size: 15px; }
.kvk-city { color: var(--text-dim); font-size: 13px; }
.kvk-empty { padding: 10px 12px; color: var(--text-dim); font-size: 14px; line-height: 1.45; }
.kvk-confirmed { margin: 6px 0 0; font-size: 13px; color: #6ee7a8; }
.lead-form .field.is-loading::after {
  content: ""; position: absolute; right: 14px; bottom: 15px; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(0, 245, 255, 0.25); border-top-color: var(--cyan); animation: kvk-spin 0.8s linear infinite;
}
@keyframes kvk-spin { to { transform: rotate(360deg); } }

/* The company field is type="search" so Chrome does not offer a saved company name on
   click (see ContactSection.js); here it looks and behaves like the other fields. */
.field input[type="search"] { -webkit-appearance: none; appearance: none; }
.field input[type="search"]::-webkit-search-cancel-button,
.field input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; display: none; }

/* ---------- NL | EN switch in the top bar ---------- */
.lang-switch { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid rgba(0, 245, 255, 0.35); }
.lang-switch a { padding: 1px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-dim); text-decoration: none; }
.lang-switch a[aria-current="true"] { color: var(--text); background: rgba(0, 245, 255, 0.16); }
.lang-switch a:hover { color: #ffffff; }
/* From the width where the menu button appears, the switch sits beside it instead. */
.lang-switch-nav { display: none; }
@media (max-width: 1080px) {
  .topbar .lang-switch { display: none; }
  .lang-switch-nav { display: inline-flex; margin-right: 10px; }
  .lang-switch-nav a { padding: 6px 11px; font-size: 13px; }
}
.nav-burger { flex: none; }