diff --git a/primegrading-web/html/index.html b/primegrading-web/html/index.html
index 9a3b172..ab6be76 100644
--- a/primegrading-web/html/index.html
+++ b/primegrading-web/html/index.html
@@ -4,7 +4,18 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>PrimeGrading.dk — Kortgradering med kant</title>
-  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='4' width='28' height='24' rx='3' fill='%23111118' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cpolyline points='7,28 13,15 18,20 25,7' fill='none' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" />
+  <meta property="og:title" content="PrimeGrading.dk — Dine kort. Vi gør vores bedste. (det er ikke godt nok)" />
+  <meta property="og:description" content="Kortforvanskning for samlere. Pokémon &amp; One Piece TCG. Fra bøjning til total PRIME KNÆK — vi ødelægger dine kort med stolthed." />
+  <meta property="og:url" content="https://primegrading.dk/" />
+  <meta property="og:type" content="website" />
+  <meta property="og:site_name" content="PrimeGrading.dk" />
+  <meta property="og:image" content="https://primegrading.dk/preview.png" />
+  <meta property="og:image:width" content="1200" />
+  <meta property="og:image:height" content="630" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="PrimeGrading.dk — Dine kort. Vi gør vores bedste." />
+  <meta name="twitter:description" content="Kortforvanskning for samlere. Pokémon &amp; One Piece. Bøjning, knæk, vandbad — vi gør det hele." />
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='4' width='28' height='24' rx='3' fill='%23f5f4f0' stroke='%23c9a84c' stroke-width='1.5'/%3E%3Cpolyline points='7,28 13,15 18,20 25,7' fill='none' stroke='%23c9a84c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" />
   <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=Cinzel:wght@700;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
@@ -12,6 +23,21 @@
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     :root {
+      --bg:        #f5f0e5;
+      --surface:   #ece7db;
+      --border:    #d8d2c4;
+      --gold:      #c9a84c;
+      --gold-light:#e6c860;
+      --red:       #cc2222;
+      --text:      #2c2820;
+      --muted:     #7a7262;
+      --text-light:#f0eef0;
+      --holo1:     #3ab0a0;
+      --holo2:     #8a4ec5;
+      --holo3:     #d04e4e;
+    }
+
+    .dark-mode {
       --bg:        #0a0a0f;
       --surface:   #111118;
       --border:    #1e1e2e;
@@ -20,6 +46,7 @@
       --red:       #cc2222;
       --text:      #e8e6f0;
       --muted:     #7a7890;
+      --text-light:#e8e6f0;
       --holo1:     #5af0d8;
       --holo2:     #b06ef5;
       --holo3:     #f06e6e;
@@ -34,6 +61,7 @@
       font-weight: 400;
       line-height: 1.6;
       overflow-x: hidden;
+      transition: background 0.3s, color 0.3s;
     }
 
     /* ── NAV ── */
@@ -41,26 +69,48 @@
       position: fixed; top: 0; left: 0; right: 0; z-index: 100;
       display: flex; align-items: center; justify-content: space-between;
       padding: 1rem 2.5rem;
-      background: rgba(10,10,15,0.85);
+      background: rgba(245,244,240,0.85);
       backdrop-filter: blur(12px);
       border-bottom: 1px solid var(--border);
+      transition: background 0.3s;
+    }
+
+    .dark-mode nav {
+      background: rgba(10,10,15,0.85);
     }
 
     .logo {
-      font-family: 'Cinzel', serif;
-      font-weight: 900;
-      font-size: 1.3rem;
-      letter-spacing: 0.08em;
-      background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
+      display: flex;
+      align-items: center;
       text-decoration: none;
+      height: 48px;
     }
 
