Move CTA row into a top navbar below the floating header

Per review feedback, lift Mission / MAKIMA / Login from the bottom of
the cover into a fixed navbar that sits flush beneath the floating
header — standard site pattern.

- .cta-area is now position: fixed, top: 72px, height 52px (top: 56px,
  height 48px on mobile), with the same frosted-glass + hairline
  treatment as the header so they read as one stacked nav block.
- Buttons become ghost-link items inside the bar with an animated
  underline-from-center on hover; Login keeps its warm amber→rose
  primary treatment but compact.
- cover-content top padding bumped to 156px (desktop) / 124px (mobile)
  so the masthead and hero clear both stripes.
- bottom-stats no longer needs to dodge a fixed-bottom CTA — pulled
  back to bottom: 24px (desktop) and ~20px + safe-area (mobile).
- npm run build passes (CSS 91.6 kB / 17.9 kB gzip).

Screenshots in docs/heisei-screenshots/after-*.jpg refreshed against
the new navbar layout (1440x900 desktop, 390x844 mobile, 2x DPR).

7 files changed, 86 insertions, 37 deletions

diff --git a/docs/heisei-screenshots/after-01-desktop-default.jpg b/docs/heisei-screenshots/after-01-desktop-default.jpg
index b523bcb..5db2c00 100644
--- a/docs/heisei-screenshots/after-01-desktop-default.jpg
+++ b/docs/heisei-screenshots/after-01-desktop-default.jpg
diff --git a/docs/heisei-screenshots/after-02-desktop-mission.jpg b/docs/heisei-screenshots/after-02-desktop-mission.jpg
index f0b6147..014f9ff 100644
--- a/docs/heisei-screenshots/after-02-desktop-mission.jpg
+++ b/docs/heisei-screenshots/after-02-desktop-mission.jpg
diff --git a/docs/heisei-screenshots/after-03-desktop-makima.jpg b/docs/heisei-screenshots/after-03-desktop-makima.jpg
index 259ee9d..8aff25f 100644
--- a/docs/heisei-screenshots/after-03-desktop-makima.jpg
+++ b/docs/heisei-screenshots/after-03-desktop-makima.jpg
diff --git a/docs/heisei-screenshots/after-04-desktop-login-hover.jpg b/docs/heisei-screenshots/after-04-desktop-login-hover.jpg
index e7cbabe..4ff0276 100644
--- a/docs/heisei-screenshots/after-04-desktop-login-hover.jpg
+++ b/docs/heisei-screenshots/after-04-desktop-login-hover.jpg
diff --git a/docs/heisei-screenshots/after-05-mobile-default.jpg b/docs/heisei-screenshots/after-05-mobile-default.jpg
index 08f48aa..e7e3dab 100644
--- a/docs/heisei-screenshots/after-05-mobile-default.jpg
+++ b/docs/heisei-screenshots/after-05-mobile-default.jpg
diff --git a/docs/heisei-screenshots/after-06-mobile-mission.jpg b/docs/heisei-screenshots/after-06-mobile-mission.jpg
index 33bec9b..6d174c7 100644
--- a/docs/heisei-screenshots/after-06-mobile-mission.jpg
+++ b/docs/heisei-screenshots/after-06-mobile-mission.jpg
diff --git a/frontend/src/styles/heisei.css b/frontend/src/styles/heisei.css
index fa42c95..0245034 100644
--- a/frontend/src/styles/heisei.css
+++ b/frontend/src/styles/heisei.css
@@ -154,19 +154,22 @@ body { background: var(--hz-night); color: var(--hz-ink); }
 }
 
 /* ----------------------------------------------------------------
-   3. Cover layout — breathe
+   3. Cover layout — breathe (top padding accounts for header + navbar)
    ---------------------------------------------------------------- */
 
 .modern-landing-page.manga-style .taisho-cover .cover-content {
   grid-template-columns: 200px 1fr;
+  grid-template-rows: 1fr;          /* CTA is no longer in this grid */
+  grid-template-areas: "masthead hero";
   gap: 40px;
-  padding: 110px 56px 120px;
+  padding: 156px 56px 64px;         /* 72 header + 52 nav + 32 breathing */
 }
 
 @media (max-width: 1024px) {
   .modern-landing-page.manga-style .taisho-cover .cover-content {
     grid-template-columns: 1fr;
-    padding: 100px 24px 140px;
+    grid-template-areas: "masthead" "hero";
+    padding: 140px 24px 48px;
     gap: 28px;
   }
 }
@@ -363,78 +366,114 @@ body { background: var(--hz-night); color: var(--hz-ink); }
 }
 
 /* ----------------------------------------------------------------
-   8. CTAs — flat tactical buttons, hairline borders
+   8. CTA navbar — pinned below the floating header (desktop + mobile)
    ---------------------------------------------------------------- */
 
