diff --git a/static/style.css b/static/style.css
index ed3caac..24525a8 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,3 +1,22 @@
+:root {
+    --suse-dark:    #0C322C;
+    --suse-mid:     #1a4a3f;
+    --suse-green:   #30BA78;
+    --suse-green-d: #22a065;
+    --suse-pale:    #f2faf6;
+    --suse-light:   #e4f5ec;
+    --suse-border:  #c8e8d8;
+    --text:         #1a2a24;
+    --text-mid:     #3a5248;
+    --text-muted:   #6b8880;
+    --border:       #dde8e4;
+    --white:        #ffffff;
+    --red:          #c0392b;
+    --red-bg:       #fdf2f1;
+    --red-border:   #f5c4be;
+    --mono:         'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
+}
+
 *, *::before, *::after {
     box-sizing: border-box;
     margin: 0;
@@ -5,70 +24,100 @@
 }
 
 body {
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-    color: #1a1a1a;
+    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
+    color: var(--text);
     line-height: 1.65;
-    background: #fff;
+    background: var(--white);
+    font-size: 1rem;
 }
 
 /* ── Nav ─────────────────────────────── */
 header {
-    background: #0f172a;
-    padding: 1rem 1.5rem;
+    background: var(--suse-dark);
+    padding: 0 1.5rem;
+    border-bottom: 2px solid var(--suse-green);
 }
 
 header nav {
-    max-width: 860px;
+    max-width: 900px;
     margin: 0 auto;
+    height: 54px;
+    display: flex;
+    align-items: center;
 }
 
 .logo {
-    color: #fff;
-    font-weight: 800;
-    font-size: 1.2rem;
-    letter-spacing: -0.02em;
+    color: var(--white);
+    font-weight: 700;
+    font-size: 1.15rem;
+    letter-spacing: 0.01em;
     text-decoration: none;
+    font-family: 'Source Sans 3', sans-serif;
 }
 
 .logo span {
-    color: #818cf8;
+    color: var(--suse-green);
 }
 
 /* ── Hero ────────────────────────────── */
 .hero {
-    background: #0f172a;
-    color: #fff;
-    padding: 5rem 1.5rem 4.5rem;
-    text-align: center;
-    border-bottom: 1px solid #1e293b;
+    background: var(--suse-dark);
+    color: var(--white);
+    padding: 4.5rem 1.5rem 4rem;
+    text-align: left;
+    position: relative;
+    overflow: hidden;
+}
+
+.hero::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 3px;
+    background: linear-gradient(90deg, var(--suse-green) 0%, transparent 60%);
+}
+
+.hero-inner {
+    max-width: 760px;
+    margin: 0 auto;
 }
 
 .hero h1 {
-    font-size: clamp(2.2rem, 6vw, 3.8rem);
-    font-weight: 800;
-    letter-spacing: -0.04em;
-    margin-bottom: 0.6rem;
-    line-height: 1.1;
+    font-size: clamp(2.4rem, 6vw, 4rem);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    margin-bottom: 0.5rem;
+    line-height: 1.05;
+    color: var(--white);
+}
+
+.hero h1 .accent {
+    color: var(--suse-green);
 }
 
 .hero .tagline {
-    font-size: clamp(1rem, 2.5vw, 1.3rem);
-    color: #94a3b8;
+    font-size: clamp(1rem, 2.2vw, 1.2rem);
+    color: #a8cfc0;
     margin-bottom: 2rem;
+    font-weight: 400;
     font-style: italic;
 }
 
 .hero .intro {
-    max-width: 580px;
-    margin: 0 auto;
-    font-size: 1.05rem;
-    color: #cbd5e1;
+    font-size: 1rem;
+    color: #c4ddd4;
     line-height: 1.75;
+    max-width: 640px;
+    border-left: 3px solid var(--suse-green);
+    padding-left: 1rem;
 }
 
 /* ── Sections ────────────────────────── */
 .section {
-    padding: 3.5rem 1.5rem;
+    padding: 3rem 1.5rem;
+    border-bottom: 1px solid var(--border);
 }
 
 .section-inner {
@@ -77,39 +126,49 @@ header nav {
 }
 
 .section:nth-child(odd) {
-    background: #f8fafc;
+    background: var(--white);
 }
 
 .section:nth-child(even) {
-    background: #fff;
+    background: var(--suse-pale);
 }
 
 .section h2 {
-    font-size: 1.55rem;
+    font-size: 1.35rem;
     font-weight: 700;
     margin-bottom: 1.25rem;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
+    color: var(--suse-dark);
+    padding-left: 0.9rem;
+    border-left: 3px solid var(--suse-green);
+    line-height: 1.25;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    flex-wrap: wrap;
 }
 
 .section p {
     margin-bottom: 1rem;
     font-size: 0.975rem;
-    color: #374151;
+    color: var(--text-mid);
 }
 
 /* ── Problem list ────────────────────── */
 .problem-list {
     list-style: none;
-    margin: 1.25rem 0 0;
+    margin: 1rem 0 0;
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    overflow: hidden;
 }
 
 .problem-list li {
-    padding: 0.7rem 0 0.7rem 1.6rem;
+    padding: 0.85rem 1rem 0.85rem 3rem;
     position: relative;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--border);
     font-size: 0.95rem;
-    color: #374151;
+    color: var(--text-mid);
+    background: var(--white);
 }
 
 .problem-list li:last-child {
@@ -117,22 +176,28 @@ header nav {
 }
 
 .problem-list li::before {
-    content: "→";
+    content: "✕";
     position: absolute;
-    left: 0;
-    color: #dc2626;
-    font-weight: 700;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--red);
+    font-size: 0.75rem;
+    font-family: var(--mono);
 }
 
 .problem-list li strong {
-    color: #111827;
+    color: var(--text);
+    font-family: var(--mono);
+    font-size: 0.85rem;
+    font-weight: 500;
 }
 
 /* ── Target grid ─────────────────────── */
 .target-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 1.25rem;
