page / {
  style {
    bg #0a0a0f
    color #e0e0e0
    min-height 100vh
  }

  # Hero
  section {
    style { text-align center, padding 6rem 2rem 4rem, max-width 800px, margin 0 auto }

    h1 "🦞"
    badge "v0.1.0 — First Molt"
    badge "⚡ Compiled from .nyx source"
    h1 "NyxCode"
    p "The AI-native programming language for the web."
    p "Designed for AI. Optimized for tokens. Built for humans."

    grid cols=3 gap=1.5rem {
      card {
        style { padding 2rem 1rem, border-radius 16px }
        h2 "68%"
        p "fewer lines vs React"
      }
      card {
        style { padding 2rem 1rem, border-radius 16px }
        h2 "0"
        p "boilerplate"
      }
      card {
        style { padding 2rem 1rem, border-radius 16px }
        h2 "121"
        p "lines for this entire page"
      }
    }
  }

  # Code Comparison
  section {
    style { max-width 900px, margin 4rem auto, padding 0 2rem }
    h2 "Same output. Fewer tokens."

    grid cols=2 gap=1.5rem {
      card {
        style { border-radius 12px, text-align left }
        h3 "React — 20 lines"
        p "import React, { useState, useEffect } from 'react';"
        p "export default function UserList() { ... }"
      }
      card {
        style { border-radius 12px, text-align left }
        h3 "NyxCode — 4 lines"
        p "page /users {"
        p "  data users = get /api/users"
        p "  each users -> card { h3 .name, p .email }"
        p "}"
      }
    }
  }

  # Benchmark
  section {
    style { max-width 600px, margin 4rem auto, padding 0 2rem, text-align center }
    h2 "Real Numbers"
    p "Measured on this landing page — same output, three implementations."
    p "NyxCode:        121 lines |  3,676 bytes | 1 file"
    p "HTML/CSS:       129 lines | 11,228 bytes | 1 file  | -68% bytes"
    p "React+CSS:      372 lines |  8,842 bytes | 2+ files | -68% lines"
  }

  # Features
  section {
    style { max-width 800px, margin 4rem auto, padding 0 2rem }
    h2 "What makes NyxCode different"

    grid cols=2 gap=1.5rem {
      card {
        style { padding 1.5rem, border-radius 12px }
        h3 "🧠 AI-First Design"
        p "Every syntax decision optimizes for AI code generation. Fewer tokens = cheaper, faster, more context."
      }
      card {
        style { padding 1.5rem, border-radius 12px }
        h3 "🔒 Secure by Default"
        p "SQL injection, XSS, CSRF — structurally impossible without explicit opt-in."
      }
      card {
        style { padding 1.5rem, border-radius 12px }
        h3 "🎯 Zero Config"
        p "No imports, no router config, no webpack. File = route. One file = one thing."
      }
      card {
        style { padding 1.5rem, border-radius 12px }
        h3 "🌐 Compiles to Standards"
        p "Output is vanilla HTML + CSS + JS. Works everywhere. No framework lock-in."
      }
    }
  }

  # CTA
  section {
    style { text-align center, padding 4rem 2rem, max-width 600px, margin 0 auto }
    h2 "Try it now"
    p "git clone --branch v0.1.0 https://github.com/fabudde/nyxcode.git"

    row gap=1rem {
      link "GitHub" href="https://github.com/fabudde/nyxcode"
      link "Language Spec" href="https://github.com/fabudde/nyxcode/blob/main/SPEC.md"
      link "Download Starter" href="/downloads/nyxcode-starter.zip"
      link "View .nyx Source" href="/landing.nyx"
    }
  }

  # Footer
  footer {
    style { text-align center, padding 3rem 2rem }
    p "NyxCode v0.1.0 \"First Molt\" — Released April 11, 2026"
    p "Built by Fabian Budde 🐻 · Nyx 🦞 · Tyto 🦉"
    link "Release Notes" href="https://github.com/fabudde/nyxcode/releases/tag/v0.1.0"
  }
}