<!DOCTYPE html>
<html lang="nl">
<head>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Meetial — Op het juiste moment de juiste persoon tegenkomen</title>
  <meta name="description" content="Meetial koppelt je aan mensen die nú relevant zijn, op basis van je agenda, interesses en locatie. Slimme matches vanuit de Meetial engine voor betekenisvolle ontmoetingen." />
  <meta property="og:title" content="Meetial — Op het juiste moment de juiste persoon tegenkomen" />
  <meta property="og:description" content="Slimme matches vanuit de Meetial engine op basis van je agenda, interesses en locatie." />
  <meta property="og:type" content="website" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&display=swap" rel="stylesheet" />
  <style>
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    :root {
      --bg:           #FAF9F6;
      --white:        #FFFFFF;
      --ink:          #1C1C1A;
      --ink-60:       rgba(28, 28, 26, 0.6);
      --ink-30:       rgba(28, 28, 26, 0.3);
      --ink-10:       rgba(28, 28, 26, 0.08);
      --teal:         #2DB5A5;
      --teal-dark:    #1F9285;
      --teal-light:   #E6F7F5;
      --teal-text:    #1A7A6E;
      --amber:        #E8892A;
      --amber-light:  #FDF2E6;
      --amber-text:   #8B5200;
      --sage:         #4A7C59;
      --sage-light:   #EEF5EC;
      --sage-text:    #2D5E3F;
      --border:       #E5E3DC;
      --radius-sm:    8px;
      --radius-md:    12px;
      --radius-lg:    16px;
      --radius-xl:    24px;
      --shadow-card:  0 1px 3px rgba(28, 28, 26, 0.06), 0 1px 2px rgba(28, 28, 26, 0.04);
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
      background-color: var(--bg);
      color: var(--ink);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    }

    /* ─── Typography ─── */

    h1, h2, h3 {
      font-family: 'Fraunces', Georgia, serif;
      font-weight: 700;
      letter-spacing: -0.025em;
      line-height: 1.15;
      color: var(--ink);
    }

    .display {
      font-size: clamp(2.4rem, 5.5vw, 3.6rem);
      line-height: 1.1;
      letter-spacing: -0.03em;
    }

    .display em { font-style: italic; color: var(--teal); }

    h2.section-title {
      font-size: clamp(1.75rem, 3.5vw, 2.4rem);
      margin-bottom: 0.5rem;
    }

    .section-sub {
      font-size: 1.05rem;
      color: var(--ink-60);
      line-height: 1.65;
      max-width: 520px;
      margin: 0 auto;
    }

    p { line-height: 1.65; }

    /* ─── Layout ─── */

    .container { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem; }
    .container--narrow { max-width: 680px; margin: 0 auto; padding: 0 1.5rem; }

    /* ─── Navigation ─── */

    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(250, 249, 246, 0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--border);
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      padding: 0 1.5rem;
      max-width: 1080px;
      margin: 0 auto;
      gap: 0.5rem;
    }

    .nav-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      flex-shrink: 0;
    }

    .nav-brand svg { width: 28px; height: auto; flex-shrink: 0; }

    .nav-wordmark {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1.25rem;
      font-weight: 700;
      letter-spacing: -0.025em;
      color: var(--ink);
    }

    .nav-right {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 0.25rem;
      list-style: none;
    }

    .nav-links a {
      font-size: 0.9rem;
      color: var(--ink-60);
      text-decoration: none;
      padding: 0.5rem 0.75rem;
      border-radius: var(--radius-sm);
      transition: color 0.15s, background 0.15s;
    }

    .nav-links a:hover { color: var(--ink); background: var(--ink-10); }

    .nav-cta {
      background: var(--teal) !important;
      color: #fff !important;
      font-weight: 500;
      padding: 0.5rem 1.1rem !important;
      border-radius: var(--radius-sm) !important;
    }

    .nav-cta:hover { background: var(--teal-dark) !important; }

    .nav-mobile-cta { display: none; }

    /* ─── Language switcher ─── */

    .lang-switcher {
      position: relative;
      margin-left: 0.5rem;
    }

    .lang-btn {
      font-family: 'DM Sans', sans-serif;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--ink-60);
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0.35rem 0.6rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 3px;
      transition: color 0.15s, border-color 0.15s;
      white-space: nowrap;
    }

    .lang-btn:hover { color: var(--ink); border-color: var(--ink-30); }

    .lang-chevron {
      font-size: 0.6rem;
      opacity: 0.6;
      transition: transform 0.15s;
    }

    .lang-switcher.open .lang-chevron { transform: rotate(180deg); }

    .lang-dropdown {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-md);
      padding: 4px;
      min-width: 96px;
      display: none;
      z-index: 200;
      box-shadow: 0 4px 16px rgba(28, 28, 26, 0.1);
    }

    .lang-switcher.open .lang-dropdown { display: block; }

    .lang-option {
      font-size: 0.82rem;
      font-weight: 500;
      padding: 0.45rem 0.75rem;
      border-radius: 6px;
      cursor: pointer;
      color: var(--ink-60);
      transition: background 0.1s, color 0.1s;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .lang-option:hover { background: var(--ink-10); color: var(--ink); }
    .lang-option.active { background: var(--teal-light); color: var(--teal-text); font-weight: 600; }

    .lang-flag { font-size: 1rem; line-height: 1; }

    /* ─── Hero ─── */

    .hero {
      text-align: center;
      padding: clamp(4rem, 9vw, 7rem) 1.5rem clamp(3rem, 6vw, 5rem);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--teal-light);
      color: var(--teal-text);
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border-radius: 20px;
      padding: 5px 14px;
      margin-bottom: 1.75rem;
    }

    .eyebrow-dot {
      width: 6px;
      height: 6px;
      background: var(--teal);
      border-radius: 50%;
      animation: pulse 2s ease-in-out infinite;
      flex-shrink: 0;
    }

    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    .hero h1 { max-width: 780px; margin: 0 auto 1.25rem; }

    .hero-sub {
      font-size: 1.15rem;
      color: var(--ink-60);
      max-width: 500px;
      margin: 0 auto 2.75rem;
      line-height: 1.65;
    }

    /* ─── Forms ─── */

    .signup-form-wrap { max-width: 460px; margin: 0 auto; }

    .signup-row { display: flex; gap: 8px; }

    .signup-input {
      flex: 1;
      font-family: inherit;
      font-size: 0.95rem;
      color: var(--ink);
      background: var(--white);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-md);
      padding: 0.75rem 1rem;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s;
      min-width: 0;
    }

    .signup-input::placeholder { color: var(--ink-30); }
    .signup-input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(45, 181, 165, 0.12); }

    .btn-primary {
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: 600;
      background: var(--teal);
      color: #fff;
      border: none;
      border-radius: var(--radius-md);
      padding: 0.75rem 1.5rem;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s, transform 0.1s;
      flex-shrink: 0;
    }

    .btn-primary:hover { background: var(--teal-dark); }
    .btn-primary:active { transform: scale(0.98); }
    .btn-primary:disabled { opacity: 0.65; cursor: default; }

    .signup-note {
      font-size: 0.78rem;
      color: var(--ink-30);
      margin-top: 0.75rem;
      text-align: center;
    }

    .success-msg {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--teal-light);
      border: 1.5px solid rgba(45, 181, 165, 0.3);
      border-radius: var(--radius-md);
      padding: 0.85rem 1.25rem;
      color: var(--teal-text);
      font-size: 0.9rem;
      font-weight: 500;
    }

    .success-msg.visible { display: flex; }

    .error-msg {
      display: none;
      font-size: 0.82rem;
      color: #c0392b;
      margin-top: 0.5rem;
      text-align: center;
    }

    .error-msg.visible { display: block; }

    /* ─── Social proof ─── */

    .social-proof {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-top: 2.5rem;
      flex-wrap: wrap;
    }

    .avatar-stack { display: flex; }

    .avatar {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      border: 2px solid var(--bg);
      margin-left: -8px;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .avatar:first-child { margin-left: 0; }

    .social-text { font-size: 0.82rem; color: var(--ink-60); }

    /* ─── Sections ─── */

    section { padding: clamp(3rem, 6vw, 5rem) 0; }
    section.alt { background: var(--white); }
    .section-header { text-align: center; margin-bottom: clamp(2rem, 4vw, 3rem); }

    /* ─── Steps ─── */

    .steps {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.5rem;
    }

    .step {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 2rem 1.75rem;
    }

    .step-number {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 3rem;
      font-weight: 700;
      color: var(--teal);
      opacity: 0.18;
      line-height: 1;
      margin-bottom: 1rem;
      letter-spacing: -0.04em;
    }

    .step-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-md);
      margin-bottom: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .step-icon svg { width: 22px; height: 22px; }

    .step h3 {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
      font-family: 'Fraunces', Georgia, serif;
    }

    .step p { font-size: 0.9rem; color: var(--ink-60); line-height: 1.6; }

    /* ─── Features ─── */

    .features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
    }

    .feature-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 1.75rem;
      box-shadow: var(--shadow-card);
    }

    .feature-icon {
      width: 44px;
      height: 44px;
      border-radius: var(--radius-md);
      margin-bottom: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature-icon svg { width: 22px; height: 22px; }

    .feature-card h3 {
      font-size: 1.05rem;
      margin-bottom: 0.5rem;
      font-family: 'Fraunces', Georgia, serif;
    }

    .feature-card p { font-size: 0.88rem; color: var(--ink-60); line-height: 1.6; }

    /* ─── Quote ─── */

    .quote-section { text-align: center; }

    .quote-card {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-xl);
      padding: 2.5rem 2rem;
      max-width: 640px;
      margin: 0 auto;
    }

    .quote-mark {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 4rem;
      color: var(--teal);
      line-height: 0.5;
      margin-bottom: 1.5rem;
      opacity: 0.4;
    }

    .quote-text {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1.25rem;
      font-style: italic;
      font-weight: 400;
      color: var(--ink);
      line-height: 1.55;
      margin-bottom: 1.5rem;
    }

    .quote-author { font-size: 0.85rem; color: var(--ink-60); }

    /* ─── CTA ─── */

    .cta-section { text-align: center; }

    .cta-card {
      background: var(--teal);
      border-radius: var(--radius-xl);
      padding: clamp(2.5rem, 5vw, 4rem) 2rem;
      max-width: 680px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
    }

    .cta-card::before {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 200px; height: 200px;
      background: rgba(255,255,255,0.07);
      border-radius: 50%;
      pointer-events: none;
    }

    .cta-card::after {
      content: '';
      position: absolute;
      bottom: -80px; left: -40px;
      width: 240px; height: 240px;
      background: rgba(255,255,255,0.05);
      border-radius: 50%;
      pointer-events: none;
    }

    .cta-card h2 {
      color: #fff;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      margin-bottom: 0.75rem;
      position: relative;
      z-index: 1;
    }

    .cta-card p {
      color: rgba(255,255,255,0.8);
      font-size: 1rem;
      margin-bottom: 2rem;
      position: relative;
      z-index: 1;
    }

    .cta-form-wrap { max-width: 420px; margin: 0 auto; position: relative; z-index: 1; }

    .cta-row { display: flex; gap: 8px; }

    .cta-input {
      flex: 1;
      font-family: inherit;
      font-size: 0.95rem;
      color: var(--ink);
      background: #fff;
      border: none;
      border-radius: var(--radius-md);
      padding: 0.75rem 1rem;
      outline: none;
      transition: box-shadow 0.2s;
      min-width: 0;
    }

    .cta-input::placeholder { color: var(--ink-30); }
    .cta-input:focus { box-shadow: 0 0 0 3px rgba(255,255,255,0.3); }

    .btn-cta {
      font-family: inherit;
      font-size: 0.95rem;
      font-weight: 600;
      background: var(--ink);
      color: #fff;
      border: none;
      border-radius: var(--radius-md);
      padding: 0.75rem 1.5rem;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.2s, transform 0.1s;
      flex-shrink: 0;
    }

    .btn-cta:hover { background: #333330; }
    .btn-cta:active { transform: scale(0.98); }
    .btn-cta:disabled { opacity: 0.65; cursor: default; }

    .cta-note {
      font-size: 0.78rem;
      color: rgba(255,255,255,0.6);
      margin-top: 0.75rem;
      text-align: center;
    }

    .cta-success {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: rgba(255,255,255,0.15);
      border: 1.5px solid rgba(255,255,255,0.3);
      border-radius: var(--radius-md);
      padding: 0.85rem 1.25rem;
      color: #fff;
      font-size: 0.9rem;
      font-weight: 500;
    }

    .cta-success.visible { display: flex; }

    /* ─── Footer ─── */

    footer { border-top: 1px solid var(--border); padding: 2.5rem 1.5rem; }

    .footer-inner {
      max-width: 1080px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .footer-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
    .footer-brand svg { width: 22px; height: auto; }

    .footer-wordmark {
      font-family: 'Fraunces', Georgia, serif;
      font-size: 1rem;
      font-weight: 700;
      color: var(--ink);
      letter-spacing: -0.02em;
    }

    .footer-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }

    .footer-links a {
      font-size: 0.82rem;
      color: var(--ink-60);
      text-decoration: none;
      transition: color 0.15s;
    }

    .footer-links a:hover { color: var(--ink); }

    .footer-copy { font-size: 0.78rem; color: var(--ink-30); }

    /* ─── Responsive ─── */

    @media (max-width: 640px) {
      .nav-links { display: none; }

      .nav-mobile-cta {
        display: flex;
        background: var(--teal);
        color: #fff;
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0.45rem 1rem;
        border-radius: var(--radius-sm);
        text-decoration: none;
      }

      .signup-row { flex-direction: column; }
      .btn-primary { width: 100%; }
      .cta-row { flex-direction: column; }
      .btn-cta { width: 100%; }

      .footer-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; }

      .step-number { font-size: 2rem; }
    }
  </style>
