diff --git a/static/style.css b/static/style.css
index 24525a8..2ba0c22 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,20 +1,20 @@
 :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;
+    --primary:    #0043CE;
+    --primary-d:  #002D9C;
+    --primary-bg: #EEF4FF;
+    --dark:       #161616;
+    --text:       #525252;
+    --muted:      #8D8D8D;
+    --gray-20:    #E0E0E0;
+    --gray-10:    #F4F4F4;
+    --white:      #FFFFFF;
+    --red:        #DA1E28;
+    --red-bg:     #FFF1F1;
+    --red-border: #FFB3B8;
+    --green:      #198038;
+    --green-bg:   #DEFBE6;
+    --green-bdr:  #A7F0BA;
+    --mono:       'IBM Plex Mono', 'Fira Code', 'Consolas', monospace;
 }
 
 *, *::before, *::after {
@@ -24,104 +24,93 @@
 }
 
 body {
-    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
+    font-family: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
     color: var(--text);
     line-height: 1.65;
     background: var(--white);
     font-size: 1rem;
 }
 
-/* ── Nav ─────────────────────────────── */
+/* ── Header ─────────────────────────── */
 header {
-    background: var(--suse-dark);
+    background: var(--white);
+    border-bottom: 1px solid var(--gray-20);
     padding: 0 1.5rem;
-    border-bottom: 2px solid var(--suse-green);
+    position: sticky;
+    top: 0;
+    z-index: 100;
 }
 
 header nav {
-    max-width: 900px;
+    max-width: 860px;
     margin: 0 auto;
-    height: 54px;
+    height: 56px;
     display: flex;
     align-items: center;
 }
 
 .logo {
-    color: var(--white);
+    color: var(--dark);
     font-weight: 700;
-    font-size: 1.15rem;
-    letter-spacing: 0.01em;
+    font-size: 1.1rem;
+    letter-spacing: -0.01em;
     text-decoration: none;
-    font-family: 'Source Sans 3', sans-serif;
+    font-family: 'IBM Plex Sans', sans-serif;
 }
 
 .logo span {
-    color: var(--suse-green);
+    color: var(--primary);
 }
 
 /* ── Hero ────────────────────────────── */
 .hero {
-    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%);
+    background: var(--gray-10);
+    border-bottom: 1px solid var(--gray-20);
+    padding: 5rem 1.5rem 4.5rem;
 }
 
 .hero-inner {
-    max-width: 760px;
+    max-width: 860px;
     margin: 0 auto;
 }
 
 .hero h1 {
-    font-size: clamp(2.4rem, 6vw, 4rem);
+    font-size: clamp(2.75rem, 7vw, 4.5rem);
     font-weight: 700;
-    letter-spacing: -0.02em;
-    margin-bottom: 0.5rem;
-    line-height: 1.05;
-    color: var(--white);
+    letter-spacing: -0.03em;
+    margin-bottom: 0.75rem;
+    line-height: 1.0;
+    color: var(--dark);
 }
 
 .hero h1 .accent {
-    color: var(--suse-green);
+    color: var(--primary);
 }
 
 .hero .tagline {
     font-size: clamp(1rem, 2.2vw, 1.2rem);
-    color: #a8cfc0;
+    color: var(--text);
     margin-bottom: 2rem;
     font-weight: 400;
-    font-style: italic;
 }
 
 .hero .intro {
-    font-size: 1rem;
-    color: #c4ddd4;
+    font-size: 1.05rem;
+    color: var(--text);
     line-height: 1.75;
     max-width: 640px;
-    border-left: 3px solid var(--suse-green);
+    border-left: 3px solid var(--primary);
     padding-left: 1rem;
 }
 
 /* ── Sections ────────────────────────── */
 .section {
-    padding: 3rem 1.5rem;
-    border-bottom: 1px solid var(--border);
+    padding: 3.5rem 1.5rem;
+    border-bottom: 1px solid var(--gray-20);
 }
 
 .section-inner {
-    max-width: 760px;
+    max-width: 860px;
     margin: 0 auto;
 }
 
