/* ===========================================================================
   BotLease — ontwerpsysteem "Podium"                              28-10-2026
   ===========================================================================
   Waarom dit bestaat: 480 bezoekers in zestig dagen, zes aanvragen. De site
   vertelde veel en liet weinig zien. Het formulier stond op 80% van de hoogte,
   de helft haalde de helft niet, en op een telefoon liep de kop uit beeld.

   Twee materialen:
     PODIUM  bijna-zwart. Hier staan de robots, op hun echte foto's (die zijn
             op zwart geschoten, dus hier zweven ze echt). Hero, robotkaarten.
     PAPIER  warm gebroken wit. Hier staat alles wat je leest en invult.
   Eén signaalkleur: amber, de kleur van een podiumlamp. Hij staat op precies
   één ding per scherm: de knop die naar het formulier leidt.

   Regels die hard in dit bestand zitten:
     - Het formulier staat in de hero, drie velden, en is op elke kernpagina
       hetzelfde (data-bl-form). Wie landt, kan binnen één scherm aanvragen.
     - Geen scroll-reveal. Inhoud is er meteen. Alleen een knop reageert op
       een druk (scale .97, 140ms) en het menu schuift in (200ms, ease-out).
     - Invoervelden 16px, anders zoomt iOS het scherm in bij focus.
     - Oude pagina's laden dit bestand als laatste; de selectors hieronder
       winnen daarom van de inline-stijlen van september (nav.bl-nav, footer.bl-foot).
   =========================================================================== */

:root {
  --stage:        #0c0c0f;
  --stage-2:      #17171c;
  --stage-3:      #232329;
  --stage-line:   rgba(255,255,255,.10);
  --on-stage:     #f5f3ed;
  --on-stage-2:   #b8b6ae;
  --on-stage-3:   #85837c;

  --paper:        #f7f5f0;
  --paper-2:      #eeece5;
  --card:         #ffffff;
  --ink:          #131316;
  --ink-2:        #45454b;
  --ink-3:        #76767d;
  --line:         #dcd9d0;
  --line-2:       #c9c6bc;

  --signal:       #ffb224;
  --signal-2:     #ffc24d;
  --signal-ink:   #1b1200;

  --ok:           #2f9e5b;
  --err:          #d6453d;

  --sans:    'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage Grotesque', var(--sans);

  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --r: 12px;
  --r-lg: 20px;
  --pill: 999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow-card: 0 1px 2px rgba(0,0,0,.06), 0 12px 40px -12px rgba(0,0,0,.25);
}

