/* De belband: "Laat Emma u nu bellen".
 *
 * Staat sinds 17 september 2026 in een eigen bestand, want deze band staat niet meer alleen op de homepage maar ook op
 * elke branchepagina. De opmaak twee keer overschrijven betekent dat ze uit elkaar gaan lopen zonder dat iemand het
 * merkt, en juist deze band is het enige wat een concurrent die alleen schrijft niet kan laten zien.
 *
 * Hoort bij /assets/js/bellen.js. De pagina brengt de markup mee; die staat in index.html als voorbeeld.
 */

/* DE BELBAND: de demonstratie staat meteen onder de hero, in het merkdonkergroen over de volle breedte. Dit is het
   enige wat een concurrent die alleen schrijft niet kan laten zien, dus het staat niet ergens halverwege de pagina. */
.belband { background: #0E3B2E; padding: 64px 0; margin: 0; }
@media (max-width: 700px) { .belband { padding: 40px 0; } }
.belband-inner { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .belband-inner { grid-template-columns: 1fr; gap: 22px; } }
.belband-emma { width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #0E3B2E; position: relative; }
.belband-emma::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(201, 169, 106, 0.4); }
.belband-emma img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 860px) { .belband-emma { width: 120px; } }
.belband-eyebrow {
  display: inline-block; font-size: 0.75rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: #E0C68C; background: rgba(201, 169, 106, 0.16); border: 1px solid rgba(201, 169, 106, 0.45);
  border-radius: var(--r-pill); padding: 5px 12px; margin-bottom: 14px;
}
.belband h2 { color: #FBFAF5; margin: 0 0 10px; }
.belband-lede { color: #BECAC0; font-size: 0.98rem; max-width: 68ch; margin: 0; }
/* De gouden knop hing aan de donkere fase in De stroom; hier staat hij op zijn eigen band en heeft hij zijn eigen regel. */
.belband .btn-gold { background: #C9A96A; color: #17201B; }
.belband .btn-gold:hover { background: #D6B87C; }
.belband .btn:focus-visible { outline-color: #C9A96A; }

/* LAAT EMMA U NU BELLEN: de demonstratie die je niet kunt lezen. De bezoeker vult zijn eigen mobiele nummer in en
   zijn telefoon gaat binnen enkele seconden. De teller eronder telt echt mee en toont daarna wat het werkelijk was;
   wij zetten er dus geen belofte neer die wij niet halen. */
.bel-demo { margin-top: 26px; }
.bel-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
@media (max-width: 780px) { .bel-velden { grid-template-columns: 1fr; } }
.bel-veld { display: flex; flex-direction: column; gap: 6px; }
.bel-veld label { font-size: 0.8rem; color: #BECAC0; }
.bel-hint { font-size: 0.78rem; color: #93A79B; margin: 0; }
.bel-demo input[type="text"], .bel-demo input[type="tel"], .bel-demo input[type="email"] {
  font: inherit; font-size: 0.95rem; color: #F2EFE6; background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(201, 169, 106, 0.35); border-radius: var(--r-s); padding: 11px 13px; width: 100%;
  -webkit-appearance: none; appearance: none;
}
.bel-demo input::placeholder { color: #7C9186; }
.bel-demo input:focus-visible { outline: 2px solid #C9A96A; outline-offset: 1px; border-color: transparent; }
.bel-pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bel-akkoord { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font-size: 0.85rem; color: #BECAC0; }
.bel-akkoord input { margin-top: 2px; width: 16px; height: 16px; accent-color: #C9A96A; flex: none; }
.bel-actie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 18px; }
.bel-demo .btn-gold { margin-top: 0; }
.bel-demo .btn[disabled] { opacity: 0.55; cursor: default; }
.bel-klein { font-size: 0.78rem; color: #93A79B; margin: 14px 0 0; max-width: 70ch; }
.bel-klein a { color: #C9A96A; }
.bel-stand { margin: 16px 0 0; font-size: 0.92rem; color: #F2EFE6; min-height: 1.4em; }
.bel-stand.mis { color: #E9C08A; }
.bel-teller { font-variant-numeric: tabular-nums; color: #C9A96A; font-weight: 600; }
/* Een rustige puls zolang haar telefoontje onderweg is; hij stopt zodra er iets te melden valt. */
.bel-puls { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #C9A96A; margin-right: 8px; animation: belPuls 1.4s ease-in-out infinite; }
@keyframes belPuls { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bel-puls { animation: none; opacity: 1; } }