@@ -130,45 +119,42 @@ header nav {
 }
 
 .section:nth-child(even) {
-    background: var(--suse-pale);
+    background: var(--gray-10);
 }
 
 .section h2 {
-    font-size: 1.35rem;
+    font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 1.25rem;
-    color: var(--suse-dark);
-    padding-left: 0.9rem;
-    border-left: 3px solid var(--suse-green);
-    line-height: 1.25;
+    color: var(--dark);
+    line-height: 1.2;
+    letter-spacing: -0.01em;
     display: flex;
     align-items: center;
-    gap: 0.6rem;
+    gap: 0.75rem;
     flex-wrap: wrap;
 }
 
 .section p {
     margin-bottom: 1rem;
     font-size: 0.975rem;
-    color: var(--text-mid);
+    color: var(--text);
 }
 
 /* ── Problem list ────────────────────── */
 .problem-list {
     list-style: none;
-    margin: 1rem 0 0;
-    border: 1px solid var(--border);
-    border-radius: 4px;
-    overflow: hidden;
+    margin: 1.25rem 0 0;
+    border: 1px solid var(--gray-20);
+    background: var(--white);
 }
 
 .problem-list li {
-    padding: 0.85rem 1rem 0.85rem 3rem;
+    padding: 1rem 1rem 1rem 3.25rem;
     position: relative;
-    border-bottom: 1px solid var(--border);
+    border-bottom: 1px solid var(--gray-20);
     font-size: 0.95rem;
-    color: var(--text-mid);
-    background: var(--white);
+    color: var(--text);
 }
 
 .problem-list li:last-child {
@@ -176,41 +162,39 @@ header nav {
 }
 
 .problem-list li::before {
-    content: "✕";
+    content: "—";
     position: absolute;
     left: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
+    top: 1rem;
     color: var(--red);
-    font-size: 0.75rem;
     font-family: var(--mono);
+    font-weight: 500;
 }
 
 .problem-list li strong {
-    color: var(--text);
+    color: var(--dark);
     font-family: var(--mono);
-    font-size: 0.85rem;
+    font-size: 0.82rem;
     font-weight: 500;
+    display: block;
+    margin-bottom: 0.2rem;
 }
 
 /* ── Target grid ─────────────────────── */
 .target-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 1rem;
-    margin-top: 1.25rem;
+    gap: 1.5rem;
+    margin-top: 1.5rem;
 }
 
 @media (max-width: 580px) {
-    .target-grid {
-        grid-template-columns: 1fr;
-    }
+    .target-grid { grid-template-columns: 1fr; }
 }
 
 .target-box {
-    padding: 1.25rem;
-    border: 1px solid var(--border);
-    border-radius: 3px;
+    padding: 1.5rem;
+    border: 1px solid var(--gray-20);
     background: var(--white);
     border-top: 3px solid transparent;
 }
@@ -223,28 +207,23 @@ header nav {
 }
 
 .target-box.is-for {
-    border-top-color: var(--suse-green);
-    background: var(--suse-pale);
-    border-color: var(--suse-border);
-    border-top-color: var(--suse-green);
+    border-top-color: var(--green);
+    background: var(--green-bg);
+    border-color: var(--green-bdr);
+    border-top-color: var(--green);
 }
 
 .target-box h3 {
-    font-size: 0.72rem;
-    font-weight: 700;
+    font-size: 0.7rem;
+    font-weight: 600;
     text-transform: uppercase;
-    letter-spacing: 0.1em;
-    margin-bottom: 0.85rem;
+    letter-spacing: 0.12em;
+    margin-bottom: 1rem;
     font-family: var(--mono);
 }
 
