<section class="kdp-hero">
  <div class="kdp-copy">
    <span class="kdp-eyebrow">Project management, reimagined</span>
    <h1 class="kdp-h1">Drag it. Drop it.<br>Watch it ship.</h1>
    <p class="kdp-sub">This isn't a screenshot — drag any card between columns below. That's the real board your team will use.</p>
    <a href="#" class="kdp-cta">Start your board free</a>
  </div>

  <div class="kdp-board" id="kdpBoard">
    <div class="kdp-col" data-col="todo">
      <div class="kdp-col-head"><span>To Do</span><b class="kdp-count">3</b></div>
      <div class="kdp-col-body" data-drop>
        <div class="kdp-card" draggable="true"><span class="kdp-tag kdp-tag-purple">Design</span>Landing page hero mockup</div>
        <div class="kdp-card" draggable="true"><span class="kdp-tag kdp-tag-blue">Dev</span>Set up staging environment</div>
        <div class="kdp-card" draggable="true"><span class="kdp-tag kdp-tag-green">Content</span>Write launch email copy</div>
      </div>
    </div>
    <div class="kdp-col" data-col="progress">
      <div class="kdp-col-head"><span>In Progress</span><b class="kdp-count">2</b></div>
      <div class="kdp-col-body" data-drop>
        <div class="kdp-card" draggable="true"><span class="kdp-tag kdp-tag-blue">Dev</span>API rate limiting middleware</div>
        <div class="kdp-card" draggable="true"><span class="kdp-tag kdp-tag-purple">Design</span>Onboarding flow wireframes</div>
      </div>
    </div>
    <div class="kdp-col" data-col="done">
      <div class="kdp-col-head"><span>Done</span><b class="kdp-count">2</b></div>
      <div class="kdp-col-body" data-drop>
        <div class="kdp-card" draggable="true"><span class="kdp-tag kdp-tag-green">Content</span>Pricing page copy review</div>
        <div class="kdp-card" draggable="true"><span class="kdp-tag kdp-tag-blue">Dev</span>Fix Safari flexbox bug</div>
      </div>
    </div>
  </div>
</section>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0f1117;color:#f1f2f8}
.kdp-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:44px;padding:72px 20px}
.kdp-copy{text-align:center;max-width:600px;display:flex;flex-direction:column;align-items:center;gap:14px}
.kdp-eyebrow{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a78bfa}
.kdp-h1{font-size:clamp(28px,4.8vw,48px);font-weight:800;line-height:1.12;letter-spacing:-.02em}
.kdp-sub{font-size:15.5px;color:#9498b3;line-height:1.65;max-width:480px}
.kdp-cta{margin-top:4px;background:#a78bfa;color:#1c1330;font-weight:700;font-size:15px;padding:12px 26px;border-radius:9px;text-decoration:none;transition:transform .15s}
.kdp-cta:hover{transform:translateY(-2px)}

.kdp-board{width:min(880px,96vw);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kdp-col{background:#171923;border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:220px}
.kdp-col-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;font-size:12.5px;font-weight:700;color:#c3c6de}
.kdp-count{background:rgba(255,255,255,.08);color:#9498b3;font-size:11px;padding:2px 7px;border-radius:99px}

.kdp-col-body{display:flex;flex-direction:column;gap:8px;min-height:60px;border-radius:10px;transition:background .15s}
.kdp-col-body.kdp-over{background:rgba(167,139,250,.09);outline:1.5px dashed rgba(167,139,250,.5)}

.kdp-card{background:#20222f;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:11px 12px;font-size:13px;font-weight:600;color:#e4e5f2;line-height:1.4;cursor:grab;display:flex;flex-direction:column;gap:7px;transition:transform .12s,box-shadow .12s,opacity .12s}
.kdp-card:active{cursor:grabbing}
.kdp-card.kdp-dragging{opacity:.4}
.kdp-card:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.35)}

.kdp-tag{align-self:flex-start;font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em}
.kdp-tag-purple{background:rgba(167,139,250,.16);color:#c4b5fd}
.kdp-tag-blue{background:rgba(96,165,250,.16);color:#93c5fd}
.kdp-tag-green{background:rgba(74,222,128,.16);color:#86efac}

@media(max-width:720px){.kdp-board{grid-template-columns:1fr}}

// A genuinely working HTML5 drag-and-drop kanban board: cards can be dragged
// between any of the three columns, and each column's count badge updates live.
var cards = document.querySelectorAll('.kdp-card');
var dropZones = document.querySelectorAll('[data-drop]');
var draggedCard = null;

cards.forEach(function (card) {
  card.addEventListener('dragstart', function () {
    draggedCard = card;
    card.classList.add('kdp-dragging');
  });
  card.addEventListener('dragend', function () {
    card.classList.remove('kdp-dragging');
    draggedCard = null;
    updateCounts();
  });
});

dropZones.forEach(function (zone) {
  zone.addEventListener('dragover', function (e) {
    e.preventDefault(); // required to allow a drop to fire at all
    zone.classList.add('kdp-over');

    // Reorder live: figure out which card in this zone we're hovering above
    // and insert the dragged card before it, so dropping lands exactly where
    // the cursor is rather than always at the end of the column.
    var afterElement = getDragAfterElement(zone, e.clientY);
    if (!draggedCard) return;
    if (afterElement == null) {
      zone.appendChild(draggedCard);
    } else {
      zone.insertBefore(draggedCard, afterElement);
    }
  });

  zone.addEventListener('dragleave', function (e) {
    if (e.target === zone) zone.classList.remove('kdp-over');
  });

  zone.addEventListener('drop', function (e) {
    e.preventDefault();
    zone.classList.remove('kdp-over');
    updateCounts();
  });
});

function getDragAfterElement(container, y) {
  var draggableCards = Array.prototype.slice.call(
    container.querySelectorAll('.kdp-card:not(.kdp-dragging)')
  );
  return draggableCards.reduce(function (closest, child) {
    var box = child.getBoundingClientRect();
    var offset = y - box.top - box.height / 2;
    if (offset < 0 && offset > closest.offset) {
      return { offset: offset, element: child };
    }
    return closest;
  }, { offset: Number.NEGATIVE_INFINITY, element: null }).element;
}

function updateCounts() {
  document.querySelectorAll('.kdp-col').forEach(function (col) {
    var count = col.querySelectorAll('.kdp-card').length;
    col.querySelector('.kdp-count').textContent = count;
  });
}