.demo{--demo-mint: hsl(158 64% 46%);min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:hsl(var(--background));color:hsl(var(--foreground));overflow-x:hidden}.demo__kop{display:flex;align-items:center;gap:12px;padding:10px 16px 4px}.demo__merk{display:flex;align-items:center;height:44px}.demo__teller{flex:1;margin:0;text-align:center;font-size:14px;font-weight:600;color:hsl(var(--muted-foreground))}.demo__sluit{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-right:-8px;padding:0 8px;border-radius:8px;font-size:14px;color:hsl(var(--muted-foreground))}.demo__sluit:hover,.demo__sluit:focus-visible{color:hsl(var(--foreground))}.demo__balk ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:0;padding:0 16px;list-style:none}.demo__segment{display:flex;width:100%;flex-direction:column;gap:8px;padding:10px 0;border:0;background:none;cursor:pointer;text-align:left;font-size:13px;color:hsl(var(--muted-foreground))}.demo__segment-lijn{display:block;height:4px;border-radius:999px;background:hsl(var(--border));transition:background-color .3s ease}.demo__segment--gedaan .demo__segment-lijn{background:var(--demo-mint)}.demo__segment[aria-current=step]{color:hsl(var(--foreground));font-weight:600}.demo__segment-label{display:none}.demo__toneel{display:flex;flex:1;flex-direction:column;gap:14px;min-height:0;padding:4px 16px 16px}.demo__tel{display:flex;flex:1;flex-direction:column;align-items:center;gap:6px;min-height:250px;margin:0}.demo__tel-scherm{position:relative;flex:1;width:100%;max-width:420px;overflow:hidden;border:1px solid #232b27;border-radius:24px;background:#0b0d0c;box-shadow:0 18px 50px -20px #1c7d5a73;container-type:size}.demo__onderschrift{font-size:12px;color:hsl(var(--muted-foreground))}.demo__tekst{display:flex;flex-direction:column;gap:6px}.demo__kicker{margin:0;font-size:13px;font-weight:600;color:hsl(var(--primary))}.demo__intro{margin:0;font-size:15px;color:hsl(var(--muted-foreground))}.demo__titel{margin:2px 0 0;font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.01em}.demo__uitleg{margin:0;font-size:16px;line-height:1.5;color:hsl(var(--muted-foreground))}.demo__cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.demo__cta button{padding-left:12px;padding-right:12px}.demo__knoppen{display:flex;justify-content:space-between;gap:8px;margin-top:4px}@media(max-width:419px){.demo__cta button{padding-left:8px;padding-right:8px}.demo__cta-pijl{display:none}}@media(max-width:339px){.demo__sluit-tekst{display:none}.demo__cta{grid-template-columns:1fr}}@media(min-width:900px){.demo__kop{padding:16px 32px 4px}.demo__balk ol{max-width:1100px;margin:0 auto;padding:0 32px;gap:12px}.demo__segment-label{display:block}.demo__toneel{flex-direction:row;align-items:center;justify-content:center;gap:72px;width:100%;max-width:1100px;margin:0 auto;padding:24px 32px 40px}.demo__tel{flex:0 0 auto}.demo__tel-scherm{flex:none;width:320px;height:min(660px,calc(100dvh - 210px));min-height:480px;border:10px solid #1b1f1d;border-radius:46px}.demo__tekst{flex:0 1 460px;gap:10px}.demo__kicker{font-size:14px}.demo__intro{font-size:17px}.demo__titel{font-size:40px}.demo__uitleg{font-size:19px}.demo__knoppen{margin-top:16px}}.demo__tel-scherm>*{--t-tekst: #e8efe9;--t-zacht: #8d9c94;--t-kaart: #151a18;--t-rand: #24302a;--t-mint: hsl(158 64% 52%);position:absolute;top:0;right:0;bottom:0;left:0;font-size:clamp(11px,3.1cqh,15px);line-height:1.35;color:var(--t-tekst)}.demo__tel-scherm p{margin:0}.demo__tel-scherm svg{width:1.15em;height:1.15em;flex:none}.dt-app{display:flex;flex-direction:column}.dt-kopkaart{display:flex;align-items:center;gap:.7em;margin:.8em .8em 0;padding:.7em .9em;border:1px solid var(--t-rand);border-radius:1em;background:var(--t-kaart)}.dt-kopkaart__logo{width:auto;height:1.6em}.dt-kopkaart__slogan{flex:1;font-weight:600;font-size:.92em}.demo__tel-scherm .dt-kopkaart__vink{width:1.6em;height:1.6em;color:var(--t-mint);stroke-width:3}.dt-inhoud{flex:1;min-height:0;overflow:hidden;padding:.9em .8em .6em}.dt-tabs{display:grid;grid-template-columns:repeat(5,1fr);padding:.5em .3em .7em;border-top:1px solid var(--t-rand);background:#0e1211}.dt-tab{display:flex;flex-direction:column;align-items:center;gap:.25em;font-size:.72em;color:var(--t-zacht)}.demo__tel-scherm .dt-tab svg{width:1.7em;height:1.7em}.dt-tab--actief{color:var(--t-mint);font-weight:600}.dt-stapel{display:flex;height:100%;flex-direction:column;gap:.7em}.dt-kop{font-size:1.25em;font-weight:700}.dt-klein{display:block;font-size:.8em;color:var(--t-zacht)}.dt-kaart{padding:.8em .9em;border:1px solid var(--t-rand);border-radius:.9em;background:var(--t-kaart)}.dt-kaart__titel{display:flex;align-items:center;gap:.4em;margin-bottom:.4em!important;font-size:.8em;font-weight:600;color:var(--t-mint)}.dt-camera{display:flex;flex-direction:column;background:radial-gradient(120% 80% at 50% 40%,#2a2622,#0c0b0a 70%)}.dt-camera__balk{display:flex;justify-content:space-between;padding:.9em}.dt-rondje{display:grid;width:2.2em;height:2.2em;place-items:center;border-radius:999px;background:#ffffff1f}.dt-rondje--klaar{background:#2f7cf6}.dt-bon{position:relative;align-self:center;width:62%;margin:auto 0;padding:1em 1em 1.3em;border-radius:.2em;background:#f4f1ea;color:#2b2925;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.78em;box-shadow:0 .6em 1.6em #00000080;transform:rotate(-1.5deg)}.dt-bon__winkel{text-align:center;font-weight:700;text-transform:uppercase}.dt-bon__plaats{margin-bottom:.7em!important;text-align:center;color:#6c675e}.dt-bon__regel{display:flex;justify-content:space-between;gap:.6em}.dt-bon__regel--vet{margin-top:.5em!important;padding-top:.4em;border-top:1px dashed #9a958b;font-weight:700}.dt-bon__hoek{position:absolute;width:1.2em;height:1.2em;border:.18em solid var(--t-mint)}.dt-bon__hoek--lb{top:-.7em;left:-.7em;border-right:0;border-bottom:0}.dt-bon__hoek--rb{top:-.7em;right:-.7em;border-left:0;border-bottom:0}.dt-bon__hoek--lo{bottom:-.7em;left:-.7em;border-right:0;border-top:0}.dt-bon__hoek--ro{bottom:-.7em;right:-.7em;border-left:0;border-top:0}.dt-camera__onder{display:flex;flex-direction:column;align-items:center;gap:.6em;padding:.6em 0 1.2em}.dt-sluiter{display:grid;width:3.6em;height:3.6em;place-items:center;border:.25em solid rgb(255 255 255 / .85);border-radius:999px}.dt-melding{display:inline-flex;align-items:center;gap:.35em;padding:.35em .8em;border-radius:999px;background:var(--t-mint);color:#04130d;font-size:.85em;font-weight:600}.dt-flits{position:absolute;top:0;right:0;bottom:0;left:0;background:#fff;opacity:0;pointer-events:none}.dt-veld{display:flex;align-items:center;gap:.5em;padding:.45em 0;border-top:1px solid var(--t-rand)}.dt-veld__label{width:6.5em;color:var(--t-zacht);font-size:.9em}.dt-veld__waarde{flex:1;font-weight:600}.demo__tel-scherm .dt-veld__vink{color:var(--t-mint);stroke-width:3}.dt-status{display:flex;align-items:center;gap:.4em;align-self:flex-start;padding:.45em .8em;border-radius:999px;background:#36d39926;color:var(--t-mint);font-size:.85em;font-weight:600}.dt-grafiek{display:grid;flex:1;grid-template-columns:repeat(3,1fr);gap:.6em;min-height:0;padding:.8em .7em .6em;border:1px solid var(--t-rand);border-radius:.9em;background:var(--t-kaart)}.dt-kolom{display:flex;min-height:0;flex-direction:column;align-items:center;gap:.35em}.dt-kolom__bedrag{font-size:.85em;font-weight:700;white-space:nowrap}.dt-kolom__bak{display:flex;flex:1;width:70%;min-height:0;align-items:flex-end}.dt-kolom__staaf{display:block;width:100%;border-radius:.3em .3em 0 0;transform-origin:bottom}.dt-kolom__staaf--omzet{background:#2ac089}.dt-kolom__staaf--kosten{background:#366353}.dt-kolom__staaf--resultaat{background:#60dcaf}.dt-kolom__label{font-size:.8em;color:var(--t-zacht)}.dt-chat{display:flex;height:100%;flex-direction:column;gap:.6em}.dt-chat__draad{display:flex;flex:1;flex-direction:column;justify-content:flex-end;gap:.6em;min-height:0}.dt-bel{max-width:85%;padding:.6em .8em;border-radius:1em;font-size:.92em}.dt-bel--ik{align-self:flex-end;border-bottom-right-radius:.3em;background:var(--t-mint);color:#04130d}.dt-bel--app{align-self:flex-start;border:1px solid var(--t-rand);border-bottom-left-radius:.3em;background:var(--t-kaart)}.dt-bel--los{max-width:none}.dt-typen{display:none}.dt-invoer{display:flex;align-items:center;gap:.6em;padding:.55em .8em;border:1px solid var(--t-rand);border-radius:999px;color:var(--t-zacht);font-size:.9em}.dt-invoer span{flex:1}.dt-contact{display:flex;align-items:center;gap:.7em}.dt-contact__foto{width:2.8em;height:2.8em;border-radius:999px;-o-object-fit:cover;object-fit:cover}.dt-contact__naam{display:block;font-weight:700}.dt-pakket__kop{display:flex;justify-content:space-between;margin-bottom:.3em!important;font-weight:700}.dt-pakket__prijs{color:var(--t-mint)}.dt-pakket__regel{display:flex;align-items:center;gap:.4em;padding:.15em 0;font-size:.9em}.demo__tel-scherm .dt-pakket__regel svg{color:var(--t-mint);stroke-width:3}@media(prefers-reduced-motion:no-preference){.demo__tel-scherm>*{animation:dt-in .35s ease-out both}.dt-flits{animation:dt-flits .6s ease-out 1s both}.dt-melding,.dt-rondje--klaar{animation:dt-pop .35s ease-out 1.3s both}.dt-veld{animation:dt-veld .35s ease-out both}.dt-status{animation:dt-pop .35s ease-out 1.9s both}.dt-kolom__staaf{animation:dt-groei .7s cubic-bezier(.2,.8,.2,1) both}.dt-typen{display:inline-flex;gap:.3em;align-self:flex-start;overflow:hidden;padding:.7em .9em;border:1px solid var(--t-rand);border-radius:1em;background:var(--t-kaart);animation:dt-typen 1.5s ease both}.dt-typen span{width:.45em;height:.45em;border-radius:999px;background:var(--t-zacht);animation:dt-stip .9s ease-in-out infinite}.dt-typen span:nth-child(2){animation-delay:.15s}.dt-typen span:nth-child(3){animation-delay:.3s}.dt-chat .dt-bel--app{animation:dt-veld .35s ease-out 1.5s both}.dt-stapel>.dt-bel--app{animation:dt-veld .35s ease-out .3s both}.dt-pakket{animation:dt-veld .35s ease-out .6s both}}@keyframes dt-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes dt-flits{0%{opacity:0}25%{opacity:.85}to{opacity:0}}@keyframes dt-pop{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}@keyframes dt-veld{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes dt-groei{0%{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes dt-typen{0%,85%{opacity:1;max-height:3em;padding-top:.7em;padding-bottom:.7em}to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0}}@keyframes dt-stip{0%,to{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-.2em)}}