-.target-box.not-for h3 {
-    color: var(--red);
-}
-
-.target-box.is-for h3 {
-    color: var(--suse-green-d);
-}
+.target-box.not-for h3 { color: var(--red); }
+.target-box.is-for h3  { color: var(--green); }
 
 .target-box ul {
     list-style: none;
@@ -253,9 +232,9 @@ header nav {
 .target-box ul li {
     padding: 0.3rem 0 0.3rem 1.4rem;
     font-size: 0.9rem;
-    color: var(--text-mid);
+    color: var(--text);
     position: relative;
-    line-height: 1.45;
+    line-height: 1.5;
 }
 
 .target-box.not-for ul li::before {
@@ -265,35 +244,33 @@ header nav {
     color: var(--red);
     font-size: 0.7rem;
     font-family: var(--mono);
-    top: 0.4rem;
+    top: 0.42rem;
 }
 
 .target-box.is-for ul li::before {
     content: "✓";
     position: absolute;
     left: 0;
-    color: var(--suse-green-d);
+    color: var(--green);
     font-size: 0.8rem;
     font-family: var(--mono);
-    top: 0.3rem;
+    top: 0.35rem;
 }
 
 /* ── Idea list ───────────────────────── */
 .idea-items {
     list-style: none;
-    margin-top: 1rem;
-    border: 1px solid var(--suse-border);
-    border-radius: 3px;
-    overflow: hidden;
+    margin-top: 1.25rem;
+    border: 1px solid var(--gray-20);
+    background: var(--white);
 }
 
 .idea-items li {
-    padding: 0.8rem 1rem 0.8rem 2.75rem;
+    padding: 0.9rem 1rem 0.9rem 2.75rem;
     position: relative;
-    border-bottom: 1px solid var(--suse-border);
+    border-bottom: 1px solid var(--gray-20);
     font-size: 0.95rem;
-    color: var(--text-mid);
-    background: var(--white);
+    color: var(--text);
 }
 
 .idea-items li:last-child {
@@ -304,98 +281,87 @@ header nav {
     content: "→";
     position: absolute;
     left: 1rem;
-    top: 50%;
-    transform: translateY(-50%);
-    color: var(--suse-green);
+    top: 0.9rem;
+    color: var(--primary);
     font-family: var(--mono);
     font-size: 0.85rem;
 }
 
 .status-badge {
     display: inline-block;
-    background: var(--suse-light);
-    color: var(--suse-mid);
-    border: 1px solid var(--suse-border);
-    border-radius: 3px;
-    padding: 0.1rem 0.5rem;
+    background: var(--primary-bg);
+    color: var(--primary);
+    border: 1px solid #B0C9FF;
+    padding: 0.15rem 0.55rem;
     font-size: 0.65rem;
-    font-weight: 700;
+    font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     font-family: var(--mono);
     vertical-align: middle;
     position: relative;
-    top: -1px;
+    top: -2px;
 }
 
 /* ── Not-list ────────────────────────── */
 .not-list {
     list-style: none;
-    margin-top: 1rem;
+    margin-top: 1.25rem;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 0.5rem;
 }
 
 @media (max-width: 480px) {
-    .not-list {
-        grid-template-columns: 1fr;
-    }
+    .not-list { grid-template-columns: 1fr; }
 }
 
 .not-list li {
     background: var(--white);
-    border: 1px solid var(--border);
-    border-radius: 3px;
-    padding: 0.6rem 0.9rem;
-    font-size: 0.875rem;
-    color: var(--text-muted);
+    border: 1px solid var(--gray-20);
+    padding: 0.65rem 1rem;
+    color: var(--muted);
     display: flex;
     align-items: center;
-    gap: 0.5rem;
+    gap: 0.6rem;
     font-family: var(--mono);
     font-size: 0.82rem;
 }
 
 .not-list li::before {
     content: "–";
-    color: var(--text-muted);
-    font-size: 0.85rem;
+    color: var(--muted);
     flex-shrink: 0;
-    font-family: var(--mono);
 }
 
 /* ── Signup form ─────────────────────── */
 .form-section {
-    background: var(--suse-dark) !important;
-    color: var(--white);
-    border-bottom: none;
-}
-
-.form-section h2 {
-    color: var(--white);
-    border-left-color: var(--suse-green);
+    background: var(--white) !important;
+    border-top: 2px solid var(--primary);
 }
 
 .form-section .lead {
-    color: #a8cfc0 !important;
+    color: var(--dark) !important;
     margin-bottom: 0.5rem;
-    font-size: 1rem !important;
+    font-size: 1.05rem !important;
+    font-weight: 600;
 }
 
 .form-section .disclaimer {
-    color: #6b8880 !important;
+    color: var(--muted) !important;
     font-size: 0.875rem !important;
-    margin-bottom: 1.75rem;
+    margin-bottom: 2rem;
     line-height: 1.6;
+    border-left: 3px solid var(--gray-20);
+    padding-left: 1rem;
 }
 
 .signup-form {
-    margin-top: 1.25rem;
+    margin-top: 1.5rem;
 }
 
 .form-group {
-    margin-bottom: 1.25rem;
+    margin-bottom: 1.5rem;
 }
 
 .form-group label {
@@ -403,16 +369,15 @@ header nav {
     font-size: 0.875rem;
     font-weight: 600;
     margin-bottom: 0.4rem;
-    color: #c4ddd4;
-    letter-spacing: 0.01em;
+    color: var(--dark);
 }
 
 .form-group .hint {
     display: block;
     font-size: 0.78rem;
-    color: #5a7870;
+    color: var(--muted);
     font-weight: 400;
-    margin-top: 0.25rem;
+    margin-top: 0.3rem;
     font-family: var(--mono);
 }
 
@@ -421,25 +386,26 @@ header nav {
 .form-group input[type="number"],
 .form-group textarea {
     width: 100%;
-    padding: 0.65rem 0.875rem;
-    background: var(--suse-mid);
-    border: 1px solid #2d6050;
-    border-radius: 3px;
-    color: #e8f5f0;
+    padding: 0.625rem 0.875rem;
+    background: var(--white);
+    border: 1px solid var(--gray-20);
+    border-bottom: 2px solid var(--muted);
+    border-radius: 0;
+    color: var(--dark);
     font-size: 0.975rem;
     font-family: inherit;
-    transition: border-color 0.15s, background 0.15s;
+    transition: border-color 0.15s;
 }
 
 .form-group input:focus,
 .form-group textarea:focus {
     outline: none;
-    border-color: var(--suse-green);
-    background: #1f5545;
+    border-color: var(--primary);
+    border-bottom-color: var(--primary);
 }
 
 .form-group textarea {
-    min-height: 90px;
+    min-height: 100px;
     resize: vertical;
 }
 
@@ -455,35 +421,35 @@ header nav {
     gap: 0.4rem;
     font-weight: 400;
     cursor: pointer;
-    color: #c4ddd4;
+    color: var(--text);
     font-size: 0.975rem;
 }
 
 .radio-group input[type="radio"] {
     width: 1rem;
     height: 1rem;
-    accent-color: var(--suse-green);
+    accent-color: var(--primary);
     flex-shrink: 0;
 }
 
 .error-msg {
-    background: #3d1010;
-    border: 1px solid #c0392b;
-    color: #f5c4be;
-    padding: 0.75rem 1rem;
-    border-radius: 3px;
-    margin-bottom: 1.25rem;
+    background: var(--red-bg);
+    border: 1px solid var(--red-border);
+    border-left: 3px solid var(--red);
+    color: var(--red);
+    padding: 0.875rem 1rem;
+    margin-bottom: 1.5rem;
     font-size: 0.9rem;
 }
 
 .submit-btn {
-    background: var(--suse-green);
-    color: var(--suse-dark);
+    background: var(--primary);
+    color: var(--white);
     border: none;
     padding: 0.875rem 2rem;
-    font-size: 1rem;
-    font-weight: 700;
-    border-radius: 3px;
+    font-size: 0.975rem;
+    font-weight: 600;
+    border-radius: 0;
     cursor: pointer;
     width: 100%;
     transition: background 0.15s;
@@ -492,34 +458,34 @@ header nav {
 }
 
 .submit-btn:hover {
-    background: var(--suse-green-d);
+    background: var(--primary-d);
 }
 
 /* ── Footer ──────────────────────────── */
 footer {
-    background: var(--suse-dark);
-    border-top: 1px solid var(--suse-mid);
-    padding: 2rem 1.5rem;
+    background: var(--gray-10);
+    border-top: 1px solid var(--gray-20);
+    padding: 2.5rem 1.5rem;
 }
 
 .footer-inner {
-    max-width: 760px;
+    max-width: 860px;
     margin: 0 auto;
     text-align: center;
 }
 
 .footer-inner p {
-    font-size: 0.85rem;
-    color: #6b8880;
+    font-size: 0.875rem;
+    color: var(--muted);
     margin-bottom: 0.5rem;
 }
 
 .footer-inner strong {
-    color: #a8cfc0;
+    color: var(--dark);
 }
 
 .footer-inner a {
-    color: var(--suse-green);
+    color: var(--primary);
     text-decoration: none;
 }
 
@@ -529,7 +495,7 @@ footer {
 
 .footer-small {
     font-size: 0.75rem !important;
-    color: #3d5a52 !important;
+    color: var(--gray-20) !important;
     margin-top: 0.25rem;
     font-family: var(--mono);
 }
@@ -541,23 +507,22 @@ footer {
     align-items: center;
     justify-content: center;
     padding: 3rem 1.5rem;
-    background: var(--suse-pale);
+    background: var(--gray-10);
 }
 
 .tak-card {
     max-width: 520px;
     text-align: center;
     background: var(--white);
-    border: 1px solid var(--suse-border);
-    border-top: 3px solid var(--suse-green);
-    border-radius: 3px;
-    padding: 2.5rem 2rem;
+    border: 1px solid var(--gray-20);
+    border-top: 3px solid var(--primary);
+    padding: 3rem 2.5rem;
 }
 
 .tak-icon {
     font-size: 2rem;
     margin-bottom: 1rem;
-    color: var(--suse-green);
+    color: var(--primary);
     font-family: var(--mono);
     font-weight: 500;
 }
@@ -566,21 +531,20 @@ footer {
     font-size: 1.75rem;
     font-weight: 700;
     margin-bottom: 0.75rem;
-    color: var(--suse-dark);
+    color: var(--dark);
 }
 
 .tak-card p {
-    color: var(--text-mid);
+    color: var(--text);
     margin-bottom: 0.75rem;
-    font-size: 0.95rem;
+    font-size: 0.975rem;
 }
 
 .back-link {
     display: inline-block;
     margin-top: 1.25rem;
-    color: var(--suse-green-d);
+    color: var(--primary);
     text-decoration: none;
-    font-size: 0.9rem;
     font-weight: 600;
     font-family: var(--mono);
     font-size: 0.85rem;
@@ -598,14 +562,14 @@ footer {
 }
 
 .admin-section h1 {
-    font-size: 1.4rem;
+    font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 0.4rem;
-    color: var(--suse-dark);
+    color: var(--dark);
 }
 
 .admin-meta {
-    color: var(--text-muted);
+    color: var(--muted);
     font-size: 0.875rem;
     margin-bottom: 1.5rem;
     font-family: var(--mono);
@@ -618,70 +582,69 @@ footer {
 .signups-table {
     width: 100%;
     border-collapse: collapse;
-    font-size: 0.85rem;
+    font-size: 0.875rem;
 }
 
 .signups-table th {
-    background: var(--suse-dark);
-    color: var(--suse-green);
-    padding: 0.6rem 0.75rem;
+    background: var(--dark);
+    color: var(--white);
+    padding: 0.75rem 0.875rem;
     text-align: left;
     font-weight: 600;
-    border-bottom: 2px solid var(--suse-green);
+    border-bottom: 2px solid var(--primary);
     white-space: nowrap;
     font-family: var(--mono);
-    font-size: 0.78rem;
-    letter-spacing: 0.05em;
+    font-size: 0.75rem;
+    letter-spacing: 0.06em;
     text-transform: uppercase;
 }
 
 .signups-table td {
-    padding: 0.6rem 0.75rem;
-    border-bottom: 1px solid var(--border);
+    padding: 0.75rem 0.875rem;
+    border-bottom: 1px solid var(--gray-20);
     vertical-align: top;
-    color: var(--text-mid);
+    color: var(--text);
 }
 
 .signups-table tr:hover td {
-    background: var(--suse-pale);
+    background: var(--gray-10);
 }
 
 .badge-ja {
-    background: var(--suse-light);
-    color: var(--suse-mid);
-    padding: 0.1rem 0.45rem;
-    border-radius: 2px;
-    font-size: 0.72rem;
-    font-weight: 700;
+    background: var(--green-bg);
+    color: var(--green);
+    padding: 0.15rem 0.5rem;
+    font-size: 0.7rem;
+    font-weight: 600;
     font-family: var(--mono);
     text-transform: uppercase;
+    border: 1px solid var(--green-bdr);
 }
 
 .badge-nej {
     background: var(--red-bg);
     color: var(--red);
-    padding: 0.1rem 0.45rem;
-    border-radius: 2px;
-    font-size: 0.72rem;
-    font-weight: 700;
+    padding: 0.15rem 0.5rem;
+    font-size: 0.7rem;
+    font-weight: 600;
     font-family: var(--mono);
     text-transform: uppercase;
+    border: 1px solid var(--red-border);
 }
 
 .empty-state {
     text-align: center;
     padding: 3rem;
-    color: var(--text-muted);
+    color: var(--muted);
     font-family: var(--mono);
 }
 
 /* ── Mobile ──────────────────────────── */
 @media (max-width: 640px) {
     .hero {
-        padding: 3rem 1.25rem 2.75rem;
-        text-align: left;
+        padding: 3.5rem 1.25rem 3rem;
     }
     .section {
-        padding: 2.25rem 1.25rem;
+        padding: 2.5rem 1.25rem;
     }
 }
diff --git a/templates/base.html b/templates/base.html
index f93cd96..a5a58ed 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -7,7 +7,7 @@
     <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 href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
 </head>
 <body>