<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Credits for early-stage founders. · Distribute</title>
    <!-- ════════════ Favicon · Kanso cascading dots ═══════════════════════
       SVG = scalable, used by modern browsers in all contexts.
       PNG fallbacks · 16/32 for browser tab, 96 for Android Chrome.
       apple-touch-icon (180px PNG) · iOS Safari home screen.
       ICO multi-resolution (16+32+48+64+128+256) · legacy IE/Edge.
       Web manifest · PWA Add-to-Home-Screen.
       theme-color · Android Chrome address bar tinting.
    ──────────────────────────────────────────────────────────────────── -->
    <link rel="icon" type="image/svg+xml" href="/static/brand/distribute-favicon.svg">
    <link rel="icon" type="image/png" sizes="16x16" href="/static/brand/favicon-16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/static/brand/favicon-32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/static/brand/favicon-96.png">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/brand/apple-touch-icon.png">
    <link rel="manifest" href="/site.webmanifest">
    <meta name="theme-color" content="#5f5e5e">
    <meta name="msapplication-TileColor" content="#faf9f7">
    <meta name="msapplication-TileImage" content="/static/brand/favicon-192.png">
    <link rel="stylesheet" href="/static/css/style.css">
    
    
</head>
<body>
    <!-- Header -->
    

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<style>
:root{
  --bg:#faf9f7;--surface:#faf9f7;--surface-low:#f3f4f1;--surface-mid:#edeeeb;
  --surface-high:#e6e9e6;--surface-highest:#e0e3e0;--white:#ffffff;
  --on-surface:#2f3331;--on-variant:#5c605d;--primary:#5f5e5e;
  --primary-container:#e4e2e1;--secondary:#675e4f;--sec-ctr:#eee1ce;
  --outline-variant:#afb3b0;--error:#9e422c;
  --kn-topbar-h:64px;
}
body{font-family:'Inter',sans-serif;background:var(--surface-low);color:var(--on-surface);-webkit-font-smoothing:antialiased}

