:root{
    --paper:#F6F7F4;        /* koel bon-wit, geen crème */
    --ink:#1B1C1E;          /* bon-inkt */
    --fade:#B7BAB2;         /* vervaagde thermische print */
    --stamp:#D8402F;        /* rode datumstempel */
    --pen:#2B4ACB;          /* balpen-blauw */
    --saved:#1E7A4A;        /* gered geld */
    --line:#DDDFD8;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"IBM Plex Sans",system-ui,sans-serif;
    font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

  /* ---------- header ---------- */
  header{padding:22px 0;border-bottom:1px solid var(--line)}
  header .wrap{display:flex;justify-content:space-between;align-items:baseline}
  .wordmark{
    font-family:"IBM Plex Mono",monospace;font-weight:600;
    letter-spacing:.14em;font-size:.95rem;text-transform:uppercase;
  }
  .wordmark .cursor{color:var(--stamp);animation:blink 1.2s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}
  .worktitle{
    font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:var(--fade);
  }

  /* ---------- hero ---------- */
  .hero{padding:72px 0 84px}
  .hero .wrap{
    display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;
  }
  h1{
    font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
    font-size:clamp(2.4rem,5.2vw,3.6rem);line-height:1.06;
    letter-spacing:-.02em;margin-bottom:20px;
  }
  h1 em{font-style:normal;color:var(--stamp)}
  .sub{font-size:1.1rem;color:#4A4C48;max-width:46ch;margin-bottom:32px}

  /* formulier */
  .signup{display:flex;gap:10px;max-width:460px}
  .signup input{
    flex:1;padding:14px 16px;font:inherit;font-size:1rem;
    border:1.5px solid var(--ink);border-radius:6px;background:#fff;
  }
  .signup input:focus{outline:3px solid var(--pen);outline-offset:1px;border-color:var(--pen)}
  .signup button{
    padding:14px 22px;font:inherit;font-weight:600;font-size:1rem;
    background:var(--ink);color:var(--paper);border:1.5px solid var(--ink);
    border-radius:6px;cursor:pointer;white-space:nowrap;
  }
  .signup button:hover{background:var(--pen);border-color:var(--pen)}
  .signup button:focus-visible{outline:3px solid var(--pen);outline-offset:2px}
  .micro{font-family:"IBM Plex Mono",monospace;font-size:.75rem;color:#6B6E67;margin-top:12px}
  .form-msg{margin-top:12px;font-weight:500;display:none}
  .form-msg.ok{display:block;color:var(--saved)}
  .form-msg.err{display:block;color:var(--stamp)}

  /* ---------- het bonnetje (signatuur) ---------- */
  .receipt-scene{position:relative;display:flex;justify-content:center}
  .receipt{
    background:#fff;width:300px;padding:26px 24px 40px;
    font-family:"IBM Plex Mono",monospace;font-size:.78rem;line-height:1.75;
    color:var(--ink);box-shadow:0 14px 34px rgba(27,28,30,.14);
    transform:rotate(2deg);
    /* gescheurde onderrand */
    clip-path:polygon(0 0,100% 0,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%);
  }
  .receipt .shop{text-align:center;font-weight:600;letter-spacing:.1em}
  .receipt .addr{text-align:center;color:#7A7D75;font-size:.7rem;margin-bottom:10px}
  .receipt hr{border:none;border-top:1.5px dashed var(--line);margin:10px 0}
  .receipt .row{display:flex;justify-content:space-between}
  /* de vervaging: regels lopen weg zoals thermisch papier */
  .receipt .f1{color:#4A4C48}
  .receipt .f2{color:#8B8E86}
  .receipt .f3{color:var(--fade)}
  .receipt .f4{color:#D3D5CE}
  .stamp{
    position:absolute;top:46%;left:50%;
    font-family:"IBM Plex Mono",monospace;font-weight:600;
    font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--stamp);border:2.5px solid var(--stamp);border-radius:6px;
    padding:7px 14px;background:rgba(246,247,244,.55);
    transform:translate(-50%,-50%) rotate(-9deg);
    animation:thunk .5s cubic-bezier(.2,1.6,.4,1) .4s backwards;
  }
  @keyframes thunk{
    from{transform:translate(-50%,-50%) rotate(-9deg) scale(2.4);opacity:0}
    to{transform:translate(-50%,-50%) rotate(-9deg) scale(1);opacity:1}
  }
  @media (prefers-reduced-motion:reduce){
    .stamp{animation:none}
    .wordmark .cursor{animation:none}
  }

  /* ---------- pijn-strip ---------- */
  .pains{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
  .pains .wrap{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  }
  .pain{
    padding:28px 26px;border-left:1px solid var(--line);
    font-family:"IBM Plex Mono",monospace;font-size:.85rem;line-height:1.6;
  }
  .pain:first-child{border-left:none}
  .pain b{display:block;color:var(--stamp);font-weight:600;margin-bottom:4px}

  /* ---------- secties ---------- */
  section{padding:76px 0}
  h2{
    font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
    font-size:clamp(1.6rem,3vw,2.1rem);letter-spacing:-.01em;margin-bottom:40px;
  }
  .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
  .step .tag{
    font-family:"IBM Plex Mono",monospace;font-size:.75rem;font-weight:600;
    letter-spacing:.12em;text-transform:uppercase;color:var(--pen);
    display:inline-block;margin-bottom:12px;
  }
  .step h3{font-size:1.1rem;font-weight:600;margin-bottom:8px}
  .step p{color:#4A4C48;font-size:.95rem}

  /* privacy */
  .privacy{background:var(--ink);color:var(--paper)}
  .privacy h2{color:#fff}
  .privacy .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 48px;max-width:760px}
  .privacy .item{
    font-size:.98rem;color:#C9CBC4;padding-left:26px;position:relative;
  }
  .privacy .item::before{
    content:"✓";position:absolute;left:0;color:var(--saved);
    font-family:"IBM Plex Mono",monospace;font-weight:600;
  }
  .privacy .item b{color:#fff;font-weight:600}

  /* slot-CTA */
  .final{text-align:center}
  .final h2{margin-bottom:12px}
  .final p{color:#4A4C48;margin-bottom:28px}
  .final .signup{margin:0 auto}

  footer{
    border-top:1px solid var(--line);padding:26px 0 40px;
    font-family:"IBM Plex Mono",monospace;font-size:.72rem;color:#6B6E67;
  }
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

  /* ---------- responsive ---------- */
  @media (max-width:840px){
    .hero .wrap{grid-template-columns:1fr;gap:48px}
    .receipt-scene{order:-1}
    .pains .wrap{grid-template-columns:1fr}
    .pain{border-left:none;border-top:1px solid var(--line)}
    .pain:first-child{border-top:none}
    .steps{grid-template-columns:1fr}
    .privacy .grid{grid-template-columns:1fr}
    .signup{flex-direction:column}
  }

  /* ---------- taalwissel ---------- */
  .worktitle a{color:var(--pen);text-decoration:none;font-weight:600}
  .worktitle a:hover{text-decoration:underline}