/* ------------------------------------------------------------- basis ------ */
.bl-page, .bl-page body { background: var(--paper); color: var(--ink); }
.bl-page body { margin: 0; font: 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.bl-page *, .bl-page *::before, .bl-page *::after { box-sizing: border-box; }
.bl-page img, .bl-page video { max-width: 100%; height: auto; display: block; }
.bl-page [id] { scroll-margin-top: 72px; }
.bl-page h1, .bl-page h2, .bl-page h3 { font-family: var(--display); margin: 0; color: inherit; }
.bl-page h1 { font-size: clamp(34px, 5.6vw, 62px); line-height: 1.02; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }
.bl-page h2 { font-size: clamp(27px, 3.4vw, 40px); line-height: 1.08; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.bl-page h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.01em; font-weight: 700; }
.bl-page p { margin: 0 0 1em; }
.bl-page a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bl-page a:hover { text-decoration-thickness: 2px; }
.bl-page a.btn, .bl-page a.nav-cta, .bl-page a.brand, .bl-page .bl-sticky a, .bl-page footer.bl-foot ul a { text-decoration: none; }
.bl-page .skip-to-main { position: fixed; top: 0; left: 0; transform: translateY(-150%); z-index: 200; background: var(--signal); color: var(--signal-ink); padding: 10px 16px; font-weight: 600; text-decoration: none; }
.bl-page .skip-to-main:focus { transform: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.sec { padding-block: clamp(48px, 8vw, 96px); }
.sec-tight { padding-block: clamp(32px, 5vw, 56px); }
.stage { background: var(--stage); color: var(--on-stage); }
.stage h1, .stage h2, .bl-hero h1, .bl-hero h2 { color: var(--on-stage); }
.paper-2 { background: var(--paper-2); }
.eyebrow { font: 600 12.5px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px; }
.stage .eyebrow, .bl-hero .eyebrow { color: var(--signal); }
.lede { font-size: clamp(17px, 2vw, 21px); line-height: 1.45; color: var(--ink-2); max-width: 54ch; }
.stage .lede, .bl-hero .lede { color: var(--on-stage-2); }
.muted { color: var(--ink-3); }
.stage .muted, .bl-hero .muted { color: var(--on-stage-3); }
.small { font-size: 14.5px; }
.sec-head { margin-bottom: clamp(24px, 4vw, 40px); max-width: 60ch; }
.sec-head p { margin-top: 12px; color: var(--ink-2); }
.stage .sec-head p { color: var(--on-stage-2); }

/* ------------------------------------------------------------- knoppen ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: var(--pill); font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; border: 1px solid transparent;
  background: var(--ink); color: #fff; white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 140ms ease; }
.btn:hover { background: #2a2a30; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn-signal { background: var(--signal); color: var(--signal-ink); }
.btn-signal:hover { background: var(--signal-2); }
.btn-ghost { background: transparent; color: inherit; border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(0,0,0,.04); }
.stage .btn-ghost { border-color: var(--stage-line); color: var(--on-stage); }
.stage .btn-ghost:hover { background: rgba(255,255,255,.06); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn-block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }
.tel { font-weight: 600; text-decoration: none; white-space: nowrap; }
.tel:hover { text-decoration: underline; }

/* ------------------------------------------------------------- navigatie -- */
nav.bl-nav { position: sticky; top: 0; z-index: 100; background: rgba(12,12,15,.92); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--stage-line); color: var(--on-stage); font-family: var(--sans); }
nav.bl-nav .bl-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
nav.bl-nav .brand { display: inline-flex; align-items: center; gap: 9px; font: 700 17px/1 var(--display); letter-spacing: -.01em; color: var(--on-stage); text-decoration: none; }
nav.bl-nav .brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--on-stage); color: var(--stage); display: grid; place-items: center; }
nav.bl-nav .brand-mark svg { width: 13px; height: 13px; stroke: currentColor; }
nav.bl-nav .nav-links { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
nav.bl-nav .nav-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 8px; color: var(--on-stage-2); font-size: 15px; font-weight: 500; text-decoration: none; transition: color 120ms ease, background-color 120ms ease; }
nav.bl-nav .nav-links a:hover, nav.bl-nav .nav-links a[aria-current="page"] { color: var(--on-stage); background: rgba(255,255,255,.07); }
nav.bl-nav .nav-right { display: flex; align-items: center; gap: 8px; }
nav.bl-nav .nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: var(--pill); background: var(--signal); color: var(--signal-ink); font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: transform 140ms var(--ease-out), background-color 140ms ease; }
nav.bl-nav .nav-cta:hover { background: var(--signal-2); }
nav.bl-nav .nav-cta:active { transform: scale(.97); }
nav.bl-nav .nav-lang { display: inline-flex; align-items: center; min-height: 40px; padding: 0 10px; border-radius: 8px; color: var(--on-stage-2); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-decoration: none; background: none; border: 0; cursor: pointer; font-family: var(--sans); }
nav.bl-nav .nav-lang:hover { color: var(--on-stage); }
nav.bl-nav .nav-burger { display: none; width: 44px; height: 44px; border: 0; background: none; color: var(--on-stage); cursor: pointer; border-radius: 8px; padding: 0; }
nav.bl-nav .nav-burger svg { width: 24px; height: 24px; display: block; margin: auto; }
nav.bl-nav .nav-burger .ic-close { display: none; }
nav.bl-nav.menu-open .nav-burger .ic-open { display: none; }
nav.bl-nav.menu-open .nav-burger .ic-close { display: block; }

@media (max-width: 920px) {
  nav.bl-nav .nav-burger { display: block; }
  nav.bl-nav .nav-links { position: fixed; inset: 60px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 12px 20px;
    background: var(--stage); border-bottom: 1px solid var(--stage-line); transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform 200ms var(--ease-out), opacity 160ms ease; }
  nav.bl-nav.menu-open .nav-links { transform: none; opacity: 1; pointer-events: auto; }
  nav.bl-nav .nav-links a { min-height: 50px; font-size: 17px; padding: 0 12px; border-radius: 10px; }
  nav.bl-nav .nav-cta { display: none; }
}

