<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />

<title>MandateWorks — AI Infrastructure for Parties, Candidates &amp; Institutions</title>
<meta name="description" content="MandateWorks builds AI-native infrastructure for political work. Six platforms on one stack — Forecast, Cadre OS, Sentinel, Counter, Mandate One, Resolve. Invite-first, global, non-partisan." />
<meta name="keywords" content="political AI, election technology, campaign infrastructure, voter simulation, political data platform, candidate operations, party tech, civic AI, MandateWorks" />
<meta name="author" content="MandateWorks" />
<meta name="application-name" content="MandateWorks" />
<meta name="generator" content="MandateWorks" />

<!-- Crawling -->
<meta name="robots" content="index,follow,max-snippet:-1,max-image-preview:large,max-video-preview:-1" />
<meta name="googlebot" content="index,follow" />
<link rel="canonical" href="https://mandateworks.com/" />
<link rel="alternate" hreflang="en" href="https://mandateworks.com/" />
<link rel="alternate" hreflang="x-default" href="https://mandateworks.com/" />

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />
<meta property="og:site_name" content="MandateWorks" />
<meta property="og:title" content="MandateWorks — AI Infrastructure for Political Work" />
<meta property="og:description" content="Six platforms. One stack. AI-native infrastructure for parties, candidates and institutions. Invite-first rollout through 2026." />
<meta property="og:url" content="https://mandateworks.com/" />
<meta property="og:image" content="https://mandateworks.com/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="MandateWorks — Politics deserves better infrastructure." />

<!-- Theme + favicons -->
<meta name="theme-color" content="#F6F4EF" media="(prefers-color-scheme: light)" />
<meta name="theme-color" content="#0E1116" media="(prefers-color-scheme: dark)" />
<meta name="color-scheme" content="light dark" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/favicon-192.png" />
<link rel="icon" type="image/png" sizes="512x512" href="/favicon-512.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="manifest" href="/site.webmanifest" />

<!-- Performance -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="dns-prefetch" href="https://unpkg.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />

<!-- Structured data: Organization + WebSite + SoftwareApplication × 6 + FAQPage -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "Organization",
      "@id": "https://mandateworks.com/#org",
      "name": "MandateWorks",
      "url": "https://mandateworks.com/",
      "logo": "https://mandateworks.com/favicon-512.png",
      "description": "AI-native infrastructure for parties, candidates and institutions. Six platforms on one stack.",
      "foundingDate": "2026",
      "areaServed": "Global",
      "sameAs": [],
      "contactPoint": [{
        "@type": "ContactPoint",
        "email": "hello@mandateworks.com",
        "contactType": "customer support",
        "availableLanguage": ["en"]
      }]
    },
    {
      "@type": "WebSite",
      "@id": "https://mandateworks.com/#website",
      "url": "https://mandateworks.com/",
      "name": "MandateWorks",
      "publisher": { "@id": "https://mandateworks.com/#org" },
      "inLanguage": "en"
    },
    {
      "@type": "SoftwareApplication",
      "name": "Forecast",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "description": "What-if and live scenario simulations across voter personas, geographies, and ad-spend.",
      "publisher": { "@id": "https://mandateworks.com/#org" },
      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD", "availability": "https://schema.org/PreOrder" }
    },
    {
      "@type": "SoftwareApplication",
      "name": "Cadre OS",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "description": "Curriculum, drills and assessments for party workers — at the scale of millions.",
      "publisher": { "@id": "https://mandateworks.com/#org" },
      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD", "availability": "https://schema.org/PreOrder" }
    },
    {
      "@type": "SoftwareApplication",
      "name": "Sentinel",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "description": "Real-time newsroom and monitoring for narrative and threat intelligence.",
      "publisher": { "@id": "https://mandateworks.com/#org" },
      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD", "availability": "https://schema.org/PreOrder" }
    },
    {
      "@type": "SoftwareApplication",
      "name": "Counter",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "description": "Continuous social scraping, false-narrative detection, and rapid response queue assignable to members.",
      "publisher": { "@id": "https://mandateworks.com/#org" },
      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD", "availability": "https://schema.org/PreOrder" }
    },
    {
      "@type": "SoftwareApplication",
      "name": "Mandate One",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "description": "Constituency cockpit for sitting representatives — caseload, performance, communication.",
      "publisher": { "@id": "https://mandateworks.com/#org" },
      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD", "availability": "https://schema.org/PreOrder" }
    },
    {
      "@type": "SoftwareApplication",
      "name": "Resolve",
      "applicationCategory": "BusinessApplication",
      "operatingSystem": "Web",
      "description": "Citizen grievance intake and SLA management for representatives and institutions.",
      "publisher": { "@id": "https://mandateworks.com/#org" },
      "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD", "availability": "https://schema.org/PreOrder" }
    },
    {
      "@type": "FAQPage",
      "mainEntity": [
        { "@type": "Question", "name": "Who can use MandateWorks today?",
          "acceptedAnswer": { "@type": "Answer", "text": "We are in an invitation-first phase, partnering with a small selected group of parties, sitting representatives, and institutions on proof-of-concepts. We are now ready to roll out to interested operators at larger scale through 2026 and 2027 — join the waitlist to be considered." } },
        { "@type": "Question", "name": "How is this different from polling firms or political consultancies?",
          "acceptedAnswer": { "@type": "Answer", "text": "We don't sell advice — we ship infrastructure. Our customers run their own playbooks on our platforms with their own data, with full audit trails and configurable retention." } },
        { "@type": "Question", "name": "What about data sovereignty and privacy?",
          "acceptedAnswer": { "@type": "Answer", "text": "Region-pinned data, role-based access, audit-by-default. We support customer-managed encryption keys, configurable retention, and on-prem deployments where regulation requires it. SOC 2 is on our 2026 roadmap." } },
        { "@type": "Question", "name": "Is this only for elections?",
          "acceptedAnswer": { "@type": "Answer", "text": "No. Forecast and Mandate One are most active during campaigns, but Cadre OS, Sentinel, Counter, and Resolve operate continuously between elections — that's where most political work actually happens." } },
        { "@type": "Question", "name": "Do you work in our country and language?",
          "acceptedAnswer": { "@type": "Answer", "text": "We are built global-first. Models are tuned per region; the platform supports 22 languages today and we expand based on POC partners. Tell us your geography on the waitlist." } },
        { "@type": "Question", "name": "Do you take a stance on parties or ideologies?",
          "acceptedAnswer": { "@type": "Answer", "text": "No. MandateWorks is non-partisan infrastructure. We work with any legal political organization that meets our use policy. We do not run campaigns, generate disinformation, or advise on strategy." } }
      ]
    }
  ]
}
</script>

