/* Optie B: compactere onderkant. Laadt na style.css en geldt alleen voor index-b.html */

/* Diensten als strakke prijslijst in twee kolommen */
.b-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px 40px; }
.b-head h2 { margin: 0; }
.b-head .lead { margin: 0; max-width: 24em; font-size: .95rem; }
.b-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; }
.b-list a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; padding: 16px 10px; margin: 0 -10px; border-bottom: 1px solid var(--line); border-radius: 12px; text-decoration: none; transition: background .25s; }
.b-list a:hover { background: var(--bg-2); }
.b-list h3 { margin: 0; font-size: 1rem; }
.b-txt span { display: block; color: var(--muted); font-size: .88rem; line-height: 1.45; }
.b-price { text-align: right; font: 500 1.1rem/1.1 "Syne", sans-serif; white-space: nowrap; transition: transform .25s; }
.b-price small { display: block; font: 400 .74rem/1.4 "Manrope", sans-serif; color: var(--muted); }
.b-list a:hover .b-price { transform: translateX(-4px); }
.b-list .ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--c) 22%, #fff); color: color-mix(in srgb, var(--c) 65%, #0b1f3a); }
.b-list .ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.b-list li:nth-child(1) { --c: #1d5bd8; }
.b-list li:nth-child(2) { --c: #2bb48a; }
.b-list li:nth-child(3) { --c: #ff6b1a; }
.b-list li:nth-child(4) { --c: #7fadf5; }
.b-list li:nth-child(5) { --c: #8be8c4; }
.b-list li:nth-child(6) { --c: #12335f; }
.b-list li:nth-child(7) { --c: #ffa877; }
.b-list li:nth-child(8) { --c: #5b7fc7; }
.b-list li:nth-child(9) { --c: #ff6b1a; grid-column: 1 / -1; }
.b-list li:nth-child(9) .b-price { font: 600 .9rem "Manrope", sans-serif; color: var(--accent); }

/* Meest gekozen start: één donkere band, links uitleg, rechts de twee onderdelen */
.b-start { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: center; }
.b-start-intro .eyebrow { color: #8fb6ff; }
.b-start-intro p:not(.eyebrow) { color: #c4d4ec; }
.b-note { font-size: .82rem; color: #8ea3c2 !important; }
.b-start-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.b-tile { background: #fff; color: var(--dark); border-radius: 18px; padding: 24px; }
.b-tile p:last-child { margin: 0; font-size: .88rem; color: #4a5d75; line-height: 1.5; }
.b-big { margin: 6px 0 12px; font: 500 2rem/1 "Syne", sans-serif; letter-spacing: -.03em; }
.b-big small { font: 500 .85rem "Manrope", sans-serif; letter-spacing: 0; color: #4a5d75; }
.b-row { grid-column: 1 / -1; margin: 0; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); font-size: .9rem; color: #c4d4ec; }
.b-row strong { color: #fff; font-weight: 600; margin-right: 6px; }
.b-row .pkg-tag { display: inline-block; margin-right: 8px; padding: 2px 10px; font-size: .7rem; }

/* Waarom + Zo werkt het samen in één sectie */
.b-why { background: var(--c-lilac); color: var(--dark); max-width: none; }
.b-why-inner { max-width: 1020px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
.b-why .sign { color: var(--dark); }
.b-flow-card { background: #fff; border-radius: 20px; padding: 28px 28px 16px; box-shadow: 0 24px 48px -32px rgba(11,31,58,.4); }
.b-sub { margin: 0 0 8px; font: 600 .78rem "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .12em; color: #1d5bd8; }
.b-flow { list-style: none; padding: 0; margin: 0; }
.b-flow li { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 12px 0; font-size: .9rem; color: #4a5d75; line-height: 1.5; }
.b-flow strong { display: block; color: var(--dark); font-weight: 600; font-size: .98rem; }
.b-flow span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #1d5bd8; color: #1d5bd8; font: 500 1rem "Syne", sans-serif; background: #fff; position: relative; z-index: 1; }
.b-flow li:last-child span { background: var(--alarm); border-color: var(--alarm); color: var(--dark); }
.b-flow li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 48px; bottom: -12px; border-left: 1.5px dashed #a8c8ff; }

/* Vragen in twee kolommen */
.faq { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }

/* Compact formulier in een raster */
.b-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.b-form > div { display: flex; flex-direction: column; }
.b-form label { margin: 0 0 6px; }
.b-wide { grid-column: 1 / -1; }
.b-send { flex-direction: row !important; align-items: center; gap: 16px; flex-wrap: wrap; }
.b-form .btn { margin-top: 4px; }
.b-form .form-msg { margin: 0; }

@media (max-width: 860px) {
  .b-start, .b-why-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .b-list, .faq { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .b-start-cards, .b-form { grid-template-columns: 1fr; }
  .b-list a { grid-template-columns: auto 1fr; }
  .b-price { grid-column: 2; text-align: left; }
  .b-price small { display: inline; margin-right: 4px; }
  .b-price small:last-child:not(:first-child) { margin: 0 0 0 6px; }
}

/* "Iets anders?" als één doorlopende, licht oranje balk */
.b-list li:nth-child(9) { margin-top: 16px; }
.b-list li:nth-child(9) a { margin: 0; padding: 16px 20px; border: 0; background: color-mix(in srgb, var(--alarm) 10%, var(--bg)); }
.b-list li:nth-child(9) a:hover { background: color-mix(in srgb, var(--alarm) 16%, var(--bg)); }
.b-list li:nth-child(9) .ico { background: var(--alarm); color: var(--dark); }

/* Contact: bellen centraal in een donkere kaart, formulier klein en rustig ernaast */
#contact { gap: 32px; align-items: stretch; }
@media (min-width: 861px) { #contact { grid-template-columns: 2fr 1fr; } #contact .b-form { grid-template-columns: 1fr; } #contact .b-form > div { grid-column: auto; } }
.b-call { display: flex; flex-direction: column; justify-content: center; background: var(--deep); color: #fff; border-radius: 22px; padding: clamp(32px, 5vw, 56px); }
.b-call h2 { color: #fff; font-size: clamp(2.1rem, 4vw, 3rem); }
.b-call .lead { color: #c4d4ec; }
.b-phone { display: block; margin: 20px 0 24px; font: 500 clamp(1.9rem, 3.8vw, 2.7rem)/1 "Syne", sans-serif; letter-spacing: -.02em; color: #fff; text-decoration: none; transition: color .2s; }
.b-phone:hover { color: var(--alarm); }
.b-call-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.b-call .btn:hover { background: #fff; color: var(--dark); }

#contact .b-form { background: transparent; color: var(--ink); padding: 24px; border: 1px solid var(--line); border-radius: 18px; gap: 10px; }
.b-form-title { margin: 0 0 4px; font-size: .9rem; color: var(--muted); }
#contact .b-form label { font-size: .82rem; font-weight: 500; margin-bottom: 4px; }
#contact .b-form .opt { color: var(--muted); opacity: 1; }
#contact .b-form input, #contact .b-form select, #contact .b-form textarea { padding: .5em .75em; font-size: .9rem; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; }
#contact .b-form input:focus, #contact .b-form select:focus, #contact .b-form textarea:focus { border-color: var(--accent); }
#contact .b-form .btn { margin: 4px 0 0; padding: .5em 1.1em; font-size: .9rem; background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
#contact .b-form .btn:hover { background: var(--ink); color: var(--bg); }
#contact .form-msg { font-size: .88rem; }

/* Belkaart in lichtblauw met donkere tekst */
.b-call { background: var(--c-yellow); color: var(--dark); }
.b-call h2, .b-phone { color: var(--dark); }
.b-call .lead { color: #2c4466; }
.b-phone:hover { color: #1d5bd8; }