/* ------------------------------------------------------------- hero ------- */
.bl-hero { position: relative; overflow: hidden; background: var(--stage); color: var(--on-stage); }
.bl-hero .wrap { position: relative; z-index: 2; }
.bl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 440px); gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(40px, 7vw, 96px); }
.bl-hero-copy { min-width: 0; }
.bl-hero-copy h1 { margin: 0 0 18px; max-width: 14ch; }
.bl-hero-copy .lede { margin: 0 0 26px; }
.bl-hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 8px; padding: 0; list-style: none; font-size: 15px; color: var(--on-stage-2); }
.bl-hero-facts li { display: inline-flex; align-items: center; gap: 8px; }
.bl-hero-facts li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); flex: none; }
.bl-hero-price { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; color: var(--on-stage); margin: 18px 0 0; }
.bl-hero-price small { font: 500 15px/1.3 var(--sans); letter-spacing: 0; color: var(--on-stage-2); display: block; margin-top: 4px; }

/* Het podium: de robots op hun echte foto's, op schaal naast elkaar */
.bl-hero-stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.bl-hero-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--stage) 0%, rgba(12,12,15,.85) 38%, rgba(12,12,15,.35) 60%, rgba(12,12,15,.55) 100%), linear-gradient(0deg, var(--stage) 0%, transparent 30%); }
.bl-hero-stage img { position: absolute; bottom: 0; height: 92%; width: auto; max-width: none; object-fit: contain; object-position: bottom; }
.bl-hero-stage .r1 { right: 44%; height: 58%; opacity: .55; }
.bl-hero-stage .r2 { right: 26%; height: 86%; }
.bl-hero-stage .r3 { right: 4%; height: 70%; opacity: .7; }
.bl-hero-media { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--stage-2); aspect-ratio: 4 / 5; }
.bl-hero-media img, .bl-hero-media video { width: 100%; height: 100%; object-fit: cover; }
.bl-hero-media .bl-media-tag { position: absolute; left: 14px; bottom: 14px; padding: 6px 10px; border-radius: 6px; background: rgba(12,12,15,.72); color: var(--on-stage); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

@media (max-width: 920px) {
  .bl-hero-grid { grid-template-columns: 1fr; gap: 0; padding-block: 24px 32px; }
  .bl-hero-copy { display: contents; }
  .bl-hero-copy .eyebrow { order: 1; }
  .bl-hero-copy h1 { order: 2; max-width: none; margin-bottom: 10px; font-size: clamp(32px, 9.2vw, 44px); }
  .bl-hero-copy .bl-hero-price { order: 3; margin: 0 0 18px; font-size: 20px; }
  .bl-hero-grid > form { order: 4; }
  .bl-hero-copy .lede { order: 5; margin: 22px 0 14px; font-size: 16.5px; }
  .bl-hero-copy .bl-hero-facts { order: 6; }
  .bl-hero-stage { position: relative; inset: auto; height: 260px; margin: 0 calc(-1 * var(--gutter)) 8px; }
  .bl-hero-stage::after { background: linear-gradient(0deg, var(--stage) 0%, transparent 40%); }
  .bl-hero-stage .r1 { right: 62%; height: 62%; }
  .bl-hero-stage .r2 { right: 30%; height: 100%; }
  .bl-hero-stage .r3 { right: 2%; height: 80%; }
  .bl-hero-media { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------- formulier -- */
.bl-form { background: var(--card); color: var(--ink); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 28px); box-shadow: var(--shadow-card); border: 1px solid var(--line); }
.bl-form-head { margin: 0 0 16px; }
.bl-form-head h2, .bl-form-head .bl-form-title { font: 700 21px/1.2 var(--display); letter-spacing: -.015em; margin: 0 0 4px; color: var(--ink); }
.bl-form-head p { margin: 0; color: var(--ink-3); font-size: 14.5px; }
.bl-form .field { margin: 0 0 12px; }
.bl-form label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
.bl-form label small { font-weight: 400; color: var(--ink-3); }
.bl-form input, .bl-form select, .bl-form textarea { width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--line-2); border-radius: 10px;
  background: #fff; color: var(--ink); font: 400 16px/1.3 var(--sans); outline: none; transition: border-color 120ms ease, box-shadow 120ms ease; -webkit-appearance: none; appearance: none; }
.bl-form textarea { min-height: 84px; resize: vertical; }
.bl-form input::placeholder, .bl-form textarea::placeholder { color: #9b9ba3; }
.bl-form input:focus, .bl-form select:focus, .bl-form textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(19,19,22,.10); }
.bl-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bl-form .btn { margin-top: 4px; }
.bl-form .bl-form-note { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); text-align: center; line-height: 1.45; }
.bl-form .bl-form-note a { color: var(--ink); }
.bl-form .bl-form-error { color: var(--err); font-size: 14px; margin: 10px 0 0; text-align: center; }
.bl-form .bl-form-done { text-align: center; padding: 18px 0 6px; }
.bl-form .bl-form-done .ok { width: 52px; height: 52px; border-radius: 50%; background: rgba(47,158,91,.14); color: var(--ok); display: grid; place-items: center; margin: 0 auto 14px; }
.bl-form .bl-form-done .ok svg { width: 26px; height: 26px; }
.bl-form .bl-form-done h3 { margin-bottom: 6px; }
.bl-form .bl-form-done p { color: var(--ink-2); margin: 0; }
.bl-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.bl-form .bl-robot-chip { display: none; align-items: center; gap: 8px; margin: -4px 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--paper-2); font-size: 14px; color: var(--ink-2); }
.bl-form .bl-robot-chip.on { display: flex; }
.bl-form .bl-robot-chip b { color: var(--ink); }
.bl-form .bl-robot-chip button { margin-left: auto; background: none; border: 0; color: var(--ink-3); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
@media (max-width: 480px) { .bl-form .row2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- robots ----- */
.bl-robots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.bl-robot { position: relative; display: flex; flex-direction: column; background: var(--stage); color: var(--on-stage); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--stage-line); text-decoration: none; transition: transform 160ms var(--ease-out), border-color 160ms ease; }
@media (hover: hover) and (pointer: fine) { .bl-robot:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.22); } }
.bl-robot-photo { height: 250px; background: radial-gradient(60% 50% at 50% 100%, #26262d 0%, var(--stage) 70%); display: flex; align-items: flex-end; justify-content: center; padding: 18px 18px 0; overflow: hidden; }
.bl-robot-photo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; }
.bl-robot-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bl-robot-body h3 { font-size: 20px; color: var(--on-stage); }
.bl-robot-body .spec { font-size: 13.5px; color: var(--on-stage-3); }
.bl-robot-body p { font-size: 14.5px; line-height: 1.45; color: var(--on-stage-2); margin: 2px 0 10px; }
.bl-robot-foot { margin-top: auto; display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.bl-robot-price { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--on-stage); line-height: 1; }
.bl-robot-price small { display: block; font: 500 12.5px/1.3 var(--sans); letter-spacing: 0; color: var(--on-stage-3); margin-top: 4px; }
.bl-robot-pick { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 14px; border-radius: var(--pill); border: 1px solid rgba(255,255,255,.22); color: var(--on-stage); font: 600 14px/1 var(--sans); background: transparent; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 140ms ease; white-space: nowrap; }
.bl-robot-pick:hover { background: rgba(255,255,255,.08); }
.bl-robot-pick:active { transform: scale(.97); }
.bl-robot .badge { position: absolute; top: 12px; left: 12px; padding: 5px 9px; border-radius: 6px; background: var(--signal); color: var(--signal-ink); font: 700 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }

/* ------------------------------------------------------------- stappen ---- */
.bl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: stap; margin: 0; padding: 0; list-style: none; }
.bl-steps li { position: relative; padding: 22px 22px 22px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); counter-increment: stap; }
.bl-steps li::before { content: counter(stap, decimal-leading-zero); font: 800 13px/1 var(--display); letter-spacing: .04em; color: var(--ink-3); display: block; margin-bottom: 14px; }
.bl-steps h3 { margin-bottom: 6px; }
.bl-steps p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 760px) { .bl-steps { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- wel / niet - */
.bl-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.bl-split > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; }
.bl-split h3 { margin-bottom: 12px; }
.bl-split ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.bl-split li { position: relative; padding-left: 26px; font-size: 15.5px; color: var(--ink-2); line-height: 1.45; }
.bl-split li::before { position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.bl-split .ja li::before { content: "✓"; background: rgba(47,158,91,.14); color: var(--ok); }
.bl-split .nee li::before { content: "×"; background: rgba(214,69,61,.12); color: var(--err); }
@media (max-width: 760px) { .bl-split { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- feiten ----- */
.bl-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.bl-facts > div { padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.bl-facts .k { font-family: var(--display); font-weight: 800; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.025em; line-height: 1; margin-bottom: 8px; }
.bl-facts p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.4; }
@media (max-width: 880px) { .bl-facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .bl-facts { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- FAQ -------- */
.bl-faq { max-width: 760px; }
.bl-faq details { border-top: 1px solid var(--line); }
.bl-faq details:last-child { border-bottom: 1px solid var(--line); }
.bl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 600 17px/1.3 var(--sans); color: var(--ink); }
.bl-faq summary::-webkit-details-marker { display: none; }
.bl-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; font-weight: 500; color: var(--ink-3); transition: transform 160ms var(--ease-out); }
.bl-faq details[open] summary::after { transform: rotate(45deg); }
.bl-faq .a { padding: 0 0 18px; color: var(--ink-2); font-size: 15.5px; max-width: 64ch; }
.bl-faq .a p:last-child { margin: 0; }

/* ------------------------------------------------------------- stroken ---- */
.bl-band { background: var(--stage); color: var(--on-stage); }
.bl-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding-block: clamp(32px, 5vw, 56px); }
.bl-band h2 { font-size: clamp(24px, 3vw, 34px); max-width: 22ch; }
.bl-band p { margin: 8px 0 0; color: var(--on-stage-2); max-width: 52ch; }
.bl-band .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.bl-band .tel { color: var(--on-stage); }
.bl-aside { display: grid; grid-template-columns: 1fr auto; gap: 16px 28px; align-items: center; padding: 22px 26px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); }
.bl-aside h3 { margin-bottom: 4px; }
.bl-aside p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 640px) { .bl-aside { grid-template-columns: 1fr; } }

/* Oude pagina's: de conversiestrook die de schil erin zet, boven de footer */
.bl-cta-strip { background: var(--stage); color: var(--on-stage); font-family: var(--sans); }
.bl-cta-strip .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding-block: 36px; }
.bl-cta-strip h2 { font: 700 clamp(22px, 2.8vw, 30px)/1.1 var(--display); letter-spacing: -.02em; color: var(--on-stage); margin: 0 0 6px; }
.bl-cta-strip p { margin: 0; color: var(--on-stage-2); font-size: 15.5px; max-width: 54ch; }
.bl-cta-strip .acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.bl-cta-strip .tel { color: var(--on-stage); }

