/* Word partner — stekker.com/nl/word-partner/ (backlog #2190)
   Donkere hero boven het lichte instrumentenpaneel van logboek.css.
   Eén bewegend element staat al in de tabel (lb-live); de hero beweegt niet. */

.wp-hero {
  --wp-ink: #000538;
  --wp-ink-2: #111642;
  --wp-rule: #272a4d;
  --wp-text: #ffffff;
  --wp-text-2: #a8aec4;
  --wp-live: #0feb88;
  --wp-poppins: "Poppins", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  background: var(--wp-ink);
  color: var(--wp-text);
  border-radius: 14px;
  padding: clamp(1.8rem, 5vw, 3.4rem);
  margin-bottom: 1.4rem;
  max-width: 100%;
}

.wp-hero * { box-sizing: border-box; }

.wp-hero h1 {
  font-family: var(--wp-poppins);
  font-size: clamp(2rem, 5.4vw, 3rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--wp-text);
  text-wrap: balance;
}

.wp-hero .wp-lead {
  margin: 0.8rem 0 0;
  color: var(--wp-text-2);
  max-width: 54ch;
  font-size: 1.02rem;
  line-height: 1.6;
}

.wp-form {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  max-width: 46rem;
}

.wp-form-label {
  font-family: var(--wp-poppins);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp-text-2);
  margin: 0 0 0.7rem;
}

.wp-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.wp-form input[type="email"],
.wp-form input[type="tel"] {
  flex: 1 1 13rem;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #dfe4ee;
  border-radius: 8px;
  padding: 0.85rem 1rem;
  color: var(--wp-ink);
  font: inherit;
  font-size: 0.95rem;
}

.wp-form input::placeholder { color: #646b81; }

.wp-form input:focus {
  outline: none;
  border-color: var(--wp-live);
  box-shadow: 0 0 0 3px rgba(15, 235, 136, 0.25);
}

.wp-form button {
  flex: 0 0 auto;
  background: var(--wp-live);
  border: 1px solid var(--wp-live);
  border-radius: 8px;
  padding: 0.85rem 1.4rem;
  font-family: var(--wp-poppins);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--wp-ink);
  cursor: pointer;
  transition: filter 120ms ease;
}

.wp-form button:hover:not(:disabled) { filter: brightness(1.08); }
.wp-form button:disabled { opacity: 0.55; cursor: default; }

.wp-form .wp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.wp-form-note {
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  color: var(--wp-text-2);
  max-width: 54ch;
}

.wp-form-status {
  margin: 0.9rem 0 0;
  font-size: 0.9rem;
  min-height: 1.2em;
}

.wp-form-status.is-ok { color: var(--wp-live); }
.wp-form-status.is-error { color: #ff8f7a; }

@media (max-width: 32rem) {
  .wp-form-row { flex-direction: column; }
  .wp-form button { width: 100%; }
}