<style>
  :root {
    /* color */
    --paper:    #F6F4EF;
    --bone:     #ECE8DF;
    --ink:      #0E1116;
    --graphite: #2A2E36;
    --mute:     #6B7180;
    --rule:     #DCD7CB;
    --line:     #1C1F26;
    --volt:     #2E2BFF;
    --volt-ink: #1B19B8;
    --mint:     #00C281;
    --amber:    #FFB020;
    --coral:    #FF5A36;

    /* type — defaults for "serif display" pairing */
    --display: "Instrument Serif", "Times New Roman", serif;
    --display-italic: italic;
    --display-weight: 400;
    --sans: "Inter Tight", system-ui, -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, monospace;

    /* density */
    --pad-section: 72px;
    --gutter: 24px;

    /* motion */
    --ease: cubic-bezier(.2,.7,.1,1);
    --motion-mult: 1;
  }

  /* density variants */
  [data-density="airy"]    { --pad-section: 112px; --gutter: 32px; }
  [data-density="compact"] { --pad-section: 48px;  --gutter: 18px; }

  /* type pairing variants */
  [data-typeset="all-sans"] {
    --display: "Geist", "Inter Tight", system-ui, sans-serif;
    --display-italic: normal;
    --display-weight: 500;
  }

  /* motion intensity */
  [data-motion="off"]    { --motion-mult: 0; }
  [data-motion="subtle"] { --motion-mult: 0.5; }
  [data-motion="rich"]   { --motion-mult: 1.4; }

  /* Command mode — ink-dominant palette flip */
  [data-mode="command"] {
    --paper:    #0E1116;
    --bone:     #15181F;
    --ink:      #F6F4EF;
    --graphite: #C9CCD3;
    --mute:     #7B8090;
    --rule:     #2A2E36;
    --line:     #ECE8DF;
    --volt:     #5DFB8E;       /* phosphor green for command rooms */
    --volt-ink: #00C281;
  }
  [data-mode="command"] body { background: var(--paper); }
  [data-mode="command"] ::selection { background: var(--volt); color: #0E1116; }

  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
  body { font-size: 16px; line-height: 1.5; }
  a { color: inherit; text-decoration: none; }
  img, svg { display: block; max-width: 100%; }

  ::selection { background: var(--volt); color: #fff; }

  /* Typography */
  .display {
    font-family: var(--display);
    font-style: var(--display-italic);
    font-weight: var(--display-weight);
    letter-spacing: -0.02em;
    line-height: 0.98;
  }
  [data-typeset="all-sans"] .display { font-style: normal; letter-spacing: -0.035em; line-height: 0.96; }
  .display em, .display i { font-family: var(--display); font-style: italic; }
  [data-typeset="all-sans"] .display em, [data-typeset="all-sans"] .display i {
    font-style: normal;
    color: var(--volt);
  }

  .micro {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .eyebrow::before {
    content: ""; width: 6px; height: 6px; background: var(--volt); border-radius: 1px;
  }

  /* Layout */
  .wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
  .section { padding: var(--pad-section) 0; }
  .section + .section { border-top: 1px solid var(--rule); }
  /* Hero → first section: tighter than between mid sections */
  .hero + .section { padding-top: calc(var(--pad-section) * 0.5); }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.01em;
    border: 1px solid var(--ink);
    background: var(--ink); color: var(--paper);
    cursor: pointer;
    transition: transform .25s var(--ease), background .2s var(--ease), color .2s var(--ease);
  }
  .btn:hover { transform: translateY(-1px); }
  .btn.volt { background: var(--volt); border-color: var(--volt); color: #fff; }
  .btn.volt:hover { background: var(--volt-ink); border-color: var(--volt-ink); }
  .btn.ghost { background: transparent; color: var(--ink); }
  .btn.ghost:hover { background: var(--ink); color: var(--paper); }
  .btn .arrow {
    display: inline-block;
    transition: transform .35s var(--ease);
  }
  .btn:hover .arrow { transform: translateX(4px); }

  /* Hairlines */
  .rule { height: 1px; background: var(--rule); width: 100%; }
  .rule-ink { height: 1px; background: var(--ink); width: 100%; }

  /* Logo */
  .mw-mark {
    width: 28px; height: 28px; position: relative; flex-shrink: 0;
    display: inline-block;
  }
  .mw-mark svg { width: 100%; height: 100%; }

  /* Nav */
  .nav-bar {
    position: sticky; top: 0; z-index: 50;
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--rule);
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 32px;
    max-width: 1320px; margin: 0 auto;
  }
  .nav-brand {
    display: flex; align-items: center; gap: 10px;
    font-weight: 700; letter-spacing: 0.08em; font-size: 14px;
  }
  .nav-links { display: flex; gap: 28px; font-size: 14px; color: var(--graphite); }
  .nav-links a { transition: color .2s var(--ease); position: relative; }
  .nav-links a:hover { color: var(--ink); }
  .nav-links a::after {
    content:""; position: absolute; left:0; right:0; bottom:-6px;
    height: 1px; background: var(--ink);
    transform: scaleX(0); transform-origin: left;
    transition: transform .3s var(--ease);
  }
  .nav-links a:hover::after { transform: scaleX(1); }

  /* Marquee bar (under nav) */
  .ticker {
    border-bottom: 1px solid var(--rule);
    overflow: hidden;
    background: var(--paper);
  }
  .ticker-track {
    display: flex; gap: 60px;
    padding: 10px 0;
    white-space: nowrap;
    animation: scroll calc(40s / max(var(--motion-mult), .01)) linear infinite;
  }
  [data-motion="off"] .ticker-track { animation: none; }
  .ticker-track > span { font-family: var(--mono); font-size: 11px; color: var(--mute); letter-spacing: 0.12em; text-transform: uppercase; display:flex; align-items:center; gap: 14px; }
  .ticker-track > span::after {
    content: "●"; color: var(--volt); font-size: 8px; transform: translateY(-1px);
  }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Reveal on scroll */
  .reveal {
    opacity: 0; transform: translateY(calc(20px * var(--motion-mult)));
    transition: opacity calc(.7s / max(var(--motion-mult), .5)) var(--ease),
                transform calc(.7s / max(var(--motion-mult), .5)) var(--ease);
  }
  .reveal.in { opacity: 1; transform: none; }
  [data-motion="off"] .reveal { opacity: 1; transform: none; transition: none; }

  /* S14 — volt cursor (site-wide, improved) */
  @media (hover: hover) and (pointer: fine) {
    body.volt-cursor-on { cursor: none; }
    body.volt-cursor-on a,
    body.volt-cursor-on button,
    body.volt-cursor-on input,
    body.volt-cursor-on select,
    body.volt-cursor-on textarea,
    body.volt-cursor-on [role="button"] { cursor: none; }
  }
  .volt-cursor-dot,
  .volt-cursor-ring {
    position: fixed;
    left: 0; top: 0;
    pointer-events: none;
    z-index: 9999;
    will-change: transform;
    opacity: 0;
    transition: opacity .35s var(--ease);
  }
  .volt-cursor-on .volt-cursor-dot,
  .volt-cursor-on .volt-cursor-ring { opacity: 1; }
  .volt-cursor-dot {
    width: 8px; height: 8px;
    background: var(--volt);
    border-radius: 50%;
    transform: translate(-100px, -100px) translate(-50%, -50%);
    mix-blend-mode: normal;
  }
  .volt-cursor-ring {
    width: 36px; height: 36px;
    border: 1px solid var(--volt);
    border-radius: 50%;
    transform: translate(-100px, -100px) translate(-50%, -50%);
    transition: opacity .35s var(--ease),
                width .25s var(--ease),
                height .25s var(--ease),
                border-color .25s var(--ease),
                background-color .25s var(--ease);
  }
  .volt-cursor-ring.hover {
    width: 56px; height: 56px;
    background: rgba(46, 43, 255, 0.08);
    border-color: var(--volt);
  }
  .volt-cursor-ring.hover ~ .volt-cursor-dot,
  .volt-cursor-on .volt-cursor-dot.hover { opacity: 0; }
  .volt-cursor-on.idle .volt-cursor-dot,
  .volt-cursor-on.idle .volt-cursor-ring { opacity: 0.35; }
  [data-motion="off"] .volt-cursor-dot,
  [data-motion="off"] .volt-cursor-ring { display: none; }
  @media (hover: none), (pointer: coarse) {
    .volt-cursor-dot, .volt-cursor-ring { display: none; }
  }

  /* Hero */
  .hero {
    padding: 64px 0 36px;
    position: relative;
    overflow: hidden;
  }
  .hero h1 {
    font-size: clamp(56px, 9.5vw, 156px);
    margin: 18px 0 28px;
    max-width: 13ch;
  }
  /* S02 — glyph swap (volt headline word morphs through meanings) */
  .glyph-slot {
    display: inline-block;
    position: relative;
    vertical-align: baseline;
    color: var(--volt);
    font-style: italic;
  }
  [data-typeset="all-sans"] .glyph-slot { font-style: normal; }
  .glyph-slot .anchor { visibility: hidden; white-space: nowrap; }
  .glyph-slot .word {
    display: inline-block;
    position: absolute; left: 0; top: 0;
    white-space: nowrap;
    color: var(--volt);
    opacity: 0;
    transform: translateY(.4em);
    transition: opacity .55s var(--ease), transform .55s var(--ease);
  }
  .glyph-slot .word.in  { opacity: 1; transform: none; }
  .glyph-slot .word.out { opacity: 0; transform: translateY(-.4em); }
  [data-motion="off"] .glyph-slot .word { transition: none; }
  .hero-sub {
    font-size: clamp(16px, 1.3vw, 19px);
    color: var(--graphite);
    max-width: 56ch;
    margin: 0 0 36px;
    line-height: 1.5;
  }
  .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
  .hero-meta {
    margin-top: 40px;
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--gutter);
    border-top: 1px solid var(--ink);
    padding-top: 22px;
  }
  .hero-meta .stat { display: flex; flex-direction: column; gap: 4px; }
  .hero-meta .stat .num { font-family: var(--mono); font-size: 38px; line-height: 1; letter-spacing: -0.02em; }
  .hero-meta .stat .lbl { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--mute); }

  /* Hero canvas (generative) */
  .hero-canvas {
    position: absolute;
    right: -120px; top: 40px;
    width: 620px; height: 620px;
    pointer-events: none;
    opacity: .85;
    z-index: 0;
  }
  .hero > .wrap > *:not(.hero-canvas) { position: relative; z-index: 1; }
  @media (max-width: 1180px) { .hero-canvas { opacity: .35; right: -200px; } }

  /* Section heading */
  .sec-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--gutter);
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 36px;
  }
  .sec-head h2 {
    font-size: clamp(40px, 5vw, 72px);
    margin: 0;
    min-width: 0;
    max-width: 18ch;
  }
  .sec-head .lede {
    color: var(--graphite); max-width: 60ch; font-size: 17px; line-height: 1.5;
    align-self: end;
  }
  .sec-head .num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--mono); font-size: 11px;
    letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
    padding: 6px 14px 6px 12px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    white-space: nowrap;
    width: max-content;
  }
  .sec-head .num::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--volt);
    flex-shrink: 0;
  }
  /* When sec-head wraps to single column, give the H2 + lede air */
  @media (max-width: 980px) {
    .sec-head .num { font-size: 10px; }
  }

  /* Platform grid */
  .platforms {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1px;
    background: var(--ink);
    border: 1px solid var(--ink);
  }
  .platform-card {
    grid-column: span 4;
    background: var(--paper);
    padding: 28px 28px 24px;
    min-height: 360px;
    display: flex; flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: background .25s var(--ease);
    cursor: pointer;
  }
  .platform-card { transition: background .25s var(--ease), transform .35s var(--ease); }
  .platform-card::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--volt); transition: width .35s var(--ease); }
  .platform-card:hover { background: var(--bone); }
  .platform-card:hover::after { width: 100%; }
  .platform-card.span-6 { grid-column: span 6; }
  .platform-card.span-12 { grid-column: span 12; min-height: 420px; }
  .platform-card .head { display: flex; justify-content: space-between; align-items: flex-start; }
  .platform-card .vis { flex: 1; margin: 18px -8px 14px; min-height: 140px; display: flex; align-items: center; justify-content: center; }
  .platform-card h3 {
    font-family: var(--display);
    font-style: var(--display-italic);
    font-weight: var(--display-weight);
    font-size: 44px; line-height: 1;
    letter-spacing: -0.015em;
    margin: 0 0 8px;
  }
  [data-typeset="all-sans"] .platform-card h3 { font-style: normal; letter-spacing: -0.03em; }
  .platform-card p { color: var(--graphite); font-size: 14px; line-height: 1.5; margin: 0; max-width: 38ch; }
  .platform-card .foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
  .platform-card .pcode {
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
    color: var(--mute); text-transform: uppercase;
  }
  .platform-card .ptag {
    font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
    color: var(--ink); text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--rule);
    background: var(--bone);
  }
  .platform-card:hover .ptag { background: var(--volt); color: #fff; border-color: var(--volt); }
  .platform-card .read { display: none; }

  /* Stack diagram */
  .stack-diagram {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--ink);
    border: 1px solid var(--ink);
    margin-top: 28px;
  }
  .stack-row {
    background: var(--paper);
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    gap: 24px;
    align-items: center;
    transition: background .25s var(--ease);
  }
  .stack-row:hover { background: var(--bone); }
  .stack-row .layer { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--volt); }
  .stack-row .desc { font-size: 15px; color: var(--graphite); }
  .stack-row .badge { font-family: var(--mono); font-size: 11px; color: var(--mute); justify-self: end; letter-spacing: .12em; text-transform: uppercase; }

  /* Manifesto / pull-quote */
  .pull {
    padding: 24px 0;
    text-align: left;
  }
  .pull .quote {
    font-family: var(--display);
    font-style: var(--display-italic);
    font-weight: var(--display-weight);
    font-size: clamp(36px, 5vw, 72px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    max-width: 22ch;
  }
  [data-typeset="all-sans"] .pull .quote { font-style: normal; letter-spacing: -0.03em; }
  .pull .quote em { color: var(--volt); }

  /* FAQ */
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--ink);
  }
  .faq-item {
    border-bottom: 1px solid var(--rule);
    padding: 26px 0 26px 22px;
    position: relative;
    cursor: pointer;
  }
  /* S16 — volt left-edge accent slides down on open */
  .faq-item::before {
    content: "";
    position: absolute;
    left: 0; top: 26px; bottom: 26px;
    width: 2px;
    background: var(--volt);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .45s var(--ease);
  }
  .faq-item.open::before { transform: scaleY(1); }
  [data-motion="off"] .faq-item::before { transition: none; }
  .faq-q {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    gap: 18px;
    align-items: baseline;
  }
  .faq-q .n { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--mute); }
  .faq-q .qt { font-family: var(--display); font-style: var(--display-italic); font-weight: var(--display-weight); font-size: clamp(22px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.01em; }
  [data-typeset="all-sans"] .faq-q .qt { font-style: normal; letter-spacing: -0.02em; }
  .faq-q .toggle { font-family: var(--mono); font-size: 18px; justify-self: end; transition: transform .3s var(--ease); }
  .faq-item.open .faq-q .toggle { transform: rotate(45deg); }
  .faq-a {
    max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height .4s var(--ease), opacity .3s var(--ease), margin .3s var(--ease);
  }
  .faq-item.open .faq-a { max-height: 600px; opacity: 1; margin-top: 18px; }
  .faq-a-inner {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    gap: 18px;
  }
  .faq-a-inner > p { color: var(--graphite); font-size: 16px; line-height: 1.55; max-width: 64ch; grid-column: 2; }

  /* Waitlist */
  .waitlist-card {
    background: var(--paper);
    color: var(--ink);
    padding: 64px 56px;
    border: 1px solid var(--ink);
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    position: relative;
    overflow: hidden;
  }
  .waitlist-card h2 {
    font-family: var(--display);
    font-style: var(--display-italic);
    font-weight: var(--display-weight);
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
    color: var(--ink);
  }
  [data-typeset="all-sans"] .waitlist-card h2 { font-style: normal; letter-spacing: -0.03em; }
  .waitlist-card h2 em { color: var(--volt); }
  [data-typeset="all-sans"] .waitlist-card h2 em { color: var(--volt); font-style: normal; }
  .waitlist-card .lede { color: var(--graphite); margin: 0 0 30px; max-width: 50ch; }
  .waitlist-card .form { display: flex; flex-direction: column; gap: 18px; }
  .waitlist-card label { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
  .waitlist-card input,
  .waitlist-card select {
    background: transparent;
    border: 0; border-bottom: 1px solid var(--ink);
    padding: 12px 0; font-family: var(--sans); font-size: 16px;
    color: var(--ink);
    outline: none;
    transition: border-color .2s var(--ease);
    width: 100%;
  }
  .waitlist-card input::placeholder { color: var(--mute); }
  .waitlist-card input:focus, .waitlist-card select:focus {
    border-color: var(--volt);
  }
  .waitlist-card select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1 L6 6 L11 1' stroke='%230E1116' stroke-width='1.2' fill='none'/></svg>"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 24px; }
  .waitlist-card .submit {
    margin-top: 8px;
    padding: 16px 24px;
    background: var(--volt);
    border: 1px solid var(--volt);
    color: #fff;
    font-family: var(--sans); font-weight: 600; font-size: 14px;
    cursor: pointer;
    align-self: flex-start;
    transition: background .2s var(--ease), transform .2s var(--ease);
    display: inline-flex; align-items: center; gap: 10px;
  }
  .waitlist-card .submit:hover { background: var(--volt-ink); transform: translateY(-1px); }
  .waitlist-card .meta {
    display: flex; gap: 24px;
    margin-top: 32px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--mute);
  }
  .waitlist-card .meta span:first-child { color: var(--ink); }
  .waitlist-card::before {
    content: ""; position: absolute; left: -1px; top: -1px; width: 4px; height: 60px; background: var(--volt);
  }

  /* ───── v2 additions ───── */

  /* Trust strip — institutional-style proof band */
  .trust-strip {
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    padding: 28px 0;
    background: var(--bone);
  }
  .trust-strip .wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 32px;
    align-items: center;
  }
  .trust-strip .label-row {
    display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  }
  .trust-strip .label-row .micro { color: var(--mute); }
  .trust-strip .label-row .stat-line {
    font-family: var(--display);
    font-style: var(--display-italic);
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.01em;
  }
  [data-typeset="all-sans"] .trust-strip .stat-line { font-style: normal; letter-spacing: -0.02em; font-weight: 500; }
  .trust-strip .stat-line em { color: var(--volt-ink); }
  [data-mode="command"] .trust-strip .stat-line em { color: var(--volt); }
  .logo-row {
    display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
    opacity: 0.62;
  }
  .logo-row .logo-mark {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--graphite);
    padding: 6px 12px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    white-space: nowrap;
  }
  .logo-row .logo-mark::before {
    content: "";
    display: inline-block;
    width: 10px; height: 10px;
    background: var(--ink);
    -webkit-mask: var(--shape, none) center/contain no-repeat;
            mask: var(--shape, none) center/contain no-repeat;
  }
  .logo-row .logo-mark.disc::before     { border-radius: 50%; -webkit-mask: none; mask: none; }
  .logo-row .logo-mark.square::before   { border-radius: 0; -webkit-mask: none; mask: none; }
  .logo-row .logo-mark.diamond::before  { transform: rotate(45deg); -webkit-mask: none; mask: none; }
  .logo-row .logo-mark.bar::before      { width: 14px; height: 4px; -webkit-mask: none; mask: none; }
  .logo-row .logo-mark.cross::before    {
    background: none;
    width: 12px; height: 12px;
    border-top: 2px solid var(--ink);
    border-right: 2px solid var(--ink);
    transform: rotate(45deg) translate(-1px,1px);
  }
  .logo-row .logo-mark.tri::before {
    background: none;
    width: 0; height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 10px solid var(--ink);
  }

  /* Hero illustration — editorial wire-room composition */
  .hero-illu-wrap {
    margin-top: 56px;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: linear-gradient(180deg, var(--bone) 0%, var(--paper) 100%);
    overflow: hidden;
    position: relative;
    aspect-ratio: 21 / 9;
  }
  [data-mode="command"] .hero-illu-wrap {
    background: linear-gradient(180deg, #0A0C12 0%, #0E1116 100%);
  }
  .hero-illu-meta {
    position: absolute;
    top: 16px; left: 16px; right: 16px;
    display: flex; justify-content: space-between;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
    z-index: 2;
  }
  .hero-illu-caption {
    position: absolute;
    bottom: 16px; left: 16px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .hero-illu-caption b { color: var(--ink); font-weight: 500; }
  .hero-illu svg { width: 100%; height: 100%; display: block; }

  /* Footer */
  footer {
    padding: 80px 0 32px;
    border-top: 1px solid var(--rule);
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--gutter);
    padding-bottom: 48px;
    border-bottom: 1px solid var(--rule);
  }
  .foot-brand .display {
    font-size: clamp(48px, 6vw, 96px);
    letter-spacing: -0.04em;
    margin: 0 0 12px;
  }
  .foot-col h4 { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 0 0 16px; font-weight: 500; }
  .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
  .foot-col a { color: var(--graphite); transition: color .2s var(--ease); }
  .foot-col a:hover { color: var(--ink); }
  .foot-bottom { display: flex; justify-content: space-between; padding-top: 24px; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

  /* Insights */
  .insights-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--ink);
    border: 1px solid var(--ink);
  }
  .insight {
    background: var(--paper);
    padding: 28px;
    min-height: 280px;
    display: flex; flex-direction: column; justify-content: space-between;
    cursor: pointer;
    transition: background .25s var(--ease);
  }
  .insight:hover { background: var(--bone); }
  .insight-soon { background: var(--paper); cursor: default; position: relative; }
  .insight-soon:hover { background: var(--paper); }
  .insight-soon h3 { color: var(--mute); }
  .insight-soon .tag { color: var(--mute); }
  .insight-soon::after {
    content: "SOON";
    position: absolute; top: 18px; right: 18px;
    font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
    color: var(--volt);
    border: 1px solid var(--volt); padding: 3px 6px;
  }
  .insight .tag { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--volt); }
  .insight h3 { font-family: var(--display); font-style: var(--display-italic); font-weight: var(--display-weight); font-size: 26px; line-height: 1.1; letter-spacing: -0.01em; margin: 16px 0 10px; }
  [data-typeset="all-sans"] .insight h3 { font-style: normal; letter-spacing: -0.025em; }
  .insight .meta { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }

  /* Audience strip */
  .aud-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--ink);
    border: 1px solid var(--ink);
  }
  .aud-cell {
    background: var(--paper);
    padding: 36px 32px;
    min-height: 220px;
    display: flex; flex-direction: column; justify-content: space-between;
  }
  .aud-cell .display {
    font-size: 32px;
    line-height: 1.05;
    margin: 0;
    max-width: 16ch;
  }
  .aud-cell ul { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--graphite); display: flex; flex-direction: column; gap: 6px; }
  .aud-cell li::before { content:"·  "; color: var(--volt); }
  .aud-cell { transition: background .25s var(--ease); }
  .aud-cell:hover { background: var(--bone); }

  /* Float pill */
  .pill {
    display:inline-flex; align-items:center; gap:8px;
    padding: 6px 12px;
    border: 1px solid var(--ink);
    border-radius: 999px;
    font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  }
  .pill.live::before { content:""; width:6px; height:6px; border-radius:50%; background: var(--mint); animation: pulse calc(2s / max(var(--motion-mult), .3)) ease-in-out infinite; }
  [data-motion="off"] .pill.live::before { animation: none; }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(.85); }
  }
  /* S07 — radar sweep + blip flare */
  @keyframes sen-sweep {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes sen-blip {
    0%   { opacity: 1; r: 1; }
    40%  { opacity: 1; r: 3; }
    100% { opacity: 0; r: 5; }
  }
  /* Counter — incoming stream */
  @keyframes cnt-stream {
    0%   { transform: translateX(-20px); opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateX(0px); opacity: 0; }
  }
  [data-motion="off"] [style*="sen-sweep"],
  [data-motion="off"] [style*="sen-blip"] { animation: none !important; }

  /* Responsive */
  @media (max-width: 980px) {
    .hero-canvas { display: none; }
    .sec-head { grid-template-columns: 1fr; }
    .platform-card { grid-column: span 12 !important; min-height: auto; }
    .hero-meta { grid-template-columns: 1fr 1fr; }
    .stack-row { grid-template-columns: 1fr; }
    .stack-row .badge { justify-self: start; }
    .waitlist-card { grid-template-columns: 1fr; gap: 32px; padding: 36px 28px; }
    .waitlist-card .form-row { grid-template-columns: 1fr; }
    .insights-grid { grid-template-columns: 1fr; }
    .aud-strip { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: 1fr 1fr; }
  }
</style>

<script type="application/json" id="speaker-notes">[]</script>
</head>
<body>

<a href="#waitlist" class="skip-link" style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;">Skip to waitlist</a>

<div id="root">
  <!-- Server-side fallback content for bots and no-JS visitors. Replaced by React on hydration. -->
  <noscript>
    <header style="padding:24px 32px;border-bottom:1px solid #DCD7CB;">
      <h1 style="font-family:Georgia,serif;font-size:32px;margin:0;">MandateWorks</h1>
      <p style="margin:6px 0 0;color:#2A2E36;">AI-native infrastructure for political work.</p>
    </header>
    <main style="padding:48px 32px;max-width:880px;margin:0 auto;">
      <h2 style="font-family:Georgia,serif;font-size:48px;font-weight:400;margin:0 0 16px;">Politics deserves better infrastructure.</h2>
      <p style="font-size:18px;line-height:1.6;color:#2A2E36;">
        MandateWorks is AI-native infrastructure for parties, candidates and institutions —
        six tightly-coupled platforms that move political work from instinct to instrumented decisions:
        <strong>Forecast</strong> (scenario simulation),
        <strong>Cadre OS</strong> (cadre training at scale),
        <strong>Sentinel</strong> (real-time newsroom &amp; monitoring),
        <strong>Counter</strong> (false-narrative response),
        <strong>Mandate One</strong> (constituency cockpit), and
        <strong>Resolve</strong> (citizen grievance &amp; SLA).
      </p>
      <p>This page requires JavaScript. <a href="mailto:hello@mandateworks.com">Email us</a> to join the waitlist.</p>
    </main>
  </noscript>
</div>

<!-- Netlify Forms detection: static markup so Netlify's build bots can register the form.
     The visible form is React-rendered with the same field names and submits to "/" with form-name=waitlist. -->
<form hidden method='post' name='waitlist'><input type='hidden' name='form-name' value='waitlist' />
  <input type="text" name="name" />
  <input type="email" name="email" />
  <select name="role">
    <option>Party leadership</option>
    <option>Sitting representative</option>
    <option>Aspirant / candidate</option>
    <option>Institution / press / other</option>
  </select>
  <input type="tel" name="phone" />
  <input type="text" name="bot-field" />
</form>
<div class="volt-cursor-ring" id="volt-cursor-ring"></div>
<div class="volt-cursor-dot" id="volt-cursor-dot"></div>

<script>
(() => {
  // S14 — Volt cursor (site-wide, improved)
  if (matchMedia('(hover: none), (pointer: coarse)').matches) return;
  const dot = document.getElementById('volt-cursor-dot');
  const ring = document.getElementById('volt-cursor-ring');
  document.body.classList.add('volt-cursor-on');

  let mx = -100, my = -100;
  let rx = -100, ry = -100;
  let dx = -100, dy = -100;
  let idleTimer;
  let hoverEl = null;

  const isHoverable = (el) => el && el.closest && el.closest('a, button, input, select, textarea, [role="button"], .platform-card, .faq-item, .insight-card, .aud-cell, .tile, .target');

  addEventListener('mousemove', (e) => {
    mx = e.clientX; my = e.clientY;
    document.body.classList.remove('idle');
    clearTimeout(idleTimer);
    idleTimer = setTimeout(() => document.body.classList.add('idle'), 2200);

    const target = isHoverable(e.target);
    if (target !== hoverEl) {
      hoverEl = target;
      if (target) ring.classList.add('hover');
      else ring.classList.remove('hover');
    }
  }, {passive: true});

  addEventListener('mouseleave', () => {
    document.body.classList.add('idle');
  });

  addEventListener('mousedown', () => { ring.style.transform += ' scale(.7)'; });
  addEventListener('mouseup', () => {
    // recompute on next frame
  });

  const tick = () => {
    // Magnetic snap when hovering
    let tx = mx, ty = my;
    if (hoverEl) {
      const r = hoverEl.getBoundingClientRect();
      const cx = r.left + r.width / 2;
      const cy = r.top + r.height / 2;
      // pull toward center: 35% lerp
      tx = mx + (cx - mx) * 0.30;
      ty = my + (cy - my) * 0.30;
    }
    // dot — fast follow
    dx += (mx - dx) * 0.55;
    dy += (my - dy) * 0.55;
    // ring — eased lag toward magnetic target
    rx += (tx - rx) * 0.18;
    ry += (ty - ry) * 0.18;
    dot.style.transform  = `translate(${dx}px, ${dy}px) translate(-50%,-50%)`;
    ring.style.transform = `translate(${rx}px, ${ry}px) translate(-50%,-50%)`;
    requestAnimationFrame(tick);
  };
  requestAnimationFrame(tick);
})();
</script>

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>

<script type="text/babel" src="tweaks-panel.jsx"></script>
<script type="text/babel" src="src/visuals.jsx"></script>
<script type="text/babel" src="src/sections.jsx"></script>
<script type="text/babel" src="src/app.jsx"></script>

</body>
</html>
