Update BitcoinSpreadsheetPage to use red accent color theme

- Changed primary color from blue (#007acc) to bright red (#ff3333)
- Updated gradients, backgrounds, and accent colors throughout
- Matches bitcoin-email dark theme styling approach
- Enhanced visual hierarchy with consistent red branding
- Improved typography with modern sans-serif font stack

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: b0ase

frontend/src/pages/BitcoinSpreadsheetPage.css

@@ -1,8 +1,9 @@
 .bitcoin-spreadsheet-page {
   background: #000000;
-  color: white;
+  color: #ffffff;
   min-height: 100vh;
   overflow-x: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
 }
 
 /* Hero Section */
@@ -11,7 +12,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: radial-gradient(ellipse at center, rgba(0, 122, 204, 0.1) 0%, transparent 70%);
+  background: radial-gradient(ellipse at center, rgba(255, 51, 51, 0.1) 0%, transparent 70%);
   position: relative;
   padding: 60px 20px;
 }
@@ -28,18 +29,18 @@
 
 .bitcoin-logo-large {
   font-size: 80px;
-  color: #007acc;
+  color: #ff3333;
   font-weight: bold;
   display: inline-block;
   animation: pulse-glow 3s ease-in-out infinite;
 }
 
 @keyframes pulse-glow {
   0%, 100% {
-    text-shadow: 0 0 20px rgba(0, 122, 204, 0.5);
+    text-shadow: 0 0 20px rgba(255, 51, 51, 0.5);
   }
   50% {
-    text-shadow: 0 0 40px rgba(0, 122, 204, 0.8);
+    text-shadow: 0 0 40px rgba(255, 51, 51, 0.8);
   }
 }
 
@@ -51,7 +52,7 @@
 }
 
 .bitcoin-text {
-  color: #007acc;
+  color: #ff3333;
 }
 
 .hero-subtitle {
@@ -89,14 +90,14 @@
 }
 
 .cta-button.primary {
-  background: linear-gradient(135deg, #007acc, #0051a2);
+  background: linear-gradient(135deg, #ff3333, #cc0000);
   color: white;
 }
 
 .cta-button.primary:hover {
-  background: linear-gradient(135deg, #0088dd, #0066bb);
+  background: linear-gradient(135deg, #ff4444, #dd1111);
   transform: translateY(-2px);
-  box-shadow: 0 10px 30px rgba(0, 122, 204, 0.4);
+  box-shadow: 0 10px 30px rgba(255, 51, 51, 0.4);
 }
 
 .cta-button.secondary {
@@ -120,7 +121,7 @@
 /* Features Section */
 .features-section {
   padding: 100px 20px;
-  background: linear-gradient(180deg, transparent, rgba(0, 122, 204, 0.02));
+  background: linear-gradient(180deg, transparent, rgba(255, 51, 51, 0.02));
 }
 
 .section-title {
@@ -148,7 +149,7 @@
 
 .feature-card:hover {
   background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(0, 122, 204, 0.3);
+  border-color: rgba(255, 51, 51, 0.3);
   transform: translateY(-5px);
 }
 
@@ -173,7 +174,7 @@
 /* Tokenization Section */
 .tokenization-section {
   padding: 100px 20px;
-  background: rgba(0, 122, 204, 0.03);
+  background: rgba(255, 51, 51, 0.03);
 }
 
 .tokenization-content {
@@ -205,16 +206,16 @@
 
 .protocol-name {
   font-weight: 500;
-  color: #007acc;
+  color: #ff3333;
 }
 
 .protocol-desc {
   color: rgba(255, 255, 255, 0.6);
 }
 
 .token-card {
-  background: linear-gradient(135deg, rgba(0, 122, 204, 0.1), rgba(0, 122, 204, 0.05));
-  border: 2px solid rgba(0, 122, 204, 0.3);
+  background: linear-gradient(135deg, rgba(255, 51, 51, 0.1), rgba(255, 51, 51, 0.05));
+  border: 2px solid rgba(255, 51, 51, 0.3);
   border-radius: 16px;
   padding: 30px;
   max-width: 400px;
@@ -232,7 +233,7 @@
   font-size: 12px;
   font-weight: 600;
   letter-spacing: 2px;
-  color: #007acc;
+  color: #ff3333;
 }
 
 .token-badge {
@@ -291,16 +292,16 @@
 }
 
 .pricing-card.featured {
-  border-color: rgba(0, 122, 204, 0.5);
-  background: rgba(0, 122, 204, 0.05);
+  border-color: rgba(255, 51, 51, 0.5);
+  background: rgba(255, 51, 51, 0.05);
 }
 
 .featured-badge {
   position: absolute;
   top: -12px;
   left: 50%;
   transform: translateX(-50%);
-  background: linear-gradient(135deg, #007acc, #0051a2);
+  background: linear-gradient(135deg, #ff3333, #cc0000);
   color: white;
   padding: 4px 20px;
   border-radius: 20px;
@@ -322,7 +323,7 @@
 .pricing-value {
   font-size: 36px;
   font-weight: 600;
-  color: #007acc;
+  color: #ff3333;
 }
 
 .pricing-unit {
@@ -341,7 +342,7 @@
 .cta-section {
   padding: 100px 20px;
   text-align: center;
-  background: radial-gradient(ellipse at center, rgba(0, 122, 204, 0.1) 0%, transparent 70%);
+  background: radial-gradient(ellipse at center, rgba(255, 51, 51, 0.1) 0%, transparent 70%);
 }
 
 .cta-title {
@@ -384,7 +385,7 @@
 
 .footer-logo {
   font-size: 24px;
-  color: #007acc;
+  color: #ff3333;
   font-weight: bold;
 }
 
@@ -406,7 +407,7 @@
 }
 
 .footer-links a:hover {
-  color: #007acc;
+  color: #ff3333;
 }
 
 .footer-copyright {
@@ -465,7 +466,7 @@
 }
 
 .infrastructure-item h3 {
-  color: #007acc;
+  color: #ff3333;
   font-size: 24px;
   margin-bottom: 15px;
 }
@@ -496,7 +497,7 @@
 .table-header {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
-  background: #007acc;
+  background: #ff3333;
   color: white;
   font-weight: 600;
   font-size: 14px;
@@ -520,12 +521,12 @@
 }
 
 .table-row:hover {
-  background: rgba(0, 122, 204, 0.1);
+  background: rgba(255, 51, 51, 0.1);
 }
 
 .table-row.featured {
-  background: rgba(0, 122, 204, 0.05);
-  border: 1px solid rgba(0, 122, 204, 0.3);
+  background: rgba(255, 51, 51, 0.05);
+  border: 1px solid rgba(255, 51, 51, 0.3);
 }
 
 .dataset-name {
@@ -589,7 +590,7 @@
 }
 
 .testimonial-author strong {
-  color: #007acc;
+  color: #ff3333;
   display: block;
   margin-bottom: 5px;
 }