</head>
<body>

  <!-- ─── Navigation ─── -->
  <nav>
    <div class="nav-inner">
      <a href="#" class="nav-brand">
        <svg viewBox="0 0 140 155" xmlns="http://www.w3.org/2000/svg">
          <path d="M14 4 H126 Q136 4 136 14 V98 Q136 108 126 108 H132 L70 128 L88 108 H14 Q4 108 4 98 V14 Q4 4 14 4 Z" fill="#2DB5A5"/>
          <circle cx="38" cy="30" r="14" fill="white"/>
          <path d="M22 50 Q22 44 38 44 Q54 44 54 50 L52 80 Q52 83 49 83 L27 83 Q24 83 24 80 Z" fill="white"/>
          <circle cx="102" cy="30" r="14" fill="white"/>
          <path d="M86 50 Q86 44 102 44 Q118 44 118 50 L116 80 Q116 83 113 83 L91 83 Q88 83 88 80 Z" fill="white"/>
          <g transform="translate(70,60)">
            <path d="M0,-11 L2.5,-2.5 L11,0 L2.5,2.5 L0,11 L-2.5,2.5 L-11,0 L-2.5,-2.5 Z" fill="white"/>
            <circle cx="0" cy="0" r="3" fill="#2DB5A5"/>
          </g>
        </svg>
        <span class="nav-wordmark">meetial</span>
      </a>

      <div class="nav-right">
        <ul class="nav-links">
          <li><a href="#how-it-works" data-i18n="nav_how">Hoe het werkt</a></li>
          <li><a href="#for-who" data-i18n="nav_forwho">Voor wie</a></li>
          <li><a href="#signup" class="nav-cta" data-i18n="nav_beta">Beta aanvragen</a></li>
        </ul>

        <!-- Language switcher -->
        <div class="lang-switcher" id="langSwitcher">
          <button class="lang-btn" id="langBtn" onclick="toggleLangMenu()" aria-label="Taal kiezen">
            <span id="langBtnText">NL</span>
            <span class="lang-chevron">▾</span>
          </button>
          <div class="lang-dropdown" id="langDropdown">
            <div class="lang-option active" data-lang="nl" onclick="setLang('nl')"><span class="lang-flag">🇳🇱</span> Nederlands</div>
            <div class="lang-option" data-lang="en" onclick="setLang('en')"><span class="lang-flag">🇬🇧</span> English</div>
            <div class="lang-option" data-lang="de" onclick="setLang('de')"><span class="lang-flag">🇩🇪</span> Deutsch</div>
            <div class="lang-option" data-lang="fr" onclick="setLang('fr')"><span class="lang-flag">🇫🇷</span> Français</div>
            <div class="lang-option" data-lang="es" onclick="setLang('es')"><span class="lang-flag">🇪🇸</span> Español</div>
          </div>
        </div>

        <a href="#signup" class="nav-mobile-cta" data-i18n="nav_beta">Beta aanvragen</a>
      </div>
    </div>
  </nav>

  <!-- ─── Hero ─── -->
  <section class="hero">
    <div class="eyebrow">
      <span class="eyebrow-dot"></span>
      <span data-i18n="eyebrow">Bijna in bèta · Nederland</span>
    </div>

    <h1 class="display" data-i18n-html="hero_h1">
      Op het juiste moment<br><em>de juiste persoon</em> tegenkomen
    </h1>

    <p class="hero-sub" data-i18n="hero_sub">
      Meetial koppelt je aan mensen die nú relevant zijn —
      op basis van je agenda, je interesses en waar je bent.
    </p>

    <div class="signup-form-wrap">
      <form id="heroForm" action="signup.php" method="POST" onsubmit="handleHeroSubmit(event)">
        <input type="hidden" name="_replyto" value="" />
        <div class="signup-row">
          <input class="signup-input" type="email" id="heroEmail" name="email"
            data-i18n-placeholder="email_placeholder"
            placeholder="jouw@email.com" required autocomplete="email" />
          <button type="submit" class="btn-primary" id="heroBtn" data-i18n="hero_btn">
            Vroege toegang
          </button>
        </div>
        <p class="error-msg" id="heroError" data-i18n="hero_error">Er ging iets mis. Probeer het opnieuw.</p>
      </form>
      <div class="success-msg" id="heroSuccess">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
          <circle cx="9" cy="9" r="8" stroke="#2DB5A5" stroke-width="1.5"/>
          <path d="M5.5 9L7.8 11.5L12.5 6.5" stroke="#2DB5A5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
        <span data-i18n="hero_success">Gelukt! We houden je op de hoogte.</span>
      </div>
      <p class="signup-note" data-i18n="no_spam">Geen spam. Alleen updates die ertoe doen.</p>
    </div>

    <div class="social-proof">
      <div class="avatar-stack">
        <div class="avatar" style="background:#2DB5A5;">MV</div>
        <div class="avatar" style="background:#4A7C59;">JK</div>
        <div class="avatar" style="background:#E8892A;">RS</div>
        <div class="avatar" style="background:#7B6FAB;">TH</div>
      </div>
      <span class="social-text" data-i18n="social_proof">Al 200+ mensen op de wachtlijst</span>
    </div>
  </section>

  <!-- ─── Hoe het werkt ─── -->
  <section class="alt" id="how-it-works">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title" data-i18n="steps_title">Zo werkt het</h2>
        <p class="section-sub" data-i18n="steps_sub">In drie stappen naar een ontmoeting die het waard is.</p>
      </div>
      <div class="steps">

        <div class="step">
          <div class="step-number">01</div>
          <div class="step-icon" style="background:var(--teal-light);">
            <svg viewBox="0 0 24 24" fill="none" stroke="#2DB5A5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="8" r="4"/><path d="M4 20c0-4 3.6-7 8-7s8 3 8 7"/>
            </svg>
          </div>
          <h3 data-i18n="step1_title">Maak je profiel aan</h3>
          <p data-i18n="step1_body">Vertel wie je bent, wat je bezighoudt en wat je zoekt. Je headline, interesses en beschikbaarheid — dat is alles wat je nodig hebt.</p>
        </div>

        <div class="step">
          <div class="step-number">02</div>
          <div class="step-icon" style="background:var(--amber-light);">
            <svg viewBox="0 0 24 24" fill="none" stroke="#E8892A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/>
              <circle cx="12" cy="16" r="2"/>
            </svg>
          </div>
          <h3 data-i18n="step2_title">Meetial zoekt voor jou</h3>
          <p data-i18n="step2_body">Meetial vergelijkt agenda's, interesses en locatie. Alleen als jullie allebei vrij zijn én er een goede reden is, stelt Meetial jullie voor.</p>
        </div>

        <div class="step">
          <div class="step-number">03</div>
          <div class="step-icon" style="background:var(--sage-light);">
            <svg viewBox="0 0 24 24" fill="none" stroke="#4A7C59" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
            </svg>
          </div>
          <h3 data-i18n="step3_title">Ontmoet de juiste mensen</h3>
          <p data-i18n="step3_body">Accepteer de match, spreek een plek af en ontmoet iemand die het waard is. De rest schrijft zichzelf.</p>
        </div>

      </div>
    </div>
  </section>

  <!-- ─── Features ─── -->
  <section id="for-who">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title" data-i18n="feat_title">Meer dan netwerken</h2>
        <p class="section-sub" data-i18n="feat_sub">Meetial is voor iedereen die gelooft dat de beste gesprekken niet toevallig zijn, maar slim gefaciliteerd.</p>
      </div>
      <div class="features">

        <div class="feature-card">
          <div class="feature-icon" style="background:var(--teal-light);">
            <svg viewBox="0 0 24 24" fill="none" stroke="#2DB5A5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/>
              <path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/>
            </svg>
          </div>
          <h3 data-i18n="f1_title">Nieuwe mensen ontmoeten</h3>
          <p data-i18n="f1_body">Meetial stelt je voor aan mensen buiten je directe netwerk — relevant, maar onbekend. Precies zoals toevallige ontmoetingen vroeger werkten, alleen slimmer.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon" style="background:var(--amber-light);">
            <svg viewBox="0 0 24 24" fill="none" stroke="#E8892A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/>
            </svg>
          </div>
          <h3 data-i18n="f2_title">Bijpraten en leren</h3>
          <p data-i18n="f2_body">Geen pitch, geen agenda. Gewoon bijpraten met iemand die iets meemaakt wat voor jou relevant is — of andersom. Kennisdeling op zijn best.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon" style="background:var(--sage-light);">
            <svg viewBox="0 0 24 24" fill="none" stroke="#4A7C59" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
            </svg>
          </div>
          <h3 data-i18n="f3_title">Slimme timing</h3>
          <p data-i18n="f3_body">Meetial synchroniseert met je agenda en stelt alleen voor als jullie allebei écht vrij zijn. Geen gedoe met inplannen, geen afspraakjes die niet doorgaan.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon" style="background:#EEF0FB;">
            <svg viewBox="0 0 24 24" fill="none" stroke="#5C6BC0" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <circle cx="12" cy="12" r="10"/><path d="M12 8v4l3 3"/>
            </svg>
          </div>
          <h3 data-i18n="f4_title">Op evenementen</h3>
          <p data-i18n="f4_body">Meetial werkt ook live, op conferenties en netwerkborrels. De app matcht je real-time met andere aanwezigen — je hoeft de zaal alleen maar in te lopen.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon" style="background:var(--teal-light);">
            <svg viewBox="0 0 24 24" fill="none" stroke="#2DB5A5" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/>
            </svg>
          </div>
          <h3 data-i18n="f5_title">Privacyvriendelijk</h3>
          <p data-i18n="f5_body">Meetial leest wanneer je bezet bent — niet waarmee. Agendasynchronisatie is opt-in. Jij bepaalt wat je deelt en met wie.</p>
        </div>

        <div class="feature-card">
          <div class="feature-icon" style="background:var(--amber-light);">
            <svg viewBox="0 0 24 24" fill="none" stroke="#E8892A" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
              <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/>
            </svg>
          </div>
          <h3 data-i18n="f6_title">Recap per e-mail</h3>
          <p data-i18n="f6_body">Na een evenement ontvang je een overzicht van alle mensen die je hebt ontmoet. Zo raak je nooit meer een contact kwijt na een drukke avond.</p>
        </div>

      </div>
    </div>
  </section>

  <!-- ─── Quote ─── -->
  <section class="alt quote-section">
    <div class="container--narrow">
      <div class="quote-card">
        <div class="quote-mark">"</div>
        <p class="quote-text" data-i18n="quote_text">
          De beste zakelijke gesprekken die ik ooit heb gehad, begonnen altijd
          met iemand die ik toevallig tegenkwam op het juiste moment.
          Meetial maakt dat toevallige niet-toevallig.
        </p>
        <p class="quote-author" data-i18n="quote_author">— Toekomstige bèta-gebruiker</p>
      </div>
    </div>
  </section>

  <!-- ─── CTA ─── -->
  <section id="signup">
    <div class="container cta-section">
      <div class="cta-card">
        <h2 data-i18n="cta_title">Word één van de eersten</h2>
        <p data-i18n="cta_body">Meetial is in ontwikkeling. Laat je e-mailadres achter en ontvang als eerste toegang tot de bèta.</p>
        <div class="cta-form-wrap">
          <form id="ctaForm" action="signup.php" method="POST" onsubmit="handleCtaSubmit(event)">
            <input type="hidden" name="_replyto" value="" />
            <div class="cta-row">
              <input class="cta-input" type="email" id="ctaEmail" name="email"
                data-i18n-placeholder="email_placeholder"
                placeholder="jouw@email.com" required autocomplete="email" />
              <button type="submit" class="btn-cta" id="ctaBtn" data-i18n="cta_btn">Aanmelden</button>
            </div>
          </form>
          <div class="cta-success" id="ctaSuccess">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
              <circle cx="9" cy="9" r="8" stroke="white" stroke-width="1.5"/>
              <path d="M5.5 9L7.8 11.5L12.5 6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span data-i18n="cta_success">Gelukt! Je staat op de lijst.</span>
          </div>
          <p class="cta-note" data-i18n="no_spam">Geen spam. Alleen updates die ertoe doen.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ─── Footer ─── -->
  <footer>
    <div class="footer-inner">
      <a href="#" class="footer-brand">
        <svg viewBox="0 0 140 155" xmlns="http://www.w3.org/2000/svg">
          <path d="M14 4 H126 Q136 4 136 14 V98 Q136 108 126 108 H132 L70 128 L88 108 H14 Q4 108 4 98 V14 Q4 4 14 4 Z" fill="#2DB5A5"/>
          <circle cx="38" cy="30" r="14" fill="white"/>
          <path d="M22 50 Q22 44 38 44 Q54 44 54 50 L52 80 Q52 83 49 83 L27 83 Q24 83 24 80 Z" fill="white"/>
          <circle cx="102" cy="30" r="14" fill="white"/>
          <path d="M86 50 Q86 44 102 44 Q118 44 118 50 L116 80 Q116 83 113 83 L91 83 Q88 83 88 80 Z" fill="white"/>
          <g transform="translate(70,60)">
            <path d="M0,-11 L2.5,-2.5 L11,0 L2.5,2.5 L0,11 L-2.5,2.5 L-11,0 L-2.5,-2.5 Z" fill="white"/>
            <circle cx="0" cy="0" r="3" fill="#2DB5A5"/>
          </g>
        </svg>
        <span class="footer-wordmark">meetial</span>
      </a>
      <ul class="footer-links">
        <li><a href="#how-it-works" data-i18n="nav_how">Hoe het werkt</a></li>
        <li><a href="privacy.html" data-i18n="footer_privacy">Privacybeleid</a></li>
        <li><a href="terms.html" data-i18n="footer_terms">Gebruiksvoorwaarden</a></li>
        <li><a href="contact.html" data-i18n="footer_contact">Contact</a></li>
      </ul>
      <p class="footer-copy" data-i18n="footer_copy">© 2026 Meetial · Alle rechten voorbehouden</p>
    </div>
  </footer>

  <script>
    // ─── Translations ───────────────────────────────────────────────────────

    const T = {
      nl: {
        nav_how:      'Hoe het werkt',
        nav_forwho:   'Voor wie',
        nav_beta:     'Beta aanvragen',
        eyebrow:      'Bijna in bèta · Nederland',
        hero_h1:      'Op het juiste moment<br><em>de juiste persoon</em> tegenkomen',
        hero_sub:     'Meetial koppelt je aan mensen die nú relevant zijn — op basis van je agenda, je interesses en waar je bent.',
        hero_btn:     'Vroege toegang',
        hero_error:   'Er ging iets mis. Probeer het opnieuw.',
        hero_success: 'Gelukt! We houden je op de hoogte.',
        no_spam:      'Geen spam. Alleen updates die ertoe doen.',
        social_proof: 'Al 200+ mensen op de wachtlijst',
        steps_title:  'Zo werkt het',
        steps_sub:    'In drie stappen naar een ontmoeting die het waard is.',
        step1_title:  'Maak je profiel aan',
        step1_body:   'Vertel wie je bent, wat je bezighoudt en wat je zoekt. Je headline, interesses en beschikbaarheid — dat is alles wat je nodig hebt.',
        step2_title:  'Meetial zoekt voor jou',
        step2_body:   'Meetial vergelijkt agenda\'s, interesses en locatie. Alleen als jullie allebei vrij zijn én er een goede reden is, stelt Meetial jullie voor.',
        step3_title:  'Ontmoet de juiste mensen',
        step3_body:   'Accepteer de match, spreek een plek af en ontmoet iemand die het waard is. De rest schrijft zichzelf.',
        feat_title:   'Meer dan netwerken',
        feat_sub:     'Meetial is voor iedereen die gelooft dat de beste gesprekken niet toevallig zijn, maar slim gefaciliteerd.',
        f1_title:     'Nieuwe mensen ontmoeten',
        f1_body:      'Meetial stelt je voor aan mensen buiten je directe netwerk — relevant, maar onbekend. Precies zoals toevallige ontmoetingen vroeger werkten, alleen slimmer.',
        f2_title:     'Bijpraten en leren',
        f2_body:      'Geen pitch, geen agenda. Gewoon bijpraten met iemand die iets meemaakt wat voor jou relevant is — of andersom. Kennisdeling op zijn best.',
        f3_title:     'Slimme timing',
        f3_body:      'Meetial synchroniseert met je agenda en stelt alleen voor als jullie allebei écht vrij zijn. Geen gedoe met inplannen, geen afspraakjes die niet doorgaan.',
        f4_title:     'Op evenementen',
        f4_body:      'Meetial werkt ook live, op conferenties en netwerkborrels. De app matcht je real-time met andere aanwezigen — je hoeft de zaal alleen maar in te lopen.',
        f5_title:     'Privacyvriendelijk',
        f5_body:      'Meetial leest wanneer je bezet bent — niet waarmee. Agendasynchronisatie is opt-in. Jij bepaalt wat je deelt en met wie.',
        f6_title:     'Recap per e-mail',
        f6_body:      'Na een evenement ontvang je een overzicht van alle mensen die je hebt ontmoet. Zo raak je nooit meer een contact kwijt na een drukke avond.',
        quote_text:   'De beste zakelijke gesprekken die ik ooit heb gehad, begonnen altijd met iemand die ik toevallig tegenkwam op het juiste moment. Meetial maakt dat toevallige niet-toevallig.',
        quote_author: '— Toekomstige bèta-gebruiker',
        cta_title:    'Word één van de eersten',
        cta_body:     'Meetial is in ontwikkeling. Laat je e-mailadres achter en ontvang als eerste toegang tot de bèta.',
        cta_btn:      'Aanmelden',
        cta_success:  'Gelukt! Je staat op de lijst.',
        footer_privacy:'Privacybeleid',
        footer_terms: 'Gebruiksvoorwaarden',
        footer_contact:'Contact',
        footer_copy:  '© 2026 Meetial · Alle rechten voorbehouden',
        email_placeholder: 'jouw@email.com',
        submitting:   'Bezig…',
      },

      en: {
        nav_how:      'How it works',
        nav_forwho:   'For whom',
        nav_beta:     'Request beta',
        eyebrow:      'Coming soon · Netherlands',
        hero_h1:      'Meeting the <em>right person</em><br>at the right moment',
        hero_sub:     'Meetial connects you with people who are relevant right now — based on your calendar, your interests, and where you are.',
        hero_btn:     'Early access',
        hero_error:   'Something went wrong. Please try again.',
        hero_success: 'Done! We\'ll keep you posted.',
        no_spam:      'No spam. Only updates that matter.',
        social_proof: '200+ people already on the waitlist',
        steps_title:  'How it works',
        steps_sub:    'Three steps to a meeting worth your time.',
        step1_title:  'Create your profile',
        step1_body:   'Tell us who you are, what drives you, and what you\'re looking for. Your headline, interests, and availability — that\'s all you need.',
        step2_title:  'Meetial searches for you',
        step2_body:   'Meetial compares calendars, interests, and location. Only when you\'re both free and there\'s a good reason, Meetial introduces you.',
        step3_title:  'Meet the right people',
        step3_body:   'Accept the match, find a spot, and meet someone worth your time. The rest takes care of itself.',
        feat_title:   'More than networking',
        feat_sub:     'Meetial is for everyone who believes the best conversations aren\'t accidental — they\'re smartly facilitated.',
        f1_title:     'Meet new people',
        f1_body:      'Meetial introduces you to people outside your immediate network — relevant, but unknown. Just like chance encounters used to work, only smarter.',
        f2_title:     'Catch up and learn',
        f2_body:      'No pitch, no agenda. Just catching up with someone going through something relevant to you — or vice versa. Knowledge sharing at its best.',
        f3_title:     'Smart timing',
        f3_body:      'Meetial syncs with your calendar and only suggests meetings when you\'re both truly free. No scheduling hassle, no meetings that fall through.',
        f4_title:     'At events',
        f4_body:      'Meetial also works live, at conferences and networking events. The app matches you in real-time with other attendees — you just have to walk in.',
        f5_title:     'Privacy-friendly',
        f5_body:      'Meetial reads when you\'re busy — not why. Calendar sync is opt-in. You decide what you share and with whom.',
        f6_title:     'Email recap',
        f6_body:      'After an event you receive an overview of everyone you met. Never lose a contact after a busy evening again.',
        quote_text:   'The best business conversations I\'ve ever had always started with someone I happened to meet at the right moment. Meetial makes that coincidence intentional.',
        quote_author: '— Future beta user',
        cta_title:    'Be one of the first',
        cta_body:     'Meetial is in development. Leave your email address and be the first to access the beta.',
        cta_btn:      'Sign up',
        cta_success:  'Done! You\'re on the list.',
        footer_privacy:'Privacy policy',
        footer_terms: 'Terms of service',
        footer_contact:'Contact',
        footer_copy:  '© 2026 Meetial · All rights reserved',
        email_placeholder: 'your@email.com',
        submitting:   'Loading…',
      },

      de: {
        nav_how:      'So funktioniert\'s',
        nav_forwho:   'Für wen',
        nav_beta:     'Beta anfragen',
        eyebrow:      'Bald verfügbar · Niederlande',
        hero_h1:      'Zur richtigen Zeit<br>die <em>richtige Person</em> treffen',
        hero_sub:     'Meetial verbindet dich mit Menschen, die jetzt relevant sind — basierend auf deinem Kalender, deinen Interessen und deinem Standort.',
        hero_btn:     'Früher Zugang',
        hero_error:   'Etwas ist schiefgelaufen. Bitte erneut versuchen.',
        hero_success: 'Geschafft! Wir halten dich auf dem Laufenden.',
        no_spam:      'Kein Spam. Nur Updates, die zählen.',
        social_proof: 'Bereits 200+ Menschen auf der Warteliste',
        steps_title:  'So funktioniert\'s',
        steps_sub:    'Drei Schritte zu einem Treffen, das es wert ist.',
        step1_title:  'Profil erstellen',
        step1_body:   'Erzähl uns, wer du bist, was dich bewegt und was du suchst. Deine Headline, Interessen und Verfügbarkeit — das ist alles, was du brauchst.',
        step2_title:  'Meetial sucht für dich',
        step2_body:   'Meetial vergleicht Kalender, Interessen und Standort. Nur wenn ihr beide frei seid und es einen guten Grund gibt, stellt Meetial euch vor.',
        step3_title:  'Die richtigen Menschen treffen',
        step3_body:   'Akzeptiere das Match, vereinbare einen Treffpunkt und triff jemanden, der es wert ist. Den Rest ergibt sich von selbst.',
        feat_title:   'Mehr als Networking',
        feat_sub:     'Meetial ist für alle, die glauben, dass die besten Gespräche kein Zufall sind, sondern klug gefördert werden.',
        f1_title:     'Neue Menschen kennenlernen',
        f1_body:      'Meetial stellt dich Personen vor, die außerhalb deines direkten Netzwerks liegen — relevant, aber unbekannt. Genau wie zufällige Begegnungen früher, nur smarter.',
        f2_title:     'Austauschen und lernen',
        f2_body:      'Kein Pitch, keine Agenda. Einfach austauschen mit jemandem, der etwas erlebt, das für dich relevant ist — oder umgekehrt. Wissensaustausch vom Feinsten.',
        f3_title:     'Intelligentes Timing',
        f3_body:      'Meetial synchronisiert sich mit deinem Kalender und schlägt nur Treffen vor, wenn ihr beide wirklich frei seid. Kein Planungschaos, keine Termine, die ausfallen.',
        f4_title:     'Bei Veranstaltungen',
        f4_body:      'Meetial funktioniert auch live, bei Konferenzen und Networking-Events. Die App matcht dich in Echtzeit mit anderen Teilnehmern — du musst nur hereinkommen.',
        f5_title:     'Datenschutzfreundlich',
        f5_body:      'Meetial liest, wann du beschäftigt bist — nicht womit. Kalendersynchronisation ist opt-in. Du entscheidest, was du teilst und mit wem.',
        f6_title:     'E-Mail-Zusammenfassung',
        f6_body:      'Nach einer Veranstaltung erhältst du eine Übersicht aller Menschen, die du getroffen hast. Verliere nie wieder einen Kontakt nach einem vollen Abend.',
        quote_text:   'Die besten Geschäftsgespräche, die ich je hatte, begannen immer mit jemandem, den ich zufällig im richtigen Moment traf. Meetial macht diesen Zufall zur Absicht.',
        quote_author: '— Zukünftiger Beta-Nutzer',
        cta_title:    'Sei einer der Ersten',
        cta_body:     'Meetial ist in Entwicklung. Hinterlasse deine E-Mail und erhalte als Erstes Zugang zur Beta.',
        cta_btn:      'Anmelden',
        cta_success:  'Geschafft! Du stehst auf der Liste.',
        footer_privacy:'Datenschutz',
        footer_terms: 'Nutzungsbedingungen',
        footer_contact:'Kontakt',
        footer_copy:  '© 2026 Meetial · Alle Rechte vorbehalten',
        email_placeholder: 'deine@email.com',
        submitting:   'Wird gesendet…',
      },

      fr: {
        nav_how:      'Comment ça marche',
        nav_forwho:   'Pour qui',
        nav_beta:     'Demander la bêta',
        eyebrow:      'Bientôt disponible · Pays-Bas',
        hero_h1:      'Rencontrer la <em>bonne personne</em><br>au bon moment',
        hero_sub:     'Meetial vous connecte avec des personnes pertinentes maintenant — selon votre agenda, vos intérêts et votre localisation.',
        hero_btn:     'Accès anticipé',
        hero_error:   'Une erreur s\'est produite. Veuillez réessayer.',
        hero_success: 'C\'est fait ! Nous vous tiendrons informé.',
        no_spam:      'Pas de spam. Uniquement les mises à jour qui comptent.',
        social_proof: 'Déjà 200+ personnes sur la liste d\'attente',
        steps_title:  'Comment ça marche',
        steps_sub:    'Trois étapes vers une rencontre qui en vaut la peine.',
        step1_title:  'Créez votre profil',
        step1_body:   'Dites-nous qui vous êtes, ce qui vous anime et ce que vous recherchez. Votre titre, vos intérêts et vos disponibilités — c\'est tout ce qu\'il vous faut.',
        step2_title:  'Meetial cherche pour vous',
        step2_body:   'Meetial compare les agendas, les intérêts et la localisation. Seulement quand vous êtes tous les deux libres et qu\'il y a une bonne raison, Meetial vous présente.',
        step3_title:  'Rencontrez les bonnes personnes',
        step3_body:   'Acceptez le match, trouvez un endroit et rencontrez quelqu\'un qui en vaut la peine. Le reste se fait naturellement.',
        feat_title:   'Plus que du réseautage',
        feat_sub:     'Meetial est pour tous ceux qui croient que les meilleures conversations ne sont pas accidentelles, mais intelligemment facilitées.',
        f1_title:     'Rencontrer de nouvelles personnes',
        f1_body:      'Meetial vous présente des personnes hors de votre réseau direct — pertinentes, mais inconnues. Comme les rencontres fortuites d\'autrefois, en plus intelligent.',
        f2_title:     'Échanger et apprendre',
        f2_body:      'Pas de pitch, pas d\'agenda. Juste échanger avec quelqu\'un qui vit quelque chose de pertinent pour vous — ou vice versa. Le partage des connaissances à son meilleur.',
        f3_title:     'Timing intelligent',
        f3_body:      'Meetial se synchronise avec votre agenda et ne suggère des réunions que lorsque vous êtes tous les deux vraiment libres. Pas de tracas de planification.',
        f4_title:     'Lors des événements',
        f4_body:      'Meetial fonctionne aussi en direct, lors de conférences et d\'événements de networking. L\'app vous connecte en temps réel avec d\'autres participants.',
        f5_title:     'Respectueux de la vie privée',
        f5_body:      'Meetial lit quand vous êtes occupé — pas avec quoi. La synchronisation du calendrier est opt-in. Vous décidez ce que vous partagez et avec qui.',
        f6_title:     'Récapitulatif par e-mail',
        f6_body:      'Après un événement, vous recevez un aperçu de toutes les personnes que vous avez rencontrées. Ne perdez plus jamais un contact après une soirée chargée.',
        quote_text:   'Les meilleures conversations professionnelles que j\'ai eues ont toujours commencé avec quelqu\'un rencontré par hasard au bon moment. Meetial rend ce hasard intentionnel.',
        quote_author: '— Futur utilisateur bêta',
        cta_title:    'Soyez parmi les premiers',
        cta_body:     'Meetial est en développement. Laissez votre adresse e-mail et soyez le premier à accéder à la bêta.',
        cta_btn:      'S\'inscrire',
        cta_success:  'C\'est fait ! Vous êtes sur la liste.',
        footer_privacy:'Confidentialité',
        footer_terms: 'Conditions d\'utilisation',
        footer_contact:'Contact',
        footer_copy:  '© 2026 Meetial · Tous droits réservés',
        email_placeholder: 'votre@email.com',
        submitting:   'Envoi…',
      },

      es: {
        nav_how:      'Cómo funciona',
        nav_forwho:   'Para quién',
        nav_beta:     'Solicitar beta',
        eyebrow:      'Próximamente · Países Bajos',
        hero_h1:      'Conocer a la <em>persona correcta</em><br>en el momento correcto',
        hero_sub:     'Meetial te conecta con personas relevantes ahora — según tu agenda, tus intereses y tu ubicación.',
        hero_btn:     'Acceso anticipado',
        hero_error:   'Algo salió mal. Por favor, inténtalo de nuevo.',
        hero_success: '¡Listo! Te mantendremos informado.',
        no_spam:      'Sin spam. Solo actualizaciones importantes.',
        social_proof: 'Más de 200 personas ya en la lista de espera',
        steps_title:  'Cómo funciona',
        steps_sub:    'Tres pasos hacia un encuentro que vale la pena.',
        step1_title:  'Crea tu perfil',
        step1_body:   'Cuéntanos quién eres, qué te mueve y qué buscas. Tu titular, intereses y disponibilidad — eso es todo lo que necesitas.',
        step2_title:  'Meetial busca por ti',
        step2_body:   'Meetial compara agendas, intereses y ubicación. Solo cuando ambos estéis libres y haya una buena razón, Meetial os presenta.',
        step3_title:  'Conoce a las personas correctas',
        step3_body:   'Acepta el match, encuentra un lugar y conoce a alguien que vale la pena. El resto se escribe solo.',
        feat_title:   'Más que networking',
        feat_sub:     'Meetial es para todos los que creen que las mejores conversaciones no son accidentales, sino facilitadas de forma inteligente.',
        f1_title:     'Conocer gente nueva',
        f1_body:      'Meetial te presenta personas fuera de tu red directa — relevantes, pero desconocidas. Justo como las reuniones casuales solían funcionar, solo que más inteligente.',
        f2_title:     'Conversar y aprender',
        f2_body:      'Sin pitch, sin agenda. Solo conversar con alguien que está viviendo algo relevante para ti — o viceversa. Intercambio de conocimiento en su mejor versión.',
        f3_title:     'Timing inteligente',
        f3_body:      'Meetial se sincroniza con tu agenda y solo sugiere reuniones cuando ambos estéis realmente libres. Sin complicaciones de planificación.',
        f4_title:     'En eventos',
        f4_body:      'Meetial también funciona en vivo, en conferencias y eventos de networking. La app te empareja en tiempo real con otros asistentes — solo tienes que entrar.',
        f5_title:     'Respetuoso con la privacidad',
        f5_body:      'Meetial lee cuándo estás ocupado — no con qué. La sincronización del calendario es opt-in. Tú decides qué compartes y con quién.',
        f6_title:     'Resumen por correo',
        f6_body:      'Después de un evento recibes un resumen de todas las personas que conociste. No vuelvas a perder un contacto después de una noche ocupada.',
        quote_text:   'Las mejores conversaciones de negocios que he tenido siempre comenzaron con alguien que conocí por casualidad en el momento correcto. Meetial hace que esa casualidad sea intencional.',
        quote_author: '— Futuro usuario beta',
        cta_title:    'Sé uno de los primeros',
        cta_body:     'Meetial está en desarrollo. Deja tu correo electrónico y sé el primero en acceder a la beta.',
        cta_btn:      'Registrarse',
        cta_success:  '¡Listo! Estás en la lista.',
        footer_privacy:'Privacidad',
        footer_terms: 'Condiciones de uso',
        footer_contact:'Contacto',
        footer_copy:  '© 2026 Meetial · Todos los derechos reservados',
        email_placeholder: 'tu@email.com',
        submitting:   'Enviando…',
      }
    };

    // ─── Language engine ─────────────────────────────────────────────────────

    let currentLang = 'nl';

    function applyLanguage(lang) {
      const t = T[lang] || T.nl;
      currentLang = lang;
      document.documentElement.lang = lang;

      document.querySelectorAll('[data-i18n]').forEach(el => {
        const key = el.dataset.i18n;
        if (t[key] !== undefined) el.textContent = t[key];
      });

      document.querySelectorAll('[data-i18n-html]').forEach(el => {
        const key = el.dataset.i18nHtml;
        if (t[key] !== undefined) el.innerHTML = t[key];
      });

      document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
        const key = el.dataset.i18nPlaceholder;
        if (t[key] !== undefined) el.placeholder = t[key];
      });

      document.querySelectorAll('.lang-option').forEach(opt => {
        opt.classList.toggle('active', opt.dataset.lang === lang);
      });

      const labels = { nl: 'NL', en: 'EN', de: 'DE', fr: 'FR', es: 'ES' };
      document.getElementById('langBtnText').textContent = labels[lang] || lang.toUpperCase();

      try { localStorage.setItem('meetial_lang', lang); } catch(e) {}
    }

    function setLang(lang) {
      applyLanguage(lang);
      closeLangMenu();
    }

    function toggleLangMenu() {
      document.getElementById('langSwitcher').classList.toggle('open');
    }

    function closeLangMenu() {
      document.getElementById('langSwitcher').classList.remove('open');
    }

    document.addEventListener('click', function(e) {
      if (!e.target.closest('#langSwitcher')) closeLangMenu();
    });

    function detectLanguage() {
      try {
        const saved = localStorage.getItem('meetial_lang');
        if (saved && T[saved]) return saved;
      } catch(e) {}
      const b = (navigator.language || navigator.userLanguage || 'nl').toLowerCase();
      if (b.startsWith('nl')) return 'nl';
      if (b.startsWith('de')) return 'de';
      if (b.startsWith('fr')) return 'fr';
      if (b.startsWith('es')) return 'es';
      if (b.startsWith('nl')) return 'nl';
      return 'en';
    }

    // ─── Form handlers ───────────────────────────────────────────────────────

    async function submitEmail(formId, emailId, btnId, successId, errorId) {
      const form = document.getElementById(formId);
      const email = document.getElementById(emailId);
      const btn   = document.getElementById(btnId);
      const succ  = document.getElementById(successId);
      const err   = errorId ? document.getElementById(errorId) : null;
      const orig  = btn.textContent;

      btn.disabled    = true;
      btn.textContent = T[currentLang]?.submitting || '…';
      if (err) err.classList.remove('visible');

      const data = new FormData(form);
      data.set('email', email.value);

      try {
        const res = await fetch(form.action, {
          method: 'POST',
          body: data,
          headers: { 'Accept': 'application/json' }
        });
        if (res.ok) {
          form.style.display = 'none';
          succ.classList.add('visible');
        } else {
          throw new Error('server');
        }
      } catch (_) {
        btn.disabled    = false;
        btn.textContent = orig;
        if (err) err.classList.add('visible');
      }
    }

    function handleHeroSubmit(e) {
      e.preventDefault();
      submitEmail('heroForm', 'heroEmail', 'heroBtn', 'heroSuccess', 'heroError');
    }

    function handleCtaSubmit(e) {
      e.preventDefault();
      submitEmail('ctaForm', 'ctaEmail', 'ctaBtn', 'ctaSuccess', null);
    }

    // ─── Init ────────────────────────────────────────────────────────────────

    applyLanguage(detectLanguage());
  </script>

</body>
</html>