/* ------------------------------------------------------------- footer ----- */
footer.bl-foot { background: var(--stage); color: var(--on-stage-2); font-family: var(--sans); border-top: 1px solid var(--stage-line); }
footer.bl-foot .bl-foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; padding-block: 48px 32px; }
footer.bl-foot .brand { display: inline-flex; align-items: center; gap: 9px; font: 700 17px/1 var(--display); color: var(--on-stage); text-decoration: none; margin-bottom: 12px; }
footer.bl-foot .brand-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--on-stage); color: var(--stage); display: grid; place-items: center; }
footer.bl-foot .brand-mark svg { width: 13px; height: 13px; stroke: currentColor; }
footer.bl-foot p { font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; max-width: 32ch; }
footer.bl-foot .foot-h { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-stage-3); margin: 0 0 12px; }
footer.bl-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
footer.bl-foot ul a { color: var(--on-stage-2); text-decoration: none; font-size: 14.5px; }
footer.bl-foot ul a:hover { color: var(--on-stage); text-decoration: underline; }
footer.bl-foot .bl-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; padding-block: 18px 26px; border-top: 1px solid var(--stage-line); font-size: 13px; color: var(--on-stage-3); }
footer.bl-foot .bl-foot-bottom a { color: inherit; text-decoration: none; }
footer.bl-foot .bl-foot-bottom a:hover { text-decoration: underline; }
footer.bl-foot .tel { color: var(--on-stage); }
@media (max-width: 880px) { footer.bl-foot .bl-foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { footer.bl-foot .bl-foot-grid { grid-template-columns: 1fr; gap: 22px; } }

/* ------------------------------------------------------------- mobiel ----- */
/* Vaste actiebalk onder 780px: bellen en de datum checken. Overschrijft conversie.css. */
nav.bl-sticky { display: none; }
@media (max-width: 780px) {
  nav.bl-sticky { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(12,12,15,.94); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-top: 1px solid var(--stage-line); }
  nav.bl-sticky a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border-radius: var(--pill); font: 600 15px/1 var(--sans); text-decoration: none; color: var(--on-stage); background: transparent; border: 1px solid rgba(255,255,255,.22); transition: transform 140ms var(--ease-out); }
  nav.bl-sticky a.primair { background: var(--signal); color: var(--signal-ink); border-color: var(--signal); }
  nav.bl-sticky a:active { transform: scale(.97); }
  nav.bl-sticky { transition: transform 200ms var(--ease-out); }
  body.bl-form-in-beeld nav.bl-sticky { transform: translateY(110%); }
  nav.bl-sticky svg { width: 16px; height: 16px; flex: none; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------- toegang ---- */
.bl-page :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .bl-page *, .bl-page *::before, .bl-page *::after { transition-duration: 0ms !important; animation: none !important; }
}
@media print { nav.bl-nav, nav.bl-sticky, footer.bl-foot, .bl-cta-strip { display: none !important; } }

/* ------------------------------------------------------------- opstelling - */
/* Zeven robots op schaal naast elkaar, onderaan de hero. --cm is de hoogte in cm;
   de schaal (px per cm) verschilt per scherm. De knop is de hele figuur. */
.bl-lineup-wrap { --pxcm: 1.7; position: relative; padding: 8px 0 0; }
.bl-lineup-kop { margin: 0 0 6px; font-size: 13.5px; color: var(--on-stage-3); }
.bl-lineup { display: flex; align-items: flex-end; justify-content: center; gap: clamp(10px, 2.2vw, 34px); padding: 0 var(--gutter); min-height: calc(180px * var(--pxcm) + 44px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bl-lineup::-webkit-scrollbar { display: none; }
.bl-lu { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0; background: none; border: 0; padding: 0 2px 44px; cursor: pointer; color: var(--on-stage-2); font-family: var(--sans); position: relative; transition: transform 180ms var(--ease-out); }
.bl-lu img { height: calc(var(--cm) * var(--pxcm) * 1px); width: auto; max-width: none; object-fit: contain; object-position: bottom; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); transition: transform 180ms var(--ease-out); }
.bl-lu-blend img { mix-blend-mode: screen; filter: none; }
@media (hover: hover) and (pointer: fine) { .bl-lu:hover img { transform: translateY(-4px); } .bl-lu:hover .bl-lu-naam { color: var(--signal); } }
.bl-lu:active img { transform: scale(.98); }
.bl-lu-naam { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13.5px; font-weight: 600; color: var(--on-stage); transition: color 120ms ease; }
.bl-lu-maat { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--on-stage-3); font-variant-numeric: tabular-nums; }
.bl-lineup-vloer { height: 1px; background: linear-gradient(90deg, transparent, var(--stage-line) 20%, var(--stage-line) 80%, transparent); margin: 0 0 28px; }
.bl-robot-photo.bl-blend { background: #000; }
.bl-robot-photo.bl-blend img { mix-blend-mode: screen; }
@media (max-width: 920px) {
  .bl-lineup-wrap { --pxcm: 1.25; }
  .bl-lineup { justify-content: flex-start; gap: 18px; }
  .bl-lineup-kop { padding-right: var(--gutter); }
}
@media (max-width: 480px) { .bl-lineup-wrap { --pxcm: 1.05; } }

/* ---- telefoonformaat: kaarten twee naast elkaar, opstelling met ruimte voor de namen (staat achteraan zodat hij wint) ---- */
@media (max-width: 600px) {
  .bl-robots { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bl-robot-photo { height: 180px; padding: 12px 12px 0; }
  .bl-robot-body { padding: 12px 12px 14px; }
  .bl-robot-body h3 { font-size: 17px; }
  .bl-robot-body p { display: none; }
  .bl-robot-foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .bl-robot-price { font-size: 19px; }
  .bl-robot .badge { font-size: 10.5px; }
}
@media (max-width: 920px) {
  .bl-lu { min-width: 96px; }
  .bl-lu-naam { font-size: 12.5px; }
  .bl-lu-maat { font-size: 11.5px; }
}

/* ---- schil op de oude pagina's (nav, voet, strook): hun inline-CSS lekt via elementselectors, dit zet het recht ---- */
section.bl-cta-strip { padding: 0; margin: 0; border: 0; line-height: 1.5; }
footer.bl-foot { padding: 0; margin: 0; font-size: 15px; line-height: 1.5; text-align: left; }
footer.bl-foot a { color: var(--on-stage-2); }
footer.bl-foot a:hover { color: var(--on-stage); }
nav.bl-nav .brand-mark svg path, footer.bl-foot .brand-mark svg path { stroke: currentColor; }
nav.bl-nav .nav-links a { border: 0; }
nav.bl-nav .nav-links li { margin: 0; max-width: none; }

/* ---- de mens in de opstelling: 1,75 m als maatstaf, geen knop ---- */
.bl-lu-mens { cursor: default; }
.bl-lu-mens svg { height: calc(var(--cm) * var(--pxcm) * 1px); width: auto; fill: var(--on-stage-3); opacity: .7; display: block; transform: scaleX(.8); }
.bl-lu-mens .bl-lu-naam { color: var(--on-stage-2); }