website/index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inference Cooperative — Private AI, owned together</title>
<meta name="description" content="A member-owned cooperative providing private AI inference. TEE-protected, renewable energy, member governance.">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<style>
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/figtree-400.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/figtree-500.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/figtree-600.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Figtree';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/figtree-700.woff2') format('woff2');
  }

  :root {
    --cream: #faf8f5;
    --white: #ffffff;
    --ink: #2d3327;
    --muted: #6b7a62;
    --light-muted: #94a08c;
    --green-deep: #5b8c5a;
    --green-mid: #6ba86b;
    --green-light: #7ab87a;
    --border: #e8e2d8;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }

  body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'Figtree', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    text-align: center;
  }

  .logo {
    margin-bottom: 28px;
  }

  h1 {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
  }

  .url {
    font-size: 16px;
    font-weight: 500;
    color: var(--green-deep);
    margin-bottom: 24px;
  }

  .tagline {
    font-size: 20px;
    font-weight: 500;
    color: var(--muted);
    max-width: 480px;
    line-height: 1.5;
    margin-bottom: 40px;
  }

  .features {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 48px;
  }

  .tag {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    background: #e8f5e8;
    color: var(--green-deep);
  }

  .cta {
    display: inline-block;
    padding: 14px 36px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    background: var(--green-deep);
    color: var(--white);
    text-decoration: none;
    transition: opacity 0.2s;
  }

  .cta:hover { opacity: 0.9; }

  .footer {
    margin-top: 64px;
    font-size: 13px;
    color: var(--light-muted);
  }

  .footer a {
    color: var(--muted);
    text-decoration: none;
  }

  .footer a:hover { text-decoration: underline; }
</style>
</head>
<body>

  <div class="logo">
    <svg width="120" height="120" viewBox="0 0 130 130" fill="none" aria-label="Inference Cooperative logo">
      <circle cx="65" cy="14" r="5" fill="#5b8c5a"/>
      <circle cx="58" cy="30" r="6" fill="#7ab87a"/>
      <circle cx="74" cy="30" r="4" fill="#6ba86b"/>
      <circle cx="51.5" cy="46" r="6.5" fill="#5b8c5a"/>
      <circle cx="65" cy="46" r="5" fill="#7ab87a"/>
      <circle cx="81" cy="46" r="4" fill="#6ba86b"/>
      <circle cx="44" cy="62" r="7" fill="#6ba86b"/>
      <circle cx="61" cy="62" r="5.5" fill="#5b8c5a"/>
      <circle cx="76" cy="62" r="4.5" fill="#7ab87a"/>
      <circle cx="89.5" cy="62" r="3.5" fill="#6ba86b"/>
      <circle cx="36.5" cy="78" r="7.5" fill="#5b8c5a"/>
      <circle cx="54" cy="78" r="6" fill="#7ab87a"/>
      <circle cx="70" cy="78" r="5" fill="#6ba86b"/>
      <circle cx="84" cy="78" r="4" fill="#5b8c5a"/>
      <circle cx="97.5" cy="78" r="3.5" fill="#7ab87a"/>
      <circle cx="44" cy="94" r="6.5" fill="#6ba86b"/>
      <circle cx="61" cy="94" r="5.5" fill="#5b8c5a"/>
      <circle cx="76" cy="94" r="4.5" fill="#7ab87a"/>
      <circle cx="89.5" cy="94" r="3.5" fill="#6ba86b"/>
      <circle cx="51.5" cy="110" r="5.5" fill="#5b8c5a"/>
      <circle cx="65" cy="110" r="4.5" fill="#7ab87a"/>
      <circle cx="81" cy="110" r="3.5" fill="#6ba86b"/>
    </svg>
  </div>

  <h1>Inference Cooperative</h1>
  <div class="url">inference.coop</div>

  <p class="tagline">Private AI, owned together. A member-owned cooperative for AI inference that protects your data and shares the benefits.</p>

  <div class="features">
    <span class="tag">TEE-protected</span>
    <span class="tag">Member-owned</span>
    <span class="tag">Renewable energy</span>
    <span class="tag">Open source</span>
  </div>

  <a class="cta" href="mailto:info@inference.coop">Get in touch</a>

  <div class="footer">
    <a href="mailto:info@inference.coop">info@inference.coop</a>
  </div>

</body>
</html>