:root{
      --brand-red: #c94b44; /* primary CTA */
      --brand-red-dark: #a83a34;
      --accent-gold: #d4af37;
      --muted: #f6f3ef;
      --max-width: 1200px;
    }

    /* Reset & base */
    *{box-sizing:border-box}
    html,body{height:100%;margin:0}
    body{
      font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      color: #111;
      background: #fff;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    a{color:inherit;text-decoration:none}

    /* Header */
    header{
      background: rgba(255,255,255,0.95);
      border-bottom: 1px solid rgba(0,0,0,0.04);
      position:sticky;top:0;z-index:40;
      backdrop-filter: blur(4px);
    }
   
    .nav-inner{
      max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;
    }
    .logo{display:flex;align-items:center;gap:10px;color:white;font-weight:700}
     .logo .heart{width:36px;height:36px;border-radius:8px;background:#d63c35;display:inline-grid;place-items:center;font-weight:700}
     .logo span{font-family: 'Playfair Display', serif; font-size:1.15rem}

    nav.desktop{display:none;gap:20px}
    .auth{display:flex;gap:10px;align-items:center}
    .btn{padding:8px 14px;border-radius:10px;font-weight:600;border:1px solid transparent;cursor:pointer}
    .btn-ghost{background:transparent;color:#222;border-color:transparent}
    .btn-primary{background:var(--brand-red);color:white}
    .btn-outline{background:rgba(255,255,255,0.18);color:white;border:1px solid rgba(255,255,255,0.18)}

  /* Language selector */
  .language-selector {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
  }
  .language-btn {
    background: #fff;
    border: 1px solid #ccc;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    border-radius: 6px;
  }
  .language-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    min-width: 120px;
    z-index: 1000;
  }
  .language-dropdown a {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
  }
  .language-dropdown a:hover {
    background: #f0f0f0;
  }
  .language-selector.open .language-dropdown {
    display: block;
  }
  .flag {
    width: 18px;
    height: 12px;
    object-fit: cover;
  }
  
    /* Hero */
    .hero{
      position:relative;overflow:hidden;
      min-height:85vh;display:flex;align-items:center;justify-content:center;
      background-image: url('/graph/hero-mobile.webp');
      background-size:cover;background-position:center center;
    }

    .hero-inner{max-width:var(--max-width);width:100%;padding:48px 20px;display:flex;gap:32px;align-items:center;}

    .hero-left{flex:1;color:var(--muted)}
    .hero-left h1{
      font-family:'Playfair Display', serif;color:white;margin:0 0 15px;font-size:clamp(28px,6vw,64px);line-height:1.02;font-weight:700
    }
    .hero-left p{color:rgba(255,255,255,0.92);margin:0 0 22px;font-size:1.05rem}

    .hero-ctas{display:flex;gap:12px}
    .hero-ctas .btn{border-radius:14px;padding:12px 20px;font-size:1rem}

    /* Form card (shows on tablet/desktop) */
    .signup-card{width:360px;background:rgba(255,255,255,0.85);border-radius:14px;padding:22px;box-shadow:0 10px 30px rgba(0,0,0,0.18);color:#111}
    .signup-card h2{margin:0 0 10px;font-family:'Playfair Display', serif}
    .signup-card label{display:block;font-size:.85rem;margin-bottom:6px}
    .signup-card input{width:93%;padding:12px;border-radius:8px;border:1px solid #e7e7e7;margin-bottom:12px;font-size:.95rem}
    .signup-card button{width:100%;padding:12px;border-radius:8px;border:none;background:var(--brand-red);color:white;font-weight:700}

	/* feature bullets */
    .features{display:flex;gap:18px;margin-top:20px;color:var(--accent-2)}
    .feature{display:flex;align-items:end;gap:8px;font-weight:600}
    .tick{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,0.15);display:inline-grid;place-items:center}

    /* Footer */
    footer{padding:18px 20px;text-align:center;background:#fff;border-top:1px solid rgba(0,0,0,0.04)}

    /* Mobile helpers */
    .mobile-menu{display:flex;align-items:center;gap:12px}
    .hamburger{width:36px;height:36px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);display:flex;align-items:center;justify-content:center}

    /* Responsive */
    @media(min-width:768px){
      nav.desktop{display:flex}
      .hamburger{display:none}
      .hero-inner{padding:64px 28px}
      .hero-left{padding-right:20px}
      .hero{min-height:85vh}
    }

    @media(min-width:1000px){
      .hero-inner{display:grid;grid-template-columns:1fr 380px;align-items:center}
      .hero-left h1{font-size:84px}
      .hero-left p{font-size:1.1rem}
      .hero{min-height:85vh}
      .hero {background-image: url('/graph/hero-desktop.webp');}
   }

    @media(max-width:767px){
      .signup-card{display:none}
      .features-inner{flex-direction:column;align-items:flex-start;gap:8px}
      .hero-left{text-align:center}
      nav.desktop{display:none}
      .hero{min-height:85vh}
    }

    /* Small visual tweaks */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

    /* Mobile menu */
    .hamburger-menu {
      position: fixed;
      top: 0;
      right: -280px;
      width: 240px;
      height: 100%;
      background: white;
      box-shadow: -2px 0 12px rgba(0,0,0,0.2);
      display: flex;
      flex-direction: column;
      padding: 40px 20px;
      gap: 20px;
      transition: right 0.3s ease-in-out;
      z-index: 1000;
    }
    .hamburger-menu.open {
      right: 0;
    }
    .hamburger-menu a {
      text-decoration: none;
      font-weight: bold;
      font-size: 18px;
      color: #222;
    }
    .hamburger-menu .close-btn {
      align-self: flex-end;
      font-size: 26px;
      border: none;
      background: transparent;
      cursor: pointer;
    }

  .error-message {
    color: #d63c35;
    font-size: 12px;
    margin-top: 4px;
    display: block;
    min-height: 14px; /* zorgt dat de layout niet springt */
  }
    .error-message {
    color: #d63c35;
    font-size: 12px;
    margin-top: 4px;
    display: block;
    min-height: 14px;
  }
  .field {
    position: relative;
  }
  .field input.error {
    border-color: #d63c35;
    background: #fff5f5;
  }
  .field input.valid {
    border-color: #28a745;
    background: #f5fff8;
  }
  .checkmark {
    position: absolute;
    right: 10px;
    top: 38px;
    font-size: 16px;
    color: #28a745;
    display: none;
  }
  .field.valid .checkmark {
    display: inline;
  }

/* Backdrop achter het mobiele menu */
.menu-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease-in-out;
  z-index: 900; /* net onder het menu (menu heeft z-index:1000) */
}
.menu-overlay.show{
  opacity: 1;
  pointer-events: auto;
}

/* === PWA Install Popup === */
.install-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.install-modal {
  background: #ffffff;
  max-width: 380px;
  width: 90%;
  border-radius: 18px;
  padding: 18px 20px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}

.install-modal h2 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #b3004c;
}

.install-modal p, .install-modal ul {
  font-size: 14px;
  color: #333;
}

.install-modal ul {
  margin: 8px 0 12px 18px;
  padding: 0;
}

.install-modal-buttons {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.install-btn-primary, .install-btn-secondary {
  border-radius: 999px;
  border: none;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
}

.install-btn-primary {
  background: linear-gradient(135deg, #b3004c, #ff5fa2);
  color: #fff;
}

.install-btn-secondary {
  background: #eee;
  color: #555;
}