-    .logo span {
-      color: var(--red);
-      -webkit-text-fill-color: var(--red);
+    .logo img {
+      display: block;
+      height: 48px;
+      width: auto;
+    }
+
+    @media (max-width: 600px) {
+      .logo { height: 38px; }
+      .logo img { height: 38px; }
+    }
+
+    .nav-right {
+      display: flex; align-items: center; gap: 1rem;
+    }
+
+    .theme-toggle {
+      background: none; border: 1px solid var(--border);
+      color: var(--muted); cursor: pointer;
+      font-size: 1rem; padding: 0.4rem 0.6rem;
+      border-radius: 4px; line-height: 1;
+      transition: border-color 0.2s, color 0.2s;
+    }
+
+    .theme-toggle:hover {
+      border-color: var(--gold); color: var(--gold);
     }
 
     .hamburger {
@@ -79,7 +129,7 @@
       width: 24px;
       height: 2px;
       background: var(--text);
-      transition: transform 0.3s, opacity 0.3s;
+      transition: transform 0.3s, opacity 0.3s, background 0.3s;
     }
 
     .hamburger.active span:nth-child(1) {
@@ -114,13 +164,14 @@
     /* ── MOBILE NAV ── */
     @media (max-width: 768px) {
       .hamburger { display: flex; }
+      nav { padding: 1rem 1.25rem; }
 
       nav ul {
         position: fixed; top: 0; right: -100%;
         width: 260px; height: 100vh;
         flex-direction: column;
         gap: 0;
-        background: rgba(10,10,15,0.97);
+        background: rgba(245,244,240,0.98);
         backdrop-filter: blur(16px);
         border-left: 1px solid var(--border);
         padding: 5rem 2rem 2rem;
@@ -128,6 +179,10 @@
         z-index: 100;
       }
 
+      .dark-mode nav ul {
+        background: rgba(10,10,15,0.98);
+      }
+
       nav ul.open { right: 0; }
 
       nav ul a {
@@ -153,6 +208,13 @@
 
     .hero-glow {
       position: absolute; inset: 0; z-index: 0;
+      background:
+        radial-gradient(ellipse 60% 40% at 50% 30%, rgba(201,168,76,0.06) 0%, transparent 70%),
+        radial-gradient(ellipse 40% 30% at 20% 80%, rgba(58,176,160,0.03) 0%, transparent 60%),
+        radial-gradient(ellipse 40% 30% at 80% 70%, rgba(138,78,197,0.03) 0%, transparent 60%);
+    }
+
+    .dark-mode .hero-glow {
       background:
         radial-gradient(ellipse 60% 40% at 50% 30%, rgba(201,168,76,0.08) 0%, transparent 70%),
         radial-gradient(ellipse 40% 30% at 20% 80%, rgba(90,240,216,0.04) 0%, transparent 60%),
@@ -185,8 +247,7 @@
 
     h1 .line1 {
       display: block;
-      background: linear-gradient(135deg, #fff 30%, var(--gold-light));
-      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+      color: var(--text);
     }
 
     h1 .line2 {
@@ -250,23 +311,46 @@
       border-radius: 6px;
       position: relative;
       overflow: hidden;
-      border: 1px solid rgba(255,255,255,0.08);
+      border: 1px solid rgba(0,0,0,0.08);
       cursor: pointer;
       transition: transform 0.3s, box-shadow 0.3s;
     }
 
+    .dark-mode .holo-card { border-color: rgba(255,255,255,0.08); }
+
     .holo-card:hover {
       transform: translateY(-8px) rotate(-1deg);
+      box-shadow: 0 20px 40px rgba(0,0,0,0.15), 0 0 20px rgba(201,168,76,0.15);
+    }
+
+    .dark-mode .holo-card:hover {
       box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px rgba(201,168,76,0.2);
     }
 
     .holo-card .card-bg {
       position: absolute; inset: 0;
+      background: linear-gradient(135deg, #e8e6f0, #dddae8, #ccc8e0);
+    }
+
+    .dark-mode .holo-card .card-bg {
       background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
     }
 
     .holo-card .card-shine {
       position: absolute; inset: 0;
+      background: linear-gradient(
+        115deg,
+        transparent 20%,
+        rgba(58,176,160,0.1) 35%,
+        rgba(138,78,197,0.1) 50%,
+        rgba(208,78,78,0.1) 65%,
+        transparent 80%
+      );
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
+
+    .dark-mode .holo-card .card-shine {
       background: linear-gradient(
         115deg,
         transparent 20%,
@@ -275,8 +359,6 @@
         rgba(240,110,110,0.15) 65%,
         transparent 80%
       );
-      opacity: 0;
-      transition: opacity 0.3s;
     }
 
     .holo-card:hover .card-shine { opacity: 1; }
@@ -287,10 +369,10 @@
       color: #0a0a0f;
       font-family: 'Cinzel', serif;
       font-weight: 900;
-      font-size: 1.1rem;
-      width: 28px; height: 28px;
-      display: flex; align-items: center; justify-content: center;
+      font-size: 0.85rem;
+      padding: 3px 8px;
       border-radius: 2px;
+      letter-spacing: 0.04em;
     }
 
     .holo-card .card-label {
@@ -299,9 +381,12 @@
       font-weight: 600;
       letter-spacing: 0.1em;
       text-transform: uppercase;
-      color: rgba(255,255,255,0.6);
+      color: rgba(0,0,0,0.5);
+      text-shadow: 0 0 4px rgba(0,0,0,0.15), 0 0 8px rgba(0,0,0,0.1);
     }
 
+    .dark-mode .holo-card .card-label { color: rgba(255,255,255,0.85); font-size: 0.55rem; text-shadow: 0 0 6px rgba(0,0,0,0.5), 0 0 12px rgba(0,0,0,0.3); }
+
     .holo-card .card-art {
       position: absolute; inset: 20px 8px 40px;
       display: flex; align-items: center; justify-content: center;
@@ -390,7 +475,7 @@
 
     .grade-chip.prime-grade {
       grid-column: 1 / -1;
-      background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(240,110,110,0.04), rgba(90,240,216,0.04));
+      background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(208,78,78,0.04), rgba(58,176,160,0.04));
       border-color: rgba(201,168,76,0.5);
       display: flex; align-items: center; gap: 1.5rem;
       padding: 1.25rem 1.5rem;
@@ -399,6 +484,14 @@
 
     .grade-chip.prime-grade:hover {
       border-color: var(--gold);
+      background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(208,78,78,0.06), rgba(58,176,160,0.06));
+    }
+
+    .dark-mode .grade-chip.prime-grade {
+      background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(240,110,110,0.04), rgba(90,240,216,0.04));
+    }
+
+    .dark-mode .grade-chip.prime-grade:hover {
       background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(240,110,110,0.06), rgba(90,240,216,0.06));
     }
 
@@ -530,11 +623,16 @@
     .team-avatar {
       width: 72px; height: 72px;
       border-radius: 50%;
-      background: linear-gradient(135deg, var(--border), #2a2a3e);
+      background: linear-gradient(135deg, var(--border), #d0ced8);
       margin: 0 auto 1rem;
       display: flex; align-items: center; justify-content: center;
       font-size: 1.8rem;
       border: 2px solid var(--border);
+      transition: background 0.3s;
+    }
+
+    .dark-mode .team-avatar {
+      background: linear-gradient(135deg, var(--border), #2a2a3e);
     }
 
     .team-name {
@@ -566,22 +664,28 @@
 
     .team-tag.pokemon {
       background: rgba(240,200,50,0.15);
-      color: #f0c832;
+      color: #b8941e;
       border: 1px solid rgba(240,200,50,0.25);
     }
 
+    .dark-mode .team-tag.pokemon { color: #f0c832; }
+
     .team-tag.onepiece {
       background: rgba(80,180,240,0.15);
-      color: #50b4f0;
+      color: #2068a0;
       border: 1px solid rgba(80,180,240,0.25);
     }
 
+    .dark-mode .team-tag.onepiece { color: #50b4f0; }
+
     .team-tag.ceo {
       background: rgba(201,168,76,0.2);
-      color: var(--gold-light);
+      color: #8a6e20;
       border: 1px solid rgba(201,168,76,0.4);
     }
 
+    .dark-mode .team-tag.ceo { color: var(--gold-light); }
+
     .team-bio {
       font-size: 0.8rem;
       color: var(--muted);
@@ -768,25 +872,57 @@
     }
 
     #toast.show { opacity: 1; transform: translateY(0); }
+
+    /* ── SCROLL TO TOP ── */
+    #scroll-top {
+      position: fixed; bottom: 2rem; left: 2rem; z-index: 999;
+      width: 42px; height: 42px;
+      border: 1px solid var(--gold);
+      background: var(--surface);
+      color: var(--gold);
+      font-size: 1.2rem;
+      cursor: pointer;
+      border-radius: 4px;
+      display: flex; align-items: center; justify-content: center;
+      opacity: 0;
+      transform: translateY(12px);
+      pointer-events: none;
+      transition: opacity 0.3s, transform 0.3s, background 0.2s;
+      line-height: 1;
+    }
+
+    #scroll-top.visible {
+      opacity: 1;
+      transform: translateY(0);
+      pointer-events: auto;
+    }
+
+    #scroll-top:hover {
+      background: var(--gold);
+      color: #0a0a0f;
+    }
   </style>
 </head>
 <body>
 
 <nav>
-  <a class="logo" href="#">Prime<span>Grading</span>.dk</a>
-  <button class="hamburger" onclick="toggleMenu()" aria-label="Menu">
-    <span></span>
-    <span></span>
-    <span></span>
-  </button>
-  <ul id="nav-menu">
-    <li><a href="#how" onclick="closeMenu()">Sådan virker det</a></li>
-    <li><a href="#grades" onclick="closeMenu()">Knækningsskala</a></li>
-    <li><a href="#labels" onclick="closeMenu()">Labels</a></li>
-    <li><a href="#team" onclick="closeMenu()">Teamet</a></li>
-    <li><a href="#priser" onclick="closeMenu()">Priser</a></li>
-    <li><a href="#submit" onclick="closeMenu()">Indsend kort</a></li>
-  </ul>
+  <a class="logo" href="#"><img src="primegrading-logo.svg" alt="PrimeGrading.dk" /></a>
+  <div class="nav-right">
+    <button class="theme-toggle" onclick="toggleTheme()" id="themeBtn" title="Skift tema">☀️</button>
+    <button class="hamburger" onclick="toggleMenu()" aria-label="Menu">
+      <span></span>
+      <span></span>
+      <span></span>
+    </button>
+    <ul id="nav-menu">
+      <li><a href="#how" onclick="closeMenu()">Sådan virker det</a></li>
+      <li><a href="#grades" onclick="closeMenu()">Knækningsskala</a></li>
+      <li><a href="#labels" onclick="closeMenu()">Labels</a></li>
+      <li><a href="#team" onclick="closeMenu()">Teamet</a></li>
+      <li><a href="#priser" onclick="closeMenu()">Priser</a></li>
+      <li><a href="#submit" onclick="closeMenu()">Indsend kort</a></li>
+    </ul>
+  </div>
 </nav>
 
 <!-- HERO -->
@@ -808,36 +944,36 @@
       <div class="card-bg"></div>
       <div class="card-shine"></div>
       <div class="card-label">Pokémon TCG</div>
-      <div class="card-art">💔</div>
-      <div class="card-grade">K10</div>
+      <div class="card-art">✨</div>
+      <div class="card-grade">HVAD</div>
     </div>
     <div class="holo-card">
-      <div class="card-bg" style="background:linear-gradient(135deg,#1a0a2e,#2e1650,#1a0a2e)"></div>
+      <div class="card-bg" style="background:linear-gradient(135deg,#f0e0d0,#e8ccaa,#f0e0d0)"></div>
       <div class="card-shine"></div>
       <div class="card-label">One Piece TCG</div>
-      <div class="card-art">☠️</div>
-      <div class="card-grade">K9</div>
+      <div class="card-art">➰</div>
+      <div class="card-grade">BØJ</div>
     </div>
     <div class="holo-card">
-      <div class="card-bg" style="background:linear-gradient(135deg,#0a1a2e,#0f3460,#0a1a2e)"></div>
+      <div class="card-bg" style="background:linear-gradient(135deg,#e0d8f0,#c8bae8,#e0d8f0)"></div>
       <div class="card-shine"></div>
       <div class="card-label">Pokémon TCG</div>
-      <div class="card-art">🔥</div>
-      <div class="card-grade">K8</div>
-    </div>
-    <div class="holo-card">
-      <div class="card-bg" style="background:linear-gradient(135deg,#0a2e1a,#0a3020,#0a2e1a)"></div>
-      <div class="card-shine"></div>
-      <div class="card-label">One Piece TCG</div>
-      <div class="card-art">⚓</div>
+      <div class="card-art">💥</div>
       <div class="card-grade">KNÆK</div>
     </div>
     <div class="holo-card">
-      <div class="card-bg" style="background:linear-gradient(135deg,#2e1a0a,#3d1f0a,#2e1a0a)"></div>
+      <div class="card-bg" style="background:linear-gradient(135deg,#d0ebe0,#a8e0cc,#d0ebe0)"></div>
+      <div class="card-shine"></div>
+      <div class="card-label">One Piece TCG</div>
+      <div class="card-art">💧</div>
+      <div class="card-grade">VÅD</div>
+    </div>
+    <div class="holo-card">
+      <div class="card-bg" style="background:linear-gradient(135deg,#f0d0d0,#e8b8b8,#f0d0d0)"></div>
       <div class="card-shine"></div>
       <div class="card-label">Pokémon TCG</div>
-      <div class="card-art">💧</div>
-      <div class="card-grade">V10</div>
+      <div class="card-art">⚰️</div>
+      <div class="card-grade">RIP</div>
     </div>
   </div>
 </section>
@@ -879,7 +1015,6 @@
     <p class="section-lead">Fra en let bøjning til total, uigenkaldelig destruktion — her er hvad du kan forvente.</p>
     <div class="scale">
 
-      <!-- PRIME KNÆK — særklasse øverst -->
       <div class="grade-chip prime-grade">
         <div class="prime-grade-star">💀</div>
         <div class="prime-grade-info">
@@ -897,7 +1032,7 @@
       <div class="grade-chip"><span class="grade-score">V10</span><span class="grade-label">Vandbad Premium</span></div>
       <div class="grade-chip"><span class="grade-score">V7</span><span class="grade-label">Vandbad Standard</span></div>
       <div class="grade-chip"><span class="grade-score">R5</span><span class="grade-label">Ridset m. Kærlighed</span></div>
-      <div class="grade-chip"><span class="grade-score">M1</span><span class="grade-label">Mild Berøring</span></div>
+      <div class="grade-chip"><span class="grade-score">M1</span><span class="grade-label">Mistet på lager</span></div>
     </div>
   </div>
 </section>
@@ -1131,6 +1266,7 @@
           <option>Premium Knæk (1.299 kr)</option>
           <option>Deluxe Vandbad (2.999 kr)</option>
           <option>PRIME KNÆK (9.999 kr)</option>
+          <option>🎲 Overrask mig — vi finder på noget</option>
         </select>
       </div>
       <div class="form-group full">
@@ -1156,13 +1292,41 @@
 
 <div id="toast">✓ Din forespørgsel er modtaget — vi knækker dem snart!</div>
 
+<button id="scroll-top" onclick="window.scrollTo({top:0,behavior:'smooth'})" aria-label="Til toppen">↑</button>
+
 <script>
-  function handleSubmit() {
-    const toast = document.getElementById('toast');
-    toast.classList.add('show');
-    setTimeout(() => toast.classList.remove('show'), 3500);
+  function toggleTheme() {
+    const body = document.body;
+    const btn = document.getElementById('themeBtn');
+    body.classList.toggle('dark-mode');
+    const isDark = body.classList.contains('dark-mode');
+    btn.textContent = isDark ? '🌙' : '☀️';
+    localStorage.setItem('primegrading-theme', isDark ? 'dark' : 'light');
   }
 
+  // Load saved theme on page load
+  (function() {
+    const saved = localStorage.getItem('primegrading-theme');
+    const body = document.body;
+    const btn = document.getElementById('themeBtn');
+    if (saved === 'dark') {
+      body.classList.add('dark-mode');
+      btn.textContent = '🌙';
+    } else {
+      btn.textContent = '☀️';
+    }
+  })();
+
+  // Scroll-to-top visibility
+  window.addEventListener('scroll', function() {
+    const btn = document.getElementById('scroll-top');
+    if (window.scrollY > 400) {
+      btn.classList.add('visible');
+    } else {
+      btn.classList.remove('visible');
+    }
+  });
+
   function toggleMenu() {
     const btn = document.querySelector('.hamburger');
     const menu = document.getElementById('nav-menu');
@@ -1176,6 +1340,12 @@
     btn.classList.remove('active');
     menu.classList.remove('open');
   }
+
+  function handleSubmit() {
+    const toast = document.getElementById('toast');
+    toast.classList.add('show');
+    setTimeout(() => toast.classList.remove('show'), 3500);
+  }
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/primegrading-web/html/index.html.old b/primegrading-web/html/index.html.old
deleted file mode 100644
index 0f855ca..0000000
--- a/primegrading-web/html/index.html.old
+++ /dev/null
@@ -1,793 +0,0 @@
-<!DOCTYPE html>
-<html lang="da">
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>PrimeGrading.dk — Professionel Kortgradering</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=Cinzel:wght@700;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet" />
-  <style>
-    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
-
-    :root {
-      --bg:        #0a0a0f;
-      --surface:   #111118;
-      --border:    #1e1e2e;
-      --gold:      #c9a84c;
-      --gold-light:#f0d070;
-      --red:       #cc2222;
-      --text:      #e8e6f0;
-      --muted:     #7a7890;
-      --holo1:     #5af0d8;
-      --holo2:     #b06ef5;
-      --holo3:     #f06e6e;
-    }
-
-    html { scroll-behavior: smooth; }
-
-    body {
-      background: var(--bg);
-      color: var(--text);
-      font-family: 'Inter', sans-serif;
-      font-weight: 400;
-      line-height: 1.6;
-      overflow-x: hidden;
-    }
-
-    /* ── NAV ── */
-    nav {
-      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
-      display: flex; align-items: center; justify-content: space-between;
-      padding: 1rem 2.5rem;
-      background: rgba(10,10,15,0.85);
-      backdrop-filter: blur(12px);
-      border-bottom: 1px solid var(--border);
-    }
-
-    .logo {
-      font-family: 'Cinzel', serif;
-      font-weight: 900;
-      font-size: 1.3rem;
-      letter-spacing: 0.08em;
-      background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold));
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      text-decoration: none;
-    }
-
-    .logo span {
-      color: var(--red);
-      -webkit-text-fill-color: var(--red);
-    }
-
-    nav ul {
-      list-style: none;
-      display: flex; gap: 2rem;
-    }
-
-    nav ul a {
-      color: var(--muted);
-      text-decoration: none;
-      font-size: 0.85rem;
-      font-weight: 500;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      transition: color 0.2s;
-    }
-
-    nav ul a:hover { color: var(--gold); }
-
-    /* ── HERO ── */
-    .hero {
-      min-height: 100vh;
-      display: flex; flex-direction: column;
-      align-items: center; justify-content: center;
-      text-align: center;
-      padding: 6rem 2rem 4rem;
-      position: relative;
-      overflow: hidden;
-    }
-
-    .hero-glow {
-      position: absolute; inset: 0; z-index: 0;
-      background:
-        radial-gradient(ellipse 60% 40% at 50% 30%, rgba(201,168,76,0.08) 0%, transparent 70%),
-        radial-gradient(ellipse 40% 30% at 20% 80%, rgba(90,240,216,0.04) 0%, transparent 60%),
-        radial-gradient(ellipse 40% 30% at 80% 70%, rgba(176,110,245,0.04) 0%, transparent 60%);
-    }
-
-    .hero > * { position: relative; z-index: 1; }
-
-    .eyebrow {
-      display: inline-block;
-      font-size: 0.7rem;
-      font-weight: 600;
-      letter-spacing: 0.2em;
-      text-transform: uppercase;
-      color: var(--gold);
-      border: 1px solid rgba(201,168,76,0.3);
-      padding: 0.35rem 1rem;
-      border-radius: 2px;
-      margin-bottom: 1.5rem;
-    }
-
-    h1 {
-      font-family: 'Cinzel', serif;
-      font-weight: 900;
-      font-size: clamp(2.8rem, 7vw, 6rem);
-      line-height: 1.05;
-      letter-spacing: -0.01em;
-      margin-bottom: 1.5rem;
-    }
-
-    h1 .line1 {
-      display: block;
-      background: linear-gradient(135deg, #fff 30%, var(--gold-light));
-      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-    }
-
-    h1 .line2 {
-      display: block;
-      background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--holo1));
-      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-    }
-
-    .hero-sub {
-      max-width: 520px;
-      color: var(--muted);
-      font-size: 1.05rem;
-      margin-bottom: 2.5rem;
-    }
-
-    .cta-group {
-      display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center;
-    }
-
-    .btn-primary {
-      background: linear-gradient(135deg, var(--gold), #a87b20);
-      color: #0a0a0f;
-      font-weight: 600;
-      font-size: 0.9rem;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      padding: 0.85rem 2rem;
-      border: none; cursor: pointer;
-      text-decoration: none;
-      clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
-      transition: opacity 0.2s;
-    }
-
-    .btn-primary:hover { opacity: 0.85; }
-
-    .btn-secondary {
-      background: transparent;
-      color: var(--gold);
-      font-weight: 500;
-      font-size: 0.9rem;
-      letter-spacing: 0.05em;
-      text-transform: uppercase;
-      padding: 0.85rem 2rem;
-      border: 1px solid rgba(201,168,76,0.4);
-      cursor: pointer;
-      text-decoration: none;
-      clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
-      transition: border-color 0.2s, color 0.2s;
-    }
-
-    .btn-secondary:hover { border-color: var(--gold); color: var(--gold-light); }
-
-    /* ── HOLO CARDS ROW ── */
-    .cards-row {
-      display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap;
-      margin-top: 4rem;
-    }
-
-    .holo-card {
-      width: 120px; height: 168px;
-      border-radius: 6px;
-      position: relative;
-      overflow: hidden;
-      border: 1px solid rgba(255,255,255,0.08);
-      cursor: pointer;
-      transition: transform 0.3s, box-shadow 0.3s;
-    }
-
-    .holo-card:hover {
-      transform: translateY(-8px) rotate(-1deg);
-      box-shadow: 0 20px 40px rgba(0,0,0,0.5), 0 0 20px rgba(201,168,76,0.2);
-    }
-
-    .holo-card .card-bg {
-      position: absolute; inset: 0;
-      background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
-    }
-
-    .holo-card .card-shine {
-      position: absolute; inset: 0;
-      background: linear-gradient(
-        115deg,
-        transparent 20%,
-        rgba(90,240,216,0.15) 35%,
-        rgba(176,110,245,0.15) 50%,
-        rgba(240,110,110,0.15) 65%,
-        transparent 80%
-      );
-      opacity: 0;
-      transition: opacity 0.3s;
-    }
-
-    .holo-card:hover .card-shine { opacity: 1; }
-
-    .holo-card .card-grade {
-      position: absolute; bottom: 8px; right: 8px;
-      background: var(--gold);
-      color: #0a0a0f;
-      font-family: 'Cinzel', serif;
-      font-weight: 900;
-      font-size: 1.1rem;
-      width: 28px; height: 28px;
-      display: flex; align-items: center; justify-content: center;
-      border-radius: 2px;
-    }
-
-    .holo-card .card-label {
-      position: absolute; top: 8px; left: 8px; right: 8px;
-      font-size: 0.5rem;
-      font-weight: 600;
-      letter-spacing: 0.1em;
-      text-transform: uppercase;
-      color: rgba(255,255,255,0.6);
-    }
-
-    .holo-card .card-art {
-      position: absolute; inset: 20px 8px 40px;
-      display: flex; align-items: center; justify-content: center;
-      font-size: 2.5rem;
-    }
-
-    /* ── SECTION ── */
-    section { padding: 5rem 2rem; }
-
-    .container { max-width: 1000px; margin: 0 auto; }
-
-    .section-title {
-      font-family: 'Cinzel', serif;
-      font-size: clamp(1.6rem, 3vw, 2.4rem);
-      font-weight: 700;
-      margin-bottom: 0.5rem;
-      color: var(--text);
-    }
-
-    .section-title span { color: var(--gold); }
-
-    .section-lead {
-      color: var(--muted);
-      max-width: 520px;
-      margin-bottom: 3rem;
-    }
-
-    /* ── HOW IT WORKS ── */
-    #how { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
-
-    .steps {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 2rem;
-    }
-
-    .step {
-      padding: 1.5rem;
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      position: relative;
-      background: var(--bg);
-      transition: border-color 0.2s;
-    }
-
-    .step:hover { border-color: rgba(201,168,76,0.4); }
-
-    .step-num {
-      font-family: 'Cinzel', serif;
-      font-size: 2.5rem;
-      font-weight: 900;
-      color: rgba(201,168,76,0.15);
-      line-height: 1;
-      margin-bottom: 0.75rem;
-    }
-
-    .step h3 {
-      font-size: 0.95rem;
-      font-weight: 600;
-      margin-bottom: 0.5rem;
-      color: var(--text);
-    }
-
-    .step p { font-size: 0.85rem; color: var(--muted); }
-
-    /* ── GRADING SCALE ── */
-    .scale {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-      gap: 1rem;
-    }
-
-    .grade-chip {
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 1rem;
-      text-align: center;
-      transition: border-color 0.2s, background 0.2s;
-      cursor: default;
-    }
-
-    .grade-chip:hover {
-      background: rgba(201,168,76,0.05);
-      border-color: rgba(201,168,76,0.3);
-    }
-
-    .grade-chip.prime-grade {
-      grid-column: 1 / -1;
-      background: linear-gradient(135deg, rgba(201,168,76,0.08), rgba(90,240,216,0.04), rgba(176,110,245,0.04));
-      border-color: rgba(201,168,76,0.5);
-      display: flex; align-items: center; gap: 1.5rem;
-      padding: 1.25rem 1.5rem;
-      text-align: left;
-    }
-
-    .grade-chip.prime-grade:hover {
-      border-color: var(--gold);
-      background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(90,240,216,0.06), rgba(176,110,245,0.06));
-    }
-
-    .prime-grade-star { font-size: 2rem; flex-shrink: 0; }
-    .prime-grade-info { flex: 1; }
-
-    .prime-grade-title {
-      font-family: 'Cinzel', serif;
-      font-size: 1.1rem; font-weight: 900;
-      background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--holo1));
-      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-      display: block;
-    }
-
-    .prime-grade-sub {
-      font-size: 0.78rem; color: var(--muted); margin-top: 0.25rem; line-height: 1.5;
-    }
-
-    .grade-score {
-      font-family: 'Cinzel', serif;
-      font-size: 2rem;
-      font-weight: 900;
-      background: linear-gradient(135deg, var(--gold), var(--gold-light));
-      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-      display: block;
-    }
-
-    .grade-label {
-      font-size: 0.7rem;
-      font-weight: 600;
-      letter-spacing: 0.1em;
-      text-transform: uppercase;
-      color: var(--muted);
-      margin-top: 0.2rem;
-      display: block;
-    }
-
-    /* ── LABELS SECTION ── */
-    #labels { border-top: 1px solid var(--border); }
-
-    .labels-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-      gap: 1rem;
-      margin-bottom: 3rem;
-    }
-
-    .label-card {
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 1.25rem 1.5rem;
-      display: flex; align-items: flex-start; gap: 1rem;
-      background: var(--surface);
-      transition: border-color 0.2s;
-    }
-
-    .label-card:hover { border-color: rgba(201,168,76,0.3); }
-
-    .label-dot {
-      width: 13px; height: 13px;
-      border-radius: 50%;
-      flex-shrink: 0; margin-top: 0.3rem;
-    }
-
-    .label-card h4 { font-size: 0.9rem; font-weight: 600; color: var(--text); margin-bottom: 0.3rem; }
-    .label-card p  { font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
-
-    .compare-box {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1rem;
-    }
-
-    @media (max-width: 600px) { .compare-box { grid-template-columns: 1fr; } }
-
-    .compare-col {
-      border: 1px solid var(--border);
-      border-radius: 4px;
-      padding: 1.5rem;
-      background: var(--surface);
-    }
-
-    .compare-col.prime { border-color: rgba(201,168,76,0.4); background: rgba(201,168,76,0.03); }
-
-    .compare-col h4 {
-      font-family: 'Cinzel', serif;
-      font-size: 0.95rem; font-weight: 700;
-      margin-bottom: 1rem; color: var(--text);
-    }
-
-    .compare-col.prime h4 {
-      background: linear-gradient(135deg, var(--gold), var(--gold-light));
-      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
-    }
-
-    .compare-col ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
-
-    .compare-col ul li {
-      font-size: 0.85rem; color: var(--muted);
-      padding-left: 1.2rem; position: relative;
-    }
-
-    .compare-col ul li::before {
-      content: '—'; position: absolute; left: 0;
-      color: var(--gold); opacity: 0.5;
-    }
-
-    .compare-col.prime ul li::before { opacity: 1; }
-
-    /* ── SUBMIT FORM ── */
-    #submit { background: var(--surface); border-top: 1px solid var(--border); }
-
-    .form-grid {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 1.25rem;
-    }
-
-    @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
-
-    .form-group { display: flex; flex-direction: column; gap: 0.4rem; }
-    .form-group.full { grid-column: 1 / -1; }
-
-    label {
-      font-size: 0.75rem;
-      font-weight: 600;
-      letter-spacing: 0.08em;
-      text-transform: uppercase;
-      color: var(--muted);
-    }
-
-    input, select, textarea {
-      background: var(--bg);
-      border: 1px solid var(--border);
-      color: var(--text);
-      padding: 0.75rem 1rem;
-      font-family: 'Inter', sans-serif;
-      font-size: 0.9rem;
-      border-radius: 2px;
-      outline: none;
-      transition: border-color 0.2s;
-      appearance: none;
-    }
-
-    input:focus, select:focus, textarea:focus {
-      border-color: var(--gold);
-      box-shadow: 0 0 0 2px rgba(201,168,76,0.1);
-    }
-
-    textarea { resize: vertical; min-height: 100px; }
-
-    select { cursor: pointer; }
-
-    .submit-btn {
-      margin-top: 0.5rem;
-      background: linear-gradient(135deg, var(--gold), #a87b20);
-      color: #0a0a0f;
-      font-weight: 700;
-      font-size: 0.85rem;
-      letter-spacing: 0.1em;
-      text-transform: uppercase;
-      padding: 0.9rem 2.5rem;
-      border: none; cursor: pointer;
-      clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
-      transition: opacity 0.2s;
-      align-self: flex-start;
-    }
-
-    .submit-btn:hover { opacity: 0.85; }
-
-    .form-note {
-      margin-top: 1rem;
-      font-size: 0.75rem;
-      color: var(--muted);
-      font-style: italic;
-    }
-
-    /* ── FOOTER ── */
-    footer {
-      border-top: 1px solid var(--border);
-      padding: 2rem;
-      text-align: center;
-      color: var(--muted);
-      font-size: 0.8rem;
-    }
-
-    footer strong { color: var(--gold); font-family: 'Cinzel', serif; }
-
-    /* ── TOAST ── */
-    #toast {
-      position: fixed; bottom: 2rem; right: 2rem; z-index: 999;
-      background: var(--surface);
-      border: 1px solid var(--gold);
-      color: var(--text);
-      padding: 1rem 1.5rem;
-      border-radius: 4px;
-      font-size: 0.9rem;
-      opacity: 0;
-      transform: translateY(10px);
-      transition: opacity 0.3s, transform 0.3s;
-      pointer-events: none;
-    }
-
-    #toast.show { opacity: 1; transform: translateY(0); }
-  </style>
-</head>
-<body>
-
-<nav>
-  <a class="logo" href="#">Prime<span>Grading</span>.dk</a>
-  <ul>
-    <li><a href="#how">Sådan virker det</a></li>
-    <li><a href="#grades">Karakterskala</a></li>
-    <li><a href="#labels">Labels</a></li>
-    <li><a href="#submit">Indsend kort</a></li>
-  </ul>
-</nav>
-
-<!-- HERO -->
-<section class="hero">
-  <div class="hero-glow"></div>
-  <div class="eyebrow">Pokémon · One Piece · Kortgradering</div>
-  <h1>
-    <span class="line1">Dine kort.</span>
-    <span class="line2">Officielt bedømt.</span>
-  </h1>
-  <p class="hero-sub">PrimeGrading.dk grader dine samlerkort professionelt — og beskytter dem i en forseglet slab, så de holder sin værdi.</p>
-  <div class="cta-group">
-    <a class="btn-primary" href="#submit">Indsend dine kort</a>
-    <a class="btn-secondary" href="#how">Se processen</a>
-  </div>
-
-  <div class="cards-row">
-    <div class="holo-card">
-      <div class="card-bg"></div>
-      <div class="card-shine"></div>
-      <div class="card-label">Pokémon TCG</div>
-      <div class="card-art">⚡</div>
-      <div class="card-grade">10</div>
-    </div>
-    <div class="holo-card">
-      <div class="card-bg" style="background:linear-gradient(135deg,#1a0a2e,#2e1650,#1a0a2e)"></div>
-      <div class="card-shine"></div>
-      <div class="card-label">One Piece TCG</div>
-      <div class="card-art">☠️</div>
-      <div class="card-grade">9</div>
-    </div>
-    <div class="holo-card">
-      <div class="card-bg" style="background:linear-gradient(135deg,#0a1a2e,#0f3460,#0a1a2e)"></div>
-      <div class="card-shine"></div>
-      <div class="card-label">Pokémon TCG</div>
-      <div class="card-art">🔥</div>
-      <div class="card-grade">8</div>
-    </div>
-    <div class="holo-card">
-      <div class="card-bg" style="background:linear-gradient(135deg,#0a2e1a,#0a3020,#0a2e1a)"></div>
-      <div class="card-shine"></div>
-      <div class="card-label">One Piece TCG</div>
-      <div class="card-art">⚓</div>
-      <div class="card-grade">9</div>
-    </div>
-    <div class="holo-card">
-      <div class="card-bg" style="background:linear-gradient(135deg,#2e1a0a,#3d1f0a,#2e1a0a)"></div>
-      <div class="card-shine"></div>
-      <div class="card-label">Pokémon TCG</div>
-      <div class="card-art">💧</div>
-      <div class="card-grade">10</div>
-    </div>
-  </div>
-</section>
-
-<!-- HOW IT WORKS -->
-<section id="how">
-  <div class="container">
-    <h2 class="section-title">Sådan <span>virker det</span></h2>
-    <p class="section-lead">Fire enkle trin fra din brevkasse til en certificeret slab.</p>
-    <div class="steps">
-      <div class="step">
-        <div class="step-num">01</div>
-        <h3>Indsend dine kort</h3>
-        <p>Udfyld formularen med kortoplysninger og send dem afsted i sikker emballage.</p>
-      </div>
-      <div class="step">
-        <div class="step-num">02</div>
-        <h3>Professionel inspektion</h3>
-        <p>Hvert kort inspiceres under lup for centering, hjørner, kanter og overflade.</p>
-      </div>
-      <div class="step">
-        <div class="step-num">03</div>
-        <h3>Karakter tildeles</h3>
-        <p>Kortet får en score fra 1–10 baseret på vores standardiserede graderingsskala.</p>
-      </div>
-      <div class="step">
-        <div class="step-num">04</div>
-        <h3>Forseglet slab</h3>
-        <p>Kortet forsegles i en UV-beskyttende slab med din score og en unik serienummer.</p>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- GRADES -->
-<section id="grades">
-  <div class="container">
-    <h2 class="section-title">Vores <span>karakterskala</span></h2>
-    <p class="section-lead">Fra Poor til den ekslusive PRIME GRADE — vores højeste og mest prestigefyldte vurdering.</p>
-    <div class="scale">
-
-      <!-- PRIME GRADE — særklasse øverst -->
-      <div class="grade-chip prime-grade">
-        <div class="prime-grade-star">⭐</div>
-        <div class="prime-grade-info">
-          <span class="prime-grade-title">PRIME GRADE — Ultra Premium</span>
-          <span class="prime-grade-sub">Fire perfekte 10'ere <strong>plus</strong> en ekstra visuel vurdering: eye appeal, printkvalitet og ingen fabriksfejl. Kun tildelt de absolut bedste kort med guld/grøn label.</span>
-        </div>
-      </div>
-
-      <div class="grade-chip"><span class="grade-score">10</span><span class="grade-label">Gem Mint</span></div>
-      <div class="grade-chip"><span class="grade-score">9.5</span><span class="grade-label">Mint+</span></div>
-      <div class="grade-chip"><span class="grade-score">9</span><span class="grade-label">Mint</span></div>
-      <div class="grade-chip"><span class="grade-score">8.5</span><span class="grade-label">Near Mint+</span></div>
-      <div class="grade-chip"><span class="grade-score">8</span><span class="grade-label">Near Mint</span></div>
-      <div class="grade-chip"><span class="grade-score">7.5</span><span class="grade-label">Excellent+</span></div>
-      <div class="grade-chip"><span class="grade-score">7</span><span class="grade-label">Excellent</span></div>
-      <div class="grade-chip"><span class="grade-score">6</span><span class="grade-label">Very Good</span></div>
-      <div class="grade-chip"><span class="grade-score">5</span><span class="grade-label">Good</span></div>
-      <div class="grade-chip"><span class="grade-score">4</span><span class="grade-label">Fair</span></div>
-      <div class="grade-chip"><span class="grade-score">3</span><span class="grade-label">Poor</span></div>
-    </div>
-  </div>
-</section>
-
-<!-- SPECIAL LABELS -->
-<section id="labels">
-  <div class="container">
-    <h2 class="section-title">Special <span>Labels</span></h2>
-    <p class="section-lead">Udover standardskalaen tildeler vi særlige labels til kort, der fortjener ekstra anerkendelse.</p>
-
-    <div class="labels-grid">
-      <div class="label-card">
-        <div class="label-dot" style="background:#4caf50;"></div>
-        <div>
-          <h4>Prime Standard</h4>
-          <p>Vores grundlæggende label for godkendte og vurderede kort.</p>
-        </div>
-      </div>
-      <div class="label-card">
-        <div class="label-dot" style="background:#c9a84c;"></div>
-        <div>
-          <h4>Gold Label</h4>
-          <p>Tildelt kort med særlig høj score og fremragende stand.</p>
-        </div>
-      </div>
-      <div class="label-card">
-        <div class="label-dot" style="background:#e05c5c;"></div>
-        <div>
-          <h4>Founder Edition</h4>
-          <p>Eksklusivt label til de første kort vurderet af PrimeGrading.</p>
-        </div>
-      </div>
-      <div class="label-card">
-        <div class="label-dot" style="background:#555570;"></div>
-        <div>
-          <h4>Black Label</h4>
-          <p>Kræver perfekte 10'ere i alle subgrades — centering, hjørner, kanter og overflade.</p>
-        </div>
-      </div>
-      <div class="label-card">
-        <div class="label-dot" style="background:#f0d070; box-shadow: 0 0 6px rgba(240,208,112,0.6);"></div>
-        <div>
-          <h4>⭐ PRIME GRADE</h4>
-          <p>Det absolut højeste label. Kun til kort der er perfekte i alle subgrades <em>og</em> består den visuelle vurdering.</p>
-        </div>
-      </div>
-    </div>
-
-    <h3 class="section-title" style="font-size:1.2rem; margin-bottom:1rem;">Black Label <span>vs PRIME GRADE</span></h3>
-    <div class="compare-box">
-      <div class="compare-col">
-        <h4>Black Label</h4>
-        <ul>
-          <li>Fire 10'ere i alle subgrades</li>
-          <li>Sort label</li>
-        </ul>
-      </div>
-      <div class="compare-col prime">
-        <h4>PRIME GRADE</h4>
-        <ul>
-          <li>Fire perfekte 10'ere i alle subgrades</li>
-          <li>Ekstra visuel vurdering: eye appeal, printkvalitet, ingen fabriksfejl</li>
-          <li>Guld/grøn label</li>
-          <li>Kun de absolut bedste kort opnår dette</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</section>
-
-<!-- SUBMIT -->
-<section id="submit">
-  <div class="container">
-    <h2 class="section-title">Indsend <span>dine kort</span></h2>
-    <p class="section-lead">Udfyld formularen herunder, så vender vi tilbage med en fragtlabel og bekræftelse.</p>
-    <div class="form-grid">
-      <div class="form-group">
-        <label for="name">Dit navn</label>
-        <input type="text" id="name" placeholder="Jens Hansen" />
-      </div>
-      <div class="form-group">
-        <label for="email">E-mail</label>
-        <input type="email" id="email" placeholder="jens@eksempel.dk" />
-      </div>
-      <div class="form-group">
-        <label for="cardtype">Korttype</label>
-        <select id="cardtype">
-          <option value="">Vælg korttype…</option>
-          <option>Pokémon TCG</option>
-          <option>One Piece TCG</option>
-          <option>Andet</option>
-        </select>
-      </div>
-      <div class="form-group">
-        <label for="count">Antal kort</label>
-        <input type="number" id="count" min="1" max="100" placeholder="1" />
-      </div>
-      <div class="form-group full">
-        <label for="cards">Kortnavne / sæt</label>
-        <textarea id="cards" placeholder="F.eks. Charizard VMAX — Brilliant Stars #018, Monkey D. Luffy — OP01-060..."></textarea>
-      </div>
-      <div class="form-group full">
-        <button class="submit-btn" onclick="handleSubmit()">Send forespørgsel</button>
-        <p class="form-note">* Dette er en demosformular — der sendes ikke rigtige data nogen steder.</p>
-      </div>
-    </div>
-  </div>
-</section>
-
-<footer>
-  <p><strong>PrimeGrading</strong>.dk — Kortgradering for samlere &nbsp;·&nbsp; Pokémon &amp; One Piece &nbsp;·&nbsp; Danmark</p>
-  <p style="margin-top:0.5rem; font-size:0.7rem;">Dette er en demo-hjemmeside lavet for sjov. Vi er ikke tilknyttet Nintendo, The Pokémon Company eller Bandai.</p>
-</footer>
-
-<div id="toast">✓ Din forespørgsel er forsøgt sendt — vi vender ALDRIG tilbage!</div>
-
-<script>
-  function handleSubmit() {
-    const toast = document.getElementById('toast');
-    toast.classList.add('show');
-    setTimeout(() => toast.classList.remove('show'), 3500);
-  }
-</script>
-</body>
-</html>
diff --git a/primegrading-web/html/preview.png b/primegrading-web/html/preview.png
new file mode 100644
index 0000000..e995231
Binary files /dev/null and b/primegrading-web/html/preview.png differ
diff --git a/primegrading-web/html/primegrading-logo.svg b/primegrading-web/html/primegrading-logo.svg
new file mode 100644
index 0000000..0eb732e
--- /dev/null
+++ b/primegrading-web/html/primegrading-logo.svg
@@ -0,0 +1,70 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 40 1400 230" width="100%" height="100%">
+  <defs>
+    <linearGradient id="gold" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FFF5C0" />
+      <stop offset="40%" stop-color="#D4AF37" />
+      <stop offset="70%" stop-color="#AA7C11" />
+      <stop offset="100%" stop-color="#5B4006" />
+    </linearGradient>
+
+    <linearGradient id="silver" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#FFFFFF" />
+      <stop offset="50%" stop-color="#D1D5DB" />
+      <stop offset="100%" stop-color="#70747C" />
+    </linearGradient>
+
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="4" dy="10" stdDeviation="8" flood-color="#000000" flood-opacity="0.6"/>
+    </filter>
+
+    <filter id="sloganShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-color="#000000" flood-opacity="0.9"/>
+    </filter>
+
+    <style>
+      .slogan-text {
+        font-family: 'Arial Black', 'Impact', 'Arial', sans-serif;
+        font-size: 32px; /* Skaleret markant op fra 20px */
+        font-weight: 900; /* Ekstra fed vægt ligesom på billedet */
+        letter-spacing: 6px; /* Lidt tættere knibet for at give tyngde */
+        text-anchor: middle;
+        text-transform: uppercase;
+        -webkit-text-stroke: 1.5px #000000; /* Tydelig sort kant omkring bogstaverne */
+        fill: #FFFFFF; /* Standard: Klar hvid i mørkt tema */
+      }
+      
+      @media (prefers-color-scheme: light) {
+        .slogan-text {
+          fill: #111111; /* Kraftig mørkegrå i lys tilstand */
+          -webkit-text-stroke: 1px rgba(255,255,255,0.6);
+        }
+      }
+    </style>
+  </defs>
+
+  <g transform="translate(700, 0)">
+    
+    <text x="0" y="150" 
+          font-family="'Arial Black', 'Impact', sans-serif" 
+          font-size="95" 
+          font-weight="950" 
+          font-style="italic" 
+          text-anchor="middle"
+          filter="url(#shadow)">
+      <tspan fill="url(#silver)" letter-spacing="4">PRIME </tspan>
+      <tspan fill="url(#gold)" letter-spacing="2">GRADING</tspan>
+    </text>
+
+    <g transform="translate(0, 225)">
+      <text x="0" y="0" 
+            class="slogan-text"
+            filter="url(#sloganShadow)">
+        VI DEGRADERE DINE KORT
+      </text>
+      
+      <line x1="-310" y1="-10" x2="-470" y2="-10" stroke="url(#gold)" stroke-width="4" stroke-linecap="round"/>
+      
+      <line x1="310" y1="-10" x2="470" y2="-10" stroke="url(#gold)" stroke-width="4" stroke-linecap="round"/>
+    </g>
+  </g>
+</svg>