/* ============================================================
   even 🙌 vrij — landing page (evenhandenvrij.nl)
   Ported from the Claude Design handoff (Doppio en Dollen.html
   :root tokens + landing.jsx DD_CSS). Defaults baked in:
   headline = benefit, venue accent = uiteten, parent accent =
   kidscafe, radius = 28px, tilt = on.
   ============================================================ */

/* Self-host the display face (single weight 400). Nunito Sans
   stays on Google Fonts via the <link> in index.html. */
@font-face {
  font-family: "Momo Trust Display";
  src: url("fonts/momo-trust-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* neutrals */
  --cream: #FEFFFF;
  --sand: #FBF7F2;
  --ink: #30323A;
  --muted: #808390;
  --line: #E8E8E8;
  --white: #FFFFFF;
  /* category colors */
  --natuur: #45AE4A;
  --kidscafe: #A177CE;
  --buiten: #FFD600;
  --brunch: #F9960B;
  --uiteten: #EC395C;
  --alles: #0584BA;
  --binnen: #5CD1FA;
  --strand: #FFD600;
  /* warm signal accent (highlights, selection) */
  --accent: #F9960B;
  --radius: 1.75rem;
  --shadow-soft: 0 2px 12px rgba(48, 50, 58, 0.08);
  --shadow-card: 0 1px 3px rgba(48, 50, 58, 0.06), 0 6px 16px rgba(48, 50, 58, 0.06);
  --shadow-float: 0 30px 60px rgba(48, 50, 58, 0.16), 0 10px 24px rgba(48, 50, 58, 0.08);
  --serif: 'Momo Trust Display', system-ui, sans-serif;
  --sans: 'Nunito Sans', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: rgba(249, 150, 11, 0.22); }
a { color: inherit; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 28px; }

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,0.82);
  backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;}
.wordmark .mark{width:34px;height:34px;border-radius:10px;flex:none;display:block;
  box-shadow:0 2px 6px rgba(48,50,58,0.18);}
.wordmark .wm-text{font-family:var(--serif);font-weight:400;font-size:23px;letter-spacing:-0.015em;color:var(--ink);white-space:nowrap;}
.wordmark .wm-emoji{font-family:var(--sans);font-size:1.2em;display:inline-block;vertical-align:bottom;transform:translateY(0.07em);}
.wordmark .wm-accent{color:var(--accent);}
.header-link{font-family:var(--sans);font-weight:700;font-size:15.5px;text-decoration:none;color:var(--ink);
  padding:10px 20px;border-radius:999px;border:1px solid var(--line);background:var(--white);
  box-shadow:var(--shadow-soft);transition:transform .15s ease, box-shadow .15s ease;}
.header-link:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(48,50,58,0.14);}

/* ---------- Buttons ---------- */
.btn-primary{font-family:var(--sans);font-weight:700;font-size:17px;color:var(--cream);border:none;cursor:pointer;
  background:var(--ink);padding:16px 30px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;
  box-shadow:0 6px 18px rgba(48,50,58,0.22);transition:transform .15s ease, box-shadow .15s ease;text-decoration:none;}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(48,50,58,0.30);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:.62;cursor:default;transform:none;box-shadow:0 6px 18px rgba(48,50,58,0.22);}
.btn-primary svg{flex:none;}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;}
.hero .wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;
  padding-top:64px;padding-bottom:84px;}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;
  font-size:13.5px;letter-spacing:0.04em;text-transform:uppercase;color:var(--muted);
  background:var(--white);border:1px solid var(--line);padding:8px 16px 8px 12px;border-radius:999px;
  box-shadow:var(--shadow-soft);margin-bottom:26px;white-space:nowrap;}
.eyebrow .pulse{width:9px;height:9px;border-radius:50%;background:var(--natuur);position:relative;}
.eyebrow .pulse::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--natuur);opacity:.4;
  animation:pulse 2.4s ease-out infinite;}
