landing-page-generator

Original source / Raw SKILL.md

---
name: landing-page-generator
description: Generate complete landing pages from repositories. Analyzes README, features, and structure to create static sites following established patterns. Use for new project landings, open-source showcases, documentation portals.
tags: [landing-page, static-site, github-pages, marketing]
---

# Landing Page Generator

Generate a complete, deploy-ready landing page from any repository by analyzing its documentation and structure.

## When to Use This Skill

- Creating a landing page for a GitHub repository
- Generating static sites from existing documentation
- Standardizing landing pages across multiple projects
- Converting README content to marketing/showcase pages

## What This Skill Does

1. **Analyze Repository**: Read README.md, CHANGELOG.md, package.json/VERSION, docs/, assets/
2. **Extract Content**: Identify title, tagline, features, installation, screenshots
3. **Map to Sections**: Hero, Features, Install, FAQ, Footer (+ optional: Risk Banner, Pricing)
4. **Generate Landing**: Create complete static site (HTML + CSS + JS)
5. **Deploy-Ready Output**: Include GitHub Actions workflow for GitHub Pages

## How to Use

### Basic Usage

```
/landing-page-generator from ~/path/to/repo
```

### With Options

```
/landing-page-generator from ~/path/to/repo --risk-banner --pricing-table
```

### Available Options

| Option | Description | Default |
|--------|-------------|---------|
| `--risk-banner` | Add prominent warning/disclaimer banner above fold | false |
| `--pricing-table` | Include pricing comparison section | false |
| `--screenshots <path>` | Path to screenshots folder | ./assets/ |
| `--theme [dark\|light]` | Color theme variant | dark |
| `--search` | Enable Cmd+K search | true |
| `--output <path>` | Output directory | ./[repo-name]-landing/ |

## Workflow

### Step 1: Repository Analysis

Read and analyze these files from the source repo:

```
README.md        → Primary content source (title, tagline, features, install)
CHANGELOG.md     → Version info, recent changes
package.json     → Version number, dependencies, metadata
VERSION          → Alternative version source
docs/            → Additional documentation pages
assets/          → Screenshots, images
LICENSE          → License type for badge
```

### Step 2: Content Extraction Map

| Source | Target Section | Extraction Method |
|--------|---------------|-------------------|
| README title/badges | Hero | First H1 + shield.io badge lines |
| README TL;DR | Hero tagline | First paragraph or blockquote after title |
| README features | Features grid | H2/H3 sections with bullet lists |
| README install | Quick Start | Code blocks with shell commands |
| README usage | Examples | Code blocks with examples |
| README FAQ | FAQ | Details/summary or H3+P patterns |
| CHANGELOG | What's New | Latest 1-3 releases |
| assets/*.png | Screenshots | Gallery section |

### Step 3: Section Generation

Generate these sections in order:

1. **Header** (sticky)
   - Logo/project name
   - Nav links: Features, Install, FAQ
   - Actions: Search (Cmd+K), GitHub Star, primary CTA

2. **Risk Banner** (if `--risk-banner`)
   - Orange/warning style above fold
   - Clear, visible disclaimer text
   - Link to detailed disclosure section

3. **Hero Section**
   - Title from README H1
   - Tagline from TL;DR/first paragraph
   - Stats badges (version, license, platform)
   - CTAs: "Quick Start" (primary), "View on GitHub" (secondary)

4. **Architecture/Overview** (if diagram in README)
   - ASCII diagram converted to styled block
   - Or overview cards

5. **Features Grid**
   - 4-6 feature cards from README features
   - Icon + title + description pattern

6. **Pricing Table** (if `--pricing-table`)
   - Plans comparison table
   - Multipliers/usage table if present

7. **Screenshots Gallery** (if assets exist)
   - Tab-based or carousel gallery
   - Captions from alt text

8. **Quick Start Section**
   - One-liner install command (featured code block)
   - Setup steps
   - First usage example

9. **Risk Disclosure** (if `--risk-banner`)
   - Full disclaimer section
   - ToS considerations
   - Recommendations

10. **FAQ Section**
    - Generated from README FAQ or common questions
    - Collapsible details pattern

11. **Related Projects** (if links in README)
    - Cards linking to dependencies/related repos

12. **Footer**
    - Quick links
    - License badge
    - Version info
    - Author/repo links

### Step 4: Output Structure

```
[project-name]-landing/
├── index.html              # Main landing page
├── styles.css              # Complete stylesheet
├── search.js               # Cmd+K search functionality
├── search-data.js          # Search index (FAQ, features)
├── favicon.svg             # Generated or copied
├── robots.txt              # SEO
├── CLAUDE.md               # Project instructions
├── README.md               # Landing repo documentation
├── assets/                 # Copied screenshots
│   └── [copied from source]
└── .github/
    └── workflows/
        └── static.yml      # GitHub Pages deployment
```

## Tech Stack

- **No build step**: Pure HTML + CSS + JS
- **Search**: MiniSearch lazy-loaded from CDN with fallback
- **Deployment**: GitHub Pages via Actions
- **Styling**: CSS custom properties, responsive, dark theme default
- **Accessibility**: Skip links, ARIA labels, keyboard navigation

## CSS Patterns (from established landings)

### Component Classes

```css
/* Buttons */
.btn, .btn-primary, .btn-secondary, .btn-github-star, .btn-outline

/* Cards */
.feature-card, .comparison-card, .path-card

/* Layout */
.container, .features-grid, .hero, .section

