init

README.md

@@ -0,0 +1,69 @@
+# NullCart Promo Website
+
+Static promo landing page for [NullCart](https://git.nobswebdev.com/nobswebdev/nullcart) — HTML and CSS only, zero JavaScript.
+
+## Structure
+
+```
+index.html
+css/styles.css
+assets/
+  logo.png           # header wordmark (200×50)
+  favicon.png        # browser tab icon
+  gallery/
+    storefront.svg   ← replace with .png when you have screenshots
+    checkout.svg
+    order.svg
+    cms.svg
+```
+
+## Configuration
+
+Update these values in `index.html` (search for `CONFIG` comment at top, then find/replace URLs):
+
+| Placeholder | Default |
+|-------------|---------|
+| Repository (HTTPS) | `https://git.nobswebdev.com/nobswebdev/nullcart` |
+| Repository (onion) | `http://4f5t7o2vgo4sdaliwax3isyxzfuxvbvkuwk4smfowutrvx2uneu4egyd.onion/nobswebdev/nullcart` |
+| Live demo (HTTPS) | `https://demo.nullcart.net/` |
+| Live demo (onion) | `http://3jh2ltksxtsmjidik3st6dawfdcheo2cyv2vth2365af75zdxnwqqsyd.onion/` |
+| Email | `contact@nullcart.net` |
+| SimpleX | `https://simplex.chat/contact#YOUR_HANDLE` |
+
+## Deploy to shared hosting (e.g. Servers Guru)
+
+1. Upload all files to your site's document root (`httpdocs` / `public_html` in Plesk).
+2. Ensure `index.html` is at the root.
+3. Enable Let's Encrypt SSL in your hosting panel.
+4. Visit your domain.
+
+No build step, no server-side runtime required.
+
+## Deploy elsewhere
+
+- **nginx:** serve the folder as static files; optional strict CSP header:
+  ```
+  Content-Security-Policy: default-src 'none'; style-src 'self'; img-src 'self'; base-uri 'self'
+  ```
+- **Cloudflare Pages / static host:** upload or push files, set publish directory to project root.
+- **Tor mirror:** same static files behind a hidden service (optional).
+
+## Screenshot checklist
+
+When your NullCart instance is running, capture and replace gallery placeholders:
+
+1. **Storefront** — product catalog / home page
+2. **Checkout** — cart checkout with XMR QR code
+3. **Order page** — order status with encrypted chat visible
+4. **CMS** — orders list or wallet dashboard
+
+Save as `assets/gallery/storefront.png` (etc.) and update `src` in `index.html`, or keep `.svg` placeholders until ready.
+
+## Local preview
+
+```bash
+cd nullcart_promo_website
+python3 -m http.server 8080
+```
+
+Open http://localhost:8080

css/styles.css

@@ -0,0 +1,794 @@
+
+:root {
+    --brand: #f78f1e;
+    --brand-deep: #d96f12;
+    --brand-light: #ffc87a;
+    --accent: #009ada;
+    --accent-light: #4db8e8;
+    --bg: #000000;
+    --surface: #0d0d0d;
+    --surface-raised: #141414;
+    --border: #262626;
+    --text: #f0f0f0;
+    --muted: #8b9298;
+    --max-width: 72rem;
+    --header-height: 5rem;
+    --radius: 0.5rem;
+    --radius-lg: 0.75rem;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+}
+
+body {
+    margin: 0;
+    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+    font-size: 1rem;
+    line-height: 1.6;
+    color: var(--text);
+    background-color: var(--bg);
+    -webkit-font-smoothing: antialiased;
+}
+
+img,
+svg {
+    display: block;
+    max-width: 100%;
+}
+
+a {
+    color: var(--accent);
+    text-decoration: none;
+}
+
+a:hover {
+    color: var(--accent-light);
+}
+
+:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+}
+
+.container {
+    width: min(100% - 2rem, var(--max-width));
+    margin-inline: auto;
+}
+
+
+.site-notice {
+    padding-block: 0.375rem;
+    text-align: center;
+    font-size: 0.75rem;
+    color: var(--muted);
+    background: var(--surface);
+    border-bottom: 1px solid var(--border);
+}
+
+.site-notice p {
+    margin: 0;
+}
+
+.site-header {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    min-height: var(--header-height);
+    background: rgba(0, 0, 0, 0.92);
+    border-bottom: 1px solid var(--border);
+    backdrop-filter: blur(8px);
+}
+
+.site-header__inner {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    min-height: var(--header-height);
+    padding-block: 0.75rem;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+.logo:hover {
+    opacity: 0.92;
+}
+
+.logo__img {
+    display: block;
+    width: 200px;
+    height: 50px;
+    max-width: none;
+    object-fit: contain;
+}
+
+.site-nav {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem 1.25rem;
+}
+
+.site-nav a {
+    color: var(--muted);
+    font-size: 0.9375rem;
+}
+
+.site-nav a:hover {
+    color: var(--text);
+}
+
+
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.625rem 1.25rem;
+    border: 1px solid transparent;
+    border-radius: var(--radius);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    line-height: 1.4;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, color 0.15s;
+}
+
+.btn--primary {
+    color: #fff;
+    background: var(--brand);
+    border-color: var(--brand);
+}
+
+.btn--primary:hover {
+    color: #fff;
+    background: var(--brand-deep);
+    border-color: var(--brand-deep);
+}
+
+.btn--ghost {
+    color: var(--text);
+    background: transparent;
+    border-color: var(--border);
+}
+
+.btn--ghost:hover {
+    color: var(--text);
+    border-color: var(--muted);
+    background: var(--surface);
+}
+
+
+.hero {
+    position: relative;
+    padding-block: clamp(3rem, 8vw, 6rem);
+    overflow: hidden;
+}
+
+.hero::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background:
+        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(247, 143, 30, 0.18), transparent),
+        radial-gradient(ellipse 50% 40% at 100% 50%, rgba(0, 154, 218, 0.1), transparent);
+    pointer-events: none;
+}
+
+.hero__watermark {
+    position: absolute;
+    right: 12%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: min(18rem, 40vw);
+    height: auto;
+    opacity: 0.06;
+    pointer-events: none;
+}
+
+.hero__content {
+    position: relative;
+    max-width: 42rem;
+}
+
+.hero__badge {
+    display: inline-block;
+    margin: 0 0 0.75rem;
+    padding: 0.375rem 0.75rem;
+    border: 1px solid rgba(247, 143, 30, 0.5);
+    border-radius: 999px;
+    background: rgba(247, 143, 30, 0.12);
+    color: var(--brand-light);
+    font-size: 0.8125rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+
+.hero h1 {
+    margin: 0 0 1.25rem;
+    font-size: clamp(2rem, 5vw, 3rem);
+    font-weight: 700;
+    line-height: 1.15;
+    letter-spacing: -0.03em;
+}
+
+.hero__highlights {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 0.75rem;
+    margin: 0 0 1.25rem;
+    padding: 0;
+    list-style: none;
+}
+
+.hero__highlights li {
+    padding: 0.375rem 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    background: var(--surface);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--text);
+}
+
+.hero__highlights li:nth-child(odd) {
+    border-color: rgba(247, 143, 30, 0.35);
+}
+
+.hero__highlights li:nth-child(even) {
+    border-color: rgba(0, 154, 218, 0.35);
+}
+
+.hero__sub {
+    margin: 0 0 2rem;
+    font-size: clamp(1rem, 2vw, 1.125rem);
+    color: var(--muted);
+    line-height: 1.7;
+}
+
+.hero__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-end;
+    gap: 1rem 1.25rem;
+}
+
+.link-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+}
+
+.link-group__label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--muted);
+}
+
+.repo-links {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+}
+
+.repo-links--center {
+    justify-content: center;
+}
+
+
+.section {
+    padding-block: clamp(3rem, 6vw, 5rem);
+}
+
+.section--border {
+    border-top: 1px solid var(--border);
+}
+
+.section__title {
+    margin: 0 0 0.5rem;
+    font-size: clamp(1.5rem, 3vw, 2rem);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+}
+
+.section__lead {
+    margin: 0 0 2rem;
+    max-width: 36rem;
+    color: var(--muted);
+}
+
+
+.about p {
+    margin: 0 0 1rem;
+    max-width: 42rem;
+    color: var(--muted);
+}
+
+.about p:last-child {
+    margin-bottom: 0;
+}
+
+
+.pillars {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.625rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.privacy-features {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
+    gap: 0.625rem;
+}
+
+.pillar {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.5rem 0.875rem;
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    background: var(--surface);
+    font-size: 0.8125rem;
+    font-weight: 500;
+    color: var(--text);
+    white-space: nowrap;
+}
+
+.pillar__dot {
+    width: 0.375rem;
+    height: 0.375rem;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.pillar:nth-child(odd) .pillar__dot {
+    background: var(--brand);
+}
+
+.pillar:nth-child(even) .pillar__dot {
+    background: var(--accent);
+}
+
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+}
+
+@media (max-width: 48rem) {
+    .features-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.feature-card {
+    padding: 1.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+}
+
+.feature-card--lead {
+    border-color: rgba(247, 143, 30, 0.4);
+    background: linear-gradient(135deg, rgba(247, 143, 30, 0.08), rgba(0, 154, 218, 0.05), var(--surface));
+}
+
+.feature-card__icon {
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: 1rem;
+    color: var(--accent);
+}
+
+.feature-card--lead .feature-card__icon {
+    color: var(--brand);
+}
+
+.feature-card h3 {
+    margin: 0 0 0.5rem;
+    font-size: 1.125rem;
+    font-weight: 600;
+}
+
+.feature-card__lead {
+    margin: 0 0 1rem;
+    font-size: 0.9375rem;
+    color: var(--muted);
+}
+
+.feature-card ul {
+    margin: 0;
+    padding-left: 1.125rem;
+    font-size: 0.9375rem;
+    color: var(--muted);
+}
+
+.feature-card li + li {
+    margin-top: 0.375rem;
+}
+
+
+.steps {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    counter-reset: step;
+}
+
+@media (max-width: 48rem) {
+    .steps {
+        grid-template-columns: 1fr;
+    }
+}
+
+.step {
+    padding: 1.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+}
+
+.step::before {
+    counter-increment: step;
+    content: counter(step);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    margin-bottom: 1rem;
+    border-radius: 50%;
+    background: var(--brand);
+    color: #fff;
+    font-size: 0.875rem;
+    font-weight: 700;
+}
+
+.step h3 {
+    margin: 0 0 0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.step p {
+    margin: 0;
+    font-size: 0.9375rem;
+    color: var(--muted);
+}
+
+
+.roadmap {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.25rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+@media (max-width: 48rem) {
+    .roadmap {
+        grid-template-columns: 1fr;
+    }
+}
+
+.roadmap__item {
+    padding: 1.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+}
+
+.roadmap__item h3 {
+    margin: 0 0 0.5rem;
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--brand);
+}
+
+.roadmap__item p {
+    margin: 0;
+    font-size: 0.9375rem;
+    color: var(--muted);
+}
+
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+}
+
+@media (max-width: 40rem) {
+    .gallery {
+        grid-template-columns: 1fr;
+    }
+}
+
+.gallery__item {
+    margin: 0;
+}
+
+.gallery__link {
+    display: block;
+    color: inherit;
+    cursor: zoom-in;
+}
+
+.gallery__link:hover {
+    color: inherit;
+}
+
+.gallery__link:hover .gallery__frame {
+    border-color: var(--accent);
+}
+
+.gallery__frame {
+    aspect-ratio: 16 / 10;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface-raised);
+    overflow: hidden;
+}
+
+.gallery__frame img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.gallery__caption {
+    margin-top: 0.625rem;
+    font-size: 0.875rem;
+    color: var(--muted);
+    text-align: center;
+}
+
+body:has(.lightbox:target) {
+    overflow: hidden;
+}
+
+.lightbox {
+    display: none;
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+}
+
+.lightbox:target {
+    display: flex;
+}
+
+.lightbox__backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.92);
+}
+
+.lightbox__img {
+    position: relative;
+    z-index: 1;
+    max-width: min(95vw, 75rem);
+    max-height: 90vh;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+}
+
+.lightbox__close {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.5rem;
+    height: 2.5rem;
+    font-size: 1.75rem;
+    line-height: 1;
+    color: var(--text);
+    background: var(--surface-raised);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+}
+
+.lightbox__close:hover {
+    color: var(--text);
+    border-color: var(--accent);
+}
+
+
+.cta-block {
+    text-align: center;
+    padding: 2.5rem 1.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+}
+
+.cta-block h2 {
+    margin: 0 0 0.5rem;
+    font-size: clamp(1.5rem, 3vw, 2rem);
+}
+
+.cta-block p {
+    margin: 0 0 1.5rem;
+    color: var(--muted);
+}
+
+.cta-block .repo-links {
+    margin-bottom: 1rem;
+}
+
+.cta-block__note {
+    margin-top: 1rem;
+    margin-bottom: 0;
+    font-size: 0.875rem;
+}
+
+
+.contact-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+    max-width: 36rem;
+}
+
+@media (max-width: 32rem) {
+    .contact-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.contact-card {
+    padding: 1.25rem 1.5rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+}
+
+.contact-card h3 {
+    margin: 0 0 0.375rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--muted);
+}
+
+.contact-card a {
+    font-size: 1rem;
+    font-weight: 500;
+    word-break: break-all;
+}
+
+.contact__note {
+    margin-top: 1.5rem;
+    font-size: 0.875rem;
+    color: var(--muted);
+}
+
+
+.site-footer {
+    padding-block: 2rem 2.5rem;
+    border-top: 1px solid var(--border);
+}
+
+.site-footer__inner {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+}
+
+.site-footer__nav {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem 1.25rem;
+}
+
+.site-footer__nav a {
+    font-size: 0.875rem;
+    color: var(--muted);
+}
+
+.site-footer__nav a:hover {
+    color: var(--text);
+}
+
+.site-footer__copy {
+    margin: 0;
+    font-size: 0.8125rem;
+    color: var(--muted);
+}
+
+.site-footer__disclaimer {
+    width: 100%;
+    margin: 1rem 0 0;
+    font-size: 0.75rem;
+    color: var(--muted);
+    opacity: 0.8;
+}
+
+.site-footer__repo {
+    width: 100%;
+    margin: 0.75rem 0 0;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    word-break: break-all;
+}
+
+.site-footer__links {
+    width: 100%;
+    margin-top: 0.75rem;
+}
+
+.site-footer__links-row {
+    margin: 0 0 0.375rem;
+    font-size: 0.8125rem;
+    line-height: 1.6;
+    word-break: break-all;
+}
+
+.site-footer__links-row:last-child {
+    margin-bottom: 0;
+}
+
+.site-footer__links-label {
+    display: inline-block;
+    min-width: 5.5rem;
+    margin-right: 0.5rem;
+    font-weight: 600;
+    color: var(--muted);
+}
+
+.site-footer__links a,
+.site-footer__repo a {
+    color: var(--muted);
+}
+
+.site-footer__links a:hover,
+.site-footer__repo a:hover {
+    color: var(--accent-light);
+}
+
+.site-footer__repo-sep {
+    margin-inline: 0.375rem;
+    color: var(--muted);
+    opacity: 0.6;
+}