+/* Promote .cta-area from grid-bottom to a fixed top navbar.
+   Overrides pc98.css (`position: absolute; bottom: 0`) and
+   mobile.css (`position: fixed; bottom: 0`). */
 .cta-area {
-  padding: 0 56px 48px !important;
-  gap: 12px;
+  position: fixed !important;
+  top: 72px;                              /* sits flush under .floating-header */
+  left: 0 !important;
+  right: 0 !important;
+  bottom: auto !important;
+  z-index: 90;                            /* below header (100) but above content */
+  display: flex;
+  flex-direction: row !important;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 8px 32px !important;
+  height: 52px;
+  background: linear-gradient(180deg, rgba(11, 17, 36, 0.78), rgba(11, 17, 36, 0.45));
+  backdrop-filter: blur(12px) saturate(140%);
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  border-top: 0;
+  border-bottom: 1px solid var(--hz-line);
+  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
+.cta-left {
+  display: flex !important;
+  flex-direction: row !important;
+  align-items: center;
+  gap: 4px;
+}
+
+.cta-right {
+  display: flex;
+  align-items: center;
+}
+
+/* Buttons themselves: ghost links inside the bar, not chunky boxes */
 .taisho-cta {
-  background: rgba(11, 17, 36, 0.55);
+  background: transparent;
   color: var(--hz-ink);
-  border: 1px solid var(--hz-line-strong) !important;
+  border: 0 !important;
   outline: 0;
-  padding: 12px 24px;
+  padding: 8px 16px;
   font-family: 'Inter', system-ui, sans-serif;
   font-weight: 500;
-  font-size: 12px;
+  font-size: 11px;
   letter-spacing: 0.22em;
   text-transform: uppercase;
   box-shadow: none !important;
   transform: none !important;
   border-radius: 2px;
-  backdrop-filter: blur(6px);
-  -webkit-backdrop-filter: blur(6px);
-  transition: all 180ms ease;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  transition: color 180ms ease, background 180ms ease;
   cursor: pointer;
   position: relative;
   overflow: hidden;
+  opacity: 0.82;
 }
 .taisho-cta::before {
   content: '';
   position: absolute;
-  left: 0; top: 0; bottom: 0;
-  width: 2px;
+  left: 50%;
+  right: 50%;
+  bottom: 4px;
+  height: 1px;
   background: var(--hz-amber);
-  transform: scaleY(0);
-  transform-origin: bottom;
-  transition: transform 200ms ease;
+  transition: left 200ms ease, right 200ms ease;
 }
 .taisho-cta:hover {
-  background: rgba(74, 58, 107, 0.35);
-  border-color: var(--hz-amber) !important;
+  background: transparent;
   color: var(--hz-amber);
-  transform: translateY(-1px) !important;
-  box-shadow: 0 8px 24px -12px rgba(232, 184, 122, 0.4) !important;
+  opacity: 1;
+  transform: none !important;
+  box-shadow: none !important;
 }
-.taisho-cta:hover::before { transform: scaleY(1); transform-origin: top; }
+.taisho-cta:hover::before { left: 16px; right: 16px; }
 
-/* Right-side login gets the warm accent */
+/* Login keeps a primary-action treatment, but compact for the bar */
 .cta-right .taisho-cta {
   background: linear-gradient(180deg, rgba(232, 184, 122, 0.95) 0%, rgba(217, 106, 138, 0.85) 100%);
-  border-color: transparent !important;
+  border: 0 !important;
   color: #1a1226;
   font-weight: 600;
+  padding: 8px 22px;
+  opacity: 1;
+  letter-spacing: 0.18em;
+  border-radius: 2px;
 }
-.cta-right .taisho-cta::before { background: rgba(11, 17, 36, 0.5); }
+.cta-right .taisho-cta::before { display: none; }
 .cta-right .taisho-cta:hover {
   background: linear-gradient(180deg, rgba(232, 184, 122, 1) 0%, rgba(217, 106, 138, 1) 100%);
   color: #0b1124;
-  box-shadow: 0 12px 32px -10px rgba(232, 184, 122, 0.55) !important;
+  box-shadow: 0 8px 24px -10px rgba(232, 184, 122, 0.55) !important;
 }
 
-.cta-icon { font-size: 11px; opacity: 0.85; }
-.cta-text { font-size: 12px; }
-
-.cta-left { flex-direction: row !important; gap: 12px; }
+.cta-icon { font-size: 10px; opacity: 0.85; margin-right: 2px; }
+.cta-text { font-size: 11px; }
 
 /* ----------------------------------------------------------------
    9. Bottom telemetry strip — GitS:SAC HUD pill
    ---------------------------------------------------------------- */
 
-.bottom-stats { bottom: 96px; }
+.bottom-stats { bottom: 24px; }
 .bottom-stats .rf-stats {
   background: rgba(11, 17, 36, 0.55);
   border: 1px solid var(--hz-line);
@@ -495,8 +534,21 @@ body { background: var(--hz-night); color: var(--hz-ink); }
   .info-label { font-size: 9px; }
   .info-value { font-size: 10px; }
 
+  /* Mobile navbar — sits below the shorter mobile header */
+  .cta-area {
+    top: 56px;
+    height: 48px;
+    padding: 6px 14px !important;
+    gap: 8px;
+  }
+  .cta-left { gap: 0; }
+  .taisho-cta { padding: 6px 10px; font-size: 10px; letter-spacing: 0.18em; }
+  .cta-right .taisho-cta { padding: 6px 14px; font-size: 10px; }
+  .cta-text { font-size: 10px; }
+  .cta-icon { font-size: 9px; }
+
   .modern-landing-page.manga-style .taisho-cover .cover-content {
-    padding: 80px 20px 200px;
+    padding: 124px 20px 28px;
     gap: 22px;
   }
 
@@ -508,10 +560,7 @@ body { background: var(--hz-night); color: var(--hz-ink); }
 
   .modern-landing-page.manga-style .hero::after { font-size: 9px; letter-spacing: 0.2em; }
 
-  .cta-area { padding: 12px !important; }
-  .taisho-cta { padding: 14px 20px; font-size: 11px; }
-  .cta-left { flex-direction: column !important; }
-  .bottom-stats { bottom: calc(220px + env(safe-area-inset-bottom, 0px)); }
+  .bottom-stats { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
 }
 
 /* ----------------------------------------------------------------