.kn-topnav{
  position:fixed;top:0;left:0;right:0;height:var(--kn-topbar-h);z-index:500;
  background:rgba(250,249,247,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:space-between;padding:0 32px;
  font-family:'Manrope',sans-serif;
}
.kn-topnav-left{display:flex;align-items:center;gap:28px}
.kn-brand{display:inline-flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:800;letter-spacing:-.04em;color:var(--primary);text-decoration:none}
.kn-brand svg.n-mark{display:block;flex-shrink:0;width:22px;height:22px}
.kn-brand svg.n-mark .nm-trail{fill:currentColor}
.kn-brand svg.n-mark .nm-accent{fill:var(--sec-ctr)}
.kn-nav-links{display:flex;align-items:center;gap:4px}
.kn-nav-link{
  padding:6px 12px;border-radius:8px;font-size:.8rem;font-weight:600;
  color:var(--on-variant);text-decoration:none;transition:all .15s;font-family:'Manrope',sans-serif;
}
.kn-nav-link:hover{background:var(--surface-mid);color:var(--on-surface)}
.kn-nav-link.active{background:var(--white);color:var(--on-surface);box-shadow:0 1px 4px rgba(47,51,49,.08)}
.kn-topnav-right{display:flex;align-items:center;gap:6px}
.kn-icon-btn{
  width:34px;height:34px;border-radius:50%;border:none;background:none;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--on-variant);transition:background .15s;position:relative;text-decoration:none;
}
.kn-icon-btn:hover{background:var(--surface-mid);color:var(--on-surface)}
.kn-notif-dot{
  position:absolute;top:5px;right:5px;width:7px;height:7px;
  background:#dc2626;border-radius:50%;border:1.5px solid var(--bg);display:none;
}
.kn-balance-chip{
  display:inline-flex;align-items:center;padding:4px 12px;border-radius:99px;
  background:var(--sec-ctr);font-size:.72rem;font-weight:700;color:var(--secondary);
  text-decoration:none;font-family:'Manrope',sans-serif;transition:opacity .15s;
}
.kn-balance-chip:hover{opacity:.8}
.kn-avatar{
  width:30px;height:30px;border-radius:50%;background:var(--primary-container);
  display:flex;align-items:center;justify-content:center;font-size:.68rem;
  font-weight:800;color:var(--primary);cursor:pointer;font-family:'Manrope',sans-serif;
  letter-spacing:-.02em;flex-shrink:0;
}
.kn-avatar-wrap{position:relative}
.kn-avatar-menu{
  display:none;position:absolute;top:calc(100% + 8px);right:0;
  min-width:200px;background:#fff;border-radius:12px;
  box-shadow:0 12px 40px rgba(47,51,49,.14);z-index:9999;
  overflow:hidden;padding:6px 0;
}
.kn-avatar-menu.open{display:block}
.kn-avatar-user{
  padding:12px 16px 10px;border-bottom:1px solid #f3f4f1;
  font-size:.78rem;font-weight:700;color:var(--on-surface);
}
.kn-avatar-user span{display:block;font-size:.68rem;font-weight:400;color:#9ca3af;margin-top:1px}
.kn-avatar-item{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  font-size:.82rem;font-weight:500;color:#2f3331;text-decoration:none;
  cursor:pointer;background:none;border:none;font-family:inherit;width:100%;
  text-align:left;transition:background .1s;
}
.kn-avatar-item:hover{background:#f7f8f6}
.kn-avatar-item svg{opacity:.5;flex-shrink:0}
.kn-avatar-divider{height:1px;background:#f3f4f1;margin:4px 0}
.kn-avatar-item.danger{color:var(--error,#9e422c)}
.kn-avatar-item.danger:hover{background:#fff4f2}
.kn-avatar-item.danger svg{opacity:.6}

/* ── Language section inside avatar dropdown ──────────────────
   Uses native <details> so the click-to-expand is free, no JS.
   The summary mimics .kn-avatar-item layout · the language list
   appears below it, indented and scrollable. */
.kn-avatar-lang{margin:0}
.kn-avatar-lang > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;font-size:.82rem;font-weight:500;
  color:#2f3331;font-family:inherit;
  transition:background .1s;
}
.kn-avatar-lang > summary::-webkit-details-marker{display:none}
.kn-avatar-lang > summary:hover{background:#f7f8f6}
.kn-avatar-lang > summary svg.lang-icon{opacity:.5;flex-shrink:0}
.kn-avatar-lang > summary .lang-current{
  margin-left:auto;display:flex;align-items:center;gap:6px;
  font-size:.7rem;color:#9ca3af;font-weight:400;
}
.kn-avatar-lang > summary .chev{
  width:10px;height:10px;opacity:.5;transition:transform .15s;flex-shrink:0;
}
.kn-avatar-lang[open] > summary .chev{transform:rotate(180deg)}
.kn-avatar-lang[open] > summary{background:#f7f8f6}
.kn-avatar-lang-list{
  max-height:240px;overflow-y:auto;
  padding:4px 6px 6px;background:#fafaf8;
  border-top:1px solid #f3f4f1;border-bottom:1px solid #f3f4f1;
}
.kn-avatar-lang-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:6px;
  font-size:.78rem;color:#2f3331;text-decoration:none;
  font-family:'Inter',sans-serif;transition:background .1s;
}
.kn-avatar-lang-item:hover{background:#fff}
.kn-avatar-lang-item.active{background:var(--sec-ctr,#eee1ce);color:var(--secondary,#675e4f);font-weight:600}
.kn-avatar-lang-item .lang-flag{font-size:.95rem;width:18px;text-align:center;flex-shrink:0}
.kn-avatar-lang-item .lang-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kn-avatar-lang-item .lang-code{
  font-size:.62rem;color:#9ca3af;font-family:Menlo,monospace;
  text-transform:uppercase;letter-spacing:.05em;flex-shrink:0;
}

/* push page content below topnav */
body > *:not(.kn-topnav):not(#notif-wrap-global){
  padding-top:20px !important;
}
/* dashboard/admin manage their own top spacing */
.kn-main,.adm-root{padding-top:0 !important}

/* ── Language switcher (shared header) ────────────────────────
   Native <details> dropdown · keyboard accessible, no JS framework.
   Sits to the far right of the topnav (after Get started for logged-out
   users, before the avatar for logged-in users). */
.lang-sw{position:relative;margin-right:2px}
.lang-sw summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:8px;font-size:.78rem;color:var(--on-surface);
  background:transparent;transition:background .15s;user-select:none;
  font-family:'Manrope',sans-serif;font-weight:600;
}
.lang-sw summary::-webkit-details-marker{display:none}
.lang-sw summary:hover{background:var(--surface-mid)}
.lang-sw summary svg{opacity:.6}
.lang-sw[open] summary{background:var(--surface-mid)}
.lang-sw .lang-menu{
  position:absolute;right:0;top:calc(100% + 8px);
  background:#fff;border:1px solid var(--surface-high);border-radius:12px;
  box-shadow:0 12px 40px rgba(47,51,49,.14);
  min-width:200px;max-height:340px;overflow-y:auto;
  padding:6px;z-index:9999;
}
.lang-sw .lang-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:7px;font-size:.84rem;
  color:var(--on-surface);text-decoration:none;
  transition:background .15s;font-family:'Inter',sans-serif;
}
.lang-sw .lang-item:hover{background:var(--surface-low)}
.lang-sw .lang-item.active{background:var(--sec-ctr);color:var(--secondary);font-weight:600}
.lang-sw .lang-flag{font-size:1rem;width:20px;text-align:center}
.lang-sw .lang-name{flex:1}
.lang-sw .lang-code{
  font-size:.66rem;color:#9ca3af;font-family:Menlo,monospace;
  text-transform:uppercase;letter-spacing:.05em;
}
@media (max-width: 720px){
  .lang-sw summary .lang-label-text{display:none}
}
</style>

<nav class="kn-topnav">
  <div class="kn-topnav-left">
    <a href="/" class="kn-brand" aria-label="Distribute">
      <svg class="n-mark" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
        <circle class="nm-trail"  cx="60"  cy="80" r="42"/>
        <circle class="nm-trail"  cx="142" cy="120" r="26"/>
        <circle class="nm-trail"  cx="186" cy="148" r="14"/>
        <circle class="nm-accent" cx="212" cy="170" r="9"/>
      </svg>
      <span>Distribute</span>
    </a>
    <div class="kn-nav-links">
      <a href="/dashboard" class="kn-nav-link ">Dashboard</a>
      <a href="/upload"    class="kn-nav-link ">Deploy</a>
      <a href="/support"   class="kn-nav-link ">Support</a>
      
    </div>
  </div>
  <div class="kn-topnav-right">
    
    <a href="/login"  class="kn-nav-link">Sign in</a>
    <a href="/signup" class="kn-nav-link active" style="background:var(--primary);color:#faf7f6">Get started →</a>
    
    <details class="lang-sw">
      <summary aria-label="Language">
        <span class="lang-flag">🇬🇧</span>
        <span class="lang-label-text">English</span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
      </summary>
      <div class="lang-menu">
        
          <a href="/api/lang/set?lang=en" class="lang-item active">
            <span class="lang-flag">🇬🇧</span>
            <span class="lang-name">English</span>
            <span class="lang-code">en</span>
          </a>
        
          <a href="/api/lang/set?lang=fr" class="lang-item">
            <span class="lang-flag">🇫🇷</span>
            <span class="lang-name">Français</span>
            <span class="lang-code">fr</span>
          </a>
        
          <a href="/api/lang/set?lang=es" class="lang-item">
            <span class="lang-flag">🇪🇸</span>
            <span class="lang-name">Español</span>
            <span class="lang-code">es</span>
          </a>
        
          <a href="/api/lang/set?lang=de" class="lang-item">
            <span class="lang-flag">🇩🇪</span>
            <span class="lang-name">Deutsch</span>
            <span class="lang-code">de</span>
          </a>
        
          <a href="/api/lang/set?lang=pt" class="lang-item">
            <span class="lang-flag">🇵🇹</span>
            <span class="lang-name">Português</span>
            <span class="lang-code">pt</span>
          </a>
        
          <a href="/api/lang/set?lang=it" class="lang-item">
            <span class="lang-flag">🇮🇹</span>
            <span class="lang-name">Italiano</span>
            <span class="lang-code">it</span>
          </a>
        
          <a href="/api/lang/set?lang=ru" class="lang-item">
            <span class="lang-flag">🇷🇺</span>
            <span class="lang-name">Русский</span>
            <span class="lang-code">ru</span>
          </a>
        
          <a href="/api/lang/set?lang=zh" class="lang-item">
            <span class="lang-flag">🇨🇳</span>
            <span class="lang-name">中文</span>
            <span class="lang-code">zh</span>
          </a>
        
          <a href="/api/lang/set?lang=ja" class="lang-item">
            <span class="lang-flag">🇯🇵</span>
            <span class="lang-name">日本語</span>
            <span class="lang-code">ja</span>
          </a>
        
          <a href="/api/lang/set?lang=ko" class="lang-item">
            <span class="lang-flag">🇰🇷</span>
            <span class="lang-name">한국어</span>
            <span class="lang-code">ko</span>
          </a>
        
          <a href="/api/lang/set?lang=ar" class="lang-item">
            <span class="lang-flag">🇸🇦</span>
            <span class="lang-name">العربية</span>
            <span class="lang-code">ar</span>
          </a>
        
          <a href="/api/lang/set?lang=hi" class="lang-item">
            <span class="lang-flag">🇮🇳</span>
            <span class="lang-name">हिन्दी</span>
            <span class="lang-code">hi</span>
          </a>
        
      </div>
    </details>
    
  </div>
<script>
function toggleAvatarMenu(){
  var m = document.getElementById('avatar-menu');
  if(m) m.classList.toggle('open');
}
document.addEventListener('click', function(e){
  var wrap = document.getElementById('avatar-wrap');
  if(wrap && !wrap.contains(e.target)){
    var m = document.getElementById('avatar-menu');
    if(m) m.classList.remove('open');
  }
});
</script>
</nav>

<script>
(function(){
  // Balance + unread badge · only if logged in (Jinja guard, not JS cookie check)
  

  window.toggleNotifPanel=function(){
    var panel=document.getElementById('notif-panel');
    if(!panel) return;
    var open=panel.style.display!=='none';
    panel.style.display=open?'none':'block';
    if(!open) loadGlobalNotifs();
  };
  window.loadGlobalNotifs=function(){
    var list=document.getElementById('notif-list');
    if(!list) return;
    list.innerHTML='<div style="padding:16px;text-align:center;font-size:.78rem;color:#9ca3af">Loading…</div>';
    fetch('/api/billing/notifications').then(function(r){return r.json();}).then(function(d){
      var notifs=d.notifications||[];
      var dot=document.getElementById('header-notif-badge');
      if(dot) dot.style.display='none';
      if(!notifs.length){list.innerHTML='<div style="padding:24px 16px;text-align:center;font-size:.78rem;color:#9ca3af">No notifications yet</div>';return;}
      var COLORS={info:'#f0fdf4',warning:'#fffbeb',error:'#fef2f2',success:'#f0fdf4'};
      var TCOLS={info:'#166534',warning:'#92400e',error:'#991b1b',success:'#166534'};
      // v1342 · escape HTML to avoid XSS, then linkify URLs so they're clickable
      function escHtml(s){return String(s==null?'':s).replace(/[&<>"']/g,function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c];});}
      function linkify(text,tc){
        var esc=escHtml(text);
        // Match http(s) URLs · stop at whitespace
        return esc.replace(/(https?:\/\/[^\s<]+)/g,function(url){
          return '<a href="'+url+'" style="color:'+tc+';text-decoration:underline;font-weight:600;word-break:break-all" onclick="event.stopPropagation()">'+url+'</a>';
        });
      }
      // v1342 · detect an actionable URL in the message (transfer accept,
      // resource review, etc.) so we can make the whole card clickable
      // and add an explicit Review button.
      function extractActionUrl(msg){
        var m=String(msg||'').match(/(https?:\/\/[^\s<]+)/);
        return m?m[1]:'';
      }
      list.innerHTML=notifs.slice(0,15).map(function(n){
        var bg=COLORS[n.level]||'#f9fafb',tc=TCOLS[n.level]||'#374151';
        var actionUrl=extractActionUrl(n.message);
        var msgHtml=linkify(n.message,tc);
        // v1342 · clickable card · if there's an action URL, the whole row
        // navigates there on click (except clicks on the inline link itself).
        var clickAttr=actionUrl
          ? ' onclick="window.location.href=\''+actionUrl.replace(/'/g,"\\'")+'\'" style="cursor:pointer;padding:12px 16px;border-bottom:1px solid #f0f1ef;background:'+bg+';transition:filter .12s" onmouseover="this.style.filter=\'brightness(.97)\'" onmouseout="this.style.filter=\'none\'"'
          : ' style="padding:12px 16px;border-bottom:1px solid #f0f1ef;background:'+bg+'"';
        var reviewBtn=actionUrl
          ? '<a href="'+actionUrl+'" onclick="event.stopPropagation()" style="display:inline-flex;align-items:center;gap:4px;margin-top:8px;padding:5px 12px;background:'+tc+';color:#fff;border-radius:7px;font-size:.7rem;font-weight:700;text-decoration:none">Review &rarr;</a>'
          : '';
        return '<div'+clickAttr+'>'+
          '<div style="font-size:.78rem;color:'+tc+';line-height:1.5">'+msgHtml+'</div>'+
          reviewBtn+
          '<div style="font-size:.68rem;color:#9ca3af;margin-top:3px">'+(n.ts||'').slice(0,16).replace('T',' ')+'</div>'+
          '</div>';
      }).join('');
    }).catch(function(){list.innerHTML='<div style="padding:16px;font-size:.78rem;color:#9ca3af;text-align:center">Could not load</div>';});
  };
  document.addEventListener('click',function(e){
    var wrap=document.getElementById('notif-wrap-global');
    if(wrap&&!wrap.contains(e.target)){var p=document.getElementById('notif-panel');if(p)p.style.display='none';}
  });
})();
</script>

    <!-- Global flash messages (consumed here so they never accumulate) -->
    
    
    
    
    

    <!-- Main Content -->
    
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">

<style>
  .sc-wrap { max-width: 760px; margin: 60px auto 80px; padding: 0 24px;
             font-family: Inter, system-ui, sans-serif; color: #2f3331; }
  .sc-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .12em;
                text-transform: uppercase; color: #92400e; margin-bottom: 14px; }
  .sc-h1 { font-family: Manrope, sans-serif; font-weight: 800; letter-spacing: -0.04em;
           font-size: 2.6rem; margin: 0 0 16px; line-height: 1.05; color: #2f3331; }
  .sc-lead { font-size: 1.04rem; color: #675e4f; line-height: 1.55; max-width: 580px; margin: 0 0 36px; }

  .sc-perks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
              margin: 0 0 44px; }
  .sc-perk { background: #fef9f0; border: 1.5px solid #eee1ce; border-radius: 12px;
             padding: 16px 18px; }
  .sc-perk-num { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.6rem;
                 color: #2f3331; line-height: 1; margin-bottom: 6px; letter-spacing: -0.02em; }
  .sc-perk-lbl { font-size: .78rem; color: #675e4f; line-height: 1.4; }

  .sc-form { background: #fff; border: 1.5px solid #e6e9e6; border-radius: 16px;
             padding: 32px; }
  .sc-section-t { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.05rem;
                  letter-spacing: -0.02em; color: #2f3331; margin: 0 0 4px; }
  .sc-section-s { font-size: .82rem; color: #9ca3af; margin: 0 0 20px; }

  .sc-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .sc-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
  .sc-field label { font-size: .76rem; font-weight: 600; color: #2f3331;
                    letter-spacing: -0.005em; }
  .sc-field input, .sc-field textarea, .sc-field select {
    border: 1.5px solid #e6e9e6; border-radius: 9px; padding: 11px 13px;
    font-size: .88rem; font-family: inherit; color: #2f3331;
    transition: border-color .15s, background .15s; background: #faf9f7;
  }
  .sc-field input:focus, .sc-field textarea:focus, .sc-field select:focus {
    outline: none; border-color: #2f3331; background: #fff;
  }
  .sc-field textarea { resize: vertical; min-height: 100px; line-height: 1.5; }
  .sc-field-hint { font-size: .72rem; color: #9ca3af; }
  .sc-field-req::after { content: ' *'; color: #dc2626; }

  .sc-divider { height: 1px; background: #e6e9e6; margin: 28px 0; }

  .sc-submit-row { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
  .sc-submit-btn {
    background: #2f3331; color: #fff; border: none;
    padding: 13px 28px; border-radius: 10px; font-family: Manrope, sans-serif;
    font-weight: 800; font-size: .92rem; letter-spacing: -0.005em; cursor: pointer;
    transition: opacity .15s;
  }
  .sc-submit-btn:hover { opacity: .85; }
  .sc-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
  .sc-msg { padding: 11px 14px; border-radius: 9px; font-size: .82rem;
             display: none; line-height: 1.5; }
  .sc-msg.ok { background: #ecfdf5; border: 1.5px solid #6ee7b7; color: #065f46;
               display: block; }
  .sc-msg.err { background: #fef2f2; border: 1.5px solid #fca5a5; color: #991b1b;
                display: block; }

  .sc-success { text-align: center; padding: 40px 20px; }
  .sc-success-ic { font-size: 3rem; margin-bottom: 14px; }
  .sc-success-t { font-family: Manrope, sans-serif; font-weight: 800; font-size: 1.5rem;
                  letter-spacing: -0.02em; margin: 0 0 8px; color: #2f3331; }

  @media (max-width: 640px) {
    .sc-perks { grid-template-columns: 1fr; }
    .sc-grid-2 { grid-template-columns: 1fr; }
    .sc-h1 { font-size: 2rem; }
  }
</style>

<div class="sc-wrap">
  <div class="sc-eyebrow">Distribute Startup Program</div>
  <h1 class="sc-h1">Credits for early-stage startups.</h1>
  <p class="sc-lead">
    Building something new? Apply for free Distribute credits to deploy your apps,
    databases, and AI models on our self-hosted cloud · without the upfront cost.
  </p>

  <div class="sc-perks">
    <div class="sc-perk">
      <div class="sc-perk-num">$100<span style="font-size:1rem;color:#afb3b0">+</span></div>
      <div class="sc-perk-lbl">Credits granted to qualified startups, scaling with stage and team size.</div>
    </div>
    <div class="sc-perk">
      <div class="sc-perk-num">5d</div>
      <div class="sc-perk-lbl">Application review window. We respond by email with a yes or a no.</div>
    </div>
    <div class="sc-perk">
      <div class="sc-perk-num">∞</div>
      <div class="sc-perk-lbl">Apps, databases, AI endpoints. Use credits across the whole platform.</div>
    </div>
  </div>

  <!-- Form -->
  <form class="sc-form" id="scForm" onsubmit="return submitStartupCredits(event)">

    <div class="sc-section-t">About your startup</div>
    <p class="sc-section-s">Tell us who you are and what you're building.</p>

    <div class="sc-grid-2">
      <div class="sc-field">
        <label class="sc-field-req" for="sc_company">Company name</label>
        <input type="text" id="sc_company" name="company_name" required maxlength="120">
      </div>
      <div class="sc-field">
        <label class="sc-field-req" for="sc_founder">Founder name</label>
        <input type="text" id="sc_founder" name="founder_name" required maxlength="120">
      </div>
    </div>

    <div class="sc-grid-2">
      <div class="sc-field">
        <label class="sc-field-req" for="sc_email">Founder email</label>
        <input type="email" id="sc_email" name="email" required maxlength="200">
        <span class="sc-field-hint">We'll send the decision here.</span>
      </div>
      <div class="sc-field">
        <label for="sc_website">Website or product URL</label>
        <input type="url" id="sc_website" name="website" maxlength="200" placeholder="https://...">
      </div>
    </div>

    <div class="sc-grid-2">
      <div class="sc-field">
        <label for="sc_stage">Stage</label>
        <select id="sc_stage" name="stage">
          <option value="">Select…</option>
          <option value="idea">Idea / pre-product</option>
          <option value="prototype">Prototype</option>
          <option value="mvp">MVP / launched</option>
          <option value="seed">Seed-funded</option>
          <option value="series-a">Series A or later</option>
        </select>
      </div>
      <div class="sc-field">
        <label for="sc_team">Team size</label>
        <select id="sc_team" name="team_size">
          <option value="">Select…</option>
          <option value="solo">Solo founder</option>
          <option value="2-5">2-5 people</option>
          <option value="6-15">6-15 people</option>
          <option value="16+">16+ people</option>
        </select>
      </div>
    </div>

    <div class="sc-field">
      <label for="sc_country">Country</label>
      <input type="text" id="sc_country" name="country" maxlength="60" placeholder="e.g. France, USA, Senegal…">
    </div>

    <div class="sc-divider"></div>

    <div class="sc-section-t">The project</div>
    <p class="sc-section-s">What are you building, and why Distribute?</p>

    <div class="sc-field">
      <label class="sc-field-req" for="sc_desc">What does your product do?</label>
      <textarea id="sc_desc" name="project_description" required maxlength="2000"
                placeholder="What problem are you solving? Who is it for? What stage of development?"></textarea>
      <span class="sc-field-hint">Min 30 characters · keep it concise but specific.</span>
    </div>

    <div class="sc-field">
      <label for="sc_why">Why Distribute?</label>
      <textarea id="sc_why" name="why_distribute" maxlength="2000"
                placeholder="What will you build on Distribute? Apps, AI models, internal tools?"></textarea>
    </div>

    <div class="sc-divider"></div>

    <div class="sc-section-t">Credits requested</div>
    <p class="sc-section-s">If you already have a Distribute account, enter the username we should credit.</p>

    <div class="sc-grid-2">
      <div class="sc-field">
        <label for="sc_user">Distribute username</label>
        <input type="text" id="sc_user" name="distribute_username" maxlength="60"
               pattern="[a-zA-Z0-9_-]+"
               value="">
        <span class="sc-field-hint">Don't have one yet? <a href="/signup" style="color:#2f3331">Sign up first →</a></span>
      </div>
      <div class="sc-field">
        <label for="sc_expected">Expected credit need</label>
        <select id="sc_expected" name="expected_credits">
          <option value="">Select…</option>
          <option value="100">$100 · just trying it out</option>
          <option value="500">$500 · MVP runway</option>
          <option value="1000">$1000 · scaling early product</option>
          <option value="5000">$5000+ · serious workload</option>
        </select>
      </div>
    </div>

    <div id="sc_msg" class="sc-msg"></div>

    <div class="sc-submit-row">
      <button type="submit" class="sc-submit-btn" id="sc_submit_btn">Submit application →</button>
      <span style="font-size:.74rem;color:#9ca3af">We'll respond within 5 business days.</span>
    </div>
  </form>

  <!-- Success state · revealed after form submit -->
  <div class="sc-form sc-success" id="sc_success" style="display:none">
    <div class="sc-success-ic">✓</div>
    <h2 class="sc-success-t">Application received.</h2>
    <p style="color:#675e4f;margin:0 0 20px;font-size:.92rem">
      Thanks for applying to the Distribute Startup Program. We review every application personally.
      You'll receive an email decision within 5 business days.
    </p>
    <p style="font-size:.82rem;color:#9ca3af;margin:0">
      Application ID · <code id="sc_success_id" style="background:#f3f4f1;padding:2px 6px;border-radius:4px"></code>
    </p>
    <a href="/" style="display:inline-block;margin-top:24px;color:#2f3331;font-weight:600">← Back to homepage</a>
  </div>
</div>

<script>
async function submitStartupCredits(e) {
  e.preventDefault();
  var form = document.getElementById('scForm');
  var btn  = document.getElementById('sc_submit_btn');
  var msg  = document.getElementById('sc_msg');
  msg.className = 'sc-msg';
  msg.textContent = '';

  var payload = {
    company_name:        document.getElementById('sc_company').value.trim(),
    founder_name:        document.getElementById('sc_founder').value.trim(),
    email:               document.getElementById('sc_email').value.trim(),
    website:             document.getElementById('sc_website').value.trim(),
    stage:               document.getElementById('sc_stage').value,
    team_size:           document.getElementById('sc_team').value,
    country:             document.getElementById('sc_country').value.trim(),
    project_description: document.getElementById('sc_desc').value.trim(),
    why_distribute:      document.getElementById('sc_why').value.trim(),
    expected_credits:    document.getElementById('sc_expected').value,
    distribute_username: document.getElementById('sc_user').value.trim(),
  };
  if (payload.project_description.length < 30) {
    msg.className = 'sc-msg err';
    msg.textContent = 'Please describe your product in at least 30 characters.';
    return false;
  }

  btn.disabled = true; btn.textContent = 'Submitting…';
  try {
    var r = await fetch('/api/startup-credits/apply', {
      method:'POST', credentials:'same-origin',
      headers:{'Content-Type':'application/json'},
      body: JSON.stringify(payload),
    });
    var d = await r.json();
    if (r.ok && d.success) {
      form.style.display = 'none';
      document.getElementById('sc_success').style.display = 'block';
      document.getElementById('sc_success_id').textContent = d.id || '?';
      window.scrollTo({top: 0, behavior: 'smooth'});
    } else {
      msg.className = 'sc-msg err';
      msg.textContent = (d.message || d.error || 'Submission failed') + '. Please retry.';
      btn.disabled = false; btn.textContent = 'Submit application →';
    }
  } catch(err) {
    msg.className = 'sc-msg err';
    msg.textContent = 'Network error: ' + (err.message || err);
    btn.disabled = false; btn.textContent = 'Submit application →';
  }
  return false;
}
</script>


        <!-- Footer -->
    

    
    

    
    

    

    
    
</body>
</html>