/* Utilities */
.visually-hidden, .skip-link
```

### CSS Variables

```css
:root {
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-border: #30363d;
  --color-text: #c9d1d9;
  --color-text-muted: #8b949e;
  --color-primary: #58a6ff;
  --color-success: #3fb950;
  --color-warning: #d29922;
  --color-danger: #f85149;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --radius: 6px;
}
```

## Example

**User**: `/landing-page-generator from ~/projects/my-project --risk-banner --pricing-table`

**Output**:

Creates `~/projects/my-project-landing/` with:
- Complete landing page showcasing the multi-provider router
- Prominent ToS risk banner (orange, above fold)
- Provider cards (Anthropic, Copilot, Ollama)
- Pricing tables from README
- Screenshots gallery
- GitHub Pages deployment ready

## Tips

- Always include `--risk-banner` for projects with legal/ToS considerations
- Screenshots significantly improve landing quality - ensure assets/ is populated
- The skill preserves README language (English/French)
- Review generated FAQ - may need customization
- Test responsive design after generation

## Related Use Cases

- Open-source project showcases
- Documentation portals
- Product landing pages
- Tool/utility marketing sites

## References

See `references/landing-pattern.md` for detailed pattern documentation.
See `assets/` for reusable templates and snippets.

---

## Referenced Files

> The following files are referenced in this skill and included for context.

### references/landing-pattern.md

```markdown
# Landing Page Pattern Reference

Documentation of the established landing page pattern used in `claude-code-ultimate-guide-landing` and `claude-cowork-guide-landing`.

## Tech Stack

| Component | Choice | Rationale |
|-----------|--------|-----------|
| Framework | None (vanilla) | Simplicity, no build step, easy hosting |
| Styling | Single CSS file | Maintainable, no preprocessor needed |
| JavaScript | Vanilla + MiniSearch CDN | Minimal dependencies, lazy-loaded |
| Deployment | GitHub Pages + Actions | Free, automatic, reliable |
| Search | MiniSearch with fallback | Client-side, fast, no backend needed |

## File Structure

```
project-landing/
├── index.html              # Main landing (all sections)
├── styles.css              # Complete stylesheet (~3000 lines)
├── search.js               # Search modal + keyboard nav
├── search-data.js          # Search index arrays
├── *-data.js               # Additional data files (optional)
├── favicon.svg             # Project icon
├── robots.txt              # SEO
├── CLAUDE.md               # Claude instructions
├── README.md               # Repo documentation
├── assets/                 # Images, screenshots
└── .github/workflows/
    └── static.yml          # Pages deployment
```

## HTML Structure

### Document Head

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Project Name] - [Tagline]</title>
  <meta name="description" content="[Description]">

  <!-- SEO -->
  <link rel="canonical" href="https://[user].github.io/[repo]-landing/">
  <meta name="robots" content="index, follow">

  <!-- Open Graph -->
  <meta property="og:type" content="website">
  <meta property="og:title" content="[Title]">
  <meta property="og:description" content="[Description]">
  <meta property="og:url" content="[URL]">
  <meta property="og:image" content="[og-image.png]">

  <!-- Twitter Card -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="[Title]">
  <meta name="twitter:description" content="[Description]">

  <!-- Favicon -->
  <link rel="icon" type="image/svg+xml" href="favicon.svg">

  <!-- Styles -->
  <link rel="stylesheet" href="styles.css">
</head>
```

### Body Structure

```html
<body>
  <a href="#main" class="skip-link">Skip to content</a>

  <header class="header">...</header>

  <main id="main">
    <section class="hero">...</section>
    <section class="features">...</section>
    <section class="install">...</section>
    <section class="faq">...</section>
    <!-- More sections -->
  </main>

  <footer class="footer">...</footer>

  <!-- Search Modal -->
  <div id="search-modal" class="search-modal" role="dialog" aria-modal="true">...</div>

  <!-- Scripts (order matters) -->
  <script src="search-data.js"></script>
  <script src="search.js"></script>
</body>
```

## Section Patterns

### Header

```html
<header class="header">
  <div class="container header-content">
    <a href="/" class="logo">
      <span class="logo-icon">>_</span>
      <span class="logo-text">[Project Name]</span>
    </a>
    <nav class="nav" aria-label="Main navigation">
      <ul class="nav-list">
        <li><a href="#features">Features</a></li>
        <li><a href="#install">Install</a></li>
        <li><a href="#faq">FAQ</a></li>
      </ul>
    </nav>
    <div class="header-actions">
      <button class="search-btn" aria-label="Search (Cmd+K)">
        <span>Search</span>
        <kbd>⌘K</kbd>
      </button>
      <a href="[github-url]" class="btn btn-github-star">
        ⭐ Star on GitHub
      </a>
    </div>
  </div>
</header>
```

### Hero Section

```html
<section class="hero">
  <div class="container">
    <div class="hero-badges">
      <img src="https://img.shields.io/badge/..." alt="...">
      <!-- More badges -->
    </div>
    <h1 class="hero-title">[Main Title]</h1>
    <p class="hero-tagline">[Tagline/TL;DR]</p>
    <div class="hero-stats">
      <span class="stat"><strong>[N]</strong> features</span>
      <span class="stat"><strong>[N]</strong> examples</span>
    </div>
    <div class="hero-ctas">
      <a href="#install" class="btn btn-primary">Quick Start</a>
      <a href="[github]" class="btn btn-secondary">View on GitHub</a>
    </div>
  </div>
</section>
```

### Risk Banner (Optional)

```html
<div class="risk-banner" role="alert">
  <div class="container">
    <span class="risk-icon">⚠️</span>
    <span class="risk-text">
      <strong>Risk Disclosure:</strong> [Warning text]
    </span>
    <a href="#risk-disclosure" class="risk-link">Learn more →</a>
  </div>
</div>
```

### Features Grid

```html
<section id="features" class="features">
  <div class="container">
    <h2 class="section-title">Features</h2>
    <div class="features-grid">
      <div class="feature-card">
        <div class="feature-icon">[emoji/icon]</div>
        <h3 class="feature-title">[Title]</h3>
        <p class="feature-desc">[Description]</p>
      </div>
      <!-- More cards -->
    </div>
  </div>
</section>
```

### Code Block with Copy

```html
<div class="code-block">
  <div class="code-header">
    <span class="code-lang">[language]</span>
    <button class="copy-btn" onclick="copyCode(this)" aria-label="Copy code">
      📋 Copy
    </button>
  </div>
  <pre><code>[code content]</code></pre>
