<!-- form.html — Form with label, input, textarea, submit button -->
<section style="padding: 32px 0; max-width: 480px;">
  <form style="display: flex; flex-direction: column; gap: 16px;" onsubmit="return false;">

    <div style="display: flex; flex-direction: column; gap: 6px;">
      <label style="
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 500;
        color: var(--color-neutral-7);
      ">Name</label>
      <input
        type="text"
        placeholder="Enter your name"
        style="
          height: 32px;
          padding: 0 10px;
          background: var(--color-neutral-1);
          border: 1px solid var(--color-border);
          border-radius: 8px;
          font-family: var(--font-sans);
          font-size: 13px;
          color: var(--color-neutral-9);
          outline: none;
          width: 100%;
          box-sizing: border-box;
        "
        onfocus="this.style.borderColor='var(--color-accent)'; this.style.boxShadow='0 0 0 3px rgba(59,130,246,0.12)';"
        onblur="this.style.borderColor='var(--color-border)'; this.style.boxShadow='none';"
      />
    </div>

    <div style="display: flex; flex-direction: column; gap: 6px;">
      <label style="
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 500;
        color: var(--color-neutral-7);
      ">Message</label>
      <textarea
        placeholder="Describe what you need..."
        rows="4"
        style="
          padding: 8px 10px;
          background: var(--color-neutral-1);
          border: 1px solid var(--color-border);
          border-radius: 8px;
          font-family: var(--font-sans);
          font-size: 13px;
          color: var(--color-neutral-9);
          outline: none;
          resize: vertical;
          width: 100%;
          box-sizing: border-box;
          line-height: 1.5;
        "
        onfocus="this.style.borderColor='var(--color-accent)'; this.style.boxShadow='0 0 0 3px rgba(59,130,246,0.12)';"
        onblur="this.style.borderColor='var(--color-border)'; this.style.boxShadow='none';"
      ></textarea>
    </div>

    <div style="display: flex; justify-content: flex-end; gap: 8px;">
      <button type="button" style="
        height: 32px;
        padding: 0 14px;
        background: transparent;
        color: var(--color-neutral-7);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
      ">Cancel</button>
      <button type="submit" style="
        height: 32px;
        padding: 0 14px;
        background: var(--color-neutral-9);
        color: var(--color-neutral-1);
        border: none;
        border-radius: 8px;
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
      ">Submit</button>
    </div>

  </form>
</section>
