Add message board and bonus program preview

app/assets/css/main.css

@@ -12,6 +12,12 @@
   --brand-muted: #d8eee1;
   --brand-ink: #0f2f20;
   --lk-canvas-bg: color-mix(in oklab, #edf3ef 82%, white);
+  --bonus-surface: #08090b;
+  --bonus-surface-raised: #101218;
+  --bonus-border: rgba(255, 255, 255, 0.08);
+  --bonus-text: rgba(255, 255, 255, 0.94);
+  --bonus-muted: rgba(255, 255, 255, 0.6);
+  --bonus-accent: #d8ff3e;
 }
 
 [data-theme='aqua'] {
@@ -70,6 +76,17 @@ body {
   isolation: isolate;
 }
 
+.bonus-program-shell {
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 12% 16%, rgba(216, 255, 62, 0.12) 0%, rgba(216, 255, 62, 0) 28%),
+    radial-gradient(circle at 86% 14%, rgba(76, 113, 255, 0.15) 0%, rgba(76, 113, 255, 0) 26%),
+    linear-gradient(180deg, #07080a 0%, #0a0c10 42%, #050507 100%);
+  color: var(--bonus-text);
+}
+
 .lk-shell::before,
 .lk-shell::after {
   content: '';
@@ -244,6 +261,200 @@ body {
   color: #557562;
 }
 
+.bonus-program-main {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 1480px;
+  margin: 0 auto;
+  padding: clamp(1.25rem, 2vw, 2rem);
+}
+
+.bonus-program-stage {
+  min-height: calc(100vh - 2rem);
+}
+
+.bonus-program-page {
+  position: relative;
+  min-height: calc(100vh - 4rem);
+}
+
+.bonus-program-hero {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  justify-content: space-between;
+  padding: clamp(1rem, 2vw, 1.5rem) 0;
+}
+
+.bonus-program-kicker {
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.24em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.56);
+}
+
+.bonus-program-title {
+  max-width: 16ch;
+  font-size: clamp(2.5rem, 5vw, 5.25rem);
+  line-height: 0.94;
+  font-weight: 800;
+  letter-spacing: -0.06em;
+  color: #fff;
+}
+
+.bonus-program-copy {
+  max-width: 44rem;
+  font-size: 1rem;
+  line-height: 1.75;
+  color: var(--bonus-muted);
+}
+
+.bonus-program-panel {
+  border: 1px solid var(--bonus-border);
+  border-radius: 2rem;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.02)),
+    var(--bonus-surface-raised);
+  box-shadow:
+    0 24px 60px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  padding: clamp(1rem, 1.5vw, 1.5rem);
+  backdrop-filter: blur(18px);
+}
+
+.bonus-program-caption {
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.48);
+}
+
+.bonus-program-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 0.55rem;
+  border-radius: 1.45rem;
+  border: 1px solid var(--bonus-border);
+  background: rgba(255, 255, 255, 0.02);
+  padding: 1rem;
+}
+
+.bonus-program-stat__label {
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.52);
+}
+
+.bonus-program-stat__value {
+  font-size: clamp(1.8rem, 2vw, 2.5rem);
+  line-height: 1;
+  font-weight: 800;
+  letter-spacing: -0.05em;
+  color: #fff;
+}
+
+.bonus-program-input {
+  width: 100%;
+  border: 1px solid var(--bonus-border);
+  border-radius: 1.25rem;
+  background: rgba(255, 255, 255, 0.035);
+  color: #fff;
+  padding: 0.95rem 1rem;
+  outline: 0;
+}
+
+.bonus-program-input:focus,
+.bonus-program-input:focus-visible {
+  border-color: rgba(216, 255, 62, 0.3);
+  box-shadow: 0 0 0 3px rgba(216, 255, 62, 0.08);
+}
+
+.bonus-program-primary-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 3rem;
+  width: 100%;
+  border: 0;
+  border-radius: 999px;
+  background: var(--bonus-accent);
+  color: #060606;
+  font-weight: 800;
+  letter-spacing: -0.01em;
+}
+
+.bonus-program-primary-button:disabled {
+  opacity: 0.45;
+}
+
+.bonus-program-ghost-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 2.9rem;
+  border: 1px solid var(--bonus-border);
+  border-radius: 999px;
+  padding: 0 1rem;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.02);
+}
+
+.bonus-program-feed-item {
+  border-radius: 1.6rem;
+  border: 1px solid var(--bonus-border);
+  background: rgba(255, 255, 255, 0.02);
+  padding: 1rem 1.05rem;
+}
+
+.bonus-program-inline-link {
+  color: var(--bonus-accent);
+  font-size: 0.9rem;
+  font-weight: 700;
+}
+
+.bonus-program-empty {
+  border-radius: 1.6rem;
+  border: 1px dashed rgba(255, 255, 255, 0.12);
+  padding: 1rem 1.1rem;
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.bonus-program-orbit {
+  position: absolute;
+  border-radius: 999px;
+  filter: blur(60px);
+  pointer-events: none;
+  opacity: 0.42;
+}
+
+.bonus-program-orbit--a {
+  top: 4%;
+  left: -6%;
+  width: 15rem;
+  height: 15rem;
+  background: rgba(216, 255, 62, 0.16);
+}
+
+.bonus-program-orbit--b {
+  right: -4%;
+  bottom: 8%;
+  width: 14rem;
+  height: 14rem;
+  background: rgba(86, 92, 255, 0.18);
+}
+
+@media (min-width: 960px) {
+  .bonus-program-hero {
+    flex-direction: row;
+    align-items: flex-end;
+  }
+}
+
 .lk-page-tabs-shell {
   position: relative;
   z-index: 2;