</div>
```

### FAQ Section

```html
<section id="faq" class="faq">
  <div class="container">
    <h2 class="section-title">FAQ</h2>
    <div class="faq-list">
      <details class="faq-item">
        <summary class="faq-question">[Question]?</summary>
        <div class="faq-answer">
          <p>[Answer]</p>
        </div>
      </details>
      <!-- More items -->
    </div>
  </div>
</section>
```

### Footer

```html
<footer class="footer">
  <div class="container">
    <div class="footer-content">
      <div class="footer-brand">
        <span class="logo">>_ [Project]</span>
        <p class="footer-tagline">[Short tagline]</p>
      </div>
      <nav class="footer-links">
        <a href="[github]">GitHub</a>
        <a href="#faq">FAQ</a>
        <a href="[docs]">Docs</a>
      </nav>
      <div class="footer-meta">
        <span>MIT License</span>
        <span>v[version]</span>
      </div>
    </div>
  </div>
</footer>
```

## CSS Architecture

### Custom Properties (Theme)

```css
:root {
  /* Colors - Dark Theme */
  --color-bg: #0d1117;
  --color-surface: #161b22;
  --color-surface-hover: #21262d;
  --color-border: #30363d;
  --color-text: #c9d1d9;
  --color-text-muted: #8b949e;
  --color-heading: #f0f6fc;
  --color-primary: #58a6ff;
  --color-primary-hover: #79b8ff;
  --color-success: #3fb950;
  --color-warning: #d29922;
  --color-danger: #f85149;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', Consolas, 'Liberation Mono', monospace;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.5rem;

  /* Layout */
  --container-max: 1200px;
  --radius: 6px;
  --radius-lg: 12px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.3);
}
```

### Component Patterns

```css
/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-bg);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* Cards */
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: transform 0.2s, box-shadow 0.2s;
}

.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Grids */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-xl);
}
```

### Responsive Breakpoints

```css
/* Tablet */
@media (max-width: 768px) {
  .hero-title { font-size: var(--font-size-3xl); }
  .header-actions { display: none; }
  .nav { display: none; }
  /* Mobile nav toggle */
}

/* Mobile */
@media (max-width: 480px) {
  .hero-ctas { flex-direction: column; }
  .features-grid { grid-template-columns: 1fr; }
}
```

## JavaScript Patterns

### Search Implementation

```javascript
(function() {
  'use strict';

  let searchIndex = null;
  let miniSearchLoaded = false;

  // Lazy load MiniSearch
  async function loadMiniSearch() {
    if (miniSearchLoaded) return;
    await loadScript('https://cdn.jsdelivr.net/npm/minisearch@7/dist/umd/index.min.js');
    miniSearchLoaded = true;
  }

  // Build index from window.SEARCH_* data
  function buildIndex() {
    const items = [
      ...(window.SEARCH_FEATURES || []),
      ...(window.SEARCH_FAQ || []),
    ];
    // ... index building
  }

  // Keyboard navigation
  document.addEventListener('keydown', (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
      e.preventDefault();
      openSearchModal();
    }
  });
})();
```

### Copy Code Function

```javascript
async function copyCode(button) {
  const codeBlock = button.closest('.code-block');
  const code = codeBlock.querySelector('code').textContent;

  try {
    await navigator.clipboard.writeText(code);
    button.textContent = '✓ Copied!';
    setTimeout(() => {
      button.textContent = '📋 Copy';
    }, 2000);
  } catch (err) {
    console.error('Copy failed:', err);
  }
}
```

## Deployment

### GitHub Actions Workflow

```yaml
name: Deploy to GitHub Pages

on:
  push:
    branches: ["main"]
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/configure-pages@v5
      - uses: actions/upload-pages-artifact@v3
        with:
          path: '.'
      - id: deployment
        uses: actions/deploy-pages@v4
```

## Accessibility Checklist

- [ ] Skip link to main content
- [ ] Semantic HTML (header, main, section, footer)
- [ ] ARIA labels on interactive elements
- [ ] Keyboard navigation for modals
- [ ] Focus visible styles
- [ ] Color contrast WCAG AA
- [ ] Reduced motion respect
- [ ] Alt text on images

## SEO Checklist

- [ ] Descriptive title tag
- [ ] Meta description
- [ ] Canonical URL
- [ ] Open Graph tags
- [ ] Twitter Card tags
- [ ] Structured data (Schema.org)
- [ ] robots.txt
- [ ] Semantic heading hierarchy
```



---

## Skill Companion Files

> Additional files collected from the skill directory layout.

### assets/search-base.js

