[data-toestel] { container-type: inline-size; justify-self: stretch; width: 100%; }
[data-toestel="ai"], [data-toestel="melding"], [data-toestel="bellen"] { display: grid; justify-items: center; gap: 16px; }
/* Toestellen en voorbeelden voor 43: een iPhone, een browservenster en de vier proefjes erin.
   Kleuren via de pagina: --t-accent, --t-zacht, --t-rand, --t-vel. */
.iphone { position: relative; width: min(300px, 76vw, calc((100dvh - 230px) * 9 / 19.5)); min-width: 250px; aspect-ratio: 9 / 19.5; border-radius: 17% / 7.8%; background: #1C1C1E; padding: 3.6%;
  box-shadow: inset 0 0 0 2px #48484A, inset 0 0 0 5px #2C2C2E, 0 60px 90px -50px rgba(17,17,19,.55), 0 0 0 1px rgba(0,0,0,.08); }
/* Zijknoppen */
.iphone::before, .iphone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #3A3A3C; }
.iphone::before { left: -3px; top: 20%; height: 7%; box-shadow: 0 9vh 0 #3A3A3C; }
.iphone::after { right: -3px; top: 27%; height: 11%; }
.ischerm { position: relative; height: 100%; border-radius: 13.5% / 6.3%; overflow: hidden; background: #F2F2F7; color: #111; display: flex; flex-direction: column; font-family: -apple-system, "SF Pro Text", "Archivo", sans-serif; }
.eiland { position: absolute; top: 1.6%; left: 50%; translate: -50% 0; width: 33%; height: 3.9%; background: #000; border-radius: 99px; z-index: 5; }
.status { display: flex; justify-content: space-between; align-items: center; padding: 4.4% 9% 0; height: 7.5%; font-size: 13px; font-weight: 600; flex: none; z-index: 4; }
.status i { display: inline-flex; gap: 4px; align-items: center; }
.status .net { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; }
.status .net b { width: 3px; background: currentColor; border-radius: 1px; }
.status .net b:nth-child(1) { height: 4px; } .status .net b:nth-child(2) { height: 6px; } .status .net b:nth-child(3) { height: 8px; } .status .net b:nth-child(4) { height: 10px; }
.status .accu { width: 22px; height: 11px; border: 1.5px solid currentColor; border-radius: 3.5px; padding: 1px; opacity: .9; }
.status .accu::before { content: ""; display: block; width: 75%; height: 100%; background: currentColor; border-radius: 1.5px; }
.thuis { position: absolute; bottom: 1.4%; left: 50%; translate: -50% 0; width: 36%; height: 5px; border-radius: 99px; background: #111; opacity: .85; z-index: 5; }
.voorbeeld-label { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 99px; background: var(--t-rand, #e5e5ea); color: var(--t-zacht, #666); }

/* AI-assistent in de iPhone */
.ai-kop { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; border-bottom: 1px solid #E5E5EA; background: rgba(242,242,247,.92); flex: none; }
.ai-kop .foto { width: 34px; height: 34px; border-radius: 50%; background: var(--t-accent, #2B3BFF); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.ai-kop b { display: block; font-size: 14px; line-height: 1.2; }
.ai-kop span { font-size: 12px; color: #34C759; }
.ai-lijst { flex: 1; overflow-y: auto; padding: 12px 12px 6px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
.ai-bel { max-width: 82%; padding: 8px 12px; border-radius: 18px; font-size: 14px; line-height: 1.35; animation: tIn .35s cubic-bezier(.16, 1, .3, 1); }
.ai-bel--ai { background: #E5E5EA; align-self: flex-start; border-bottom-left-radius: 5px; }
.ai-bel--jij { background: var(--t-accent, #2B3BFF); color: #fff; align-self: flex-end; border-bottom-right-radius: 5px; }
.ai-bel--typt { display: flex; gap: 4px; padding: 12px 14px; }
.ai-bel--typt i { width: 7px; height: 7px; border-radius: 50%; background: #8E8E93; animation: tStip 1s infinite; }
.ai-bel--typt i:nth-child(2) { animation-delay: .15s; } .ai-bel--typt i:nth-child(3) { animation-delay: .3s; }
.ai-keuzes { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 30px; min-height: 92px; align-content: flex-start; flex: none; }
.ai-keuzes button { border: 1px solid var(--t-accent, #2B3BFF); color: var(--t-accent, #2B3BFF); background: #fff; border-radius: 99px; padding: 6px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.ai-keuzes button:hover { background: var(--t-accent, #2B3BFF); color: #fff; }
@keyframes tIn { from { opacity: 0; transform: translateY(6px); } }
@keyframes tStip { 50% { opacity: .3; transform: translateY(-2px); } }
.wissel { display: inline-flex; gap: 4px; padding: 4px; border-radius: 99px; background: var(--t-vel, #fff); border: 1px solid var(--t-rand, #ddd); }
.wissel button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; padding: 7px 14px; border-radius: 99px; cursor: pointer; color: var(--t-zacht, #666); }
.wissel button[aria-pressed="true"] { background: #111113; color: #fff; }

/* Automatisering: vergrendelscherm met meldingen */
.vergrendeld { background: linear-gradient(165deg, #3B4A8C, #1C2140 55%, #121426); color: #fff; }
.vergrendeld .status { color: #fff; }
.klok { text-align: center; margin-top: 6%; flex: none; }
.klok small { display: block; font-size: 14px; font-weight: 600; opacity: .85; }
.klok b { display: block; font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.meldingen { display: grid; gap: 8px; padding: 8% 10px 0; }
.melding { text-align: left; width: 100%; border: 0; font: inherit; color: #111; background: rgba(255,255,255,.82); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 18px; padding: 10px 12px; display: grid; grid-template-columns: 30px 1fr; gap: 2px 10px; animation: tMeld .5s cubic-bezier(.16, 1, .3, 1); }
button.melding { cursor: pointer; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: tMeld .5s cubic-bezier(.16, 1, .3, 1), tPuls 1.6s 1s infinite; }
.melding .app { grid-row: span 2; width: 30px; height: 30px; border-radius: 8px; background: var(--t-accent, #2B3BFF); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 800; }
.melding .app--groen { background: #34C759; }
.melding b { font-size: 13px; display: flex; justify-content: space-between; }
.melding b em { font-style: normal; font-weight: 400; color: #6B6B70; }
.melding span { font-size: 13px; line-height: 1.3; }
@keyframes tMeld { from { opacity: 0; transform: translateY(-14px) scale(.96); } }
@keyframes tPuls { 50% { box-shadow: 0 0 0 6px rgba(255,255,255,.18); } }
.concept { flex: 1; background: #fff; color: #111; padding: 4% 16px 34px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; animation: tIn .4s cubic-bezier(.16, 1, .3, 1); }
.concept .regel { color: #6B6B70; border-bottom: 1px solid #E5E5EA; padding-bottom: 6px; }
.concept .regel b { color: #111; font-weight: 600; }
.concept p { line-height: 1.45; }
.concept .verstuur { align-self: flex-start; margin-top: auto; border: 0; background: var(--t-accent, #2B3BFF); color: #fff; font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 99px; cursor: pointer; }
.concept ul { display: grid; gap: 8px; }
.concept li { display: flex; gap: 8px; align-items: flex-start; animation: tIn .4s both cubic-bezier(.16, 1, .3, 1); }
.concept li:nth-child(2) { animation-delay: .25s; } .concept li:nth-child(3) { animation-delay: .5s; }
.concept li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #34C759 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.5l2.5 2.5L13 6.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.concept .gelukt { font-weight: 700; font-size: 18px; }

/* Browservenster */
.venster { background: var(--t-vel, #fff); border: 1px solid var(--t-rand, #ddd); border-radius: 14px; overflow: hidden; box-shadow: 0 40px 70px -50px rgba(17,17,19,.45); }
.venster-balk { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--t-rand, #ddd); font-size: 13px; color: var(--t-zacht, #666); }
.venster-balk i { width: 10px; height: 10px; border-radius: 50%; background: var(--t-rand, #ddd); }
.venster-balk span { margin-left: 8px; }
.venster-balk .voorbeeld-label { margin-left: auto; }

/* Software: offertemaker */
.offerte { display: grid; gap: 18px; padding: 18px; font-size: 15px; }
@container (min-width: 600px) { .offerte { grid-template-columns: 1fr 1.1fr; } }
.of-invoer { display: grid; gap: 14px; align-content: start; }
.of-invoer label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.of-invoer input[type=text] { font: inherit; font-weight: 400; padding: 9px 12px; border: 1px solid var(--t-rand, #ddd); border-radius: 10px; background: transparent; color: inherit; }
.of-invoer input[type=range] { accent-color: var(--t-accent, #2B3BFF); }
.of-invoer .rij { display: flex; justify-content: space-between; font-weight: 600; font-size: 14px; }
.schakel { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; font-weight: 600; cursor: pointer; }
.schakel input { appearance: none; width: 42px; height: 24px; border-radius: 99px; background: var(--t-rand, #ddd); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.schakel input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.16, 1, .3, 1); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.schakel input:checked { background: var(--t-accent, #2B3BFF); }
.schakel input:checked::after { transform: translateX(18px); }
.schakel input:focus-visible { outline: 2px solid var(--t-accent, #2B3BFF); outline-offset: 2px; }
.papier { background: #fff; color: #111; border: 1px solid #E8E8E3; border-radius: 6px; padding: 20px; box-shadow: 0 20px 40px -30px rgba(0,0,0,.35); display: grid; gap: 10px; font-size: 13px; align-content: start; }
.papier h4 { margin: 0; font-size: 20px; letter-spacing: -.02em; }
.papier .aan { color: #6B6B70; }
.papier table { width: 100%; border-collapse: collapse; }
.papier td { padding: 6px 0; border-bottom: 1px solid #F0F0EC; }
.papier td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.papier tr.totaal td { border: 0; font-weight: 800; font-size: 16px; padding-top: 10px; }
.papier tr.licht td { color: #6B6B70; }
.flits { animation: tFlits .5s; }
@keyframes tFlits { from { background: rgba(43,59,255,.12); } }
.of-knop { justify-self: start; border: 0; background: var(--t-accent, #2B3BFF); color: #fff; font: inherit; font-weight: 600; padding: 10px 18px; border-radius: 99px; cursor: pointer; }
.of-melding { font-size: 14px; color: var(--t-zacht, #666); min-height: 1.3em; }

/* AI-agent: een mail die zichzelf afhandelt */
.agent { display: grid; gap: 14px; padding: 18px; font-size: 15px; }
@container (min-width: 560px) { .agent { grid-template-columns: 1fr 1fr; } }
.agent-mail { background: #fff; color: #111; border: 1px solid #E8E8E3; border-radius: 10px; padding: 14px 16px; font-size: 14px; line-height: 1.45; display: grid; gap: 6px; align-content: start; }
.agent-mail .van { color: #6B6B70; font-size: 13px; }
.agent-log { display: grid; gap: 8px; align-content: start; }
.agent-log li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--t-rand, #ddd); font-size: 14px; opacity: .45; transition: opacity .3s, border-color .3s; }
.agent-log li::before { content: ""; width: 14px; height: 14px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--t-rand, #ccc); }
.agent-log li small { display: block; color: var(--t-zacht, #666); font-size: 13px; }
.agent-log li.bezig { opacity: 1; border-color: var(--t-accent, #2B3BFF); }
.agent-log li.bezig::before { border-color: var(--t-accent, #2B3BFF); border-top-color: transparent; animation: tDraai .8s linear infinite; }
.agent-log li.klaar { opacity: 1; }
.agent-log li.klaar::before { background: #34C759; border-color: #34C759; }
@keyframes tDraai { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ai-bel, .melding, .concept, .concept li { animation: none; } button.melding { animation: none; } }

/* Website voor en na: sleep de schuif om oud en nieuw te vergelijken */
.vergelijk { position: relative; height: 340px; overflow: hidden; user-select: none; touch-action: pan-y; --x: 50%; }
.vergelijk .site { position: absolute; inset: 0; overflow: hidden; }
.vergelijk .nieuw { clip-path: inset(0 0 0 var(--x)); }
.vergelijk input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; z-index: 3; }
.vergelijk .greep { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.15); z-index: 2; pointer-events: none; }
.vergelijk .greep::after { content: "\2194"; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; font-size: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.vergelijk input:focus-visible ~ .greep::after { outline: 3px solid var(--t-accent, #2B3BFF); outline-offset: 2px; }
.etiket { position: absolute; top: 12px; z-index: 2; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: rgba(17,17,19,.75); color: #fff; pointer-events: none; }
.etiket--oud { left: 12px; } .etiket--nieuw { right: 12px; }
/* De oude site: zoals veel sites nog steeds zijn */
.oud { background: #FFFFF0; color: #000; font-family: "Times New Roman", Times, serif; font-size: 13px; padding: 10px; }
.oud .balk { background: #0033CC; color: #FF0; font-weight: bold; text-align: center; padding: 6px; font-size: 17px; }
.oud .links { color: #00E; text-decoration: underline; margin: 6px 0; font-size: 12px; }
.oud table { border: 2px outset #999; border-collapse: separate; margin: 8px 0; font-size: 12px; }
.oud td { border: 1px inset #999; padding: 3px 6px; }
.oud .rood { color: #C00; font-weight: bold; }
.oud .klein { font-size: 10px; color: #666; }
/* De nieuwe site */
.nieuw { background: #F7F1E8; color: #2A211B; font-family: "Archivo", sans-serif; }
.nieuw nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; font-size: 13px; }
.nieuw nav b { font-size: 15px; letter-spacing: -.02em; }
.nieuw nav span { color: #7A6A5C; }
.nieuw .held { padding: 18px 20px; display: grid; gap: 10px; }
.nieuw h5 { margin: 0; font-size: 34px; line-height: .98; letter-spacing: -.04em; font-weight: 800; max-width: 12ch; }
.nieuw p { margin: 0; color: #7A6A5C; font-size: 14px; max-width: 34ch; }
.nieuw .bestel { justify-self: start; background: #A9532F; color: #fff; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 99px; }
.nieuw .producten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 20px; }
.nieuw .producten div { background: #fff; border-radius: 12px; padding: 10px; font-size: 12px; }
.nieuw .producten i { display: block; height: 34px; border-radius: 8px; margin-bottom: 6px; background: linear-gradient(135deg, #E8C9A0, #C98E55); }
.nieuw .producten div:nth-child(2) i { background: linear-gradient(135deg, #D9B98C, #9C6A3C); }
.nieuw .producten div:nth-child(3) i { background: linear-gradient(135deg, #F1DDBF, #D8A86B); }

/* AI leest een bonnetje */
.bon-demo { display: grid; gap: 16px; padding: 18px; font-size: 15px; }
@container (min-width: 520px) { .bon-demo { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.bon { position: relative; overflow: hidden; background: #fff; color: #222; font-family: "JetBrains Mono", monospace; font-size: 12px; line-height: 1.6; padding: 16px 16px 22px; border-radius: 4px; box-shadow: 0 16px 30px -20px rgba(0,0,0,.4); rotate: -1.5deg;
  -webkit-mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; mask: radial-gradient(circle 5px at 50% 100%, transparent 98%, #000) 0 0 / 14px 100% repeat-x; }
.bon b { display: block; text-align: center; font-size: 13px; }
.bon .r { display: flex; justify-content: space-between; }
.bon hr { border: 0; border-top: 1px dashed #999; margin: 6px 0; }
.bon .scan { position: absolute; left: 0; right: 0; top: -20%; height: 18%; background: linear-gradient(transparent, rgba(43,59,255,.25), transparent); border-bottom: 2px solid var(--t-accent, #2B3BFF); opacity: 0; pointer-events: none; }
.bon.leest .scan { opacity: 1; animation: tScan 1.6s ease-in-out; }
@keyframes tScan { from { top: -20%; } to { top: 100%; } }
.velden { display: grid; gap: 8px; align-content: start; }
.velden dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 14px; border: 1px solid var(--t-rand, #ddd); border-radius: 12px; font-size: 14px; }
.velden dt { color: var(--t-zacht, #666); }
.velden dd { margin: 0; font-weight: 600; min-height: 1.4em; }
.velden dd.vul { animation: tIn .35s cubic-bezier(.16, 1, .3, 1); }
.velden dd:empty::after { content: ""; display: inline-block; width: 60%; height: .8em; border-radius: 4px; background: var(--t-rand, #e5e5e5); vertical-align: middle; }

/* AI-telefoniste: een gesprek dat de AI zelf voert */
.bellen { background: linear-gradient(180deg, #2C2C2E, #1C1C1E); color: #fff; }
.bellen .status { color: #fff; }
.beller { text-align: center; padding: 6% 12px 4%; flex: none; }
.beller .foto { width: 58px; height: 58px; border-radius: 50%; margin: 0 auto 8px; background: var(--t-accent, #2B3BFF); display: grid; place-items: center; font-size: 22px; font-weight: 800; }
.beller b { display: block; font-size: 19px; font-weight: 600; }
.beller span { font-size: 13px; color: #A1A1A6; font-variant-numeric: tabular-nums; }
.transcript { flex: 1; overflow-y: auto; padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; }
.transcript .zin { max-width: 86%; padding: 7px 11px; border-radius: 14px; font-size: 13px; line-height: 1.35; animation: tIn .35s cubic-bezier(.16, 1, .3, 1); }
.transcript .zin small { display: block; font-size: 11px; opacity: .65; margin-bottom: 1px; }
.transcript .zin--ai { background: rgba(43,59,255,.85); align-self: flex-end; }
.transcript .zin--klant { background: #3A3A3C; align-self: flex-start; }
.ophangen { flex: none; display: grid; place-items: center; padding: 8px 0 34px; }
.ophangen i { width: 52px; height: 52px; border-radius: 50%; background: #FF3B30; display: grid; place-items: center; }
.ophangen i::before { content: ""; width: 22px; height: 8px; border-radius: 6px; background: #fff; rotate: 0deg; }
.samenvatting { flex: 1; padding: 10% 12px 34px; display: grid; gap: 8px; align-content: start; background: linear-gradient(165deg, #3B4A8C, #1C2140 55%, #121426); }

/* AI-telefoniste, versie 2 */
.tel { background: #000; color: #fff; }
.tel .status { color: #fff; }
.tel-inhoud { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.tel-rust { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 8% 12px 34px; background: radial-gradient(120% 70% at 50% 0%, #2A3570, #0E1020 70%); text-align: center; gap: 2px; }
.tel-rust small { font-size: 14px; font-weight: 600; opacity: .85; }
.tel-rust > b { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.tel-rust p { margin: auto 8px 0; font-size: 13px; color: rgba(255,255,255,.7); }
.tel-rust--na { gap: 10px; }
.tel-rust--na > b { margin-bottom: 10px; }
.tel-rust .melding { animation: tMeld .5s cubic-bezier(.16, 1, .3, 1); }
.tel-agenda { width: 100%; text-align: left; background: #fff; color: #111; border-radius: 16px; padding: 10px 12px 10px 16px; position: relative; display: grid; font-size: 13px; animation: tMeld .5s .35s both cubic-bezier(.16, 1, .3, 1); }
.tel-agenda::before { content: ""; position: absolute; left: 7px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--t-accent, #2B3BFF); }
.tel-agenda span { color: #FF3B30; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.tel-agenda small { color: #6B6B70; }
.tel-oproep { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 14% 16px 40px; background: linear-gradient(180deg, #3A3A3C, #1C1C1E); animation: tIn .4s cubic-bezier(.16, 1, .3, 1); }
.tel-wie { text-align: center; display: grid; gap: 2px; }
.tel-wie small { font-size: 13px; color: #A1A1A6; }
.tel-wie b { font-size: 26px; font-weight: 500; letter-spacing: -.01em; }
.tel-wie span { font-size: 14px; color: #A1A1A6; font-variant-numeric: tabular-nums; }
.tel-overname { margin-top: auto; margin-bottom: 18px; font-size: 13px; font-weight: 600; background: rgba(43,59,255,.9); padding: 7px 14px; border-radius: 99px; animation: tPuls 1.2s infinite; }
.tel-knoppen { display: flex; gap: 70px; }
.tel-rond { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; }
.tel-rond::before { content: ""; width: 24px; height: 9px; border-radius: 6px; background: #fff; }
.tel-rond--rood { background: #FF3B30; }
.tel-rond--groen { background: #34C759; } .tel-rond--groen::before { rotate: -30deg; }
.tel-gesprek { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 6% 14px 34px; background: linear-gradient(180deg, #2C2C2E, #000); }
.tel-wie--klein b { font-size: 20px; }
.tel-golf { display: flex; justify-content: center; align-items: center; gap: 3px; height: 30px; margin: 12px 0 4px; }
.tel-golf i { width: 3px; height: 30%; border-radius: 2px; background: var(--t-accent, #2B3BFF); animation: tGolf .9s ease-in-out infinite; }
.tel-golf i:nth-child(3n) { animation-delay: -.3s; } .tel-golf i:nth-child(3n+1) { animation-delay: -.6s; } .tel-golf i:nth-child(4n) { animation-duration: 1.2s; }
@keyframes tGolf { 50% { height: 100%; } }
.tel-label { text-align: center; font-size: 12px; color: #A1A1A6; margin-bottom: 10px; }
.tel-tekst { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 2px; scroll-behavior: smooth; }
.tel-tekst li { font-size: 14px; line-height: 1.4; animation: tIn .4s cubic-bezier(.16, 1, .3, 1); transition: opacity .4s; }
.tel-tekst li small { display: block; font-size: 11px; font-weight: 700; color: #8E98FF; text-transform: uppercase; letter-spacing: .04em; }
.tel-tekst li.oud { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .tel-golf i, .tel-overname { animation: none; } }

/* Belscherm: de statusbalk ligt over het scherm heen, zodat de achtergrond tot bovenin doorloopt */
.tel .status { position: absolute; inset: 0 0 auto; z-index: 4; }
.tel-rust { padding-top: 18%; }
.tel-oproep { padding-top: 22%; }
.tel-gesprek { padding-top: 18%; }

/* AI-agent in je mailbox */
.postvak { background: #fff; }
.pv-inhoud { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.pv-kop { display: flex; justify-content: space-between; align-items: center; padding: 8px 16px 10px; }
.pv-kop b { font-size: 26px; letter-spacing: -.02em; }
.pv-agent { font-size: 11px; font-weight: 700; color: #fff; background: var(--t-accent, #2B3BFF); padding: 4px 9px; border-radius: 99px; animation: tPuls 1.4s infinite; }
.pv-lijst { display: grid; }
.pv-lijst li { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 10px 16px 10px 26px; border-bottom: 1px solid #ECECF0; font-size: 13px; }
.pv-lijst b { font-size: 14px; }
.pv-lijst span { grid-column: 1; color: #111; }
.pv-lijst small { grid-column: 1 / -1; color: #6B6B70; font-size: 12px; line-height: 1.35; }
.pv-lijst em { grid-column: 2; grid-row: 1; font-style: normal; color: #8E8E93; font-size: 12px; }
.pv-nieuw { background: #F3F4FF; animation: tMeld .5s cubic-bezier(.16, 1, .3, 1); }
.pv-nieuw::before { content: ""; position: absolute; left: 10px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: var(--t-accent, #2B3BFF); }
.pv-blad { position: absolute; left: 8px; right: 8px; bottom: 30px; background: #111113; color: #fff; border-radius: 18px; padding: 14px 14px 16px; box-shadow: 0 20px 40px -10px rgba(0,0,0,.45); animation: tMeld .5s cubic-bezier(.16, 1, .3, 1); }
.pv-blad b { font-size: 13px; color: #9AA3FF; }
.pv-stappen { display: grid; gap: 7px; margin-top: 10px; font-size: 13px; }
.pv-stappen li { display: flex; gap: 8px; align-items: center; opacity: .4; transition: opacity .3s; }
.pv-stappen li::before { content: ""; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #55576A; }
.pv-stappen li.bezig { opacity: 1; }
.pv-stappen li.bezig::before { border-color: var(--t-accent, #2B3BFF); border-top-color: transparent; animation: tDraai .8s linear infinite; }
.pv-stappen li.klaar { opacity: 1; }
.pv-stappen li.klaar::before { background: #34C759; border-color: #34C759; }
.pv-bijlage { display: flex; gap: 10px; align-items: center; border: 1px solid #E5E5EA; border-radius: 12px; padding: 8px 10px; }
.pv-bijlage span { flex: none; width: 34px; height: 40px; border-radius: 6px; background: #FF3B30; color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; }
.pv-bijlage b { display: block; font-size: 13px; }
.pv-bijlage small { color: #6B6B70; font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .pv-agent, .pv-nieuw, .pv-blad { animation: none; } }
.ischerm { text-align: left; }
.ischerm .klok, .ischerm .tel-rust, .ischerm .tel-oproep, .ischerm .tel-wie, .ischerm .tel-label, .ischerm .beller { text-align: center; }

/* Uitlegfilm: telefoon links, ondertiteling en stappen rechts */
[data-toestel="film"] { display: block; }
.fm { display: grid; gap: 32px; align-items: center; }
@container (min-width: 760px) { .fm { grid-template-columns: auto 1fr; gap: 56px; } }
.fm-beeld { display: grid; justify-items: center; }
.fm-scherm { background: #F2F2F7; }
.fm-scene { flex: 1; display: flex; flex-direction: column; min-height: 0; position: relative; }
.fm-in { flex: 1; display: flex; flex-direction: column; min-height: 0; animation: fmIn .6s cubic-bezier(.16, 1, .3, 1); }
@keyframes fmIn { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.fm-tekst { display: grid; gap: 12px; align-content: center; text-align: left; }
.fm-balken { display: flex; gap: 6px; }
.fm-balken i { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; }
.fm-balken b { display: block; height: 100%; width: 0; background: var(--t-accent, #2B3BFF); }
.fm-teller { font-size: 14px; font-weight: 700; color: #9AA3FF; }
.fm-kop { font-size: clamp(26px, 2.8vw, 40px); font-weight: 800; letter-spacing: -.035em; line-height: 1.08; min-height: 2.2em; color: #fff; }
.fm-uitleg { font-size: clamp(17px, 1.4vw, 20px); color: #B9B9C2; min-height: 3.2em; max-width: 44ch; }
.fm-stappen { display: grid; gap: 4px; margin-top: 6px; }
.fm-stappen button { width: 100%; text-align: left; font: inherit; font-size: 15px; color: #8A8C96; background: none; border: 0; border-left: 3px solid #2A2B36; padding: 6px 12px; cursor: pointer; transition: color .2s, border-color .2s; }
.fm-stappen button:hover { color: #fff; }
.fm-stappen li.nu button { color: #fff; border-left-color: var(--t-accent, #2B3BFF); font-weight: 600; }
.fm-knoppen { display: flex; gap: 8px; margin-top: 6px; }
.fm-knoppen button { font: inherit; font-size: 15px; font-weight: 600; color: #fff; background: var(--t-accent, #2B3BFF); border: 0; border-radius: 99px; padding: 10px 18px; cursor: pointer; }
.fm-knoppen .fm-terug { background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
/* Scènes in de telefoon */
.fm-mail { margin: 10px; background: #fff; border-radius: 16px; padding: 14px; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.fm-mail small { color: #6B6B70; }
.fm-mail mark { background: #DDE1FF; color: #1F2BD0; border-radius: 4px; padding: 0 3px; font-weight: 600; animation: fmMark 1.2s .5s both; }
@keyframes fmMark { from { background: transparent; color: inherit; } }
.fm-label { margin-top: 8px; background: #111113; color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 13px; font-weight: 600; }
.fm-reken { margin: 10px; background: #fff; border-radius: 16px; padding: 16px; display: grid; gap: 10px; font-size: 14px; }
.fm-reken > div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #ECECF0; padding-bottom: 8px; }
.fm-reken .fm-totaal { border: 0; font-weight: 800; font-size: 17px; }
.fm-reken small { color: #6B6B70; }
.fm-tik { animation: fmTik 1.6s 1.2s infinite; }
@keyframes fmTik { 0%, 100% { box-shadow: 0 0 0 0 rgba(43,59,255,.5); } 50% { box-shadow: 0 0 0 10px rgba(43,59,255,0); } }
.fm-site { margin: 10px; background: #fff; border-radius: 16px; padding: 16px; display: grid; gap: 10px; font-size: 14px; }
.fm-site small { color: #6B6B70; }
.fm-site b { font-size: 18px; }
.fm-site label { display: grid; gap: 4px; font-size: 12px; color: #6B6B70; font-weight: 600; }
.fm-site label span { border: 1px solid #E5E5EA; border-radius: 10px; padding: 9px 10px; font-size: 14px; color: #111; font-weight: 400; }
.fm-knop { justify-self: start; background: var(--t-accent, #2B3BFF); color: #fff; font-weight: 600; padding: 9px 18px; border-radius: 99px; }
.fm-lijst { margin: 10px; background: #fff; border-radius: 16px; padding: 14px; display: grid; gap: 8px; font-size: 14px; }
.fm-lijst b { font-size: 18px; }
.fm-lijst > div { display: grid; padding: 8px 10px; border-radius: 10px; border: 1px solid #ECECF0; }
.fm-lijst small { color: #6B6B70; font-size: 12px; }
.fm-nieuw { background: #F3F4FF; border-color: var(--t-accent, #2B3BFF) !important; animation: tMeld .6s .3s both cubic-bezier(.16, 1, .3, 1); }
.fm-slot { flex: 1; margin: -7.5% 0 0; padding: 22% 10px 34px; text-align: center; background: linear-gradient(165deg, #3B4A8C, #1C2140 55%, #121426); color: #fff; display: grid; align-content: start; gap: 2px; }
.fm-slot small { font-size: 13px; font-weight: 600; opacity: .85; }
.fm-slot > b { font-size: 54px; line-height: 1; margin-bottom: 18px; }
.fm-slot .melding { text-align: left; animation-delay: .4s; animation-fill-mode: both; }
@media (prefers-reduced-motion: reduce) { .fm-in, .fm-mail mark, .fm-tik, .fm-nieuw { animation: none; } }

/* Film: agenda en de vraag van de agent */
.fm-agenda { margin: 10px; background: #fff; border-radius: 16px; padding: 14px; display: grid; gap: 6px; font-size: 13px; }
.fm-agenda b { font-size: 16px; margin-bottom: 2px; }
.fm-agenda > div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; }
.fm-agenda .vol { background: #F2F2F5; color: #8E8E93; }
.fm-agenda .vrij { background: #E6F7EC; color: #1D7A3A; font-weight: 600; box-shadow: inset 0 0 0 1.5px #34C759; animation: tMeld .5s .6s both cubic-bezier(.16, 1, .3, 1); }
.fm-agenda .vrij + .vol + .vrij { animation-delay: 1s; }
.fm-agenda .fm-label { margin-top: 6px; }
.fm-agent { background: #111113; color: #fff; border-radius: 14px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.fm-agent b { display: block; color: #9AA3FF; font-size: 12px; }
button.verstuur { font: inherit; border: 0; cursor: pointer; }

/* Film: statusbalk ligt over de scène, zodat een donker vergrendelscherm tot bovenin doorloopt */
.fm-scherm .status { position: absolute; inset: 0 0 auto; z-index: 4; }
.fm-scherm .fm-scene { padding-top: 44px; }
.fm-scherm.fm-donker .status { color: #fff; }
.fm-scherm .fm-slot { margin: -44px 0 0; padding-top: 74px; }