"<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>Taskly — the todo app that feels like flow</title>\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css\">\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n<link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap\" rel=\"stylesheet\">\n<script src=\"https://cdn.jsdelivr.net/npm/htmx.org@2.0.11/dist/htmx.min.js\"></script>\n<style>\n  :root { font-family: 'Inter', system-ui, sans-serif; }\n  html { scroll-behavior: smooth; }\n  body { background: #0b0f1a; color: #e7ecf5; }\n  .hero-brand {\n    background:\n      radial-gradient(ellipse 70% 55% at 15% -10%, rgba(99,102,241,.45), transparent),\n      radial-gradient(ellipse 60% 50% at 95% 5%,  rgba(236,72,153,.35), transparent),\n      linear-gradient(160deg, #0b0f1a 0%, #141a2e 60%, #0b0f1a 100%);\n  }\n  .gradient-text {\n    background: linear-gradient(90deg, #818cf8, #e879f9, #f472b6);\n    -webkit-background-clip: text; background-clip: text; color: transparent;\n  }\n  .navbar-brand-bg { background: rgba(11,15,26,.72); backdrop-filter: blur(12px); }\n  .navbar-item, .navbar-link { color: #cdd6e6 !important; }\n  .navbar-item:hover { color: #fff !important; }\n  .glass {\n    background: rgba(255,255,255,.05);\n    border: 1px solid rgba(255,255,255,.09);\n    border-radius: 1rem;\n    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;\n  }\n  .glass:hover { transform: translateY(-5px); border-color: rgba(129,140,248,.5);\n    box-shadow: 0 18px 40px rgba(99,102,241,.18); }\n  .card-3d {\n    background: linear-gradient(180deg, #161d33, #0f1424);\n    border: 1px solid rgba(255,255,255,.10);\n    border-radius: 1.25rem;\n    box-shadow: 0 30px 60px rgba(0,0,0,.45);\n  }\n  .chip { display:flex; align-items:center; gap:.75rem; padding:.7rem 1rem;\n    border-radius:.75rem; background: rgba(255,255,255,.04);\n    border:1px solid rgba(255,255,255,.07); margin-bottom:.6rem; }\n  .tick { width:1.35rem; height:1.35rem; border-radius:.4rem;\n    border:2px solid #4b5675; flex:0 0 auto; }\n  .tick.done { background:#22c55e; border-color:#22c55e; position:relative; }\n  .tick.done::after { content:'\\2713'; color:#fff; position:absolute;\n    top:50%; left:50%; transform:translate(-50%,-54%); font-size:.8rem; font-weight:800; }\n  .strike { text-decoration: line-through; opacity:.45; }\n  .pill { border-radius:999px; padding:.25rem .8rem; font-size:.75rem; font-weight:700; }\n  .footer-dark { background:#080b13; }\n  .button-glow { box-shadow: 0 12px 34px rgba(236,72,153,.35); }\n</style>\n</head>\n<body hx-headers='{\"Accept\": \"text/html\"}'>\n\n<nav class=\"navbar is-fixed-top navbar-brand-bg\">\n  <div class=\"container\">\n    <div class=\"navbar-brand\">\n      <a class=\"navbar-item has-text-weight-bold is-size-5\" href=\"/\">\n        <span class=\"gradient-text\" style=\"font-size:1.4rem;\">&#10004;&#65039; Taskly</span>\n      </a>\n    </div>\n    <div class=\"navbar-menu\">\n      <div class=\"navbar-end\">\n        <a class=\"navbar-item\" href=\"#features\">Features</a>\n        <a class=\"navbar-item\" href=\"#how\">How it works</a>\n        <a class=\"navbar-item\" href=\"#early\">Early access</a>\n        <a class=\"navbar-item\" href=\"#early\">\n          <span class=\"button is-primary is-small button-glow\"><strong>Get started</strong></span>\n        </a>\n      </div>\n    </div>\n  </div>\n</nav>\n\n<section class=\"hero is-large hero-brand\">\n  <div class=\"hero-body\" style=\"padding-top:7rem;\">\n    <div class=\"container\">\n      <div class=\"columns is-vcentered is-multiline\">\n\n        <div class=\"column is-6-desktop is-12-tablet\">\n          <span class=\"tag is-primary is-light has-text-weight-bold\">Now in private beta</span>\n          <h1 class=\"title is-1 is-spaced\" style=\"margin-top:.9rem; color:#fff; line-height:1.05;\">\n            Your to‑do list,<br>\n            <span class=\"gradient-text\">rebuilt for flow.</span>\n          </h1>\n          <p class=\"subtitle is-4\" style=\"color:#aab4cc; margin-top:1rem;\">\n            Taskly turns scattered tasks into one calm, focused surface —\n            plan your day in seconds, then actually finish it.\n          </p>\n          <div class=\"buttons\" style=\"margin-top:1.5rem;\">\n            <a class=\"button is-primary is-medium button-glow\" href=\"#early\">\n              <strong>Join the waitlist</strong>\n            </a>\n            <a class=\"button is-medium is-white is-outlined\" href=\"#features\"\n               style=\"border-color:rgba(255,255,255,.3); color:#fff;\">See how it works</a>\n          </div>\n          <p class=\"is-size-7 has-text-grey\" style=\"margin-top:1rem;\">\n            &#10004;&#65039; Free during beta &nbsp; &#10004;&#65039; No credit card &nbsp; &#10004;&#65039; Your data, yours\n          </p>\n        </div>\n\n        <div class=\"column is-5-desktop is-offset-1-desktop is-12-tablet\">\n          <div class=\"card-3d\" style=\"padding:1.5rem;\">\n            <div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:1.1rem;\">\n              <p class=\"has-text-weight-bold\" style=\"color:#fff;\">Today</p>\n              <span class=\"pill\" style=\"background:rgba(34,197,94,.18); color:#4ade80;\">3 of 6 done</span>\n            </div>\n            <div class=\"chip\"><span class=\"tick done\"></span><span class=\"strike\">Ship the landing page</span></div>\n            <div class=\"chip\"><span class=\"tick done\"></span><span class=\"strike\">Reply to design notes</span></div>\n            <div class=\"chip\"><span class=\"tick done\"></span><span class=\"strike\">Morning run &#127939;</span></div>\n            <div class=\"chip\"><span class=\"tick\"></span><span style=\"color:#e7ecf5;\">Draft the launch tweet</span></div>\n            <div class=\"chip\"><span class=\"tick\"></span><span style=\"color:#e7ecf5;\">Plan next week</span></div>\n            <div class=\"chip\"><span class=\"tick\"></span><span style=\"color:#e7ecf5;\">Book flights &#9992;&#65039;</span></div>\n          </div>\n        </div>\n\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"section\" id=\"features\">\n  <div class=\"container\" style=\"max-width:64rem;\">\n    <h2 class=\"title is-2 has-text-centered\" style=\"color:#fff;\">Everything a list should do — <span class=\"gradient-text\">and nothing it shouldn't.</span></h2>\n    <p class=\"subtitle is-5 has-text-centered\" style=\"color:#aab4cc;\">Fast, focused, and beautifully simple.</p>\n    <div class=\"columns is-multiline\" style=\"margin-top:2rem;\">\n      <div class=\"column is-4-desktop is-6-tablet\">\n        <div class=\"box glass\" style=\"background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#e7ecf5;\">\n          <p class=\"is-size-1\">&#9889;</p>\n          <p class=\"title is-5\" style=\"color:#fff;\">Capture in a keystroke</p>\n          <p style=\"color:#aab4cc;\">A single focus box. Type it, hit Enter, move on. Getting an idea out of your head has never taken less effort.</p>\n        </div>\n      </div>\n      <div class=\"column is-4-desktop is-6-tablet\">\n        <div class=\"box glass\" style=\"background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#e7ecf5;\">\n          <p class=\"is-size-1\">&#127919;</p>\n          <p class=\"title is-5\" style=\"color:#fff;\">Plans that adapt</p>\n          <p style=\"color:#aab4cc;\">Smart views surface what matters today, this week, or overdue — so your list never buries the next right move.</p>\n        </div>\n      </div>\n      <div class=\"column is-4-desktop is-6-tablet\">\n        <div class=\"box glass\" style=\"background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#e7ecf5;\">\n          <p class=\"is-size-1\">&#128274;</p>\n          <p class=\"title is-5\" style=\"color:#fff;\">Private by default</p>\n          <p style=\"color:#aab4cc;\">Your tasks are yours. Encrypted in transit, exportable anytime, and never sold, shared, or mined.</p>\n        </div>\n      </div>\n      <div class=\"column is-4-desktop is-6-tablet\">\n        <div class=\"box glass\" style=\"background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#e7ecf5;\">\n          <p class=\"is-size-1\">&#128241;</p>\n          <p class=\"title is-5\" style=\"color:#fff;\">Everywhere you are</p>\n          <p style=\"color:#aab4cc;\">One list, synced across phone, tablet and desktop. Pick up exactly where you left off, on any screen.</p>\n        </div>\n      </div>\n      <div class=\"column is-4-desktop is-6-tablet\">\n        <div class=\"box glass\" style=\"background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#e7ecf5;\">\n          <p class=\"is-size-1\">&#128170;</p>\n          <p class=\"title is-5\" style=\"color:#fff;\">Streaks &amp; momentum</p>\n          <p style=\"color:#aab4cc;\">Gentle nudges and daily goals keep you shipping — motivation that rewards finishing, not just adding.</p>\n        </div>\n      </div>\n      <div class=\"column is-4-desktop is-6-tablet\">\n        <div class=\"box glass\" style=\"background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); color:#e7ecf5;\">\n          <p class=\"is-size-1\">&#129309;</p>\n          <p class=\"title is-5\" style=\"color:#fff;\">Share the load</p>\n          <p style=\"color:#aab4cc;\">Hand a task to a partner, assign due dates, and keep household or team lists in perfect sync.</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"section\" id=\"how\" style=\"background:#080b13;\">\n  <div class=\"container\" style=\"max-width:54rem;\">\n    <h2 class=\"title is-3 has-text-centered\" style=\"color:#fff;\">From chaos to clarity in three steps</h2>\n    <div class=\"columns is-mobile\" style=\"margin-top:2.5rem;\">\n      <div class=\"column has-text-centered\">\n        <p class=\"title gradient-text\" style=\"font-weight:900;\">1</p>\n        <p class=\"has-text-weight-bold\" style=\"color:#fff;\">Brain‑dump</p>\n        <p class=\"has-text-grey\">Throw every task into the capture box, no formatting needed.</p>\n      </div>\n      <div class=\"column has-text-centered\">\n        <p class=\"title gradient-text\" style=\"font-weight:900;\">2</p>\n        <p class=\"has-text-weight-bold\" style=\"color:#fff;\">Focus</p>\n        <p class=\"has-text-grey;\">Taskly builds today's short list from what's due and what matters.</p>\n      </div>\n      <div class=\"column has-text-centered\">\n        <p class=\"title gradient-text\" style=\"font-weight:900;\">3</p>\n        <p class=\"has-text-weight-bold\" style=\"color:#fff;\">Finish</p>\n        <p class=\"has-text-grey;\">Tick things off, build streaks, and close the day feeling done.</p>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"section\" id=\"early\">\n  <div class=\"container\" style=\"max-width:34rem;\">\n    <div class=\"box glass\" style=\"padding:2.5rem; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);\">\n      <h2 class=\"title is-3 has-text-centered\" style=\"color:#fff;\">Be first in line</h2>\n      <p class=\"has-text-centered\" style=\"color:#aab4cc; margin-bottom:1.5rem;\">\n        Drop your email and we'll save you a seat when we open the doors.\n      </p>\n      <div id=\"form-result\"></div>\n      <form hx-post=\"/api/rpc/submit_lead\" hx-target=\"#form-result\" hx-swap=\"innerHTML\">\n        <div class=\"field has-addons\">\n          <div class=\"control is-expanded\">\n            <input class=\"input is-medium\" type=\"email\" name=\"_email\"\n                   placeholder=\"you@example.com\" autocomplete=\"email\" required>\n          </div>\n          <div class=\"control\">\n            <button class=\"button is-primary is-medium button-glow\" type=\"submit\">\n              <strong>Notify me</strong>\n            </button>\n          </div>\n        </div>\n      </form>\n      <p class=\"has-text-centered is-size-7 has-text-grey\" style=\"margin-top:1rem;\">No spam, ever. Unsubscribe with one click.</p>\n    </div>\n  </div>\n</section>\n\n<footer class=\"footer footer-dark\">\n  <div class=\"container\">\n    <div class=\"level\">\n      <div class=\"level-left\">\n        <div class=\"level-item\">\n          <span class=\"has-text-weight-bold gradient-text\">&#10004;&#65039; Taskly</span>\n        </div>\n      </div>\n      <div class=\"level-right\">\n        <div class=\"level-item\">\n          <p class=\"has-text-grey is-size-7\">&copy; 2025 Taskly — built with the HTMX + PostgREST website builder.</p>\n        </div>\n      </div>\n    </div>\n  </div>\n</footer>\n\n<script>\n  // PostgREST returns failures as JSON with a 4xx status, which htmx does not\n  // swap by default — surface the message instead of failing silently.\n  document.body.addEventListener('htmx:responseError', function (e) {\n    var msg = 'Something went wrong — please try again.';\n    try { msg = JSON.parse(e.detail.xhr.responseText).message || msg; } catch (_) {}\n    var t = document.getElementById('form-result');\n    t.innerHTML = '<div class=\"notification is-danger is-light\"></div>';\n    t.firstElementChild.textContent = msg;\n  });\n</script>\n</body>\n</html>"