/* landing.css — alleen voor de splash/landing pagina */

/* pagina-achtergrond en centrering */
html,body{height:100%}
body{
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  /* pastel achtergrondvlekken */
  background:
    radial-gradient(1200px 800px at 80% -20%, var(--brand-blue) 0%, transparent 40%),
    radial-gradient(1000px 700px at -20% 100%, var(--brand-sand) 0%, transparent 40%),
    var(--bg);
}

/* wordmark + icoon */
.logo{ display:inline-flex; align-items:center; gap:16px; margin-bottom:18px; will-change: transform; animation: float 4s ease-in-out infinite; }
.logo svg{ width:72px; height:72px; flex:none; }
.brand{ font-weight:800; font-size: clamp(28px, 4vw, 44px); letter-spacing:-.02em; color:var(--ink); }

/* hero-typografie */
.tagline{ font-size: clamp(16px, 2vw, 20px); color:var(--ink-soft); margin: 8px 0 6px; }
.sub{ font-size: clamp(14px, 1.6vw, 18px); color:#475569; margin: 0 0 28px; }
.meta{ margin-top:16px; font-size:13px; color:#64748B; }
footer{ margin-top:26px; font-size:12px; color:#94A3B8 }

/* logo “ademt” lichtjes */
@keyframes float{
  0%,100%{ transform: translateY(0) scale(1) }
  50%{ transform: translateY(-10px) scale(1.04) }
}

/* glimlach-lijn wordt getekend */
.smile{
  stroke-dasharray:120;
  stroke-dashoffset:120;
  animation: draw 1.5s ease-in-out forwards 0.2s;
  stroke:#333; stroke-width:10; stroke-linecap:round;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.3));
}
@keyframes draw{
  0% { stroke-dashoffset:120; opacity:0; }
  20% { opacity:1; }
  100% { stroke-dashoffset:0; opacity:1; }
}

/* form (Netlify Forms) — alleen hier nodig */
.form{ margin-top:22px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.group{ position:relative; }
label{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  background:#fff; padding:0 6px; color:#64748B; pointer-events:none;
  transition: all .15s ease; font-size:14px;
}
input[type="email"]{
  width:min(420px, 80vw);
  padding:14px 14px;
  border-radius:12px;
  border:1.5px solid #E5E7EB;
  font-size:16px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input[type="email"]:focus{
  border-color:var(--ring);
  box-shadow:0 0 0 4px rgba(253,162,155,.18);
}
input[type="email"]:focus + label,
input[type="email"]:not(:placeholder-shown) + label{
  top:0; transform:translateY(-50%) scale(.9);
  color:#475569;
}
.success{
  display:none; margin-top:14px; color:#0f5132; background:#d1e7dd; padding:10px 14px; border-radius:10px; font-size:14px;
}
.hidden{ display:none !important }

/* toegankelijkheidsvoorkeuren */
@media (prefers-reduced-motion: reduce){
  .logo{ animation:none }
  .smile{ animation:none; stroke-dasharray:0; stroke-dashoffset:0; }
}