```javascript
/**
 * Global Search - Cmd+K / Ctrl+K
 * Lazy loads MiniSearch on first use
 * Customize SEARCH_* arrays in search-data.js
 */

(function() {
    'use strict';

    let searchReady = false;
    let miniSearch = null;
    let searchIndex = [];
    let selectedIndex = -1;
    let lastFocusedElement = null;

    // DOM elements (cached after init)
    let modal, input, results, statusEl;

    /**
     * Load script dynamically
     */
    function loadScript(src) {
        return new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = src;
            script.onload = resolve;
            script.onerror = reject;
            document.head.appendChild(script);
        });
    }

    /**
     * Build search index from available sources
     * Customize by adding your own window.SEARCH_* arrays
     */
    function buildIndex() {
        const items = [];

        // Features
        if (window.SEARCH_FEATURES) {
            items.push(...window.SEARCH_FEATURES);
        }

        // FAQ
        if (window.SEARCH_FAQ) {
            items.push(...window.SEARCH_FAQ);
        }

        // Docs
        if (window.SEARCH_DOCS) {
            items.push(...window.SEARCH_DOCS);
        }

        // Custom items
        if (window.SEARCH_CUSTOM) {
            items.push(...window.SEARCH_CUSTOM);
        }

        return items;
    }

    /**
     * Initialize search (called on first Cmd+K)
     */
    async function initSearch() {
        if (searchReady) return true;

        // Build index
        searchIndex = buildIndex();

        if (searchIndex.length === 0) {
            console.warn('Search: No items to index');
            return false;
        }

        // Try to load MiniSearch from CDN
        if (!window.MiniSearch) {
            try {
                await loadScript('https://cdn.jsdelivr.net/npm/minisearch@7/dist/umd/index.min.js');
            } catch (e) {
                console.warn('Search: MiniSearch CDN failed, using fallback');
            }
        }

        // Initialize MiniSearch or fallback
        if (window.MiniSearch) {
            miniSearch = new MiniSearch({
                fields: ['title', 'content', 'category'],
                storeFields: ['title', 'type', 'url', 'category'],
                searchOptions: {
                    fuzzy: 0.2,
                    prefix: true,
                    boost: { title: 2 }
                }
            });
            miniSearch.addAll(searchIndex);
        } else {
            // Fallback: simple substring search
            miniSearch = {
                search: (query) => {
                    const q = query.toLowerCase();
                    return searchIndex.filter(item =>
                        item.title.toLowerCase().includes(q) ||
                        item.content.toLowerCase().includes(q) ||
                        (item.category && item.category.toLowerCase().includes(q))
                    ).map(item => ({ ...item, score: 1 }));
                }
            };
        }

        searchReady = true;
        return true;
    }

    /**
     * Perform search and return results
     */
    function search(query) {
        if (!searchReady || !query.trim()) return [];

        const searchResults = miniSearch.search(query);

        // Group by type and limit
        const grouped = {};
        searchResults.forEach(r => {
            const type = r.type || 'item';
            if (!grouped[type]) grouped[type] = [];
            if (grouped[type].length < 5) {
                grouped[type].push(r);
            }
        });

        // Flatten all groups
        return Object.values(grouped).flat();
    }

    /**
     * Render search results
     */
    function renderResults(items) {
        if (!results) return;

        selectedIndex = -1;

        if (items.length === 0) {
            results.innerHTML = '<li class="search-no-results">No results found</li>';
            announceResults(0);
            return;
        }

        const typeIcons = {
            feature: '⚡',
            faq: '❓',
            doc: '📖',
            install: '📦',
            provider: '🔌',
            default: '📄'
        };

        results.innerHTML = items.map((item, i) => `
            <li class="search-result-item"
                role="option"
                id="search-result-${i}"
                data-url="${item.url}"
                tabindex="-1">
                <span class="search-result-type">${typeIcons[item.type] || typeIcons.default} ${item.type || 'item'}</span>
                <span class="search-result-title">${escapeHtml(item.title)}</span>
                ${item.category ? `<span class="search-result-category">${item.category}</span>` : ''}
            </li>
        `).join('');

        // Add click handlers
        results.querySelectorAll('.search-result-item').forEach((el, i) => {
            el.addEventListener('click', () => navigateTo(items[i].url));
        });

        announceResults(items.length);
    }

    /**
     * Announce results to screen readers
     */
    function announceResults(count) {
        if (statusEl) {
            statusEl.textContent = count === 0
                ? 'No results found'
                : `${count} result${count > 1 ? 's' : ''} found. Use arrow keys to navigate.`;
        }
    }

    /**
     * Navigate to result URL
     */
    function navigateTo(url) {
        closeModal();
        window.location.href = url;
    }

    /**
     * Update selected item
     */
    function updateSelection(newIndex) {
        const items = results.querySelectorAll('.search-result-item');
        if (items.length === 0) return;

        // Wrap around
        if (newIndex < 0) newIndex = items.length - 1;
        if (newIndex >= items.length) newIndex = 0;

        // Update aria-selected
        items.forEach((el, i) => {
            el.setAttribute('aria-selected', i === newIndex ? 'true' : 'false');
        });

        // Scroll into view
        items[newIndex].scrollIntoView({ block: 'nearest' });

        selectedIndex = newIndex;
    }

    /**
     * Handle keyboard navigation
     */
    function handleKeydown(e) {
        const items = results.querySelectorAll('.search-result-item');

        switch (e.key) {
            case 'ArrowDown':
                e.preventDefault();
                updateSelection(selectedIndex + 1);
                break;

            case 'ArrowUp':
                e.preventDefault();
                updateSelection(selectedIndex - 1);
                break;

            case 'Enter':
                e.preventDefault();
                if (selectedIndex >= 0 && items[selectedIndex]) {
                    const url = items[selectedIndex].dataset.url;
                    if (url) navigateTo(url);
                }
                break;

            case 'Home':
                e.preventDefault();
                updateSelection(0);
                break;

            case 'End':
                e.preventDefault();
                updateSelection(items.length - 1);
                break;

            case 'Escape':
                e.preventDefault();
                closeModal();
                break;
        }
    }

    /**
     * Open search modal
     */
    async function openModal() {
        if (!modal) return;

        // Initialize search on first open
        const ready = await initSearch();
        if (!ready) {
            console.error('Search: Failed to initialize');
            return;
        }

        // Save current focus
        lastFocusedElement = document.activeElement;

        // Show modal
        modal.hidden = false;
        document.body.style.overflow = 'hidden';

        // Focus input
        setTimeout(() => {
            input.value = '';
            input.focus();
            renderResults([]);
        }, 10);
    }

    /**
     * Close search modal
     */
    function closeModal() {
        if (!modal) return;

        modal.hidden = true;
        document.body.style.overflow = '';

        // Restore focus
        if (lastFocusedElement) {
            lastFocusedElement.focus();
        }
    }

    /**
     * Escape HTML
     */
    function escapeHtml(str) {
        const div = document.createElement('div');
        div.textContent = str;
        return div.innerHTML;
    }

    /**
     * Focus trap for accessibility
     */
    function trapFocus(e) {
        if (!modal || modal.hidden) return;

        const focusable = modal.querySelectorAll(
            'input, button, [tabindex]:not([tabindex="-1"])'
        );
        const first = focusable[0];
        const last = focusable[focusable.length - 1];

        if (e.shiftKey && document.activeElement === first) {
            e.preventDefault();
            last.focus();
        } else if (!e.shiftKey && document.activeElement === last) {
            e.preventDefault();
            first.focus();
        }
    }

    /**
     * Initialize when DOM is ready
     */
    function init() {
        // Get DOM elements
        modal = document.getElementById('search-modal');
        input = document.getElementById('search-input');
        results = document.getElementById('search-results');
        statusEl = document.getElementById('search-status');

        if (!modal || !input || !results) {
            console.warn('Search: Modal elements not found');
            return;
        }

        // Input handler with debounce
        let debounceTimer;
        input.addEventListener('input', (e) => {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => {
                const items = search(e.target.value);
                renderResults(items);
            }, 150);
        });

        // Keyboard navigation
        input.addEventListener('keydown', handleKeydown);

        // Close on backdrop click
        modal.querySelector('.search-modal-backdrop')?.addEventListener('click', closeModal);

        // Global keyboard shortcut: Cmd+K / Ctrl+K
        document.addEventListener('keydown', (e) => {
            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
                e.preventDefault();
                if (modal.hidden) {
                    openModal();
                } else {
                    closeModal();
                }
            }
        });

        // Focus trap
        modal.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                trapFocus(e);
            }
        });

        // Search trigger button
        document.querySelectorAll('.search-trigger').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.preventDefault();
                openModal();
            });
        });
    }

    // Initialize on DOM ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();

```

