Improve landing page: hero CTA, founding member note, share box on tak

- Add hero CTA button linking directly to signup form (#tilmeld anchor)
- Add id='tilmeld' anchor to signup section
- Add founding-note: early signups shape the initiative
- Improve /tak page: share box with pre-written copy-paste text + clipboard button
- Update tak contact link styling (remove inline styles)
- Add CSS for .hero-cta, .founding-note, .share-box, .copy-btn, .copy-confirm

static/style.css

@@ -103,6 +103,24 @@ header nav {
     padding-left: 1rem;
 }
 
+.hero-cta {
+    display: inline-block;
+    margin-top: 2rem;
+    padding: 0.875rem 2rem;
+    background: var(--primary);
+    color: var(--white);
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.975rem;
+    border-radius: 0;
+    transition: background 0.15s;
+    letter-spacing: 0.01em;
+}
+
+.hero-cta:hover {
+    background: var(--primary-d);
+}
+
 /* ── Sections ────────────────────────── */
 .section {
     padding: 3.5rem 1.5rem;
@@ -356,6 +374,16 @@ header nav {
     padding-left: 1rem;
 }
 
+.form-section .founding-note {
+    color: var(--dark) !important;
+    font-size: 0.9rem !important;
+    margin-bottom: 1rem;
+    background: var(--primary-bg);
+    border-left: 3px solid var(--primary);
+    padding: 0.75rem 1rem;
+    line-height: 1.6;
+}
+
 .signup-form {
     margin-top: 1.5rem;
 }
@@ -554,6 +582,85 @@ footer {
     text-decoration: underline;
 }
 
+.tak-contact {
+    font-size: 0.82rem;
+    color: var(--muted);
+    margin-top: 1.25rem;
+    margin-bottom: 0;
+}
+
+.tak-contact a {
+    color: var(--primary);
+    text-decoration: none;
+}
+
+.tak-contact a:hover {
+    text-decoration: underline;
+}
+
+/* ── Share box (tak page) ────────────── */
+.share-box {
+    margin: 2rem 0 1.5rem;
+    background: var(--gray-10);
+    border: 1px solid var(--gray-20);
+    padding: 1.5rem;
+    text-align: left;
+}
+
+.share-heading {
+    font-size: 0.9rem !important;
+    font-weight: 700;
+    color: var(--dark) !important;
+    margin-bottom: 0.4rem !important;
+}
+
+.share-sub {
+    font-size: 0.82rem !important;
+    color: var(--muted) !important;
+    margin-bottom: 1rem !important;
+    line-height: 1.55;
+}
+
+.share-text {
+    background: var(--white);
+    border: 1px solid var(--gray-20);
+    padding: 0.875rem 1rem;
+    font-size: 0.82rem;
+    color: var(--text);
+    line-height: 1.55;
+    font-family: var(--mono);
+    margin-bottom: 0.75rem;
+    word-break: break-word;
+    user-select: all;
+    cursor: text;
+}
+
+.copy-btn {
+    background: var(--dark);
+    color: var(--white);
+    border: none;
+    padding: 0.5rem 1.25rem;
+    font-size: 0.82rem;
+    font-weight: 600;
+    border-radius: 0;
+    cursor: pointer;
+    font-family: inherit;
+    transition: background 0.15s;
+}
+
+.copy-btn:hover {
+    background: #333;
+}
+
+.copy-confirm {
+    display: none;
+    margin-left: 0.75rem;
+    font-size: 0.82rem;
+    color: var(--green);
+    font-family: var(--mono);
+    font-weight: 500;
+}
+
 /* ── Admin ───────────────────────────── */
 .admin-section {
     padding: 2rem 1.5rem;

templates/index.html

@@ -14,6 +14,7 @@
             Det rammer dig, der kører egne navneservere og aldrig har haft brug for hjælp.
             Vi undersøger, om vi kan gøre noget ved det — på vores egne præmisser.
         </p>
+        <a href="#tilmeld" class="hero-cta">Tilmeld din interesse →</a>
     </div>
 </section>
 
@@ -104,10 +105,11 @@
 </section>
 
 <!-- 6. Signup -->
-<section class="section form-section">
+<section class="section form-section" id="tilmeld">
     <div class="section-inner">
         <h2>Er du interesseret?</h2>
         <p class="lead">Tilmeld dig som interesseret — det forpligter dig til ingenting.</p>
+        <p class="founding-note">De første, der tilmelder sig, er med til at afgøre, om idéen er levedygtig — og får direkte indflydelse på, hvordan foreningen eventuelt formes.</p>
         <p class="disclaimer">
             Vi bruger dine oplysninger til at vurdere, om der er tilstrækkelig interesse til at gå videre.
             Ingen spam, ingen salg, ingen automatiske abonnementer. Kun en enkelt opdatering, når vi ved mere.

templates/tak.html

@@ -12,10 +12,33 @@
             Vi vender tilbage med en enkelt opdatering, når vi ved, om der er tilstrækkelig
             interesse til at gå videre med idéen.
         </p>
-        <p style="font-size: 0.8rem; color: #9ca3af;">
+
-            Spørgsmål? Skriv til <a href="mailto:info@punktfri.dk" style="color: #6366f1;">info@punktfri.dk</a>
+        <div class="share-box">
+            <p class="share-heading">Kender du andre, der er i samme situation?</p>
+            <p class="share-sub">
+                Jo flere selvhostere der tilkendegiver interesse, jo bedre argumenterer vi overfor
+                Punktum dk og potentielle medstiftere. Send dem linket.
+            </p>
+            <div class="share-text" id="shareText">Punktum dk tvinger fra 2026 alle .dk-domæneejere ind under en kommerciel forhandler — selvom du kører egne navneservere og aldrig har haft brug for hjælp. PunktFri undersøger, om vi kan lave en non-profit registrator til os selv. Tilmeld din interesse: https://punktfri.dk</div>
+            <button class="copy-btn" onclick="copyShare()">Kopiér tekst</button>
+            <span class="copy-confirm" id="copyConfirm">Kopieret!</span>
+        </div>
+
+        <p class="tak-contact">
+            Spørgsmål? Skriv til <a href="mailto:info@punktfri.dk">info@punktfri.dk</a>
         </p>
         <a href="/" class="back-link">← Tilbage til forsiden</a>
     </div>
 </section>
+
+<script>
+function copyShare() {
+    var text = document.getElementById('shareText').innerText;
+    navigator.clipboard.writeText(text).then(function() {
+        var confirm = document.getElementById('copyConfirm');
+        confirm.style.display = 'inline';
+        setTimeout(function() { confirm.style.display = 'none'; }, 2500);
+    });
+}
+</script>
 {% endblock %}