@keyframes pulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(1.6);opacity:0}}
.hero h1{font-size:clamp(38px,5vw,62px);font-weight:400;margin-bottom:24px;text-wrap:balance;}
.hero h1 .hl{color:var(--accent);}
.hero .lede{font-size:19.5px;line-height:1.62;color:#565963;max-width:33ch;text-wrap:pretty;}
.hero-cta{margin-top:34px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.hero-cta .micro{font-size:14.5px;color:var(--muted);font-weight:600;}

/* decorative pins */
.hero-deco{position:absolute;inset:0;pointer-events:none;z-index:0;}
.hero-deco .pin{position:absolute;border-radius:50%;opacity:.85;filter:drop-shadow(0 4px 8px rgba(58,51,48,0.10));}
.hero .wrap > *{position:relative;z-index:1;}

/* ---------- Phone frame ---------- */
.phone-stage{display:flex;justify-content:center;align-items:center;position:relative;min-height:560px;}
.phone{position:relative;width:300px;background:#15110f;border-radius:46px;padding:9px;
  box-shadow:var(--shadow-float);z-index:2;transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.phone.tilt{transform:rotate(-3deg);}
.phone.tilt:hover{transform:rotate(-1.2deg) translateY(-6px);}
.phone:not(.tilt):hover{transform:translateY(-6px);}
.phone-screen{position:relative;border-radius:38px;overflow:hidden;background:var(--sand);}
.statusbar{position:absolute;top:0;left:0;right:0;height:42px;display:flex;align-items:center;
  justify-content:space-between;padding:0 24px;z-index:3;font-family:var(--sans);background:#fff;}
.statusbar .clock{font-weight:700;font-size:14px;color:var(--ink);letter-spacing:.2px;}
.statusbar .ind{display:flex;align-items:center;gap:6px;}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:84px;height:25px;
  background:#15110f;border-radius:14px;z-index:4;}
.phone-screen img.appshot{display:block;width:100%;height:auto;padding-top:42px;}
/* peek screen behind */
.phone-peek{position:absolute;width:248px;border-radius:40px;overflow:hidden;
  box-shadow:0 24px 48px rgba(48,50,58,0.16);z-index:1;right:-6%;top:8%;transform:rotate(7deg);
  border:7px solid #15110f;}
.phone-peek img{display:block;width:100%;height:auto;}

/* ---------- Signup ---------- */
.signup{padding:18px 0 96px;}
.signup-head{text-align:center;max-width:640px;margin:0 auto 48px;}
.signup-head h2{font-size:clamp(30px,3.6vw,42px);font-weight:400;margin-bottom:16px;text-wrap:balance;}
.signup-head p{font-size:18px;color:var(--muted);text-wrap:pretty;}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch;}
.signup-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:38px 38px 40px;box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;
  min-height:430px;transition:box-shadow .25s ease, transform .25s ease;}
.signup-card:hover{box-shadow:0 2px 6px rgba(48,50,58,0.07),0 18px 40px rgba(48,50,58,0.10);transform:translateY(-3px);}
.signup-card .topbar{position:absolute;top:0;left:0;right:0;height:5px;background:var(--ac);}
.card-eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;
  font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ac-ink);margin-bottom:16px;}
.card-eyebrow .chip{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--ac-soft);color:var(--ac-ink);font-size:18px;line-height:1;}
.card-eyebrow .chip svg{width:19px;height:19px;}
.signup-card h3{font-size:26px;font-weight:400;margin-bottom:10px;letter-spacing:-0.015em;}
.signup-card .blurb{font-size:16px;color:var(--muted);line-height:1.55;margin-bottom:26px;}
.field{margin-bottom:18px;}
.field label{display:block;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--ink);margin-bottom:7px;}
.field input{width:100%;font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white);
  border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;}
.field input::placeholder{color:#AEB0BA;}
.field input:focus{border-color:var(--ac);box-shadow:0 0 0 4px var(--ac-ring);}
.field input.invalid{border-color:#D6294B;box-shadow:0 0 0 4px rgba(214,41,75,0.14);}
.helper{font-size:13px;color:var(--muted);margin-top:7px;}
.err{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#D6294B;margin-top:7px;}
.err svg{flex:none;}
.form-foot{margin-top:auto;padding-top:8px;}
.card-submit{width:100%;justify-content:center;}
/* honeypot — hidden from humans, available to bots */
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
/* success state */
.success{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;flex:1;
  animation:fadein .45s ease both;}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.success .checkwrap{width:62px;height:62px;border-radius:50%;background:var(--ac-soft);display:grid;place-items:center;
  margin-bottom:22px;}
.success .checkwrap svg{width:30px;height:30px;color:var(--ac-ink);}
.success h3{font-size:25px;margin-bottom:10px;}
.success p{font-size:16.5px;color:var(--muted);line-height:1.55;}
.success .again{margin-top:22px;background:none;border:none;cursor:pointer;font-family:var(--sans);
  font-weight:700;font-size:14.5px;color:var(--ac-ink);padding:0;text-decoration:underline;text-underline-offset:3px;}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:38px 0 46px;}
.site-footer .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
.site-footer .wordmark .wm-text{font-size:19px;}
.site-footer .wordmark .mark{width:28px;height:28px;}
.foot-meta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:14.5px;color:var(--muted);}
.foot-meta a{color:var(--ink);font-weight:700;text-decoration:none;}
.foot-meta a:hover{color:var(--accent);}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  body{font-size:17px;}
  .hero .wrap{grid-template-columns:1fr;gap:24px;padding-top:44px;padding-bottom:56px;text-align:center;}
  .hero .lede{max-width:46ch;margin-left:auto;margin-right:auto;}
  .hero-cta{justify-content:center;}
  .eyebrow{margin-bottom:20px;}
  .phone-stage{order:-1;min-height:auto;margin-bottom:8px;}
  .phone-peek{display:none;}
  .phone.tilt{transform:none;}
  .cards{grid-template-columns:1fr;gap:20px;}
  .signup-card{min-height:auto;padding:32px 26px 34px;}
}
@media (max-width:520px){
  .wrap{padding:0 20px;}
  .wordmark .wm-text{font-size:20px;}
  .header-link{padding:9px 16px;font-size:14px;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;}
  .phone,.signup-card,.btn-primary,.header-link{transition:none!important;}
}