### assets/section-snippets/faq.html

```html
<!-- FAQ Section Template -->
<section id="faq" class="faq">
  <div class="container">
    <h2 class="section-title">Frequently Asked Questions</h2>

    <div class="faq-list">
      <!-- FAQ Item 1 -->
      <details class="faq-item">
        <summary class="faq-question">{{FAQ_1_QUESTION}}</summary>
        <div class="faq-answer">
          <p>{{FAQ_1_ANSWER}}</p>
        </div>
      </details>

      <!-- FAQ Item 2 -->
      <details class="faq-item">
        <summary class="faq-question">{{FAQ_2_QUESTION}}</summary>
        <div class="faq-answer">
          <p>{{FAQ_2_ANSWER}}</p>
        </div>
      </details>

      <!-- FAQ Item 3 -->
      <details class="faq-item">
        <summary class="faq-question">{{FAQ_3_QUESTION}}</summary>
        <div class="faq-answer">
          <p>{{FAQ_3_ANSWER}}</p>
        </div>
      </details>

      <!-- FAQ Item 4 -->
      <details class="faq-item">
        <summary class="faq-question">{{FAQ_4_QUESTION}}</summary>
        <div class="faq-answer">
          <p>{{FAQ_4_ANSWER}}</p>
        </div>
      </details>

      <!-- FAQ Item 5 -->
      <details class="faq-item">
        <summary class="faq-question">{{FAQ_5_QUESTION}}</summary>
        <div class="faq-answer">
          <p>{{FAQ_5_ANSWER}}</p>
        </div>
      </details>
    </div>
  </div>
</section>

<!--
PLACEHOLDERS:
- {{FAQ_N_QUESTION}}: Question text (end with ?)
- {{FAQ_N_ANSWER}}: Answer text (can include HTML for formatting)

NOTE: Adjust number of items as needed (typically 4-8)
Common FAQ topics:
- Installation/setup issues
- Pricing/cost
- Security/privacy
- Compatibility
- Troubleshooting
-->

```

### assets/section-snippets/features-grid.html

```html
<!-- Features Grid Section Template -->
<section id="features" class="features">
  <div class="container">
    <h2 class="section-title">Features</h2>

    <div class="features-grid">
      <!-- Feature Card 1 -->
      <div class="feature-card">
        <div class="feature-icon">{{FEATURE_1_ICON}}</div>
        <h3 class="feature-title">{{FEATURE_1_TITLE}}</h3>
        <p class="feature-desc">{{FEATURE_1_DESC}}</p>
      </div>

      <!-- Feature Card 2 -->
      <div class="feature-card">
        <div class="feature-icon">{{FEATURE_2_ICON}}</div>
        <h3 class="feature-title">{{FEATURE_2_TITLE}}</h3>
        <p class="feature-desc">{{FEATURE_2_DESC}}</p>
      </div>

      <!-- Feature Card 3 -->
      <div class="feature-card">
        <div class="feature-icon">{{FEATURE_3_ICON}}</div>
        <h3 class="feature-title">{{FEATURE_3_TITLE}}</h3>
        <p class="feature-desc">{{FEATURE_3_DESC}}</p>
      </div>

      <!-- Feature Card 4 -->
      <div class="feature-card">
        <div class="feature-icon">{{FEATURE_4_ICON}}</div>
        <h3 class="feature-title">{{FEATURE_4_TITLE}}</h3>
        <p class="feature-desc">{{FEATURE_4_DESC}}</p>
      </div>

      <!-- Feature Card 5 -->
      <div class="feature-card">
        <div class="feature-icon">{{FEATURE_5_ICON}}</div>
        <h3 class="feature-title">{{FEATURE_5_TITLE}}</h3>
        <p class="feature-desc">{{FEATURE_5_DESC}}</p>
      </div>

      <!-- Feature Card 6 -->
      <div class="feature-card">
        <div class="feature-icon">{{FEATURE_6_ICON}}</div>
        <h3 class="feature-title">{{FEATURE_6_TITLE}}</h3>
        <p class="feature-desc">{{FEATURE_6_DESC}}</p>
      </div>
    </div>
  </div>
</section>

<!--
PLACEHOLDERS:
- {{FEATURE_N_ICON}}: Emoji or icon for feature (e.g., "⚡", "🔒", "📦")
- {{FEATURE_N_TITLE}}: Feature title (short, 2-4 words)
- {{FEATURE_N_DESC}}: Feature description (1-2 sentences)

NOTE: Adjust number of cards as needed (typically 4-6)
-->

```

### assets/section-snippets/footer.html

