:root {
        --brown-950: #42200A; /* basis, donkerste net als logo en tekst */
        --brown-900: #63381F;
        --brown-800: #845031;
        --brown-700: #A16845;
        --brown-600: #BA835C;
        --brown-500: #D29E78;
        --brown-400: #E1B896;/* highlight */
        --brown-300: #EDD0B7;
        --brown-200: #F6E5D8;
        --brown-100: #FCF7F1; /* achtergrond kleur */
        --cta: #F7921E; /* call to action */
        --cta-2: #FF9F3A; /* hover variant */
        --ring: rgba(66, 32, 10, .12);
        --shadow: rgba(0,0,0,.18);
      }
      html{scroll-behavior:smooth}
      body{margin:0;background:var(--brown-100);color:var(--brown-950);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.italic-text {
  font-style: italic;
}


      /* Layout */
      .section-hero{position:relative;isolation:isolate;background:var(--brown-100)} /* no glow */
       .section-content{position:relative;isolation:isolate;background:var(--brown-100)} /* no glow */
      .container{max-width:1100px;margin:0 auto;padding:1.5rem 1.5rem}
      @media (min-width:768px){.container{padding:1.5rem 1.5rem}}
      .grid{display:grid;gap:2.5rem}
      @media (min-width:768px){.grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}}
      .col-text{grid-column:1/-1}
      .col-card{grid-column:1/-1}
      @media (min-width:768px){.col-text{grid-column:span 7/span 7}.col-card{grid-column:8/-1}}

      /* Type */
      .badge{display:inline-flex;align-items:center;gap:.375rem;border-radius:999px;background:var(--brown-100);padding:.25rem .75rem;font-size:.75rem;font-weight:600;color:var(--brown-950);border:1px solid var(--brown-400)}
      h1{margin:.75rem 0 0;font-weight:800;letter-spacing:-.01em;line-height:1.1;font-size:2.75rem}
      @media (min-width:768px){h1{font-size:3.5rem}}
      @media (min-width:1024px){h1{font-size:4.25rem}}
      .head-a{color:var(--brown-400)}
      .head-b{color:var(--brown-950)}
      .sub{margin-top:1rem;color:var(--brown-950);font-size:1.125rem}
      @media (min-width:768px){.sub{font-size:1.25rem}}

      /* Buttons */
      .actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
      .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:14px;font-weight:600;border:0;cursor:pointer;text-decoration:none;transition:transform .15s ease, background .2s ease, box-shadow .2s ease}
      .btn-primary{background:var(--cta);color:var(--brown-950);box-shadow:0 10px 28px var(--shadow);padding:.875rem 1.25rem}
      .btn-primary:hover{background:var(--cta-2);transform:translateY(-1px)}
      .btn-ghost{background:transparent;color:var(--brown-950);border:1px solid var(--ring);padding:.875rem 1.25rem}
      .btn-ghost:hover{background:var(--brown-200)}
      .icon-arrow{width:20px;height:20px}

      /* Feature list */
      .features{margin-top:1.25rem;display:grid;gap:.5rem;color:var(--brown-800);font-size:.95rem}
      @media (min-width:768px){.features{grid-template-columns:repeat(2,minmax(0,1fr))}}
      .feat{display:flex;align-items:center;gap:.5rem}
      .tick{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:999px;background:var(--brown-200);color:var(--brown-700);border:1px solid var(--brown-300);font-weight:700}

      /* Card */
      .card{max-width:560px;margin:0 auto;border-radius:20px;background:var(--brown-100);padding:1.5rem;box-shadow:0 30px 50px var(--shadow);border:1px solid var(--brown-300)}
      .card-inner{border-radius:16px;background:var(--brown-100);padding:0.1rem;border:1px dashed var(--brown-100)}
      .card h3{margin:.25rem 0 0;font-size:1.5rem;color:var(--brown-950)}
      .meta{color:var(--brown-950);font-size:.95rem}
      .kvs{margin-top:1.25rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;font-size:.9375rem}
      .kv{border-radius:14px;background:var(--brown-400);padding:1rem;border:1px solid var(--brown-500)}
      .kv .k{color:var(--brown-950); font-weight:400}
      .kv .v{color:var(--brown-950);font-weight:700;margin-top:.25rem}
      .btn-wide{display:inline-flex;width:92%;justify-content:center;margin-top:1rem;border-radius:12px;background:var(--cta);color:var(--brown-950);padding:.75rem 1rem;font-weight:600;box-shadow:0 10px 28px var(--shadow)}
      .btn-wide:hover{background:var(--cta-2)}

      /* How it works */
      .how{background:var(--brown-100);padding:4rem 1.5rem}
      .how .wrap{max-width:720px;margin:0 auto;color:var(--brown-950)}
      .how h2{color:var(--brown-950);font-size:1.75rem;margin:0 0 .5rem}
      .how ol{margin:1rem 0 0;padding-left:1.25rem}
      .how li{margin:.5rem 0}

      /* Footer */
      footer{border-top:1px solid var(--brown-400);background:var(--brown-100)}
      .foot{max-width:1100px;margin:0 auto;padding:2.25rem 1.5rem;color:var(--brown-700);display:flex;flex-direction:column;gap:1rem}
      @media (min-width:768px){.foot{flex-direction:row;align-items:center;justify-content:space-between}}
      .links{xdisplay:flex;gap:1rem;align-items:center}
      .links a{color:var(--brown-700);text-decoration:none}
      .links a:hover{color:var(--brown-950)}

      /* Simple fade-up animation */
      .fadeup{opacity:0;transform:translateY(12px);animation:fadeup .6s ease-out .05s both}
      .fadeup.delay{animation-delay:.12s}
      @keyframes fadeup{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}