feat: MyPointVPN landing on mypointvpn.sokolab.xyz and post about Serverus

Landings get per-project themes (params.theme, params.fonts) and optional
chat/start/note/engine sections, so they don't look like clones.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

layouts/projects/single.html

@@ -6,7 +6,13 @@
 */ -}}
 {{- $p := .Params -}}
 {{- $home := cond (eq .Language.Lang hugo.Sites.Default.Language.Lang) "/" (printf "/%s/" .Language.Lang) -}}
-{{- $css := resources.Get "css/landing.css" | minify | fingerprint -}}
+{{- $css := resources.Get "css/landing.css" -}}
+{{- /* params.theme adds css/landing-<theme>.css on top of the base styles */ -}}
+{{- with $p.theme }}{{ with resources.Get (printf "css/landing-%s.css" .) }}
+  {{- $css = slice $css . | resources.Concat (printf "css/landing-%s.bundle.css" $p.theme) }}
+{{- end }}{{ end -}}
+{{- $css = $css | minify | fingerprint -}}
+{{- $fonts := $p.fonts | default "family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;600" -}}
 <!doctype html>
 <html lang="{{ .Language.Lang }}">
 <head>
@@ -26,10 +32,10 @@
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?{{ $fonts | safeURL }}&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="{{ $css.RelPermalink }}" integrity="{{ $css.Data.Integrity }}">
 </head>
-<body>
+<body{{ with $p.theme }} class="theme-{{ . }}"{{ end }}>
   <header class="nav">
     <div class="wrap nav__row">
       <a class="nav__logo" href="{{ $home }}">{{ .Title }}</a>
@@ -44,14 +50,24 @@
   </header>
 
   <main>
-    <section class="hero">
+    <section class="hero{{ if $p.chat }} hero--split{{ end }}">
       <div class="wrap">
+        <div class="hero__text">
         {{ with $p.badge }}<p class="badge">{{ . }}</p>{{ end }}
         <h1 class="hero__title">{{ $p.tagline }}</h1>
         <p class="hero__lead">{{ .Description }}</p>
         <div class="hero__cta">
           {{ range $p.cta }}<a class="btn{{ if .primary }} btn--primary{{ end }}" href="{{ .href }}"{{ if hasPrefix .href "http" }} target="_blank" rel="noopener"{{ end }}>{{ .label }}</a>{{ end }}
         </div>
+        </div>
+        {{ with $p.chat }}
+        <div class="chat" aria-label="{{ .title }}">
+          <p class="chat__title">{{ .title }}</p>
+          {{ range .messages }}
+          <p class="chat__msg chat__msg--{{ .from }}">{{ .text | markdownify }}</p>
+          {{ end }}
+        </div>
+        {{ end }}
       </div>
     </section>
 
@@ -103,6 +119,52 @@
     </section>
     {{ end }}
 
+    {{ with $p.start }}
+    <section class="section" id="start">
+      <div class="wrap">
+        <h2>{{ .title }}</h2>
+        <ol class="start">
+          {{ range .steps }}
+          <li>
+            <h3>{{ .title | markdownify }}</h3>
+            <p>{{ .text | markdownify }}</p>
+          </li>
+          {{ end }}
+        </ol>
+      </div>
+    </section>
+    {{ end }}
+
+    {{ with $p.note }}
+    <section class="section" id="note">
+      <div class="wrap">
+        <aside class="note">
+          <h2>{{ .title }}</h2>
+          <p>{{ .text | markdownify }}</p>
+        </aside>
+      </div>
+    </section>
+    {{ end }}
+
+    {{ with $p.engine }}
+    <section class="section engine" id="engine">
+      <div class="wrap">
+        {{ with .kicker }}<p class="engine__kicker">{{ . }}</p>{{ end }}
+        <h2>{{ .title }}</h2>
+        <p class="section__lead">{{ .lead | markdownify }}</p>
+        <ul class="engine__list">
+          {{ range .items }}<li>{{ . | markdownify }}</li>{{ end }}
+        </ul>
+        {{ with .callout }}
+        <div class="engine__callout">
+          <h3>{{ .title }}</h3>
+          <p>{{ .text | markdownify }}</p>
+        </div>
+        {{ end }}
+      </div>
+    </section>
+    {{ end }}
+
     {{ with $p.limits }}
     <section class="section section--alt" id="limits">
       <div class="wrap">