```html
<!-- Footer Section Template -->
<footer class="footer">
  <div class="container">
    <div class="footer-content">
      <!-- Brand -->
      <div class="footer-brand">
        <a href="/" class="logo">
          <span class="logo-icon">>_</span>
          <span class="logo-text">{{PROJECT_NAME}}</span>
        </a>
        <p class="footer-tagline">{{FOOTER_TAGLINE}}</p>
      </div>

      <!-- Links -->
      <nav class="footer-links" aria-label="Footer navigation">
        <a href="{{GITHUB_URL}}">GitHub</a>
        <a href="#features">Features</a>
        <a href="#install">Install</a>
        <a href="#faq">FAQ</a>
        <a href="{{DOCS_URL}}">Documentation</a>
      </nav>

      <!-- Meta -->
      <div class="footer-meta">
        <span>{{LICENSE}} License</span>
        <span>v{{VERSION}}</span>
      </div>
    </div>
  </div>
</footer>

<!--
PLACEHOLDERS:
- {{PROJECT_NAME}}: Project name
- {{FOOTER_TAGLINE}}: Short tagline (max 50 chars)
- {{GITHUB_URL}}: GitHub repository URL
- {{DOCS_URL}}: Documentation URL (or #docs)
- {{LICENSE}}: License type (e.g., "MIT", "Apache-2.0")
- {{VERSION}}: Current version (e.g., "1.4.0")
-->

```

### assets/section-snippets/header.html

```html
<!-- Header Template -->
<header class="header">
  <div class="container">
    <nav class="nav" aria-label="Main navigation">
      <!-- Logo -->
      <a href="/" class="logo">
        <span class="logo-icon">>_</span>
        <span class="logo-text">{{PROJECT_NAME}}</span>
      </a>

      <!-- Navigation Links -->
      <div class="nav-links">
        <a href="#features">Features</a>
        <a href="#install">Install</a>
        <a href="#faq">FAQ</a>
        {{#if DOCS_URL}}
        <a href="{{DOCS_URL}}">Docs</a>
        {{/if}}
      </div>

      <!-- Actions -->
      <div class="nav-actions">
        <!-- Search Trigger -->
        <button class="search-trigger" aria-label="Search (⌘K)">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
            <circle cx="11" cy="11" r="8"/>
            <path d="m21 21-4.35-4.35"/>
          </svg>
          <span>Search</span>
          <kbd>⌘K</kbd>
        </button>

        <!-- GitHub Star -->
        <a href="{{GITHUB_URL}}" class="btn btn-github-star" target="_blank" rel="noopener">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
            <path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"/>
          </svg>
          <span class="btn-github-text">Star on GitHub</span>
        </a>
      </div>
    </nav>
  </div>
</header>

<!--
PLACEHOLDERS:
- {{PROJECT_NAME}}: Project name for logo
- {{GITHUB_URL}}: GitHub repository URL
- {{DOCS_URL}}: Documentation URL (optional)

NOTE:
- Search trigger requires search-modal.html and search.js
- GitHub star button shows icon only on mobile (text hidden via CSS)
-->

```

### assets/section-snippets/hero.html

```html
<!-- Hero Section Template -->
<section class="hero">
  <div class="container">
    <!-- Badges -->
    <div class="hero-badges">
      <img src="https://img.shields.io/badge/License-MIT-yellow.svg" alt="MIT License">
      <img src="https://img.shields.io/github/v/tag/{{GITHUB_USER}}/{{REPO_NAME}}?label=version" alt="Version">
      <img src="https://img.shields.io/badge/Platform-{{PLATFORM}}-blue.svg" alt="Platform">
    </div>

    <!-- Title -->
    <h1 class="hero-title">{{PROJECT_TITLE}}</h1>

    <!-- Tagline -->
    <p class="hero-tagline">{{PROJECT_TAGLINE}}</p>

    <!-- Stats -->
    <div class="hero-stats">
      <span class="stat"><strong>{{STAT_1_VALUE}}</strong> {{STAT_1_LABEL}}</span>
      <span class="stat"><strong>{{STAT_2_VALUE}}</strong> {{STAT_2_LABEL}}</span>
      <span class="stat"><strong>{{STAT_3_VALUE}}</strong> {{STAT_3_LABEL}}</span>
    </div>

    <!-- CTAs -->
    <div class="hero-ctas">
      <a href="#install" class="btn btn-primary">Quick Start</a>
      <a href="{{GITHUB_URL}}" class="btn btn-secondary">View on GitHub</a>
    </div>
  </div>
</section>

<!--
PLACEHOLDERS:
- {{GITHUB_USER}}: GitHub username
- {{REPO_NAME}}: Repository name
- {{PLATFORM}}: Platform badge text (e.g., "macOS | Linux")
- {{PROJECT_TITLE}}: Main title from README H1
- {{PROJECT_TAGLINE}}: Tagline from TL;DR or first paragraph
- {{STAT_N_VALUE}}: Numeric stat value
- {{STAT_N_LABEL}}: Stat label
- {{GITHUB_URL}}: Full GitHub repository URL
-->

```

### assets/section-snippets/install.html

```html
<!-- Quick Start / Install Section Template -->
<section id="install" class="install">
  <div class="container">
    <h2 class="section-title">Quick Start</h2>

    <!-- One-liner install -->
    <div class="install-hero">
      <p class="install-intro">Get started in {{INSTALL_TIME}}:</p>

      <div class="code-block">
        <div class="code-header">
          <span class="code-lang">bash</span>
          <button class="copy-btn" onclick="copyCode(this)" aria-label="Copy code">📋 Copy</button>
        </div>
        <pre><code>{{INSTALL_COMMAND}}</code></pre>
      </div>
    </div>

    <!-- Setup steps -->
    <div class="install-steps">
      <h3>Setup</h3>

      <div class="code-block">
        <div class="code-header">
          <span class="code-lang">bash</span>
          <button class="copy-btn" onclick="copyCode(this)" aria-label="Copy code">📋 Copy</button>
        </div>
        <pre><code>{{SETUP_COMMANDS}}</code></pre>
      </div>
    </div>

    <!-- Usage example -->
    <div class="install-usage">
      <h3>First Usage</h3>

      <div class="code-block">
        <div class="code-header">
          <span class="code-lang">bash</span>
          <button class="copy-btn" onclick="copyCode(this)" aria-label="Copy code">📋 Copy</button>
        </div>
        <pre><code>{{USAGE_EXAMPLE}}</code></pre>
      </div>
    </div>

    <!-- Link to full docs -->
    <p class="install-more">
      <a href="{{DOCS_URL}}">Full installation guide →</a>
    </p>
  </div>
</section>

<!--
PLACEHOLDERS:
- {{INSTALL_TIME}}: Time estimate (e.g., "30 seconds", "2 minutes")
- {{INSTALL_COMMAND}}: One-liner install command
- {{SETUP_COMMANDS}}: Additional setup (aliases, config)
- {{USAGE_EXAMPLE}}: First usage example
- {{DOCS_URL}}: Link to full documentation
-->

<style>
.install-hero {
  max-width: 800px;
  margin: 0 auto var(--space-2xl);
}

.install-intro {
  text-align: center;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.install-steps,
.install-usage {
  max-width: 800px;
  margin: 0 auto var(--space-xl);
}

.install-steps h3,
.install-usage h3 {
  font-size: 1.1rem;
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
}

.install-more {
  text-align: center;
  margin-top: var(--space-xl);
}
</style>

```

