diff --git a/src/Fragalytics.Web/Pages/ClipJobs/Index.cshtml b/src/Fragalytics.Web/Pages/ClipJobs/Index.cshtml
index fac7a64..0581ddb 100644
--- a/src/Fragalytics.Web/Pages/ClipJobs/Index.cshtml
+++ b/src/Fragalytics.Web/Pages/ClipJobs/Index.cshtml
@@ -12,6 +12,13 @@
     </div>
 </section>
 
+<section class="stats-grid">
+    <article class="card stat-card"><span class="eyebrow">Queued</span><h2>@Model.ClipJobs.Count(row => row.ClipJob.Status == "pending")</h2><p>Ready For Review</p></article>
+    <article class="card stat-card"><span class="eyebrow">Active</span><h2>@Model.ClipJobs.Count(row => row.ClipJob.Status == "rendering")</h2><p>Currently Rendering</p></article>
+    <article class="card stat-card"><span class="eyebrow">Delivered</span><h2>@Model.ClipJobs.Count(row => row.ClipJob.Status == "rendered")</h2><p>Playable Assets</p></article>
+    <article class="card stat-card"><span class="eyebrow">Attention</span><h2>@Model.ClipJobs.Count(row => row.ClipJob.Status == "failed")</h2><p>Failed Jobs</p></article>
+</section>
+
 <section class="card">
     @if (Model.ClipJobs.Count == 0)
     {
diff --git a/src/Fragalytics.Web/Pages/Index.cshtml b/src/Fragalytics.Web/Pages/Index.cshtml
index 3a3d418..a4ec2cb 100644
--- a/src/Fragalytics.Web/Pages/Index.cshtml
+++ b/src/Fragalytics.Web/Pages/Index.cshtml
@@ -31,6 +31,24 @@
     </div>
 </section>
 
+<section class="workflow-strip">
+    <article class="stage-panel">
+        <span class="eyebrow">01</span>
+        <h3>Ingest</h3>
+        <p class="muted">Manual `.dem` uploads go straight into the local queue with no external dependency chain.</p>
+    </article>
+    <article class="stage-panel">
+        <span class="eyebrow">02</span>
+        <h3>Score</h3>
+        <p class="muted">Parsed events become explainable highlights with visible tags, scores, and clip windows.</p>
+    </article>
+    <article class="stage-panel">
+        <span class="eyebrow">03</span>
+        <h3>Review</h3>
+        <p class="muted">Clip jobs stay inspectable and attachable now, so the render workflow is testable before automation lands.</p>
+    </article>
+</section>
+
 @if (!string.IsNullOrWhiteSpace(Model.StatusMessage))
 {
     <section class="card callout callout-success">
diff --git a/src/Fragalytics.Web/wwwroot/css/site.css b/src/Fragalytics.Web/wwwroot/css/site.css
index dbbc810..fc63f3b 100644
--- a/src/Fragalytics.Web/wwwroot/css/site.css
+++ b/src/Fragalytics.Web/wwwroot/css/site.css
@@ -1,98 +1,142 @@
 :root {
-  --bg: #efe6d5;
-  --panel: rgba(255, 251, 244, 0.92);
-  --panel-2: #f7efdf;
-  --panel-3: #f2e7d1;
-  --ink: #1b1d1c;
-  --muted: #5c615b;
-  --accent: #b5532f;
-  --accent-2: #1f5a52;
-  --accent-3: #846726;
-  --line: rgba(74, 62, 40, 0.14);
-  --soft: rgba(239, 231, 218, 0.85);
-  --shadow: 0 22px 60px rgba(42, 31, 17, 0.09);
-  --shadow-soft: 0 10px 24px rgba(35, 29, 20, 0.06);
+  --bg-0: #071016;
+  --bg-1: #0b1820;
+  --bg-2: #102430;
+  --panel: rgba(12, 24, 31, 0.88);
+  --panel-2: rgba(17, 33, 43, 0.9);
+  --panel-3: rgba(20, 42, 54, 0.95);
+  --ink: #edf5ef;
+  --muted: #97afb0;
+  --accent: #ff7a3d;
+  --accent-2: #32d0b3;
+  --accent-3: #ffd166;
+  --line: rgba(120, 164, 168, 0.18);
+  --soft: rgba(255, 255, 255, 0.05);
+  --shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
+  --shadow-soft: 0 14px 34px rgba(0, 0, 0, 0.22);
 }
 
 * { box-sizing: border-box; }
 
+html {
+  color-scheme: dark;
+}
+
 body {
   margin: 0;
-  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
-  color: var(--ink);
-  background:
-    radial-gradient(circle at top left, rgba(181, 83, 47, 0.2), transparent 22rem),
-    radial-gradient(circle at top right, rgba(31, 90, 82, 0.14), transparent 26rem),
-    linear-gradient(180deg, #f8f3ea, var(--bg));
   min-height: 100vh;
+  color: var(--ink);
+  font-family: "Avenir Next Condensed", "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  background:
+    radial-gradient(circle at top left, rgba(255, 122, 61, 0.16), transparent 22rem),
+    radial-gradient(circle at top right, rgba(50, 208, 179, 0.12), transparent 24rem),
+    linear-gradient(180deg, var(--bg-2), var(--bg-1) 28%, var(--bg-0));
 }
 
-a { color: var(--accent-2); text-decoration: none; }
-a:hover { text-decoration: underline; }
-h1, h2, h3, p { margin-top: 0; }
-table { width: 100%; border-collapse: collapse; }
-th, td { padding: 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; }
-code { font-family: "Courier New", monospace; font-size: 0.9rem; }
-.clip-player { width: 100%; max-width: 100%; border-radius: 14px; background: #000; aspect-ratio: 16 / 9; }
-
-.site-header,
-.page {
-  width: min(1180px, calc(100% - 2rem));
-  margin: 0 auto;
-}
-
-.site-shell {
-  position: relative;
-  padding-bottom: 3rem;
-}
-
-.site-shell::before {
+body::before {
   content: "";
   position: fixed;
   inset: 0;
   pointer-events: none;
   background:
-    linear-gradient(rgba(27, 29, 28, 0.03) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(27, 29, 28, 0.03) 1px, transparent 1px);
-  background-size: 36px 36px;
-  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.32), transparent 70%);
-  opacity: 0.24;
+    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
+  background-size: 28px 28px;
+  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.55), transparent 78%);
+}
+
+a {
+  color: var(--accent-2);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+h1, h2, h3, p {
+  margin-top: 0;
+}
+
+code {
+  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
+  font-size: 0.84rem;
+  word-break: break-word;
+}
+
+.clip-player {
+  width: 100%;
+  max-width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: 16px;
+  background: #000;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow: var(--shadow-soft);
+}
+
+.site-header,
+.page {
+  width: min(1240px, calc(100% - 2rem));
+  margin: 0 auto;
+}
+
+.site-shell {
+  padding-bottom: 3rem;
 }
 
 .site-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 2rem;
-  padding: 2rem 0 1.25rem;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 1.5rem;
+  align-items: end;
+  padding: 1.5rem 0 1.2rem;
 }
 
 .site-branding {
-  max-width: 44rem;
   position: relative;
-  padding-left: 1rem;
+  padding: 1rem 1.1rem 1rem 1.25rem;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background:
+    linear-gradient(140deg, rgba(255, 122, 61, 0.08), transparent 32%),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01)),
+    var(--panel);
+  box-shadow: var(--shadow-soft);
+  overflow: hidden;
 }
 
 .site-branding::before {
   content: "";
   position: absolute;
   left: 0;
-  top: 0.4rem;
-  bottom: 0.4rem;
-  width: 3px;
+  top: 1rem;
+  bottom: 1rem;
+  width: 4px;
   border-radius: 999px;
   background: linear-gradient(180deg, var(--accent), var(--accent-2));
 }
 
 .brand {
-  color: var(--ink);
   display: inline-block;
-  font-size: clamp(2rem, 4vw, 3rem);
-  font-weight: 700;
-  letter-spacing: -0.04em;
+  color: var(--ink);
+  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
+  font-size: clamp(2.6rem, 6vw, 4.4rem);
+  line-height: 0.9;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
   margin-bottom: 0.35rem;
 }
 
