2026-02-02 10:40:28 +00:00
---
export const prerender = false;
import PublicLayout from '../layouts/PublicLayout.astro';
---
<PublicLayout title="Modular Governance Engine">
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<h1>Governance infrastructure for distributed organizations</h1>
<p class="hero-subtitle">
Likwid is a modular governance engine designed for communities that need
structured decision-making, transparent moderation, and flexible delegation systems.
</p>
<p class="hero-clarification">
Not a social network. Not a simple polling tool.
A complete governance layer for complex, distributed organizations.
</p>
<div class="hero-actions">
<a href="/demo" class="ui-btn ui-btn-primary ui-btn-lg">Explore the Demo</a>
<a href="/about" class="ui-btn ui-btn-secondary ui-btn-lg">Learn More</a>
</div>
</div>
</section>
<!-- What Is Likwid Section -->
<section class="section-what">
<div class="section-container">
<h2>What is Likwid?</h2>
<div class="what-grid">
<a href="/features" class="what-card what-card-link ui-card ui-card-pad-lg ui-card-interactive">
<div class="what-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2L2 7l10 5 10-5-10-5z"/>
<path d="M2 17l10 5 10-5"/>
<path d="M2 12l10 5 10-5"/>
</svg>
</div>
<h3>Modular Architecture</h3>
<p>Every component is a plugin. Voting methods, delegation systems, integrations, and workflows can be added, removed, or customized per community.</p>
</a>
<a href="/about" class="what-card what-card-link ui-card ui-card-pad-lg ui-card-interactive">
<div class="what-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"/>
<path d="M12 6v6l4 2"/>
</svg>
</div>
<h3>Process-Oriented</h3>
<p>Governance is a process, not a feature. Likwid structures deliberation, voting, and implementation as distinct phases with clear transitions.</p>
</a>
<a href="/features" class="what-card what-card-link ui-card ui-card-pad-lg ui-card-interactive">
<div class="what-icon">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
<path d="M14 2v6h6"/>
<path d="M16 13H8"/>
<path d="M16 17H8"/>
<path d="M10 9H8"/>
</svg>
</div>
<h3>Auditable by Design</h3>
<p>All moderation actions are logged publicly. No shadow banning. No hidden decisions. Every action has a reason, and every reason is visible.</p>
</a>
</div>
</div>
</section>
<!-- Who Is It For Section -->
<section class="section-audience">
<div class="section-container">
<h2>Built for organizations that take governance seriously</h2>
<div class="audience-grid">
<div class="audience-item">
<h4>Open Source Projects</h4>
<p>Maintainers, contributors, and communities making technical and organizational decisions together.</p>
</div>
<div class="audience-item">
<h4>Associations & NGOs</h4>
<p>Member-driven organizations requiring transparent voting, delegation, and accountability.</p>
</div>
<div class="audience-item">
<h4>Political Movements</h4>
<p>Parties, civic lists, and grassroots movements needing structured collective decision-making.</p>
</div>
<div class="audience-item">
<h4>Federated Networks</h4>
<p>Distributed organizations coordinating across chapters, regions, or working groups.</p>
</div>
</div>
</div>
</section>
<!-- Core Capabilities Section -->
<section class="section-capabilities">
<div class="section-container">
<h2>Core Capabilities</h2>
<div class="capabilities-grid">
<div class="capability ui-card ui-card-pad-lg">
<h4>Advanced Voting Methods</h4>
<p>Schulze, STAR, Quadratic, Ranked Choice, and Approval voting. Each method is a plugin that can be enabled per community.</p>
</div>
<div class="capability ui-card ui-card-pad-lg">
<h4>Liquid Delegation</h4>
<p>Global and community-scoped delegation that is always revocable. Delegate your voice to trusted members while retaining control.</p>
</div>
<div class="capability ui-card ui-card-pad-lg">
<h4>Structured Deliberation</h4>
<p>Inform → Discuss → Decide workflow. Ensures members understand proposals before voting begins.</p>
</div>
<div class="capability ui-card ui-card-pad-lg">
<h4>Transparent Moderation</h4>
<p>Every moderation action is logged with reasons. Cryptographic audit trail ensures accountability.</p>
</div>
<div class="capability ui-card ui-card-pad-lg">
2026-02-02 11:26:05 +00:00
<h4>Permissioned Results</h4>
<p>Configure who can view voting results details while keeping participation accessible.</p>
2026-02-02 10:40:28 +00:00
</div>
<div class="capability ui-card ui-card-pad-lg">
<h4>Federation Ready</h4>
<p>Connect communities across instances. Share decisions while maintaining autonomy.</p>
</div>
</div>
</div>
</section>
<!-- How It Works Section -->
<section class="section-how">
<div class="section-container">
2026-02-02 11:02:21 +00:00
<h2>Modular governance, explained</h2>
<p class="section-intro">
2026-02-02 11:26:05 +00:00
Likwid is built from composable governance modules. Communities assemble what they need: voting methods, delegation rules, deliberation structure, moderation policy, federation, and more.
2026-02-02 11:02:21 +00:00
</p>
2026-02-02 11:26:05 +00:00
<div class="modularity-notes">
<div class="modularity-note ui-card ui-card-pad-lg">
<h4>Governance plugins</h4>
<p>
Governance is not a single flowchart. In Likwid, the core platform provides identities, communities, proposals, and data integrity.
Plugins define how decisions move, how moderation is logged, what voting method is used, and what integrations run.
</p>
</div>
<div class="modularity-note ui-card ui-card-pad-lg">
<h4>Per-community configuration</h4>
<p>
One community can enable liquid delegation and Schulze voting, another can use quadratic voting with a stricter deliberation lifecycle.
The platform stays consistent; behavior is configured by enabled modules.
</p>
</div>
</div>
2026-02-02 11:02:21 +00:00
<div class="diagram-grid">
<div class="diagram-card ui-card ui-card-pad-lg">
<div class="diagram-header">
<h4>Liquid delegation</h4>
2026-02-02 11:26:05 +00:00
<p>Delegate through a trust network. Vote directly anytime to override your delegation.</p>
2026-02-02 11:02:21 +00:00
</div>
<svg class="diagram" viewBox="0 0 560 220" role="img" aria-label="Liquid delegation diagram">
<defs>
<marker id="arrow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border-hover)" />
</marker>
<marker id="arrow-muted" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border)" />
</marker>
</defs>
<rect x="24" y="24" width="512" height="172" rx="18" fill="rgba(255,255,255,0.02)" stroke="var(--color-border)" />
<circle cx="140" cy="86" r="34" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<circle cx="280" cy="86" r="34" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<circle cx="420" cy="86" r="34" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<text x="140" y="92" text-anchor="middle" font-size="13" fill="var(--color-text)">Alice</text>
<text x="280" y="92" text-anchor="middle" font-size="13" fill="var(--color-text)">Bob</text>
<text x="420" y="92" text-anchor="middle" font-size="13" fill="var(--color-text)">Carol</text>
<path d="M 175 86 L 245 86" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow)" />
<path d="M 315 86 L 385 86" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow)" />
<text x="210" y="72" text-anchor="middle" font-size="11" fill="var(--color-text-muted)">delegates</text>
<text x="350" y="72" text-anchor="middle" font-size="11" fill="var(--color-text-muted)">delegates</text>
<rect x="190" y="138" width="180" height="44" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="280" y="165" text-anchor="middle" font-size="12" fill="var(--color-text)">Direct vote (override)</text>
<path d="M 140 120 C 160 140, 180 148, 190 152" stroke="var(--color-border)" stroke-width="2" stroke-dasharray="4 4" marker-end="url(#arrow-muted)" fill="none" />
</svg>
<div class="diagram-footer">
Delegations can be scoped (global or per community) and revoked instantly.
</div>
2026-02-02 10:40:28 +00:00
</div>
2026-02-02 11:02:21 +00:00
<div class="diagram-card ui-card ui-card-pad-lg">
<div class="diagram-header">
<h4>Plugin-based governance</h4>
<p>Core platform + modules. Enable what you need per community.</p>
</div>
<svg class="diagram" viewBox="0 0 560 220" role="img" aria-label="Plugin system diagram">
<defs>
<marker id="arrow2" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border-hover)" />
</marker>
</defs>
<rect x="24" y="24" width="512" height="172" rx="18" fill="rgba(255,255,255,0.02)" stroke="var(--color-border)" />
<rect x="210" y="78" width="140" height="64" rx="14" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<text x="280" y="106" text-anchor="middle" font-size="12" fill="var(--color-text)">Core platform</text>
<text x="280" y="126" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">users • proposals • data</text>
2026-02-02 11:26:05 +00:00
<rect x="70" y="44" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="130" y="67" text-anchor="middle" font-size="11" fill="var(--color-text)">Voting</text>
<rect x="70" y="86" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="130" y="109" text-anchor="middle" font-size="11" fill="var(--color-text)">Deliberation</text>
2026-02-02 11:02:21 +00:00
<rect x="70" y="128" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="130" y="151" text-anchor="middle" font-size="11" fill="var(--color-text)">Delegation</text>
2026-02-02 11:26:05 +00:00
<rect x="370" y="44" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="430" y="67" text-anchor="middle" font-size="11" fill="var(--color-text)">Moderation</text>
<rect x="370" y="86" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="430" y="109" text-anchor="middle" font-size="11" fill="var(--color-text)">Workflows</text>
2026-02-02 11:02:21 +00:00
<rect x="370" y="128" width="120" height="36" rx="12" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
2026-02-02 11:26:05 +00:00
<text x="430" y="151" text-anchor="middle" font-size="11" fill="var(--color-text)">Federation</text>
2026-02-02 11:02:21 +00:00
2026-02-02 11:26:05 +00:00
<path d="M 190 62 L 210 92" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
<path d="M 190 104 L 210 104" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
2026-02-02 11:02:21 +00:00
<path d="M 190 146 L 210 128" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
2026-02-02 11:26:05 +00:00
<path d="M 370 62 L 350 92" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
<path d="M 370 104 L 350 104" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
2026-02-02 11:02:21 +00:00
<path d="M 370 128 L 350 128" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow2)" fill="none" />
<text x="280" y="186" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">Per-community configuration decides what is enabled.</text>
</svg>
<div class="diagram-footer">
2026-02-02 11:26:05 +00:00
Built-in modules cover deliberation, workflows, moderation, exports, analytics, and federation.
<a href="#plugin-catalog" class="diagram-link">Browse the catalog ↓</a>
</div>
</div>
<div class="diagram-card ui-card ui-card-pad-lg">
<div class="diagram-header">
<h4>Voting systems as plugins</h4>
<p>Select the tally that matches the decision. The method is a module—swap it without changing the rest of the platform.</p>
</div>
<svg class="diagram" viewBox="0 0 560 220" role="img" aria-label="Voting plugins diagram">
<defs>
<marker id="arrow3" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" fill="var(--color-border-hover)" />
</marker>
</defs>
<rect x="24" y="24" width="512" height="172" rx="18" fill="rgba(255,255,255,0.02)" stroke="var(--color-border)" />
<rect x="56" y="78" width="144" height="64" rx="14" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<text x="128" y="106" text-anchor="middle" font-size="12" fill="var(--color-text)">Proposal</text>
<text x="128" y="126" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">options • deadline</text>
<rect x="220" y="62" width="120" height="96" rx="14" fill="var(--color-bg-alt)" stroke="var(--color-border)" />
<text x="280" y="92" text-anchor="middle" font-size="11" fill="var(--color-text)">Voting plugin</text>
<text x="280" y="112" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">tally method</text>
<text x="280" y="136" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">validation</text>
<rect x="360" y="78" width="144" height="64" rx="14" fill="var(--color-surface)" stroke="var(--color-border-hover)" />
<text x="432" y="106" text-anchor="middle" font-size="12" fill="var(--color-text)">Results</text>
<text x="432" y="126" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">winner • breakdown</text>
<path d="M 200 110 L 220 110" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow3)" fill="none" />
<path d="M 340 110 L 360 110" stroke="var(--color-border-hover)" stroke-width="2" marker-end="url(#arrow3)" fill="none" />
<rect x="56" y="44" width="144" height="26" rx="10" fill="rgba(255,255,255,0.02)" stroke="var(--color-border)" />
<text x="128" y="62" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">delegation resolved before tally</text>
<text x="280" y="186" text-anchor="middle" font-size="10" fill="var(--color-text-muted)">Methods: Approval • Ranked Choice • Schulze • STAR • Quadratic</text>
</svg>
<div class="diagram-footer">
Voting methods are pluggable: choose the right method for elections, prioritization, budgets, or multi-option decisions.
2026-02-02 11:02:21 +00:00
</div>
2026-02-02 10:40:28 +00:00
</div>
</div>
2026-02-02 11:26:05 +00:00
<div class="modularity-panels">
<section class="modularity-panel ui-card ui-card-pad-lg" id="plugin-catalog">
<h3>Built-in governance plugin catalog</h3>
<p class="panel-intro">
These modules ship with Likwid. Some are core/global, others can be enabled per community.
</p>
<div class="plugin-grid">
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">proposal_lifecycle</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-recommended">Core</span>
<span class="ui-pill ui-pill-core">Global</span>
</div>
</div>
<p>Proposal lifecycle with versioning, diffs, and forks</p>
</div>
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">decision_workflows</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-recommended">Core</span>
<span class="ui-pill ui-pill-core">Global</span>
</div>
</div>
<p>Composable decision-making workflows with configurable phases</p>
</div>
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">moderation_ledger</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-recommended">Core</span>
<span class="ui-pill ui-pill-core">Global</span>
</div>
</div>
<p>Immutable, cryptographically-chained log of all moderation decisions</p>
</div>
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">structured_deliberation</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-core">Community</span>
<span class="ui-pill ui-pill-core">Default</span>
</div>
</div>
<p>Pro/con arguments and collaborative summaries</p>
</div>
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">self_moderation_rules</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-core">Community</span>
<span class="ui-pill ui-pill-core">Default</span>
</div>
</div>
<p>Community-configurable moderation rules with escalation</p>
</div>
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">conflict_resolution</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-core">Community</span>
<span class="ui-pill ui-pill-core">Default</span>
</div>
</div>
<p>Structured conflict resolution with mediation</p>
</div>
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">comment_notifications</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-core">Community</span>
<span class="ui-pill ui-pill-core">Default</span>
</div>
</div>
<p>Sends proposal authors a notification when someone comments</p>
</div>
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">public_data_export</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-core">Community</span>
<span class="ui-pill ui-pill-core">Default</span>
</div>
</div>
<p>Privacy-aware CSV/JSON data exports</p>
</div>
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">governance_analytics</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-core">Community</span>
<span class="ui-pill ui-pill-core">Default</span>
</div>
</div>
<p>Aggregate governance analytics and health metrics</p>
</div>
<div class="plugin-item">
<div class="plugin-head">
<code class="plugin-code">federation</code>
<div class="plugin-badges">
<span class="ui-pill ui-pill-core">Global</span>
<span class="ui-pill ui-pill-core">Optional</span>
</div>
</div>
<p>Multi-community federation and cross-instance collaboration</p>
</div>
</div>
<div class="panel-footer">
<a href="/features" class="diagram-link">Full feature breakdown →</a>
</div>
</section>
<section class="modularity-panel ui-card ui-card-pad-lg" id="voting-methods">
<h3>Voting methods at a glance</h3>
<p class="panel-intro">Voting is a plugin: choose the tally that fits the decision.</p>
<div class="methods-grid">
<div class="method-mini">
<h4>Schulze</h4>
<p>Consensus-seeking elections with many candidates (Condorcet).</p>
</div>
<div class="method-mini">
<h4>STAR</h4>
<p>Score + runoff: captures intensity and broad support.</p>
</div>
<div class="method-mini">
<h4>Quadratic</h4>
<p>Prioritization and budgeting: reveals preference intensity.</p>
</div>
<div class="method-mini">
<h4>Ranked choice</h4>
<p>Simple single-winner elections with transfers.</p>
</div>
<div class="method-mini">
<h4>Approval</h4>
<p>Fast, robust decisions: choose all acceptable options.</p>
</div>
</div>
<div class="panel-footer">
<a href="/features#voting" class="diagram-link">Learn how each method works →</a>
</div>
</section>
<section class="modularity-panel ui-card ui-card-pad-lg" id="module-bundles">
<h3>Example module bundles</h3>
<p class="panel-intro">Different organizations enable different governance “stacks”.</p>
<div class="bundle-grid">
<div class="bundle-item">
<h4>Open source project</h4>
<div class="bundle-pills">
<span class="ui-pill ui-pill-core">structured_deliberation</span>
<span class="ui-pill ui-pill-core">comment_notifications</span>
<span class="ui-pill ui-pill-core">conflict_resolution</span>
<span class="ui-pill ui-pill-core">schulze</span>
</div>
<p>Strong deliberation + consensus elections for maintainers and roadmap decisions.</p>
</div>
<div class="bundle-item">
<h4>Member association / NGO</h4>
<div class="bundle-pills">
<span class="ui-pill ui-pill-core">decision_workflows</span>
<span class="ui-pill ui-pill-core">public_data_export</span>
<span class="ui-pill ui-pill-core">approval</span>
<span class="ui-pill ui-pill-core">ranked_choice</span>
</div>
<p>Clear phases, exports for record-keeping, and simple member-friendly voting.</p>
</div>
<div class="bundle-item">
<h4>Federated network</h4>
<div class="bundle-pills">
<span class="ui-pill ui-pill-core">federation</span>
<span class="ui-pill ui-pill-core">governance_analytics</span>
<span class="ui-pill ui-pill-core">moderation_ledger</span>
<span class="ui-pill ui-pill-core">quadratic</span>
</div>
<p>Cross-community coordination, visibility into governance health, and prioritization across chapters.</p>
</div>
</div>
</section>
</div>
2026-02-02 10:40:28 +00:00
</div>
</section>
<!-- Technical Foundation Section -->
<section class="section-technical">
<div class="section-container">
<h2>Technical Foundation</h2>
<p class="section-intro">Likwid is free and open source software, built with modern, auditable technology.</p>
<div class="tech-grid">
<div class="tech-item ui-card ui-card-pad-lg">
<strong>Backend</strong>
<span>Rust (Axum)</span>
</div>
<div class="tech-item ui-card ui-card-pad-lg">
<strong>Frontend</strong>
<span>Astro + TypeScript</span>
</div>
<div class="tech-item ui-card ui-card-pad-lg">
<strong>Database</strong>
<span>PostgreSQL</span>
</div>
<div class="tech-item ui-card ui-card-pad-lg">
<strong>License</strong>
<span>EUPL-1.2</span>
</div>
</div>
<p class="tech-note">
Self-hostable. No vendor lock-in. Your governance data stays under your control.
</p>
</div>
</section>
<!-- Call to Action Section -->
<section class="section-cta">
<div class="section-container">
<h2>Experience Governance in Action</h2>
<p>The best way to understand Likwid is to see it working. Explore our demo instance with pre-populated communities, ongoing decisions, and real governance history.</p>
<div class="cta-buttons">
<a href="/demo" class="ui-btn ui-btn-primary ui-btn-xl">Explore the Demo</a>
<a href="/manifesto" class="ui-btn ui-btn-secondary ui-btn-xl">Read the Manifesto</a>
</div>
</div>
</section>
</PublicLayout>
<style>
.hero {
text-align: center;
padding: 5rem 2rem 4rem;
max-width: 880px;
margin: 0 auto;
}
h1 {
font-size: clamp(2.25rem, 4.5vw, 3.25rem);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.025em;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, var(--color-text) 0%, var(--color-text-muted) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 1.125rem;
color: var(--color-text-muted);
line-height: 1.7;
max-width: 640px;
margin: 0 auto 1rem;
}
.hero-clarification {
font-size: 0.9375rem;
color: var(--color-text-muted);
opacity: 0.8;
margin-bottom: 2.5rem;
}
.hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Section Styling */
section {
padding: 4rem 2rem;
}
.section-container {
max-width: 1100px;
margin: 0 auto;
}
section h2 {
font-size: 2rem;
font-weight: 600;
text-align: center;
margin-bottom: 3rem;
}
.section-intro {
text-align: center;
color: var(--color-text-muted);
max-width: 600px;
margin: -1.5rem auto 2.5rem;
}
/* What Is Likwid Section */
.section-what {
background: var(--color-bg-alt);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.what-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 768px) {
.what-grid {
grid-template-columns: 1fr;
}
}
.what-icon {
width: 56px;
height: 56px;
background: var(--color-primary-muted);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
color: var(--color-primary);
transition: transform var(--motion-normal) var(--easing-standard);
}
.what-card-link {
display: block;
color: inherit;
}
.what-card-link:hover,
.what-card-link:focus-visible {
color: inherit;
}
.what-card-link:hover .what-icon,
.what-card-link:focus-visible .what-icon {
transform: translateY(-2px);
}
.what-card h3 {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.what-card p {
color: var(--color-text-muted);
line-height: 1.6;
}
/* Audience Section */
.audience-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
@media (max-width: 640px) {
.audience-grid {
grid-template-columns: 1fr;
}
}
.audience-item {
padding: 1.5rem;
border-left: 3px solid var(--color-primary);
background: var(--color-surface);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.audience-item h4 {
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
.audience-item p {
color: var(--color-text-muted);
font-size: 0.9375rem;
}
/* Capabilities Section */
.section-capabilities {
background: var(--color-bg-alt);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.capabilities-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
@media (max-width: 900px) {
.capabilities-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.capabilities-grid {
grid-template-columns: 1fr;
}
}
.capability h4 {
font-size: 1rem;
margin-bottom: 0.5rem;
color: var(--color-primary);
}
.capability p {
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.5;
}
/* Process Flow Section */
2026-02-02 11:26:05 +00:00
.modularity-notes {
2026-02-02 11:02:21 +00:00
display: grid;
grid-template-columns: repeat(2, 1fr);
2026-02-02 11:26:05 +00:00
gap: 1.5rem;
margin: 2rem 0;
}
@media (max-width: 900px) {
.modularity-notes {
grid-template-columns: 1fr;
}
}
.modularity-note h4 {
margin: 0 0 0.5rem;
font-size: 1.125rem;
}
.modularity-note p {
margin: 0;
color: var(--color-text-muted);
line-height: 1.6;
}
2026-02-02 12:02:29 +00:00
.section-how .section-container {
max-width: 1240px;
}
2026-02-02 11:26:05 +00:00
.diagram-grid {
display: grid;
2026-02-02 12:02:29 +00:00
grid-template-columns: 1fr;
gap: 1.5rem;
2026-02-02 10:40:28 +00:00
}
2026-02-02 11:02:21 +00:00
@media (max-width: 900px) {
.diagram-grid {
2026-02-02 11:26:05 +00:00
gap: 1.5rem;
2026-02-02 11:02:21 +00:00
}
2026-02-02 10:40:28 +00:00
}
2026-02-02 12:02:29 +00:00
.diagram-card {
display: grid;
grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr);
grid-template-areas:
"head diagram"
"foot diagram";
column-gap: 2rem;
row-gap: 0.75rem;
align-items: start;
}
@media (max-width: 900px) {
.diagram-card {
grid-template-columns: 1fr;
grid-template-areas:
"head"
"diagram"
"foot";
column-gap: 0;
row-gap: 0;
}
}
2026-02-02 11:02:21 +00:00
.diagram-header h4 {
2026-02-02 10:40:28 +00:00
font-size: 1.125rem;
2026-02-02 11:02:21 +00:00
margin: 0 0 0.5rem;
2026-02-02 10:40:28 +00:00
}
2026-02-02 11:02:21 +00:00
.diagram-header p {
margin: 0;
2026-02-02 10:40:28 +00:00
color: var(--color-text-muted);
2026-02-02 11:02:21 +00:00
font-size: 0.9375rem;
2026-02-02 10:40:28 +00:00
line-height: 1.5;
}
2026-02-02 12:02:29 +00:00
.diagram-header {
grid-area: head;
}
2026-02-02 11:02:21 +00:00
.diagram {
2026-02-02 12:02:29 +00:00
grid-area: diagram;
2026-02-02 11:02:21 +00:00
width: 100%;
height: auto;
2026-02-02 12:02:29 +00:00
margin-top: 0;
min-width: 0;
2026-02-02 11:02:21 +00:00
}
.diagram-footer {
2026-02-02 12:02:29 +00:00
grid-area: foot;
2026-02-02 11:02:21 +00:00
margin-top: 1.25rem;
2026-02-02 10:40:28 +00:00
color: var(--color-text-muted);
2026-02-02 11:02:21 +00:00
font-size: 0.875rem;
line-height: 1.5;
2026-02-02 10:40:28 +00:00
}
2026-02-02 12:02:29 +00:00
@media (min-width: 901px) {
.diagram-footer {
margin-top: 0.25rem;
}
}
2026-02-02 11:02:21 +00:00
.diagram-link {
font-weight: 500;
2026-02-02 10:40:28 +00:00
}
2026-02-02 11:26:05 +00:00
.modularity-panels {
display: grid;
gap: 1.5rem;
margin-top: 2rem;
}
.modularity-panel h3 {
margin: 0 0 0.75rem;
font-size: 1.25rem;
}
.panel-intro {
margin: 0 0 1.25rem;
color: var(--color-text-muted);
line-height: 1.6;
}
.panel-footer {
margin-top: 1.25rem;
}
.plugin-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
@media (max-width: 900px) {
.plugin-grid {
grid-template-columns: 1fr;
}
}
.plugin-item {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
}
.plugin-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.plugin-code {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 0.875rem;
color: var(--color-text);
}
.plugin-badges {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
justify-content: flex-end;
}
.plugin-item p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.5;
}
.methods-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 1rem;
}
@media (max-width: 900px) {
.methods-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 520px) {
.methods-grid {
grid-template-columns: 1fr;
}
}
.method-mini {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
}
.method-mini h4 {
margin: 0 0 0.5rem;
font-size: 1rem;
color: var(--color-primary);
}
.method-mini p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.875rem;
line-height: 1.5;
}
.bundle-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
@media (max-width: 900px) {
.bundle-grid {
grid-template-columns: 1fr;
}
}
.bundle-item {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 1rem;
background: rgba(255, 255, 255, 0.02);
}
.bundle-item h4 {
margin: 0 0 0.75rem;
font-size: 1rem;
}
.bundle-pills {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
margin-bottom: 0.75rem;
}
.bundle-item p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.9375rem;
line-height: 1.5;
}
2026-02-02 10:40:28 +00:00
/* Technical Section */
.tech-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
margin-bottom: 1.5rem;
}
@media (max-width: 640px) {
.tech-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.tech-item {
text-align: center;
}
.tech-item strong {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--color-text-muted);
margin-bottom: 0.5rem;
}
.tech-item span {
font-size: 1.125rem;
font-weight: 500;
}
.tech-note {
text-align: center;
color: var(--color-text-muted);
font-size: 0.9375rem;
}
/* CTA Section */
.section-cta {
text-align: center;
background: linear-gradient(to bottom, var(--color-bg), var(--color-bg-alt));
padding: 5rem 2rem;
}
.section-cta h2 {
margin-bottom: 1rem;
}
.section-cta p {
color: var(--color-text-muted);
max-width: 600px;
margin: 0 auto 2rem;
font-size: 1.125rem;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
</style>
