Improve hero layout, gallery grid, and anchor scroll offset.

Stack hero actions in a row, center the fifth gallery item, and offset in-page navigation for the sticky header.

css/styles.css

@@ -1,4 +1,3 @@
-
 :root {
   --brand: #f78f1e;
   --brand-deep: #d96f12;
@@ -13,6 +12,9 @@
   --muted: #8b9298;
   --max-width: 72rem;
   --header-height: 5rem;
+  --notice-bar-height: 1.875rem;
+  --site-header-height: calc(var(--header-height) + var(--notice-bar-height));
+  --sticky-offset: calc((var(--site-header-height) + 0.5rem) * 0.5);
   --radius: 0.5rem;
   --radius-lg: 0.75rem;
 }
@@ -27,6 +29,10 @@ html {
   scroll-behavior: smooth;
 }
 
+main > section[id] {
+  scroll-margin-top: var(--sticky-offset);
+}
+
 @media (prefers-reduced-motion: reduce) {
   html {
     scroll-behavior: auto;
@@ -35,7 +41,11 @@ html {
 
 body {
   margin: 0;
-    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    sans-serif;
   font-size: 1rem;
   line-height: 1.6;
   color: var(--text);
@@ -68,7 +78,6 @@ a:hover {
   margin-inline: auto;
 }
 
-
 .site-notice {
   padding-block: 0.375rem;
   text-align: center;
@@ -145,7 +154,6 @@ a:hover {
   color: var(--text);
 }
 
-
 .btn {
   display: inline-flex;
   align-items: center;
@@ -157,7 +165,10 @@ a:hover {
   font-weight: 600;
   line-height: 1.4;
   cursor: pointer;
-    transition: background 0.15s, border-color 0.15s, color 0.15s;
+  transition:
+    background 0.15s,
+    border-color 0.15s,
+    color 0.15s;
 }
 
 .btn--primary {
@@ -184,7 +195,6 @@ a:hover {
   background: var(--surface);
 }
 
-
 .hero {
   position: relative;
   padding-block: clamp(3rem, 8vw, 6rem);
@@ -196,8 +206,16 @@ a:hover {
   position: absolute;
   inset: 0;
   background:
-        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(247, 143, 30, 0.18), transparent),
+    radial-gradient(
-        radial-gradient(ellipse 50% 40% at 100% 50%, rgba(0, 154, 218, 0.1), transparent);
+      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;
 }
 
@@ -243,7 +261,7 @@ a:hover {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem 0.75rem;
-    margin: 0 0 1.25rem;
+  margin: 0;
   padding: 0;
   list-style: none;
 }
@@ -267,13 +285,13 @@ a:hover {
 }
 
 .hero__sub {
-    margin: 0 0 2rem;
+  margin: 2rem 0 2rem;
   font-size: clamp(1rem, 2vw, 1.125rem);
   color: var(--muted);
   line-height: 1.7;
 }
 
-.hero__actions {
+.hero__actions-row {
   display: flex;
   flex-wrap: wrap;
   align-items: flex-end;
@@ -304,7 +322,6 @@ a:hover {
   justify-content: center;
 }
 
-
 .section {
   padding-block: clamp(3rem, 6vw, 5rem);
 }
@@ -326,7 +343,6 @@ a:hover {
   color: var(--muted);
 }
 
-
 .about p {
   margin: 0 0 1rem;
   max-width: 42rem;
@@ -337,7 +353,6 @@ a:hover {
   margin-bottom: 0;
 }
 
-
 .pillars {
   display: flex;
   flex-wrap: wrap;
@@ -382,7 +397,6 @@ a:hover {
   background: var(--accent);
 }
 
-
 .features-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -404,7 +418,12 @@ a:hover {
 
 .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));
+  background: linear-gradient(
+    135deg,
+    rgba(247, 143, 30, 0.08),
+    rgba(0, 154, 218, 0.05),
+    var(--surface)
+  );
 }
 
 .feature-card__icon {
@@ -441,7 +460,6 @@ a:hover {
   margin-top: 0.375rem;
 }
 
-
 .steps {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -493,7 +511,6 @@ a:hover {
   color: var(--muted);
 }
 
-
 .roadmap {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
@@ -529,7 +546,6 @@ a:hover {
   color: var(--muted);
 }
 
-
 .gallery {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -542,6 +558,14 @@ a:hover {
   }
 }
 
+@media (min-width: 40.01rem) {
+  .gallery__item--last {
+    grid-column: 1 / -1;
+    justify-self: center;
+    width: calc((100% - 1.25rem) / 2);
+  }
+}
+
 .gallery__item {
   margin: 0;
 }
@@ -640,7 +664,6 @@ body:has(.lightbox:target) {
   border-color: var(--accent);
 }
 
-
 .cta-block {
   text-align: center;
   padding: 2.5rem 1.5rem;
@@ -669,7 +692,6 @@ body:has(.lightbox:target) {
   font-size: 0.875rem;
 }
 
-
 .contact-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -711,7 +733,6 @@ body:has(.lightbox:target) {
   color: var(--muted);
 }
 
-
 .site-footer {
   padding-block: 2rem 2.5rem;
   border-top: 1px solid var(--border);

index.html

@@ -5,9 +5,9 @@
     <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."
+      content="NullCart - free, self-hosted, privacy-focused crypto shop. Sell on clearnet and Tor."
     />
-    <title>NullCart — Free self-hosted Monero shop</title>
+    <title>NullCart - free self-hosted crypto shop</title>
     <link rel="icon" href="assets/favicon.png" type="image/png" />
     <link rel="stylesheet" href="css/styles.css" />
   </head>
@@ -60,7 +60,7 @@
           />
           <div class="hero__content">
             <p class="hero__badge">Free &amp; open source</p>
-            <h1>Self-hosted Monero shop</h1>
+            <h1>Self-hosted crypto shop</h1>
             <ul class="hero__highlights" aria-label="Key features">
               <li>Non-custodial</li>
               <li>No JS</li>
@@ -68,10 +68,11 @@
               <li>Clearnet &amp; Tor onion</li>
             </ul>
             <p class="hero__sub">
-              Complete crypto e-commerce solution, with no third parties
+              Complete, privacy-focused crypto e-commerce solution. Built with a
-              involved. Built with a mission to support the crypto economy.
+              mission to support the crypto economy.
             </p>
             <div class="hero__actions">
+              <div class="hero__actions-row">
                 <div class="link-group">
                   <span class="link-group__label">Repository</span>
                   <div class="repo-links">
@@ -114,21 +115,18 @@
               </div>
             </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.
+            NullCart is a free, open-source crypto shop you host yourself. You
-            Run it on your server with a non-custodial wallet, and sell on
+            run it on your server with built-in non-custodial wallets - no
-            clearnet and Tor.
+            payment processors in the middle. Buyers pay in crypto without
-          </p>
+            accounts, and the storefront runs without JavaScript. You manage
-          <p>
+            products and orders from a merchant CMS, on clearnet and Tor.
-            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>
@@ -137,8 +135,7 @@
         <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
+            Privacy at every layer of the buyer experience.
-            experience.
           </p>
           <ul class="pillars privacy-features">
             <li class="pillar">
@@ -155,11 +152,11 @@
             </li>
             <li class="pillar">
               <span class="pillar__dot" aria-hidden="true"></span> Non-custodial
-              wallet
+              wallets
             </li>
             <li class="pillar">
-              <span class="pillar__dot" aria-hidden="true"></span> XMR-only
+              <span class="pillar__dot" aria-hidden="true"></span> Monero
-              payments
+              supported
             </li>
             <li class="pillar">
               <span class="pillar__dot" aria-hidden="true"></span> Zero
@@ -193,7 +190,7 @@
         <div class="container">
           <h2 class="section__title">Features</h2>
           <p class="section__lead">
-            Everything you need to sell digital and physical goods with Monero.
+            Everything you need to sell digital and physical goods with crypto.
           </p>
           <div class="features-grid">
             <article class="feature-card feature-card--lead">
@@ -214,12 +211,11 @@
               </p>
               <ul>
                 <li>
-                  No JavaScript needed — the buyer shop runs without client-side
+                  No JavaScript on the buyer shop - no client-side scripts
-                  scripts
                 </li>
-                <li>Works perfectly in Tor Browser strictest security mode</li>
+                <li>Works in Tor Browser strictest security mode</li>
                 <li>
-                  No sign-up, no profiles — orders opened with a private access
+                  No sign-up or profiles - orders open with a private access
                   token
                 </li>
               </ul>
@@ -237,18 +233,19 @@
                 <circle cx="12" cy="12" r="10" />
                 <path d="M12 6v12M8 10h8M8 14h8" />
               </svg>
-              <h3>Monero-native payments</h3>
+              <h3>Direct crypto payments</h3>
               <p class="feature-card__lead">
-                Built-in Monero integration. Zero third-party payment services.
+                Built-in crypto wallets. No third-party payment services.
               </p>
               <ul>
                 <li>
-                  Direct XMR payments to your own wallet — no custodial gateway
+                  Payments go straight to your wallets - no custodial gateway
                 </li>
                 <li>
-                  Per-order addresses with QR codes; live rates, fiat display
+                  Per-order addresses with QR codes, live rates, and fiat
+                  display
                 </li>
-                <li>You hold the seed — funds never touch a middleman</li>
+                <li>You hold the keys - funds never touch a middleman</li>
               </ul>
             </article>
 
@@ -266,7 +263,7 @@
               </svg>
               <h3>E-commerce features</h3>
               <p class="feature-card__lead">
-                A full storefront for digital and physical goods — catalog,
+                A full storefront for digital and physical goods - catalog,
                 cart, checkout, and fulfillment.
               </p>
               <ul>
@@ -275,15 +272,15 @@
                 </li>
                 <li>Shopping cart, checkout, and discount codes</li>
                 <li>
-                  Auto-deliver digital goods; quote and collect shipping for
+                  Auto-deliver digital goods and quote shipping for physical
-                  physical orders
+                  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>Custom branding - your logo, favicon, and shop name</li>
                 <li>
-                  Prices shown in fiat, paid in Monero with live exchange rates
+                  Prices shown in fiat, paid in crypto with live exchange rates
                 </li>
               </ul>
             </article>
@@ -321,7 +318,7 @@
         <div class="container">
           <h2 class="section__title">How it works</h2>
           <p class="section__lead">
-            Three steps from zero to selling with Monero.
+            Three steps from zero to selling with crypto.
           </p>
           <ol class="steps">
             <li class="step">
@@ -338,8 +335,8 @@
             <li class="step">
               <h3>Sell</h3>
               <p>
-                Buyers pay in XMR; you fulfill orders, chat when needed, get
+                Buyers pay in crypto. You fulfill orders, chat when needed, and
-                notified via SimpleX.
+                get notified via SimpleX.
               </p>
             </li>
           </ol>
@@ -362,14 +359,33 @@
                 <div class="gallery__frame">
                   <img
                     src="assets/gallery/storefront.png"
-                    width="1508"
+                    width="1469"
-                    height="902"
+                    height="899"
                     alt="Storefront product catalog"
                   />
                 </div>
               </a>
               <figcaption class="gallery__caption">
-                Storefront — product catalog
+                Storefront - product catalog
+              </figcaption>
+            </figure>
+            <figure class="gallery__item">
+              <a
+                class="gallery__link"
+                href="#lightbox-cart"
+                aria-label="View larger cart screenshot"
+              >
+                <div class="gallery__frame">
+                  <img
+                    src="assets/gallery/cart.png"
+                    width="1469"
+                    height="899"
+                    alt="Shopping cart"
+                  />
+                </div>
+              </a>
+              <figcaption class="gallery__caption">
+                Cart - shopping cart
               </figcaption>
             </figure>
             <figure class="gallery__item">
@@ -381,14 +397,14 @@
                 <div class="gallery__frame">
                   <img
                     src="assets/gallery/checkout.png"
-                    width="1508"
+                    width="1469"
-                    height="902"
+                    height="899"
-                    alt="Checkout with Monero QR code"
+                    alt="Checkout with crypto QR code"
                   />
                 </div>
               </a>
               <figcaption class="gallery__caption">
-                Checkout — XMR payment with QR code
+                Checkout - crypto payment with QR code
               </figcaption>
             </figure>
             <figure class="gallery__item">
@@ -400,17 +416,17 @@
                 <div class="gallery__frame">
                   <img
                     src="assets/gallery/order.png"
-                    width="1508"
+                    width="1469"
-                    height="902"
+                    height="899"
                     alt="Order page with encrypted chat"
                   />
                 </div>
               </a>
               <figcaption class="gallery__caption">
-                Order page — status and encrypted chat
+                Order page - status and encrypted chat
               </figcaption>
             </figure>
-            <figure class="gallery__item">
+            <figure class="gallery__item gallery__item--last">
               <a
                 class="gallery__link"
                 href="#lightbox-cms"
@@ -446,8 +462,8 @@
             <img
               class="lightbox__img"
               src="assets/gallery/storefront.png"
-              width="1508"
+              width="1469"
-              height="902"
+              height="899"
               alt="Storefront product catalog"
             />
             <a class="lightbox__close" href="#gallery" aria-label="Close"
@@ -459,7 +475,7 @@
             class="lightbox"
             role="dialog"
             aria-modal="true"
-            aria-label="Checkout with Monero QR code"
+            aria-label="Checkout with crypto QR code"
           >
             <a
               class="lightbox__backdrop"
@@ -469,9 +485,32 @@
             <img
               class="lightbox__img"
               src="assets/gallery/checkout.png"
-              width="1508"
+              width="1469"
-              height="902"
+              height="899"
-              alt="Checkout with Monero QR code"
+              alt="Checkout with crypto QR code"
+            />
+            <a class="lightbox__close" href="#gallery" aria-label="Close"
+              >&times;</a
+            >
+          </div>
+          <div
+            id="lightbox-cart"
+            class="lightbox"
+            role="dialog"
+            aria-modal="true"
+            aria-label="Shopping cart"
+          >
+            <a
+              class="lightbox__backdrop"
+              href="#gallery"
+              aria-label="Close"
+            ></a>
+            <img
+              class="lightbox__img"
+              src="assets/gallery/cart.png"
+              width="1469"
+              height="899"
+              alt="Shopping cart"
             />
             <a class="lightbox__close" href="#gallery" aria-label="Close"
               >&times;</a
@@ -492,8 +531,8 @@
             <img
               class="lightbox__img"
               src="assets/gallery/order.png"
-              width="1508"
+              width="1469"
-              height="902"
+              height="899"
               alt="Order page with encrypted chat"
             />
             <a class="lightbox__close" href="#gallery" aria-label="Close"
@@ -531,8 +570,8 @@
           <div class="cta-block">
             <h2>Live demo</h2>
             <p>
-              Try a running NullCart shop — browse products, cart, and checkout
+              Try a running NullCart shop. Browse products, cart, and checkout.
-              flow. Test payments with stagenet Monero.
+              Test payments on test networks.
             </p>
             <div class="repo-links repo-links--center">
               <a
@@ -593,10 +632,10 @@
               </p>
             </li>
             <li class="roadmap__item">
-              <h3>More privacy coins</h3>
+              <h3>More cryptocurrencies</h3>
               <p>
-                Support for additional privacy-focused cryptocurrencies beyond
+                Support for more coins over time, with the same non-custodial
-                Monero.
+                wallet model.
               </p>
             </li>
             <li class="roadmap__item">
@@ -611,7 +650,7 @@
         <div class="container">
           <h2 class="section__title">Contact</h2>
           <p class="section__lead">
-            Questions, feedback, or collaboration — reach out.
+            Questions, feedback, or collaboration - reach out.
           </p>
           <div class="contact-grid">
             <div class="contact-card">