+.brand:hover {
+  text-decoration: none;
+}
+
+.site-tagline {
+  max-width: 42rem;
+  font-size: 1rem;
+  letter-spacing: 0.01em;
+}
+
 .nav {
   display: flex;
   gap: 0.75rem;
@@ -100,25 +144,23 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
 }
 
 .nav a {
-  padding: 0.65rem 1rem;
-  border: 1px solid rgba(31, 36, 33, 0.08);
+  padding: 0.8rem 1.15rem;
   border-radius: 999px;
-  background: rgba(255, 251, 244, 0.8);
-  backdrop-filter: blur(8px);
+  border: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
   box-shadow: var(--shadow-soft);
-  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.72rem;
+  color: var(--ink);
+  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
 }
 
 .nav a:hover {
-  text-decoration: none;
   transform: translateY(-1px);
-  background: rgba(255, 251, 244, 0.96);
-  border-color: rgba(31, 90, 82, 0.16);
-}
-
-.site-tagline {
-  max-width: 38rem;
-  font-size: 1rem;
+  border-color: rgba(50, 208, 179, 0.35);
+  background: linear-gradient(180deg, rgba(50, 208, 179, 0.1), rgba(255, 255, 255, 0.03));
+  text-decoration: none;
 }
 
 .page {
@@ -128,12 +170,14 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
 .card {
   position: relative;
   overflow: hidden;
-  background: var(--panel);
   border: 1px solid var(--line);
   border-radius: 24px;
-  padding: 1.4rem;
+  padding: 1.35rem;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
+    var(--panel);
   box-shadow: var(--shadow);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(12px);
 }
 
 .card::after {
@@ -141,59 +185,81 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
   position: absolute;
   inset: 0;
   pointer-events: none;
-  background: linear-gradient(140deg, rgba(255, 255, 255, 0.22), transparent 40%);
+  background: linear-gradient(140deg, rgba(255, 255, 255, 0.08), transparent 28%);
 }
 
 .hero,
 .split,
 .stats-grid,
 .meta-grid,
-.highlight-body {
+.highlight-body,
+.workflow-strip {
   display: grid;
   gap: 1rem;
   margin-bottom: 1rem;
 }
 
-.hero { grid-template-columns: 1.45fr 0.95fr; align-items: stretch; }
-.split { grid-template-columns: 1.15fr 1fr; }
-.split-heavy { grid-template-columns: 1.5fr 0.9fr; }
-.stats-grid { grid-template-columns: repeat(4, 1fr); }
-.meta-grid { grid-template-columns: repeat(4, 1fr); }
-.highlight-body { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
+.hero {
+  grid-template-columns: minmax(0, 1.45fr) minmax(300px, 0.9fr);
+  background:
+    radial-gradient(circle at right top, rgba(50, 208, 179, 0.12), transparent 16rem),
+    linear-gradient(135deg, rgba(255, 122, 61, 0.08), transparent 28%),
+    linear-gradient(180deg, rgba(8, 17, 22, 0.95), rgba(13, 29, 37, 0.92));
+}
+
+.split {
+  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 1fr);
+}
+
+.split-heavy {
+  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.95fr);
+}
+
+.stats-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.meta-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.highlight-body {
+  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
+  align-items: start;
+}
+
+.workflow-strip {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
 
 .eyebrow {
   display: inline-block;
-  font-size: 0.73rem;
-  text-transform: uppercase;
-  letter-spacing: 0.16em;
-  color: var(--accent-3);
   margin-bottom: 0.45rem;
+  color: var(--accent-3);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  font-size: 0.68rem;
   font-weight: 700;
 }
 
-.upload-form {
-  display: grid;
-  gap: 0.75rem;
-  align-content: start;
+.muted {
+  color: var(--muted);
 }
 
 .hero-copy h1,
 .detail-hero h1 {
-  font-size: clamp(2.2rem, 5vw, 3.6rem);
-  line-height: 0.92;
-  letter-spacing: -0.05em;
-  margin-bottom: 0.85rem;
+  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
+  font-size: clamp(3.2rem, 8vw, 5.8rem);
+  line-height: 0.88;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  margin-bottom: 0.8rem;
 }
 
 .hero-copy p {
-  max-width: 44rem;
+  max-width: 46rem;
   font-size: 1.05rem;
-}
-
-.hero {
-  background:
-    radial-gradient(circle at right top, rgba(31, 90, 82, 0.08), transparent 18rem),
-    linear-gradient(135deg, rgba(255, 251, 244, 0.94), rgba(247, 239, 223, 0.94));
+  line-height: 1.5;
 }
 
 .hero-actions {
@@ -204,34 +270,78 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
 }
 
 .upload-panel {
+  padding: 1.15rem;
+  border-radius: 20px;
+  border: 1px solid rgba(50, 208, 179, 0.18);
   background:
-    linear-gradient(180deg, rgba(31, 90, 82, 0.07), rgba(181, 83, 47, 0.02)),
-    rgba(255, 251, 244, 0.72);
-  border: 1px solid rgba(31, 90, 82, 0.14);
-  border-radius: 18px;
-  padding: 1.2rem;
-  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
+    linear-gradient(180deg, rgba(50, 208, 179, 0.08), rgba(255, 122, 61, 0.04)),
+    var(--panel-2);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
+}
+
+.upload-panel h2,
+.section-head h2 {
+  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
+  font-size: 1.8rem;
+  line-height: 1;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  margin-bottom: 0.2rem;
+}
+
+.stage-panel,
+.stat-card,
+.list-card,
+.highlight-card,
+.round-card {
+  border: 1px solid var(--line);
+  border-radius: 20px;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
+    var(--panel-2);
+  box-shadow: var(--shadow-soft);
+}
+
+.stage-panel {
+  padding: 1rem 1.05rem;
+  min-height: 10.5rem;
+}
+
+.stage-panel h3,
+.round-card h3,
+.empty-state h3 {
+  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
+  font-size: 1.5rem;
+  line-height: 1;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  margin-bottom: 0.35rem;
 }
 
 .stat-card {
-  background:
-    linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(242, 231, 209, 0.92));
   min-height: 10.5rem;
+  padding: 1rem 1.05rem;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }
 
 .stat-card h2 {
-  font-size: clamp(2rem, 4vw, 3rem);
-  margin-bottom: 0.25rem;
-  letter-spacing: -0.05em;
-  line-height: 1;
+  margin: 0.2rem 0;
+  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
+  font-size: clamp(2.8rem, 6vw, 4rem);
+  line-height: 0.9;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
 .stat-card p {
   margin-bottom: 0;
-  color: var(--muted);
+}
+
+.upload-form {
+  display: grid;
+  gap: 0.75rem;
 }
 
 .section-head {
@@ -242,96 +352,114 @@ code { font-family: "Courier New", monospace; font-size: 0.9rem; }
   margin-bottom: 1rem;
 }
 
-.section-head h2 {
-  font-size: 1.5rem;
-  letter-spacing: -0.03em;
-  margin-bottom: 0;
-}
-
-.muted {
-  color: var(--muted);
-}
-
 .section-link {
   align-self: center;
-  font-size: 0.95rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 0.72rem;
+  color: var(--accent-3);
 }
 
 .pill {
-  display: inline-block;
-  padding: 0.28rem 0.72rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.32rem 0.72rem;
   border-radius: 999px;
-  background: var(--soft);
   border: 1px solid var(--line);
-  font-size: 0.8rem;
-  line-height: 1.2;
-  font-weight: 600;
+  background: var(--soft);
+  color: var(--ink);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.68rem;
+  font-weight: 700;
 }
 
 .status-uploaded,
-.status-pending { background: #f4e4a7; }
+.status-pending {
+  background: rgba(255, 209, 102, 0.16);
+}
+
 .status-processing,
-.status-rendering { background: #cedef8; }
+.status-rendering {
+  background: rgba(115, 184, 255, 0.16);
+}
+
 .status-parsed,
-.status-rendered { background: #cbe8d0; }
-.status-failed { background: #efcbc1; }
+.status-rendered {
+  background: rgba(50, 208, 179, 0.16);
+}
+
+.status-failed {
+  background: rgba(255, 122, 61, 0.18);
+}
 
 button,
 .button-link,
 input[type="submit"] {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   border-radius: 999px;
-  background: var(--accent);
-  color: white;
-  padding: 0.75rem 1.05rem;
+  padding: 0.82rem 1.15rem;
+  background: linear-gradient(180deg, #ff8c57, #d85e29);
+  color: #081015;
   font: inherit;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.11em;
+  font-size: 0.72rem;
   cursor: pointer;
   text-decoration: none;
-  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
   box-shadow: var(--shadow-soft);
+  transition: transform 120ms ease, filter 120ms ease;
 }
 
 button:hover,
 .button-link:hover,
 input[type="submit"]:hover {
   transform: translateY(-1px);
+  filter: brightness(1.04);
   text-decoration: none;
 }
 
 button.secondary {
-  background: var(--soft);
-  color: var(--ink);
-  border: 1px solid var(--line);
+  background: linear-gradient(180deg, rgba(50, 208, 179, 0.9), rgba(30, 150, 128, 0.88));
+  color: #071016;
 }
 
 .ghost {
   background: transparent;
   color: var(--accent-2);
-  border: 1px solid rgba(36, 88, 79, 0.18);
+  border: 1px solid rgba(50, 208, 179, 0.24);
 }
 
 input[type="file"] {
   width: 100%;
-  border: 1px dashed var(--line);
-  border-radius: 14px;
-  background: var(--soft);
   padding: 1rem;
+  border-radius: 16px;
+  border: 1px dashed rgba(151, 175, 176, 0.34);
+  background: rgba(255, 255, 255, 0.04);
+  color: var(--muted);
 }
 
 dt {
   color: var(--muted);
-  font-size: 0.85rem;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
 }
 
 dd {
   margin: 0.3rem 0 0;
+  font-size: 1.05rem;
 }
 
 .detail-hero {
   background:
-    radial-gradient(circle at top right, rgba(31, 90, 82, 0.1), transparent 18rem),
-    linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(242, 231, 209, 0.96));
+    radial-gradient(circle at top right, rgba(50, 208, 179, 0.12), transparent 18rem),
+    linear-gradient(180deg, rgba(9, 19, 24, 0.94), rgba(15, 32, 40, 0.94));
 }
 
 .detail-hero-actions {
@@ -347,12 +475,7 @@ dd {
 .list-card,
 .highlight-card,
 .round-card {
-  border: 1px solid rgba(31, 36, 33, 0.08);
-  border-radius: 18px;
-  background:
-    linear-gradient(180deg, rgba(255, 251, 244, 0.9), rgba(250, 243, 231, 0.78));
   padding: 1rem;
-  box-shadow: var(--shadow-soft);
 }
 
 .list-card-title-row,
@@ -366,61 +489,71 @@ dd {
 }
 
 .list-card-title {
-  font-weight: 700;
-  font-size: 1.05rem;
+  font-weight: 800;
+  color: var(--ink);
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
 }
 
 .empty-state {
-  border: 1px dashed var(--line);
-  border-radius: 18px;
+  border: 1px dashed rgba(151, 175, 176, 0.28);
+  border-radius: 20px;
   padding: 1.25rem;
-  background: rgba(242, 231, 209, 0.4);
+  background:
+    linear-gradient(180deg, rgba(255, 122, 61, 0.05), rgba(50, 208, 179, 0.03)),
+    var(--panel-2);
 }
 
-.highlight-card h3,
-.round-card h3,
-.empty-state h3 {
-  margin-bottom: 0.35rem;
+.highlight-card h3 {
+  margin-bottom: 0.2rem;
+  font-size: 1.15rem;
+  line-height: 1.2;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
 }
 
 .highlight-score {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 5rem;
-  padding: 0.38rem 0.7rem;
+  min-width: 5.3rem;
+  margin-bottom: 0.6rem;
+  padding: 0.42rem 0.8rem;
   border-radius: 999px;
-  background: linear-gradient(90deg, rgba(181, 83, 47, 0.12), rgba(132, 103, 38, 0.12));
+  border: 1px solid rgba(255, 122, 61, 0.22);
+  background: linear-gradient(90deg, rgba(255, 122, 61, 0.16), rgba(255, 209, 102, 0.12));
   color: var(--accent);
   text-transform: uppercase;
   letter-spacing: 0.16em;
-  margin-bottom: 0.55rem;
-  font-size: 0.78rem;
-  font-weight: 700;
+  font-size: 0.68rem;
+  font-weight: 800;
 }
 
 .highlight-meta {
   display: grid;
   gap: 0.3rem;
   justify-items: end;
+  font-size: 0.86rem;
   color: var(--muted);
-  font-size: 0.92rem;
 }
 
 .tag-row {
-  margin: 0.85rem 0 1rem;
+  margin: 0.95rem 0 1rem;
 }
 
 .tag-chip {
   display: inline-flex;
   align-items: center;
-  gap: 0.3rem;
-  padding: 0.32rem 0.7rem;
+  padding: 0.34rem 0.72rem;
   border-radius: 999px;
-  background: rgba(31, 90, 82, 0.08);
+  border: 1px solid rgba(50, 208, 179, 0.16);
+  background: rgba(50, 208, 179, 0.08);
   color: var(--accent-2);
-  font-size: 0.84rem;
-  border: 1px solid rgba(31, 90, 82, 0.12);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-size: 0.68rem;
+  font-weight: 700;
 }
 
 .highlight-explainer,
@@ -435,26 +568,29 @@ dd {
   justify-content: space-between;
   align-items: start;
   gap: 1rem;
-  padding: 0.65rem 0.8rem;
-  background: linear-gradient(180deg, rgba(247, 239, 223, 0.92), rgba(242, 231, 209, 0.82));
+  padding: 0.78rem 0.85rem;
   border-radius: 14px;
+  border: 1px solid rgba(151, 175, 176, 0.1);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
+    var(--panel-3);
 }
 
 .mini-label {
   color: var(--muted);
-  font-size: 0.8rem;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: 0.11em;
+  font-size: 0.66rem;
 }
 
 .clip-placeholder {
   display: grid;
   place-items: center;
   min-height: 10rem;
-  border: 1px dashed var(--line);
-  border-radius: 14px;
+  border: 1px dashed rgba(151, 175, 176, 0.24);
+  border-radius: 16px;
   background:
-    linear-gradient(135deg, rgba(31, 90, 82, 0.04), rgba(181, 83, 47, 0.04));
+    linear-gradient(135deg, rgba(50, 208, 179, 0.05), rgba(255, 122, 61, 0.04));
 }
 
 .compact-list .compact-card {
@@ -467,12 +603,6 @@ dd {
   gap: 0.9rem;
 }
 
-.round-ticks {
-  margin-bottom: 0;
-  color: var(--accent-2);
-  font-weight: 600;
-}
-
 .round-card {
   min-height: 11rem;
   display: flex;
@@ -480,6 +610,12 @@ dd {
   justify-content: space-between;
 }
 
+.round-ticks {
+  margin-bottom: 0;
+  color: var(--accent-2);
+  font-weight: 700;
+}
+
 .compact-upload {
   margin-top: 0.35rem;
 }
@@ -487,7 +623,8 @@ dd {
 .callout {
   border-left: 4px solid var(--accent-2);
   background:
-    linear-gradient(180deg, rgba(255, 251, 244, 0.98), rgba(246, 238, 224, 0.94));
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
+    var(--panel-2);
 }
 
 .callout-success {
@@ -499,23 +636,25 @@ dd {
 }
 
 .callout-inline {
-  padding: 0.7rem 0.85rem;
+  padding: 0.75rem 0.85rem;
   border-radius: 14px;
-  background: rgba(182, 72, 47, 0.08);
+  border: 1px solid rgba(255, 122, 61, 0.18);
+  background: rgba(255, 122, 61, 0.08);
 }
 
-@media (max-width: 900px) {
+@media (max-width: 980px) {
   .hero,
   .split,
   .stats-grid,
   .meta-grid,
   .highlight-body,
-  .split-heavy {
+  .split-heavy,
+  .workflow-strip {
     grid-template-columns: 1fr;
   }
 
   .site-header {
-    flex-direction: column;
+    grid-template-columns: 1fr;
     align-items: start;
   }
 
@@ -526,21 +665,22 @@ dd {
   .highlight-meta {
     justify-items: start;
   }
-
-  .site-shell::before {
-    opacity: 0.14;
-  }
 }
 
 @media (max-width: 640px) {
   .site-header,
   .page {
-    width: min(100% - 1rem, 1180px);
+    width: min(100% - 1rem, 1240px);
   }
 
-  .card {
-    padding: 1.05rem;
+  .card,
+  .site-branding {
     border-radius: 18px;
+    padding: 1rem;
+  }
+
+  .brand {
+    font-size: clamp(2.3rem, 11vw, 3.2rem);
   }
 
   .nav {
@@ -549,6 +689,12 @@ dd {
 
   .nav a {
     flex: 1 1 auto;
+    justify-content: center;
     text-align: center;
   }
+
+  .hero-copy h1,
+  .detail-hero h1 {
+    font-size: clamp(2.4rem, 14vw, 4rem);
+  }
 }