index.html

@@ -0,0 +1,675 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      name="description"
+      content="NullCart — free, self-hosted Monero shop. No JS, no buyer accounts. Sell on clearnet and Tor."
+    />
+    <title>NullCart — Free self-hosted Monero shop</title>
+    <link rel="icon" href="assets/favicon.png" type="image/png" />
+    <link rel="stylesheet" href="css/styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div class="site-notice">
+        <div class="container">
+          <p>This site doesn't use JavaScript or cookies</p>
+        </div>
+      </div>
+      <div class="container site-header__inner">
+        <a class="logo" href="/">
+          <img
+            class="logo__img"
+            src="assets/logo.png"
+            width="200"
+            height="50"
+            alt="NullCart"
+          />
+        </a>
+        <nav class="site-nav" aria-label="Main">
+          <a href="#features">Features</a>
+          <a href="#gallery">Gallery</a>
+          <a href="#demo">Live demo</a>
+          <a href="#source">Open source</a>
+          <a href="#roadmap">Roadmap</a>
+          <a href="#contact">Contact</a>
+        </nav>
+      </div>
+    </header>
+
+    <main>
+      <section class="hero">
+        <div class="container">
+          <img
+            class="hero__watermark"
+            src="assets/favicon.png"
+            width="463"
+            height="539"
+            alt=""
+            aria-hidden="true"
+          />
+          <div class="hero__content">
+            <p class="hero__badge">Free &amp; open source</p>
+            <h1>Self-hosted Monero shop</h1>
+            <ul class="hero__highlights" aria-label="Key features">
+              <li>Non-custodial</li>
+              <li>No JS</li>
+              <li>No accounts</li>
+              <li>Clearnet &amp; Tor onion</li>
+            </ul>
+            <p class="hero__sub">
+              Complete crypto e-commerce solution, with no third parties
+              involved. Built with a mission to support the crypto economy.
+            </p>
+            <div class="hero__actions">
+              <div class="link-group">
+                <span class="link-group__label">Repository</span>
+                <div class="repo-links">
+                  <a
+                    class="btn btn--primary"
+                    href="https://git.nobswebdev.com/nobswebdev/nullcart"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    >Clearnet</a
+                  >
+                  <a
+                    class="btn btn--ghost"
+                    href="http://4f5t7o2vgo4sdaliwax3isyxzfuxvbvkuwk4smfowutrvx2uneu4egyd.onion/nobswebdev/nullcart"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    >Tor</a
+                  >
+                </div>
+              </div>
+              <div class="link-group">
+                <span class="link-group__label">Live demo</span>
+                <div class="repo-links">
+                  <a
+                    class="btn btn--primary"
+                    href="https://demo.nullcart.net/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    >Clearnet</a
+                  >
+                  <a
+                    class="btn btn--ghost"
+                    href="http://3jh2ltksxtsmjidik3st6dawfdcheo2cyv2vth2365af75zdxnwqqsyd.onion/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    >Tor</a
+                  >
+                </div>
+              </div>
+              <a class="btn btn--ghost" href="#features">See features</a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section section--border">
+        <div class="container about">
+          <h2 class="section__title">What is NullCart?</h2>
+          <p>
+            NullCart is an open-source, self-hosted shop for accepting Monero.
+            Run it on your server with a non-custodial wallet, and sell on
+            clearnet and Tor.
+          </p>
+          <p>
+            Built for the Monero community — designed for a maximum privacy
+            experience and full control over funds and infrastructure. Lower the
+            barrier to selling with XMR and help grow the circular crypto
+            economy.
+          </p>
+        </div>
+      </section>
+
+      <section class="section" id="privacy">
+        <div class="container">
+          <h2 class="section__title">Privacy features</h2>
+          <p class="section__lead">
+            Built for the Monero community — privacy at every layer of the buyer
+            experience.
+          </p>
+          <ul class="pillars privacy-features">
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> Free and open
+              source
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> No JS on
+              buyer shop
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> No buyer
+              accounts
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> Non-custodial
+              wallet
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> XMR-only
+              payments
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> Zero
+              third-party processors
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> Own wallet
+              integration
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> Encrypted
+              sensitive data
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> Auto order
+              data wipe
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> Self-hosted
+              clearnet + onion
+            </li>
+            <li class="pillar">
+              <span class="pillar__dot" aria-hidden="true"></span> SimpleX
+              merchant alerts
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section class="section section--border" id="features">
+        <div class="container">
+          <h2 class="section__title">Features</h2>
+          <p class="section__lead">
+            Everything you need to sell digital and physical goods with Monero.
+          </p>
+          <div class="features-grid">
+            <article class="feature-card feature-card--lead">
+              <svg
+                class="feature-card__icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                aria-hidden="true"
+              >
+                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+              </svg>
+              <h3>Privacy by design</h3>
+              <p class="feature-card__lead">
+                Your buyers don't need accounts. Your shop doesn't hoard their
+                data.
+              </p>
+              <ul>
+                <li>
+                  No JavaScript needed — the buyer shop runs without client-side
+                  scripts
+                </li>
+                <li>Works perfectly in Tor Browser strictest security mode</li>
+                <li>
+                  No sign-up, no profiles — orders opened with a private access
+                  token
+                </li>
+              </ul>
+            </article>
+
+            <article class="feature-card">
+              <svg
+                class="feature-card__icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                aria-hidden="true"
+              >
+                <circle cx="12" cy="12" r="10" />
+                <path d="M12 6v12M8 10h8M8 14h8" />
+              </svg>
+              <h3>Monero-native payments</h3>
+              <p class="feature-card__lead">
+                Built-in Monero integration. Zero third-party payment services.
+              </p>
+              <ul>
+                <li>
+                  Direct XMR payments to your own wallet — no custodial gateway
+                </li>
+                <li>
+                  Per-order addresses with QR codes; live rates, fiat display
+                </li>
+                <li>You hold the seed — funds never touch a middleman</li>
+              </ul>
+            </article>
+
+            <article class="feature-card">
+              <svg
+                class="feature-card__icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                aria-hidden="true"
+              >
+                <rect x="3" y="3" width="18" height="18" rx="2" />
+                <path d="M3 9h18M9 21V9" />
+              </svg>
+              <h3>E-commerce features</h3>
+              <p class="feature-card__lead">
+                A full storefront for digital and physical goods — catalog,
+                cart, checkout, and fulfillment.
+              </p>
+              <ul>
+                <li>
+                  Product catalog, categories, and variants with image galleries
+                </li>
+                <li>Shopping cart, checkout, and discount codes</li>
+                <li>
+                  Auto-deliver digital goods; quote and collect shipping for
+                  physical orders
+                </li>
+                <li>
+                  Order tracking, live payment status, and per-order buyer chat
+                </li>
+                <li>Custom branding — your logo, favicon, and shop name</li>
+                <li>
+                  Prices shown in fiat, paid in Monero with live exchange rates
+                </li>
+              </ul>
+            </article>
+
+            <article class="feature-card">
+              <svg
+                class="feature-card__icon"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                aria-hidden="true"
+              >
+                <rect x="2" y="3" width="20" height="14" rx="2" />
+                <path d="M8 21h8M12 17v4" />
+              </svg>
+              <h3>Self-hosted and yours</h3>
+              <p class="feature-card__lead">
+                Deploy on your VPS. Serve buyers on clearnet and Tor.
+              </p>
+              <ul>
+                <li>Step-by-step deployment guide in the repository</li>
+                <li>Docker Compose setup with HTTPS and onion address</li>
+                <li>
+                  Merchant CMS for products, orders, wallet, and notifications
+                </li>
+                <li>SimpleX bot alerts you on new orders and messages</li>
+              </ul>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="section">
+        <div class="container">
+          <h2 class="section__title">How it works</h2>
+          <p class="section__lead">
+            Three steps from zero to selling with Monero.
+          </p>
+          <ol class="steps">
+            <li class="step">
+              <h3>Deploy</h3>
+              <p>
+                Clone the repo, configure your server, and go live on HTTPS and
+                Tor.
+              </p>
+            </li>
+            <li class="step">
+              <h3>Set up your shop</h3>
+              <p>Add products in the CMS and upload your branding.</p>
+            </li>
+            <li class="step">
+              <h3>Sell</h3>
+              <p>
+                Buyers pay in XMR; you fulfill orders, chat when needed, get
+                notified via SimpleX.
+              </p>
+            </li>
+          </ol>
+        </div>
+      </section>
+
+      <section class="section section--border" id="gallery">
+        <div class="container">
+          <h2 class="section__title">Gallery</h2>
+          <p class="section__lead">
+            Screenshots from a running NullCart instance.
+          </p>
+          <div class="gallery">
+            <figure class="gallery__item">
+              <a
+                class="gallery__link"
+                href="#lightbox-storefront"
+                aria-label="View larger storefront screenshot"
+              >
+                <div class="gallery__frame">
+                  <img
+                    src="assets/gallery/storefront.png"
+                    width="1508"
+                    height="902"
+                    alt="Storefront product catalog"
+                  />
+                </div>
+              </a>
+              <figcaption class="gallery__caption">
+                Storefront — product catalog
+              </figcaption>
+            </figure>
+            <figure class="gallery__item">
+              <a
+                class="gallery__link"
+                href="#lightbox-checkout"
+                aria-label="View larger checkout screenshot"
+              >
+                <div class="gallery__frame">
+                  <img
+                    src="assets/gallery/checkout.png"
+                    width="1508"
+                    height="902"
+                    alt="Checkout with Monero QR code"
+                  />
+                </div>
+              </a>
+              <figcaption class="gallery__caption">
+                Checkout — XMR payment with QR code
+              </figcaption>
+            </figure>
+            <figure class="gallery__item">
+              <a
+                class="gallery__link"
+                href="#lightbox-order"
+                aria-label="View larger order page screenshot"
+              >
+                <div class="gallery__frame">
+                  <img
+                    src="assets/gallery/order.png"
+                    width="1508"
+                    height="902"
+                    alt="Order page with encrypted chat"
+                  />
+                </div>
+              </a>
+              <figcaption class="gallery__caption">
+                Order page — status and encrypted chat
+              </figcaption>
+            </figure>
+            <figure class="gallery__item">
+              <a
+                class="gallery__link"
+                href="#lightbox-cms"
+                aria-label="View larger CMS screenshot"
+              >
+                <div class="gallery__frame">
+                  <img
+                    src="assets/gallery/cms.png"
+                    width="1816"
+                    height="902"
+                    alt="Merchant CMS dashboard"
+                  />
+                </div>
+              </a>
+              <figcaption class="gallery__caption">
+                CMS - manage your shop
+              </figcaption>
+            </figure>
+          </div>
+
+          <div
+            id="lightbox-storefront"
+            class="lightbox"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Storefront product catalog"
+          >
+            <a
+              class="lightbox__backdrop"
+              href="#gallery"
+              aria-label="Close"
+            ></a>
+            <img
+              class="lightbox__img"
+              src="assets/gallery/storefront.png"
+              width="1508"
+              height="902"
+              alt="Storefront product catalog"
+            />
+            <a class="lightbox__close" href="#gallery" aria-label="Close"
+              >&times;</a
+            >
+          </div>
+          <div
+            id="lightbox-checkout"
+            class="lightbox"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Checkout with Monero QR code"
+          >
+            <a
+              class="lightbox__backdrop"
+              href="#gallery"
+              aria-label="Close"
+            ></a>
+            <img
+              class="lightbox__img"
+              src="assets/gallery/checkout.png"
+              width="1508"
+              height="902"
+              alt="Checkout with Monero QR code"
+            />
+            <a class="lightbox__close" href="#gallery" aria-label="Close"
+              >&times;</a
+            >
+          </div>
+          <div
+            id="lightbox-order"
+            class="lightbox"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Order page with encrypted chat"
+          >
+            <a
+              class="lightbox__backdrop"
+              href="#gallery"
+              aria-label="Close"
+            ></a>
+            <img
+              class="lightbox__img"
+              src="assets/gallery/order.png"
+              width="1508"
+              height="902"
+              alt="Order page with encrypted chat"
+            />
+            <a class="lightbox__close" href="#gallery" aria-label="Close"
+              >&times;</a
+            >
+          </div>
+          <div
+            id="lightbox-cms"
+            class="lightbox"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Merchant CMS dashboard"
+          >
+            <a
+              class="lightbox__backdrop"
+              href="#gallery"
+              aria-label="Close"
+            ></a>
+            <img
+              class="lightbox__img"
+              src="assets/gallery/cms.png"
+              width="1816"
+              height="902"
+              alt="Merchant CMS dashboard"
+            />
+            <a class="lightbox__close" href="#gallery" aria-label="Close"
+              >&times;</a
+            >
+          </div>
+        </div>
+      </section>
+
+      <section class="section section--border" id="demo">
+        <div class="container">
+          <div class="cta-block">
+            <h2>Live demo</h2>
+            <p>
+              Try a running NullCart shop — browse products, cart, and checkout
+              flow. Test payments with stagenet Monero.
+            </p>
+            <div class="repo-links repo-links--center">
+              <a
+                class="btn btn--primary"
+                href="https://demo.nullcart.net/"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Clearnet</a
+              >
+              <a
+                class="btn btn--ghost"
+                href="http://3jh2ltksxtsmjidik3st6dawfdcheo2cyv2vth2365af75zdxnwqqsyd.onion/"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Tor</a
+              >
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="section section--border" id="source">
+        <div class="container">
+          <div class="cta-block">
+            <h2>Open source</h2>
+            <p>Inspect the code, run it yourself, no vendor lock-in.</p>
+            <div class="repo-links repo-links--center">
+              <a
+                class="btn btn--primary"
+                href="https://git.nobswebdev.com/nobswebdev/nullcart"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Clearnet</a
+              >
+              <a
+                class="btn btn--ghost"
+                href="http://4f5t7o2vgo4sdaliwax3isyxzfuxvbvkuwk4smfowutrvx2uneu4egyd.onion/nobswebdev/nullcart"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Tor</a
+              >
+            </div>
+            <p class="cta-block__note">Deployment guide in the repo.</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="section section--border" id="roadmap">
+        <div class="container">
+          <h2 class="section__title">Roadmap</h2>
+          <p class="section__lead">What's planned next for NullCart.</p>
+          <ul class="roadmap">
+            <li class="roadmap__item">
+              <h3>NullCart directory</h3>
+              <p>
+                A central website that lists all instances, with an advanced
+                rating system and space for the community.
+              </p>
+            </li>
+            <li class="roadmap__item">
+              <h3>More privacy coins</h3>
+              <p>
+                Support for additional privacy-focused cryptocurrencies beyond
+                Monero.
+              </p>
+            </li>
+            <li class="roadmap__item">
+              <h3>More e-commerce features</h3>
+              <p>Expanded storefront, checkout, and merchant tools.</p>
+            </li>
+          </ul>
+        </div>
+      </section>
+
+      <section class="section section--border" id="contact">
+        <div class="container">
+          <h2 class="section__title">Contact</h2>
+          <p class="section__lead">
+            Questions, feedback, or collaboration — reach out.
+          </p>
+          <div class="contact-grid">
+            <div class="contact-card">
+              <h3>Email</h3>
+              <a href="mailto:nobswebdev@pm.me">nobswebdev@pm.me</a>
+            </div>
+            <div class="contact-card">
+              <h3>SimpleX</h3>
+              <a
+                href="https://smp10.simplex.im/a#KjqWjGDV0h-c3BIBb4HfKwsRcKTIfEJRsAc8eCrlACA"
+                target="_blank"
+                rel="noopener noreferrer"
+                >Contact via SimpleX</a
+              >
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer class="site-footer">
+      <div class="container site-footer__inner">
+        <p class="site-footer__copy">&copy; 2026 NullCart by nobswebdev.</p>
+        <nav class="site-footer__nav" aria-label="Footer">
+          <a href="#features">Features</a>
+          <a href="#gallery">Gallery</a>
+          <a href="#demo">Demo</a>
+          <a href="#source">Open source</a>
+          <a href="#roadmap">Roadmap</a>
+          <a href="#contact">Contact</a>
+        </nav>
+        <div class="site-footer__links">
+          <p class="site-footer__links-row">
+            <span class="site-footer__links-label">Repository</span>
+            <a
+              href="https://git.nobswebdev.com/nobswebdev/nullcart"
+              target="_blank"
+              rel="noopener noreferrer"
+              >git.nobswebdev.com</a
+            >
+            <span class="site-footer__repo-sep" aria-hidden="true">·</span>
+            <a
+              href="http://4f5t7o2vgo4sdaliwax3isyxzfuxvbvkuwk4smfowutrvx2uneu4egyd.onion/nobswebdev/nullcart"
+              target="_blank"
+              rel="noopener noreferrer"
+              >4f5t7o2vgo4sdaliwax3isyxzfuxvbvkuwk4smfowutrvx2uneu4egyd.onion</a
+            >
+          </p>
+          <p class="site-footer__links-row">
+            <span class="site-footer__links-label">Live demo</span>
+            <a
+              href="https://demo.nullcart.net/"
+              target="_blank"
+              rel="noopener noreferrer"
+              >demo.nullcart.net</a
+            >
+            <span class="site-footer__repo-sep" aria-hidden="true">·</span>
+            <a
+              href="http://3jh2ltksxtsmjidik3st6dawfdcheo2cyv2vth2365af75zdxnwqqsyd.onion/"
+              target="_blank"
+              rel="noopener noreferrer"
+              >3jh2ltksxtsmjidik3st6dawfdcheo2cyv2vth2365af75zdxnwqqsyd.onion</a
+            >
+          </p>
+        </div>
+      </div>
+    </footer>
+  </body>
+</html>