:root{
      --bg-a:#1ca6e8;
      --bg-b:#3ed3b6;
      --text:#ffffff;
    }
    /* Algemene stijl reset */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Achtergrond animatie */
    body {
      font-family: Arial, sans-serif;
      background: linear-gradient(270deg, #00ff88, #0088ff);
      background-size: 400% 400%;
      animation: achtergrondBeweging 12s ease infinite;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      color: white;
    }

    /* Logo styling */
    .logo {
      border-radius: 50%;
      width: 120px;
      height: auto;
      margin-bottom: 20px;
    }

    /* Titel */
    h1 {
      font-size: 2rem;
      margin-bottom: 10px;
    }

    /* Knop */
    button {
      background-color: rgba(255, 255, 255, 0.2);
      border: 2px solid white;
      padding: 10px 20px;
      font-size: 1.1rem;
      color: white;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: rgba(255, 255, 255, 0.4);
    }

    /* Resultaat tekst */
    .resultaat {
      margin-top: 20px;
      font-size: 1.3rem;
      font-weight: bold;
    }

    /* Footer tekst */
    footer .kleine {
      opacity: 0.8;
      font-size: 0.9rem;
      margin-top: 20px;
    }

    /* Achtergrond animatie keyframes */
    @keyframes achtergrondBeweging {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

    header, main, footer{ width:100%; display:flex; justify-content:center; }
    .container{ width:min(920px, 92vw); padding:24px; }

    /* Hero */
    .brand{
      display:flex; align-items:center; gap:12px; margin:0 0 8px 0;
      font-size: clamp(1.6rem, 2.8vw, 2.4rem);
      line-height:1.1; text-shadow: 1px 1px 4px rgba(0,0,0,.25);
    }
    .brand img{
      height: clamp(40px, 6vw, 72px);
      width:auto; border-radius:12px; display:block;
    }
    .tagline{ margin:0 0 18px 0; opacity:.95 }

    /* Card */
    .card{
      background: rgba(255,255,255,.10);
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,.25);
      border-radius:16px;
      padding:20px;
      box-shadow: 0 10px 30px rgba(0,0,0,.15);
    }
    label{ display:block; font-weight:600; margin-bottom:8px; }
    textarea{
      width:100%;
      height:220px;
      padding:12px;
      font-size:1rem;
      border-radius:10px;
      border:2px solid rgba(255,255,255,.8);
      background: rgba(255,255,255,.9);
      color:#1a1a1a;
      resize:vertical;
    }
    .actions{ margin-top:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
    button{
      padding:10px 18px; font-size:1.1rem; font-weight:700;
      background:#ffffff; color:#184b4f;
      border:2px solid rgba(255,255,255,.9);
      border-radius:10px; cursor:pointer;
      transition: transform .08s ease, box-shadow .2s ease;
    }
    button:hover{ transform: translateY(-1px); box-shadow:0 6px 16px rgba(0,0,0,.2); }
    .hint{ opacity:.85; font-size:.95rem }

    /* Result */
    #result{
      margin-top:18px; min-height:46px;
      font-size: clamp(1.4rem, 4vw, 2.2rem);
      font-weight:800; text-shadow:1px 1px 4px rgba(0,0,0,.25);
      opacity:0; transition: opacity .45s ease;
    }
    .spin{ animation: spin .6s ease-in-out; }
    @keyframes spin{
      0%{ transform: rotate(0) scale(.5) }
      50%{ transform: rotate(360deg) scale(1.15) }
      100%{ transform: rotate(720deg) scale(1) }
    }

    /* FAQ (SEO + helpful content) */
    .faq{ margin-top:28px }
    .faq details{ background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:14px 16px; margin-bottom:10px }
    .faq summary{ font-weight:700; cursor:pointer }

    footer .small{ opacity:.8; font-size:.9rem; margin-top:20px }
    a{ color:#fff; text-underline-offset:2px }
    /* De volgende regel was ongeldig CSS en heeft geen effect; laten we die weghalen in je eigen project:
       a[target="_blank"]{ rel:noopener } */
    noscript{ display:block; margin-top:12px; background: #fff; color:#111; padding:10px; border-radius:8px }