final

app/globals.css

@@ -54,6 +54,25 @@ nav .links a:hover {
   color: var(--text);
 }
 
+.unlock-bar {
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--border);
+  padding: 12px 20px;
+  font-size: 14px;
+  color: var(--muted);
+  text-align: center;
+}
+
+.unlock-bar strong {
+  color: var(--text);
+}
+
+.unlock-bar a {
+  margin-left: 10px;
+  color: var(--accent);
+  font-weight: 500;
+}
+
 .container {
   max-width: 1200px;
   margin: 0 auto;
@@ -111,12 +130,30 @@ header p {
   margin-bottom: 20px;
 }
 
+.price .muted {
+  display: block;
+  margin-top: 6px;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.price .hint {
+  font-size: 13px;
+  color: var(--muted);
+  margin-top: 4px;
+}
+
+.price a {
+  color: var(--accent);
+  font-weight: 500;
+}
+
 .progress {
   background: var(--bg-soft);
   border-radius: 10px;
   height: 10px;
   overflow: hidden;
-  margin-bottom: 20px;
+  margin-bottom: 12px;
 }
 
 .progress span {
@@ -146,8 +183,8 @@ header p {
 .cta {
   margin-top: 30px;
   padding: 16px 28px;
-  background: #0a7931;
-  color: #fff;
+  background: var(--accent);
+  color: #000;
   border: none;
   border-radius: 14px;
   font-size: 15px;
@@ -155,6 +192,12 @@ header p {
   cursor: pointer;
 }
 
+.cta-note {
+  margin-top: 8px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
 .info-box {
   margin-top: 60px;
   background: var(--card);