/**
 * rGov landing page — modular governance decision circuits.
 * GovMods: do-ocratic circuit components for multiplayer collaboration.
 */
export function renderLanding(): string {
	return `
<!-- Hero -->
<div class="rl-hero">
  <span class="rl-tagline" style="color:#818cf8;background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.2)">
    Modular Governance for rSpace
  </span>
  <h1 class="rl-heading" style="background:linear-gradient(to right,#7c3aed,#1d4ed8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-size:2.5rem">
    GovMods
  </h1>
  <p class="rl-subtitle" style="max-width:640px">
    <strong style="color:#e2e8f0">Do-ocratic circuit components</strong> for multiplayer collaboration
    around shared goals. Wire together governance primitives on a shared canvas &mdash; thresholds,
    signoffs, tunable knobs, and amendable circuits. Decisions happen by <em>doing</em>,
    not debating.
  </p>
  <div class="rl-cta-row">
    <a href="https://demo.rspace.online/rgov" class="rl-cta-primary"
       style="background:linear-gradient(to right,#7c3aed,#1d4ed8);color:white">
      <span style="display:inline-flex;align-items:center;gap:0.5rem">
        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>
        Try the Demo
      </span>
    </a>
    <a href="/create-space" class="rl-cta-secondary">Create a Space</a>
  </div>
</div>

<!-- What is Modular Governance? -->
<section class="rl-section" style="border-top:none">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2rem">
      <span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">MODULAR GOVERNANCE</span>
      <h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        What are GovMods?
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:680px;margin:0.5rem auto 0">
        GovMods are <strong style="color:#818cf8">do-ocratic governance primitives</strong> &mdash;
        drag-and-drop circuit components where decisions happen through <strong style="color:#60a5fa">action</strong>,
        not deliberation. Contribute hours, pledge funds, sign off on requirements. When all gates
        in a circuit are satisfied, the decision is made. No meetings required.
      </p>
    </div>

    <div class="rl-grid-3">
      <!-- Binary Gates -->
      <div class="rl-card" style="border:2px solid rgba(124,58,237,0.35);background:linear-gradient(to bottom right,rgba(124,58,237,0.08),rgba(124,58,237,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#7c3aed;display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:0.9rem">&check;</span>
          </div>
          <h3 style="color:#a78bfa;font-size:1.05rem;margin-bottom:0">Signoff Gate</h3>
        </div>
        <p>
          The simplest GovMod. A binary yes/no checkpoint &mdash; assign someone to approve,
          or leave it open for anyone who steps up. Green glow when satisfied.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Do-ocracy: whoever shows up, decides.</strong>
        </p>
      </div>

      <!-- Thresholds -->
      <div class="rl-card" style="border:2px solid rgba(8,145,178,0.35);background:linear-gradient(to bottom right,rgba(8,145,178,0.08),rgba(8,145,178,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#0891b2;display:flex;align-items:center;justify-content:center">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"><rect x="3" y="12" width="4" height="9" rx="1"/><rect x="10" y="7" width="4" height="14" rx="1"/><rect x="17" y="3" width="4" height="18" rx="1"/></svg>
          </div>
          <h3 style="color:#22d3ee;font-size:1.05rem;margin-bottom:0">Threshold Gate</h3>
        </div>
        <p>
          Accumulate contributions toward a target: hours, dollars, signatures, materials.
          Progress bar fills as people contribute. Gate opens when the community has collectively
          <em>done enough</em>.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Decisions backed by real resources.</strong>
        </p>
      </div>

      <!-- Knobs -->
      <div class="rl-card" style="border:2px solid rgba(180,83,9,0.35);background:linear-gradient(to bottom right,rgba(180,83,9,0.08),rgba(180,83,9,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#b45309;display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-size:1rem">🎛️</span>
          </div>
          <h3 style="color:#f59e0b;font-size:1.05rem;margin-bottom:0">Tunable Knob</h3>
        </div>
        <p>
          Adjustable parameters that wire into other GovMods. Set a budget cap, quorum
          percentage, or time limit. Optional <strong style="color:#fbbf24">temporal viscosity</strong>:
          a cooldown that prevents rapid parameter flipping.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Governance that adapts, but deliberately.</strong>
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Do-ocracy in Action -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2.5rem">
      <span class="rl-tagline" style="color:#818cf8;background:rgba(129,140,248,0.1);border-color:rgba(129,140,248,0.2)">
        Do-ocracy in Action
      </span>
      <h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Design &rarr; Wire &rarr; Do
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:640px;margin:0 auto">
        Three steps from blank canvas to living governance. No proposals, no quorum calls &mdash;
        just wire up the conditions and let people act.
      </p>
    </div>

    <div class="rl-grid-3">
      <!-- Step 1 -->
      <div class="rl-card" style="border-color:rgba(124,58,237,0.2)">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:linear-gradient(to bottom right,#7c3aed,rgba(124,58,237,0.6));display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:1rem">1</span>
          </div>
          <div>
            <span class="rl-badge" style="background:rgba(124,58,237,0.1);color:#a78bfa;margin-bottom:0.25rem">Design</span>
            <h3 style="margin-bottom:0;font-size:1rem">Place GovMods</h3>
          </div>
        </div>
        <p>
          Drag governance components onto the canvas: signoff gates, resource thresholds,
          tunable knobs. Or tell MI: <strong style="color:#e2e8f0">"create a governance circuit
          for building a climbing wall"</strong> and watch the GovMods appear.
        </p>
      </div>

      <!-- Step 2 -->
      <div class="rl-card" style="border-color:rgba(29,78,216,0.25);background:linear-gradient(to bottom right,rgba(29,78,216,0.05),rgba(124,58,237,0.03))">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:linear-gradient(to bottom right,#1d4ed8,#7c3aed);display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:1rem">2</span>
          </div>
          <div>
            <span class="rl-badge" style="background:rgba(29,78,216,0.15);color:#60a5fa;margin-bottom:0.25rem">Wire</span>
            <h3 style="margin-bottom:0;font-size:1rem">Connect the Circuit</h3>
          </div>
        </div>
        <p>
          Draw arrows from GovMod outputs to a <strong style="color:#e2e8f0">Project aggregator</strong>.
          Wire a knob's value to a threshold's target for dynamic parameters.
          The circuit shows data flow and gate conditions in real time.
        </p>
      </div>

      <!-- Step 3 -->
      <div class="rl-card" style="border-color:rgba(34,197,94,0.2)">
        <div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1rem">
          <div style="width:2.5rem;height:2.5rem;border-radius:9999px;background:linear-gradient(to bottom right,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:1rem">3</span>
          </div>
          <div>
            <span class="rl-badge" style="background:rgba(34,197,94,0.1);color:#22c55e;margin-bottom:0.25rem">Do</span>
            <h3 style="margin-bottom:0;font-size:1rem">Contribute & Complete</h3>
          </div>
        </div>
        <p>
          Community members <em>do the work</em>: contribute resources, sign off, adjust parameters.
          The Project tracks <strong style="color:#22c55e">"X of Y gates satisfied"</strong>
          and auto-completes when all conditions are met through collective action.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Example: Climbing Wall -->
<section class="rl-section">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2.5rem">
      <h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Example: Build a Climbing Wall
      </h2>
      <p style="color:#94a3b8;max-width:640px;margin:0 auto">
        A community wants to build a climbing wall. Here's how GovMods make it happen
        through do-ocratic action:
      </p>
    </div>

    <!-- Simplified circuit diagram -->
    <div style="display:flex;justify-content:center;margin-bottom:2rem">
      <svg width="560" height="200" viewBox="0 0 560 200" style="max-width:100%">
        <!-- Binary gate -->
        <rect x="10" y="20" width="120" height="60" rx="8" fill="rgba(124,58,237,0.15)" stroke="#7c3aed" stroke-width="1.5"/>
        <text x="70" y="44" text-anchor="middle" fill="#a78bfa" font-size="10" font-weight="600">Proprietor</text>
        <text x="70" y="58" text-anchor="middle" fill="#a78bfa" font-size="10">Signoff</text>
        <circle cx="70" cy="72" r="4" fill="#7c3aed"/>

        <!-- Threshold 1: Labor -->
        <rect x="10" y="110" width="120" height="70" rx="8" fill="rgba(8,145,178,0.15)" stroke="#0891b2" stroke-width="1.5"/>
        <text x="70" y="134" text-anchor="middle" fill="#22d3ee" font-size="10" font-weight="600">Labor</text>
        <text x="70" y="148" text-anchor="middle" fill="#22d3ee" font-size="10">50 hours</text>
        <rect x="22" y="158" width="96" height="8" rx="4" fill="rgba(255,255,255,0.1)"/>
        <rect x="22" y="158" width="60" height="8" rx="4" fill="#0891b2"/>
        <text x="70" y="175" text-anchor="middle" fill="#94a3b8" font-size="8">30/50 hrs</text>

        <!-- Threshold 2: Capital -->
        <rect x="170" y="110" width="120" height="70" rx="8" fill="rgba(8,145,178,0.15)" stroke="#0891b2" stroke-width="1.5"/>
        <text x="230" y="134" text-anchor="middle" fill="#22d3ee" font-size="10" font-weight="600">Capital</text>
        <text x="230" y="148" text-anchor="middle" fill="#22d3ee" font-size="10">$3,000</text>
        <rect x="182" y="158" width="96" height="8" rx="4" fill="rgba(255,255,255,0.1)"/>
        <rect x="182" y="158" width="86" height="8" rx="4" fill="#22c55e"/>
        <text x="230" y="175" text-anchor="middle" fill="#94a3b8" font-size="8">$2,700/$3,000</text>

        <!-- Arrows to project -->
        <line x1="130" y1="50" x2="400" y2="80" stroke="#7c3aed" stroke-width="1.5" stroke-dasharray="4 3" opacity="0.6"/>
        <line x1="130" y1="145" x2="400" y2="100" stroke="#0891b2" stroke-width="1.5" opacity="0.8"/>
        <line x1="290" y1="145" x2="400" y2="110" stroke="#22c55e" stroke-width="1.5"/>

        <!-- Project aggregator -->
        <rect x="400" y="50" width="150" height="100" rx="10" fill="rgba(29,78,216,0.15)" stroke="#1d4ed8" stroke-width="2"/>
        <text x="475" y="74" text-anchor="middle" fill="#60a5fa" font-size="11" font-weight="700">Build Climbing Wall</text>
        <text x="475" y="92" text-anchor="middle" fill="#94a3b8" font-size="10">1 of 3 gates satisfied</text>
        <rect x="420" y="102" width="110" height="6" rx="3" fill="rgba(255,255,255,0.1)"/>
        <rect x="420" y="102" width="37" height="6" rx="3" fill="#1d4ed8"/>
        <text x="475" y="122" text-anchor="middle" fill="#60a5fa" font-size="9">33%</text>

        <!-- Knob wired to threshold -->
        <rect x="170" y="20" width="100" height="60" rx="8" fill="rgba(180,83,9,0.15)" stroke="#b45309" stroke-width="1.5"/>
        <text x="220" y="44" text-anchor="middle" fill="#f59e0b" font-size="10" font-weight="600">Budget Cap</text>
        <text x="220" y="58" text-anchor="middle" fill="#f59e0b" font-size="10">$3,000</text>
        <line x1="220" y1="80" x2="230" y2="110" stroke="#b45309" stroke-width="1" stroke-dasharray="3 2" opacity="0.5"/>
      </svg>
    </div>

    <div class="rl-grid-2" style="max-width:900px;margin:0 auto">
      <div class="rl-card" style="border-color:rgba(124,58,237,0.15)">
        <h3 style="margin-bottom:0.35rem;color:#e2e8f0">The GovMod Circuit</h3>
        <ul style="list-style:disc;padding-left:1.25rem;margin:0;font-size:0.85rem;color:#94a3b8;line-height:1.8">
          <li><strong style="color:#a78bfa">Signoff:</strong> Proprietor approval</li>
          <li><strong style="color:#22d3ee">Threshold:</strong> 50 hours labor (people pledge hours)</li>
          <li><strong style="color:#22d3ee">Threshold:</strong> $3,000 capital (people contribute funds)</li>
          <li><strong style="color:#f59e0b">Knob:</strong> Budget Cap &rarr; wires to capital target</li>
          <li><strong style="color:#60a5fa">Project:</strong> aggregates all gates, tracks completion</li>
        </ul>
      </div>
      <div class="rl-card" style="border-color:rgba(190,24,93,0.15)">
        <h3 style="margin-bottom:0.35rem;color:#e2e8f0">The Amendment</h3>
        <p style="font-size:0.85rem;color:#94a3b8;line-height:1.8">
          Someone offers to donate climbing grips. They create an <strong style="color:#f472b6">amendment GovMod</strong>
          proposing to replace the $3,000 threshold with a simple signoff
          ("Grips donated?"). The community votes on the amendment, and on approval the circuit
          rewires automatically &mdash; all arrows stay connected. The governance system evolved
          <em>because someone did something</em>.
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Advanced GovMods -->
<section class="rl-section">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2rem">
      <span class="rl-badge" style="background:#1e293b;color:#94a3b8;font-size:0.7rem;padding:0.25rem 0.75rem">ADVANCED GOVMODS</span>
      <h2 class="rl-heading" style="margin-top:0.75rem;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Delegated Democracy &amp; Flow Visualization
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:680px;margin:0.5rem auto 0">
        Beyond simple gates: weight transformation for fair voting, time-weighted conviction,
        multi-party approval, and real-time governance flow visualization.
      </p>
    </div>

    <div class="rl-grid-2" style="max-width:900px;margin:0 auto">
      <!-- Quadratic Transform -->
      <div class="rl-card" style="border:2px solid rgba(20,184,166,0.35);background:linear-gradient(to bottom right,rgba(20,184,166,0.08),rgba(20,184,166,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#14b8a6;display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-weight:700;font-size:0.9rem">&radic;</span>
          </div>
          <h3 style="color:#2dd4bf;font-size:1.05rem;margin-bottom:0">Quadratic Transform</h3>
        </div>
        <p>
          Inline weight dampening. Raw votes pass through sqrt, log, or linear transforms &mdash;
          reducing whale dominance while preserving signal. Bar chart shows raw vs effective.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Fair voting by default.</strong>
        </p>
      </div>

      <!-- Conviction Accumulator -->
      <div class="rl-card" style="border:2px solid rgba(217,119,6,0.35);background:linear-gradient(to bottom right,rgba(217,119,6,0.08),rgba(217,119,6,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#d97706;display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-size:1rem">&#x23F3;</span>
          </div>
          <h3 style="color:#fbbf24;font-size:1.05rem;margin-bottom:0">Conviction Accumulator</h3>
        </div>
        <p>
          Time-weighted conviction scoring. Stakes accumulate conviction over hours &mdash; longer
          commitment means stronger signal. Gate mode triggers at threshold; tuner mode streams live score.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Decisions that reward patience.</strong>
        </p>
      </div>

      <!-- Multisig Gate -->
      <div class="rl-card" style="border:2px solid rgba(99,102,241,0.35);background:linear-gradient(to bottom right,rgba(99,102,241,0.08),rgba(99,102,241,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#6366f1;display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-size:1rem">&#x1F510;</span>
          </div>
          <h3 style="color:#818cf8;font-size:1.05rem;margin-bottom:0">Multisig Gate</h3>
        </div>
        <p>
          M-of-N approval multiplexor. Name your signers, require 3 of 5 (or any ratio).
          Multiplexor SVG shows inbound approval lines converging through a gate symbol.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Council-grade approval on the canvas.</strong>
        </p>
      </div>

      <!-- Sankey Visualizer -->
      <div class="rl-card" style="border:2px solid rgba(124,58,237,0.35);background:linear-gradient(to bottom right,rgba(124,58,237,0.08),rgba(124,58,237,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.75rem">
          <div style="width:2rem;height:2rem;border-radius:9999px;background:#7c3aed;display:flex;align-items:center;justify-content:center">
            <span style="color:white;font-size:1rem">&#x1F4CA;</span>
          </div>
          <h3 style="color:#a78bfa;font-size:1.05rem;margin-bottom:0">Sankey Visualizer</h3>
        </div>
        <p>
          Drop a Sankey shape near your circuit and it auto-discovers all connected gov shapes.
          Animated Bezier flow curves, color-coded nodes, and tooltips. See your governance at a glance.
          <strong style="display:block;margin-top:0.5rem;color:#e2e8f0">Governance you can see flowing.</strong>
        </p>
      </div>
    </div>
  </div>
</section>

<!-- Why Modular Governance -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2.5rem">
      <h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Why Modular Governance?
      </h2>
      <p style="color:#94a3b8;max-width:640px;margin:0 auto">
        Traditional governance is monolithic: one system fits all. GovMods let each
        community wire exactly the decision process they need.
      </p>
    </div>

    <div class="rl-grid-2" style="max-width:900px;margin:0 auto">
      <!-- The Problem -->
      <div class="rl-card" style="border:2px solid rgba(239,68,68,0.2);background:rgba(239,68,68,0.04)">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
          <h3 style="color:#f87171;margin-bottom:0;font-size:1.05rem">Monolithic Governance</h3>
        </div>
        <ul style="list-style:disc;padding-left:1.25rem;margin:0">
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">One-size-fits-all voting &mdash; everything needs a meeting</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Decisions bottleneck on the few people who attend</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Resource requirements invisible until someone asks</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Governance structure is fixed &mdash; can't adapt to the situation</li>
        </ul>
      </div>

      <!-- The Solution -->
      <div class="rl-card" style="border:2px solid rgba(124,58,237,0.25);background:linear-gradient(to bottom right,rgba(124,58,237,0.05),rgba(29,78,216,0.03))">
        <div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:1rem">
          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
          <h3 style="color:#a78bfa;margin-bottom:0;font-size:1.05rem">GovMod Circuits</h3>
        </div>
        <ul style="list-style:disc;padding-left:1.25rem;margin:0">
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Each decision gets exactly the governance it needs</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Do-ocratic: contribute resources, don't just vote on them</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Progress visible to everyone on a shared canvas</li>
          <li style="font-size:0.85rem;color:#94a3b8;line-height:1.8">Amendments let governance evolve mid-process</li>
        </ul>
      </div>
    </div>
  </div>
</section>

<!-- Feature Grid -->
<section class="rl-section">
  <div class="rl-container">
    <div style="text-align:center;margin-bottom:2rem">
      <h2 class="rl-heading" style="background:linear-gradient(135deg,#e2e8f0,#cbd5e1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">
        Built for Do-ocratic Communities
      </h2>
    </div>

    <div class="rl-grid-4">
      <div class="rl-card rl-card--center" style="border-color:rgba(124,58,237,0.15)">
        <div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#7c3aed,#6d28d9);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
          <span style="font-size:1.25rem">🔌</span>
        </div>
        <h3>Modular</h3>
        <p>Mix and match GovMods to model any decision. Compose simple primitives into complex governance.</p>
      </div>

      <div class="rl-card rl-card--center" style="border-color:rgba(29,78,216,0.15)">
        <div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#1d4ed8,#1e40af);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
          <span style="font-size:1.25rem">👥</span>
        </div>
        <h3>Multiplayer</h3>
        <p>Real-time CRDT sync. Multiple people contribute, sign off, and adjust knobs simultaneously.</p>
      </div>

      <div class="rl-card rl-card--center" style="border-color:rgba(180,83,9,0.15)">
        <div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#b45309,#92400e);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
          <span style="font-size:1.25rem">🎛️</span>
        </div>
        <h3>Temporal Viscosity</h3>
        <p>Knob cooldowns prevent rapid parameter gaming. Change happens deliberately, not reactively.</p>
      </div>

      <div class="rl-card rl-card--center" style="border-color:rgba(190,24,93,0.15)">
        <div style="width:3rem;height:3rem;border-radius:9999px;background:linear-gradient(to bottom right,#be185d,#9d174d);display:flex;align-items:center;justify-content:center;margin:0 auto 0.75rem">
          <span style="font-size:1.25rem">📝</span>
        </div>
        <h3>Amendable</h3>
        <p>Governance that evolves. Propose circuit changes, vote inline, and the wiring adapts in place.</p>
      </div>
    </div>
  </div>
</section>

<!-- CTA -->
<section class="rl-section rl-section--alt">
  <div class="rl-container">
    <div class="rl-card" style="border:2px solid rgba(124,58,237,0.25);background:linear-gradient(to bottom right,rgba(124,58,237,0.08),rgba(29,78,216,0.04));text-align:center;padding:3rem 2rem;position:relative;overflow:hidden">
      <span class="rl-badge" style="background:rgba(124,58,237,0.1);color:#a78bfa;font-size:0.7rem;padding:0.25rem 0.75rem">
        Join the rSpace Ecosystem
      </span>
      <h2 style="font-size:1.75rem;font-weight:700;color:#e2e8f0;margin:1rem 0">
        Ready to wire your community's governance?
      </h2>
      <p style="font-size:1.05rem;color:#94a3b8;max-width:560px;margin:0 auto 2rem;line-height:1.6">
        Create a Space and start building GovMod circuits. Drag gates onto the canvas,
        wire them together, and let your community decide through action &mdash;
        visually, collaboratively, and do-ocratically.
      </p>
      <div class="rl-cta-row" style="margin-top:0">
        <a href="/create-space" class="rl-cta-primary"
           style="background:linear-gradient(to right,#7c3aed,#1d4ed8);color:white">
          <span style="display:inline-flex;align-items:center;gap:0.5rem">
            Create a Space
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
          </span>
        </a>
        <a href="https://demo.rspace.online/rgov" class="rl-cta-secondary">
          <span style="display:inline-flex;align-items:center;gap:0.5rem">
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5,3 19,12 5,21"/></svg>
            Interactive Demo
          </span>
        </a>
      </div>
    </div>
  </div>
</section>

<div class="rl-back">
  <a href="/">&larr; Back to rSpace</a>
</div>`;
}