### assets/section-snippets/risk-banner.html

```html
<!-- Risk Banner Template (Above Fold) -->
<div class="risk-banner" role="alert">
  <div class="container">
    <span class="risk-icon">⚠️</span>
    <span class="risk-text">
      <strong>{{RISK_LABEL}}:</strong> {{RISK_MESSAGE}}
    </span>
    <a href="#risk-disclosure" class="risk-link">Learn more →</a>
  </div>
</div>

<!--
PLACEHOLDERS:
- {{RISK_LABEL}}: Label (e.g., "Risk Disclosure", "Warning", "Important Notice")
- {{RISK_MESSAGE}}: Brief warning message (max 100 chars)

USE WHEN:
- Project uses reverse-engineered APIs
- ToS/legal considerations exist
- Security caveats apply
- Beta/experimental status
-->

```

### assets/section-snippets/search-modal.html

```html
<!-- Search Modal Template -->
<div id="search-modal" class="search-modal" hidden role="dialog" aria-modal="true" aria-label="Search">
  <div class="search-modal-backdrop"></div>
  <div class="search-modal-content">
    <div class="search-input-wrapper">
      <svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="8"/>
        <path d="m21 21-4.35-4.35"/>
      </svg>
      <input
        type="text"
        id="search-input"
        class="search-input"
        placeholder="Search features, FAQ..."
        autocomplete="off"
        aria-describedby="search-status"
      >
      <kbd>ESC</kbd>
    </div>
    <ul id="search-results" class="search-results" role="listbox" aria-label="Search results">
      <!-- Results populated by search.js -->
    </ul>
    <div id="search-status" class="search-status" aria-live="polite"></div>
  </div>
</div>

<!--
USAGE:
1. Include this modal at the end of <body>, before scripts
2. Load search-data.js before search.js
3. search.js handles opening (Cmd+K), keyboard nav, and results

SEARCH DATA FORMAT (in search-data.js):
window.SEARCH_FEATURES = [
  { id: 'f1', type: 'feature', title: 'Feature Name', content: 'keywords', url: '#features' }
];
window.SEARCH_FAQ = [
  { id: 'q1', type: 'faq', title: 'Question?', content: 'answer keywords', url: '#faq' }
];
-->

```

### assets/static-workflow.yml

```yaml
# Simple workflow for deploying static content to GitHub Pages
name: Deploy static content to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches: ["main"]

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

jobs:
  # Single deploy job since we're just deploying
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Pages
        uses: actions/configure-pages@v5
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload entire repository
          path: '.'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

```

### assets/styles-base.css