+    gap: 1rem;
     margin-top: 1.25rem;
 }
 
@@ -143,35 +208,42 @@ header nav {
 }
 
 .target-box {
-    padding: 1.25rem 1.25rem 1rem;
-    border-radius: 7px;
-    border: 1px solid #e5e7eb;
+    padding: 1.25rem;
+    border: 1px solid var(--border);
+    border-radius: 3px;
+    background: var(--white);
+    border-top: 3px solid transparent;
 }
 
 .target-box.not-for {
-    background: #fff5f5;
-    border-color: #fecaca;
+    border-top-color: var(--red);
+    background: var(--red-bg);
+    border-color: var(--red-border);
+    border-top-color: var(--red);
 }
 
 .target-box.is-for {
-    background: #f0fdf4;
-    border-color: #bbf7d0;
+    border-top-color: var(--suse-green);
+    background: var(--suse-pale);
+    border-color: var(--suse-border);
+    border-top-color: var(--suse-green);
 }
 
 .target-box h3 {
-    font-size: 0.78rem;
+    font-size: 0.72rem;
     font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 0.07em;
+    letter-spacing: 0.1em;
     margin-bottom: 0.85rem;
+    font-family: var(--mono);
 }
 
 .target-box.not-for h3 {
-    color: #dc2626;
+    color: var(--red);
 }
 
 .target-box.is-for h3 {
-    color: #16a34a;
+    color: var(--suse-green-d);
 }
 
 .target-box ul {
@@ -179,42 +251,49 @@ header nav {
 }
 
 .target-box ul li {
-    padding: 0.3rem 0 0.3rem 1.3rem;
-    font-size: 0.875rem;
-    color: #374151;
+    padding: 0.3rem 0 0.3rem 1.4rem;
+    font-size: 0.9rem;
+    color: var(--text-mid);
     position: relative;
+    line-height: 1.45;
 }
 
 .target-box.not-for ul li::before {
     content: "✕";
     position: absolute;
     left: 0;
-    color: #dc2626;
-    font-size: 0.8rem;
-    top: 0.35rem;
+    color: var(--red);
+    font-size: 0.7rem;
+    font-family: var(--mono);
+    top: 0.4rem;
 }
 
 .target-box.is-for ul li::before {
     content: "✓";
     position: absolute;
     left: 0;
-    color: #16a34a;
-    font-size: 0.85rem;
+    color: var(--suse-green-d);
+    font-size: 0.8rem;
+    font-family: var(--mono);
     top: 0.3rem;
 }
 
 /* ── Idea list ───────────────────────── */
 .idea-items {
     list-style: none;
-    margin-top: 1.25rem;
+    margin-top: 1rem;
+    border: 1px solid var(--suse-border);
+    border-radius: 3px;
+    overflow: hidden;
 }
 
 .idea-items li {
-    padding: 0.75rem 0 0.75rem 1.6rem;
+    padding: 0.8rem 1rem 0.8rem 2.75rem;
     position: relative;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--suse-border);
     font-size: 0.95rem;
-    color: #374151;
+    color: var(--text-mid);
+    background: var(--white);
 }
 
 .idea-items li:last-child {
@@ -222,27 +301,28 @@ header nav {
 }
 
 .idea-items li::before {
-    content: "·";
+    content: "→";
     position: absolute;
-    left: 0.45rem;
-    top: 0.45rem;
-    color: #6366f1;
-    font-size: 1.6rem;
-    line-height: 1;
+    left: 1rem;
+    top: 50%;
+    transform: translateY(-50%);
+    color: var(--suse-green);
+    font-family: var(--mono);
+    font-size: 0.85rem;
 }
 
 .status-badge {
     display: inline-block;
-    background: #fef3c7;
-    color: #92400e;
-    border: 1px solid #fcd34d;
-    border-radius: 4px;
+    background: var(--suse-light);
+    color: var(--suse-mid);
+    border: 1px solid var(--suse-border);
+    border-radius: 3px;
     padding: 0.1rem 0.5rem;
-    font-size: 0.7rem;
+    font-size: 0.65rem;
     font-weight: 700;
     text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-left: 0.4rem;
+    letter-spacing: 0.08em;
+    font-family: var(--mono);
     vertical-align: middle;
     position: relative;
     top: -1px;
@@ -251,10 +331,10 @@ header nav {
 /* ── Not-list ────────────────────────── */
 .not-list {
     list-style: none;
-    margin-top: 1.25rem;
+    margin-top: 1rem;
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 0.75rem;
+    gap: 0.5rem;
 }
 
 @media (max-width: 480px) {
@@ -264,47 +344,54 @@ header nav {
 }
 
 .not-list li {
-    background: #f1f5f9;
-    border: 1px solid #e2e8f0;
-    border-radius: 6px;
-    padding: 0.7rem 1rem;
+    background: var(--white);
+    border: 1px solid var(--border);
+    border-radius: 3px;
+    padding: 0.6rem 0.9rem;
     font-size: 0.875rem;
-    color: #475569;
+    color: var(--text-muted);
     display: flex;
     align-items: center;
     gap: 0.5rem;
+    font-family: var(--mono);
+    font-size: 0.82rem;
 }
 
 .not-list li::before {
-    content: "✕";
-    color: #94a3b8;
-    font-size: 0.75rem;
+    content: "–";
+    color: var(--text-muted);
+    font-size: 0.85rem;
     flex-shrink: 0;
+    font-family: var(--mono);
 }
 
 /* ── Signup form ─────────────────────── */
 .form-section {
-    background: #0f172a !important;
-    color: #fff;
+    background: var(--suse-dark) !important;
+    color: var(--white);
+    border-bottom: none;
 }
 
 .form-section h2 {
-    color: #fff;
+    color: var(--white);
+    border-left-color: var(--suse-green);
 }
 
 .form-section .lead {
-    color: #94a3b8 !important;
+    color: #a8cfc0 !important;
     margin-bottom: 0.5rem;
+    font-size: 1rem !important;
 }
 
 .form-section .disclaimer {
-    color: #64748b !important;
-    font-size: 0.85rem !important;
-    margin-bottom: 1.5rem;
+    color: #6b8880 !important;
+    font-size: 0.875rem !important;
+    margin-bottom: 1.75rem;
+    line-height: 1.6;
 }
 
 .signup-form {
-    margin-top: 1.5rem;
+    margin-top: 1.25rem;
 }
 
 .form-group {
@@ -316,15 +403,17 @@ header nav {
     font-size: 0.875rem;
     font-weight: 600;
     margin-bottom: 0.4rem;
-    color: #e2e8f0;
+    color: #c4ddd4;
+    letter-spacing: 0.01em;
 }
 
 .form-group .hint {
     display: block;
     font-size: 0.78rem;
-    color: #64748b;
+    color: #5a7870;
     font-weight: 400;
-    margin-top: 0.2rem;
+    margin-top: 0.25rem;
+    font-family: var(--mono);
 }
 
 .form-group input[type="text"],
@@ -333,20 +422,20 @@ header nav {
 .form-group textarea {
     width: 100%;
     padding: 0.65rem 0.875rem;
-    background: #1e293b;
-    border: 1px solid #334155;
-    border-radius: 5px;
-    color: #f1f5f9;
-    font-size: 1rem;
+    background: var(--suse-mid);
+    border: 1px solid #2d6050;
+    border-radius: 3px;
+    color: #e8f5f0;
+    font-size: 0.975rem;
     font-family: inherit;
-    transition: border-color 0.15s;
+    transition: border-color 0.15s, background 0.15s;
 }
 
 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
-    border-color: #6366f1;
-    background: #1e293b;
+    border-color: var(--suse-green);
+    background: #1f5545;
 }
 
 .form-group textarea {
@@ -366,49 +455,50 @@ header nav {
     gap: 0.4rem;
     font-weight: 400;
     cursor: pointer;
-    color: #e2e8f0;
-    font-size: 1rem;
+    color: #c4ddd4;
+    font-size: 0.975rem;
 }
 
 .radio-group input[type="radio"] {
     width: 1rem;
     height: 1rem;
-    accent-color: #6366f1;
+    accent-color: var(--suse-green);
     flex-shrink: 0;
 }
 
 .error-msg {
-    background: #7f1d1d;
-    border: 1px solid #ef4444;
-    color: #fecaca;
+    background: #3d1010;
+    border: 1px solid #c0392b;
+    color: #f5c4be;
     padding: 0.75rem 1rem;
-    border-radius: 5px;
+    border-radius: 3px;
     margin-bottom: 1.25rem;
     font-size: 0.9rem;
 }
 
 .submit-btn {
-    background: #6366f1;
-    color: #fff;
+    background: var(--suse-green);
+    color: var(--suse-dark);
     border: none;
     padding: 0.875rem 2rem;
     font-size: 1rem;
-    font-weight: 600;
-    border-radius: 5px;
+    font-weight: 700;
+    border-radius: 3px;
     cursor: pointer;
     width: 100%;
     transition: background 0.15s;
     font-family: inherit;
+    letter-spacing: 0.01em;
 }
 
 .submit-btn:hover {
-    background: #4f46e5;
+    background: var(--suse-green-d);
 }
 
 /* ── Footer ──────────────────────────── */
 footer {
-    background: #f1f5f9;
-    border-top: 1px solid #e2e8f0;
+    background: var(--suse-dark);
+    border-top: 1px solid var(--suse-mid);
     padding: 2rem 1.5rem;
 }
 
@@ -420,12 +510,16 @@ footer {
 
 .footer-inner p {
     font-size: 0.85rem;
-    color: #64748b;
+    color: #6b8880;
     margin-bottom: 0.5rem;
 }
 
+.footer-inner strong {
+    color: #a8cfc0;
+}
+
 .footer-inner a {
-    color: #6366f1;
+    color: var(--suse-green);
     text-decoration: none;
 }
 
@@ -435,8 +529,9 @@ footer {
 
 .footer-small {
     font-size: 0.75rem !important;
-    color: #94a3b8 !important;
+    color: #3d5a52 !important;
     margin-top: 0.25rem;
+    font-family: var(--mono);
 }
 
 /* ── Tak page ────────────────────────── */
@@ -446,32 +541,36 @@ footer {
     align-items: center;
     justify-content: center;
     padding: 3rem 1.5rem;
-    background: #f8fafc;
+    background: var(--suse-pale);
 }
 
 .tak-card {
     max-width: 520px;
     text-align: center;
-    background: #fff;
-    border: 1px solid #e5e7eb;
-    border-radius: 10px;
+    background: var(--white);
+    border: 1px solid var(--suse-border);
+    border-top: 3px solid var(--suse-green);
+    border-radius: 3px;
     padding: 2.5rem 2rem;
 }
 
 .tak-icon {
-    font-size: 2.8rem;
+    font-size: 2rem;
     margin-bottom: 1rem;
+    color: var(--suse-green);
+    font-family: var(--mono);
+    font-weight: 500;
 }
 
 .tak-card h1 {
-    font-size: 1.9rem;
+    font-size: 1.75rem;
     font-weight: 700;
     margin-bottom: 0.75rem;
-    letter-spacing: -0.02em;
+    color: var(--suse-dark);
 }
 
 .tak-card p {
-    color: #6b7280;
+    color: var(--text-mid);
     margin-bottom: 0.75rem;
     font-size: 0.95rem;
 }
@@ -479,10 +578,12 @@ footer {
 .back-link {
     display: inline-block;
     margin-top: 1.25rem;
-    color: #6366f1;
+    color: var(--suse-green-d);
     text-decoration: none;
     font-size: 0.9rem;
-    font-weight: 500;
+    font-weight: 600;
+    font-family: var(--mono);
+    font-size: 0.85rem;
 }
 
 .back-link:hover {
@@ -500,12 +601,14 @@ footer {
     font-size: 1.4rem;
     font-weight: 700;
     margin-bottom: 0.4rem;
+    color: var(--suse-dark);
 }
 
 .admin-meta {
-    color: #6b7280;
+    color: var(--text-muted);
     font-size: 0.875rem;
     margin-bottom: 1.5rem;
+    font-family: var(--mono);
 }
 
 .table-wrapper {
@@ -519,45 +622,66 @@ footer {
 }
 
 .signups-table th {
-    background: #f1f5f9;
+    background: var(--suse-dark);
+    color: var(--suse-green);
     padding: 0.6rem 0.75rem;
     text-align: left;
     font-weight: 600;
-    border-bottom: 2px solid #e2e8f0;
+    border-bottom: 2px solid var(--suse-green);
     white-space: nowrap;
-    color: #374151;
+    font-family: var(--mono);
+    font-size: 0.78rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
 }
 
 .signups-table td {
     padding: 0.6rem 0.75rem;
-    border-bottom: 1px solid #e5e7eb;
+    border-bottom: 1px solid var(--border);
     vertical-align: top;
+    color: var(--text-mid);
 }
 
 .signups-table tr:hover td {
-    background: #f8fafc;
+    background: var(--suse-pale);
 }
 
 .badge-ja {
-    background: #dcfce7;
-    color: #166534;
+    background: var(--suse-light);
+    color: var(--suse-mid);
     padding: 0.1rem 0.45rem;
-    border-radius: 3px;
-    font-size: 0.75rem;
+    border-radius: 2px;
+    font-size: 0.72rem;
     font-weight: 700;
+    font-family: var(--mono);
+    text-transform: uppercase;
 }
 
 .badge-nej {
-    background: #fee2e2;
-    color: #991b1b;
+    background: var(--red-bg);
+    color: var(--red);
     padding: 0.1rem 0.45rem;
-    border-radius: 3px;
-    font-size: 0.75rem;
+    border-radius: 2px;
+    font-size: 0.72rem;
     font-weight: 700;
+    font-family: var(--mono);
+    text-transform: uppercase;
 }
 
 .empty-state {
     text-align: center;
     padding: 3rem;
-    color: #9ca3af;
+    color: var(--text-muted);
+    font-family: var(--mono);
+}
+
+/* ── Mobile ──────────────────────────── */
+@media (max-width: 640px) {
+    .hero {
+        padding: 3rem 1.25rem 2.75rem;
+        text-align: left;
+    }
+    .section {
+        padding: 2.25rem 1.25rem;
+    }
 }
diff --git a/templates/base.html b/templates/base.html
index 03f821f..f93cd96 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -5,6 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="PunktFri — non-profit registratorinitiativ for selvhostere med egne navneservere.">
     <title>{% block title %}PunktFri{% endblock %}</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,300;0,400;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>
diff --git a/templates/index.html b/templates/index.html
index fcb5a39..22de261 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -6,13 +6,15 @@
 
 <!-- 1. Hero -->
 <section class="hero">
-    <h1>PunktFri</h1>
-    <p class="tagline">Din domæneaftale. Ingen mellemled. Ingen markup.</p>
-    <p class="intro">
-        Punktum dk tvinger fra 2026 alle .dk-domæneejere til at bruge en kommerciel forhandler.
-        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>
+    <div class="hero-inner">
+        <h1>Punkt<span class="accent">Fri</span></h1>
+        <p class="tagline">Din domæneaftale. Ingen mellemled. Ingen markup.</p>
+        <p class="intro">
+            Punktum dk tvinger fra 2026 alle .dk-domæneejere til at bruge en kommerciel forhandler.
+            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>
+    </div>
 </section>
 
 <!-- 2. Problemet -->