```css
/* ============================================
   Landing Page Base Styles
   Dark Theme - GitHub-inspired
   ============================================ */

/* CSS Custom Properties */
:root {
    /* Colors - Dark Theme */
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --text-primary: #c9d1d9;
    --text-secondary: #9ca3af;
    --text-muted: #8b949e;
    --accent: #58a6ff;
    --accent-hover: #79b8ff;
    --accent-secondary: #4f46e5;
    --accent-secondary-hover: #6366f1;
    --border: #30363d;
    --border-light: #21262d;
    --success: #3fb950;
    --warning: #d29922;
    --danger: #f85149;

    /* Typography */
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Layout */
    --max-width: 1200px;
    --border-radius: 8px;
    --border-radius-lg: 12px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Container */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--accent-hover);
}

code {
    font-family: var(--font-mono);
    background-color: var(--bg-tertiary);
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.9em;
}

kbd {
    display: inline-block;
    padding: 0.2em 0.5em;
    font-family: var(--font-mono);
    font-size: 0.85em;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* Skip Link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    padding: 8px;
    background-color: var(--accent);
    color: var(--bg-primary);
    z-index: 1000;
}

.skip-link:focus {
    top: 0;
}

/* ============================================
   Buttons
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 500;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn:hover {
    text-decoration: none;
}

.btn-primary {
    background-color: var(--accent-secondary);
    color: #ffffff;
    font-weight: 600;
}

.btn-primary:hover {
    background-color: var(--accent-secondary-hover);
    color: #ffffff;
    transform: translateY(-2px);
}

.btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.btn-github-star {
    background: linear-gradient(135deg, #24292e 0%, #1a1e22 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-weight: 600;
    padding: 0.5rem 1rem;
}

.btn-github-star:hover {
    background: linear-gradient(135deg, #2f363d 0%, #24292e 100%);
    transform: translateY(-2px);
}

/* ============================================
   Header
   ============================================ */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: rgba(13, 17, 23, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
}

.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.logo:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.logo-icon {
    font-family: var(--font-mono);
    color: var(--accent);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav-links a {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.nav-links a:hover {
    color: var(--text-primary);
    text-decoration: none;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ============================================
   Risk Banner
   ============================================ */
.risk-banner {
    background: linear-gradient(90deg, rgba(210, 153, 34, 0.15), rgba(248, 81, 73, 0.15));
    border-bottom: 1px solid var(--warning);
    padding: var(--space-md) 0;
}

.risk-banner .container {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.risk-icon {
    font-size: 1.25rem;
}

.risk-text {
    flex: 1;
    font-size: 0.95rem;
}

.risk-text strong {
    color: var(--warning);
}

.risk-link {
    color: var(--warning);
    font-weight: 500;
    white-space: nowrap;
}

.risk-link:hover {
    color: var(--danger);
}

/* ============================================
   Hero
   ============================================ */
.hero {
    padding: var(--space-3xl) 0;
    text-align: center;
}

.hero-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.hero-badges img {
    height: 20px;
}

.hero-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    background: linear-gradient(135deg, var(--text-primary), var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-tagline {
    font-size: 1.25rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto var(--space-lg);
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.hero-stats .stat {
    color: var(--text-secondary);
}

.hero-stats strong {
    color: var(--accent);
}

.hero-ctas {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

/* ============================================
   Sections
   ============================================ */
section {
    padding: var(--space-3xl) 0;
}

.section-title {
    font-size: 2rem;
    text-align: center;
    margin-bottom: var(--space-2xl);
}

/* ============================================
   Features Grid
   ============================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.feature-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.feature-icon {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.feature-title {
    font-size: 1.1rem;
    margin-bottom: var(--space-sm);
}

.feature-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* ============================================
   Provider Cards
   ============================================ */
.providers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.provider-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
    position: relative;
    overflow: hidden;
}

.provider-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.provider-card.anthropic::before {
    background: linear-gradient(90deg, #d97706, #ea580c);
}

.provider-card.copilot::before {
    background: linear-gradient(90deg, #58a6ff, #3b82f6);
}

.provider-card.ollama::before {
    background: linear-gradient(90deg, #3fb950, #22c55e);
}

.provider-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.provider-icon {
    font-size: 2rem;
}

.provider-name {
    font-size: 1.25rem;
    font-weight: 600;
}

.provider-command {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 0.9rem;
}

.provider-desc {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
}

.provider-meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* ============================================
   Code Blocks
   ============================================ */
.code-block {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin: var(--space-md) 0;
}

.code-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background-color: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

.code-lang {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-family: var(--font-mono);
}

.copy-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 4px;
    transition: all var(--transition-fast);
}

.copy-btn:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.code-block pre {
    padding: var(--space-md);
    overflow-x: auto;
    margin: 0;
}

.code-block code {
    background: none;
    padding: 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

/* ============================================
   Pricing Table
   ============================================ */
.pricing-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-xl) 0;
}

.pricing-table th,
.pricing-table td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.pricing-table th {
    background-color: var(--bg-secondary);
    font-weight: 600;
}

.pricing-table tr:hover {
    background-color: var(--bg-secondary);
}

.pricing-highlight {
    color: var(--success);
    font-weight: 600;
}

/* ============================================
   Screenshots Gallery
   ============================================ */
.screenshots-tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.screenshot-tab {
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.screenshot-tab:hover,
.screenshot-tab.active {
    border-color: var(--accent);
    color: var(--accent);
    background-color: rgba(88, 166, 255, 0.1);
}

.screenshot-content {
    display: none;
    text-align: center;
}

.screenshot-content.active {
    display: block;
}

.screenshot-content img {
    max-width: 100%;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border);
}

/* ============================================
   FAQ
   ============================================ */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.faq-question {
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    font-weight: 500;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-question::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.faq-item[open] .faq-question::after {
    transform: rotate(45deg);
}

.faq-answer {
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--text-secondary);
}

/* ============================================
   Risk Disclosure Section
   ============================================ */
.risk-disclosure {
    background-color: rgba(248, 81, 73, 0.05);
    border: 1px solid rgba(248, 81, 73, 0.3);
    border-radius: var(--border-radius-lg);
    padding: var(--space-xl);
}

.risk-disclosure h3 {
    color: var(--danger);
    margin-bottom: var(--space-md);
}

.risk-disclosure ul {
    list-style: disc;
    padding-left: var(--space-xl);
    color: var(--text-secondary);
}

.risk-disclosure li {
    margin-bottom: var(--space-sm);
}

/* ============================================
   Footer
   ============================================ */
.footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border);
    padding: var(--space-2xl) 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.footer-tagline {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    gap: var(--space-lg);
}

.footer-links a {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.footer-links a:hover {
    color: var(--text-primary);
}

.footer-meta {
    display: flex;
    gap: var(--space-md);
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ============================================
   Search Modal
   ============================================ */
.search-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
}

.search-modal[hidden] {
    display: none;
}

.search-modal-backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.7);
}

.search-modal-content {
    position: relative;
    width: 100%;
    max-width: 600px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    margin: 0 var(--space-md);
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
}

.search-input {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 1.1rem;
    outline: none;
}

.search-input::placeholder {
    color: var(--text-muted);
}

.search-results {
    max-height: 400px;
    overflow-y: auto;
    list-style: none;
}

.search-result-item {
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-bottom: 1px solid var(--border-light);
}

.search-result-item:hover,
.search-result-item[aria-selected="true"] {
    background-color: var(--bg-tertiary);
}

.search-result-type {
    font-size: 0.8rem;
    color: var(--text-muted);
    min-width: 80px;
}

.search-result-title {
    flex: 1;
}

.search-result-category {
    font-size: 0.8rem;
    color: var(--text-muted);
    background-color: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
}

.search-no-results {
    padding: var(--space-xl);
    text-align: center;
    color: var(--text-muted);
}

.search-status {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Search trigger button */
.search-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.search-trigger:hover {
    border-color: var(--accent);
    color: var(--text-primary);
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-tagline {
        font-size: 1.1rem;
    }

    .nav-links {
        display: none;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: center;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    .risk-banner .container {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: var(--space-2xl) 0;
    }

    .hero-stats {
        flex-direction: column;
        gap: var(--space-sm);
    }

    section {
        padding: var(--space-2xl) 0;
    }
}

/* ============================================
   Utilities
   ============================================ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Focus visible for accessibility */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

```