style: enhance primary button contrast and reduce vertical space

Author: jkyberneees

docs/styles.css

@@ -80,7 +80,7 @@ a { color: inherit; text-decoration: none; }
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 20px 40px;
+  padding: 16px 40px;
   max-width: 1400px;
   margin: 0 auto;
   position: relative;
@@ -134,7 +134,7 @@ a { color: inherit; text-decoration: none; }
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 9px 18px;
+  padding: 8px 16px;
   background: var(--color-bg-tertiary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-full);
@@ -150,7 +150,7 @@ a { color: inherit; text-decoration: none; }
 .nav-cta:hover {
   border-color: var(--color-primary);
   color: var(--color-text);
-  background: rgba(99,102,241,0.1);
+  background: rgba(255,255,255,0.1);
 }
 
 /* Hamburger Button */
@@ -202,7 +202,7 @@ a { color: inherit; text-decoration: none; }
   position: relative;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  min-height: 85vh;
   overflow: hidden;
   background: var(--color-bg);
 }
@@ -224,7 +224,7 @@ a { color: inherit; text-decoration: none; }
   align-items: center;
   justify-content: center;
   text-align: center;
-  padding: 20px 20px 48px;
+  padding: 20px 20px 32px;
   position: relative;
   z-index: 2;
 }
@@ -237,7 +237,7 @@ a { color: inherit; text-decoration: none; }
 .hero-logo-svg {
   width: 80px;
   height: 80px;
-  filter: drop-shadow(0 0 40px rgba(99,102,241,0.45));
+  filter: drop-shadow(0 0 40px rgba(255,255,255,0.45));
 }
 
 @keyframes float {
@@ -246,7 +246,7 @@ a { color: inherit; text-decoration: none; }
 }
 
 .hero-title {
-  font-size: clamp(2.8rem, 6vw, 4.2rem);
+  font-size: clamp(2.6rem, 5vw, 4rem);
   font-weight: 800;
   background: var(--gradient-primary);
   -webkit-background-clip: text;
@@ -267,8 +267,8 @@ a { color: inherit; text-decoration: none; }
   font-size: 1rem;
   color: var(--color-text-muted);
   max-width: 620px;
-  margin-bottom: 28px;
-  line-height: 1.75;
+  margin-bottom: 20px;
+  line-height: 1.6;
 }
 
 .hero-description strong { color: var(--color-accent); }
@@ -283,7 +283,7 @@ a { color: inherit; text-decoration: none; }
   background: var(--color-bg-tertiary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
-  padding: 14px 24px;
+  padding: 12px 20px;
 }
 
 .stat {
@@ -332,10 +332,10 @@ a { color: inherit; text-decoration: none; }
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 14px 28px;
+  padding: 12px 24px;
   border-radius: var(--radius-md);
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.9rem;
   transition: all 0.3s ease;
   border: none;
   cursor: pointer;
@@ -346,13 +346,13 @@ a { color: inherit; text-decoration: none; }
 
 .btn-primary {
   background: var(--gradient-primary);
-  color: white;
-  box-shadow: 0 4px 20px rgba(99,102,241,0.4);
+  color: #000;
+  box-shadow: 0 4px 20px rgba(255,255,255,0.2);
 }
 
 .btn-primary:hover {
   transform: translateY(-2px);
-  box-shadow: 0 6px 32px rgba(99,102,241,0.55);
+  box-shadow: 0 6px 32px rgba(255,255,255,0.3);
 }
 
 .btn-secondary {
@@ -410,7 +410,7 @@ a { color: inherit; text-decoration: none; }
   transform: translate(-50%, -50%);
   width: 900px;
   height: 900px;
-  background: radial-gradient(circle, rgba(99,102,241,0.13) 0%, transparent 65%);
+  background: radial-gradient(circle, rgba(255,255,255,0.13) 0%, transparent 65%);
   pointer-events: none;
   z-index: 1;
 }
@@ -425,7 +425,7 @@ a { color: inherit; text-decoration: none; }
 .section-inner {
   max-width: 1200px;
   margin: 0 auto;
-  padding: 56px 20px;
+  padding: 40px 20px;
 }
 
 .section-inner--narrow {
@@ -447,7 +447,7 @@ a { color: inherit; text-decoration: none; }
   text-align: center;
   color: var(--color-text-secondary);
   font-size: 1rem;
-  margin-bottom: 36px;
+  margin-bottom: 24px;
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
@@ -506,14 +506,14 @@ a { color: inherit; text-decoration: none; }
   background: var(--color-bg-tertiary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
-  padding: 22px;
+  padding: 20px;
   transition: all 0.3s ease;
 }
 
 .feature-card:hover {
   border-color: var(--color-primary);
   transform: translateY(-3px);
-  box-shadow: 0 8px 30px rgba(99,102,241,0.15);
+  box-shadow: 0 8px 30px rgba(255,255,255,0.15);
 }
 
 .feature-icon { font-size: 1.8rem; margin-bottom: 10px; }
@@ -536,7 +536,7 @@ a { color: inherit; text-decoration: none; }
 .feature-card p code {
   font-family: var(--font-mono);
   font-size: 0.82em;
-  background: rgba(99,102,241,0.15);
+  background: rgba(255,255,255,0.15);
   padding: 1px 5px;
   border-radius: 4px;
   color: var(--color-primary-light);
@@ -574,7 +574,7 @@ a { color: inherit; text-decoration: none; }
 .tab-btn[aria-selected="true"] {
   background: var(--gradient-primary);
   border-color: transparent;
-  color: white;
+  color: #000;
 }
 
 .tab-btn:focus-visible {
@@ -622,7 +622,7 @@ a { color: inherit; text-decoration: none; }
 }
 
 .code-block pre {
-  padding: 18px 20px;
+  padding: 16px 20px;
   overflow-x: auto;
   font-family: var(--font-mono);
   font-size: 0.85rem;
@@ -661,15 +661,15 @@ a { color: inherit; text-decoration: none; }
   background: var(--color-bg-tertiary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
-  padding: 14px 18px;
+  padding: 12px 16px;
   transition: all 0.25s;
 }
 
 .pipeline-step:hover { border-color: var(--color-border-light); }
 
 .pipeline-step--highlight {
-  border-color: rgba(99,102,241,0.4);
-  background: rgba(99,102,241,0.07);
+  border-color: rgba(255,255,255,0.4);
+  background: rgba(255,255,255,0.07);
 }
 
 .pipeline-step--highlight:hover { border-color: var(--color-primary); }
@@ -704,7 +704,7 @@ a { color: inherit; text-decoration: none; }
 /* Benchmark table wrapper — border-radius fix (border-collapse: collapse kills border-radius) */
 .benchmark-table-wrap {
   max-width: 760px;
-  margin: 0 auto 28px;
+  margin: 0 auto 20px;
   overflow-x: auto;
 }
 
@@ -740,7 +740,7 @@ a { color: inherit; text-decoration: none; }
 }
 
 .benchmark-table tr.highlight td {
-  background: rgba(99,102,241,0.08);
+  background: rgba(255,255,255,0.08);
   color: var(--color-text);
 }
 
@@ -784,7 +784,7 @@ a { color: inherit; text-decoration: none; }
 .perf-card p code {
   font-family: var(--font-mono);
   font-size: 0.82em;
-  background: rgba(99,102,241,0.15);
+  background: rgba(255,255,255,0.15);
   padding: 1px 5px;
   border-radius: 4px;
   color: var(--color-primary-light);
@@ -876,7 +876,7 @@ a { color: inherit; text-decoration: none; }
 .security-panel-lead code {
   font-family: var(--font-mono);
   font-size: 0.88em;
-  background: rgba(99,102,241,0.12);
+  background: rgba(255,255,255,0.12);
   padding: 1px 5px;
   border-radius: 4px;
   color: var(--color-primary-light);
@@ -910,7 +910,7 @@ a { color: inherit; text-decoration: none; }
   content: counter(sec-counter);
   min-width: 22px;
   height: 22px;
-  background: rgba(99,102,241,0.2);
+  background: rgba(255,255,255,0.2);
   color: var(--color-primary-light);
   border-radius: 50%;
   display: flex;
@@ -925,7 +925,7 @@ a { color: inherit; text-decoration: none; }
 .security-list li code {
   font-family: var(--font-mono);
   font-size: 0.82em;
-  background: rgba(99,102,241,0.12);
+  background: rgba(255,255,255,0.12);
   padding: 1px 5px;
   border-radius: 4px;
   color: var(--color-primary-light);
@@ -943,7 +943,7 @@ a { color: inherit; text-decoration: none; }
 .security-note code {
   font-family: var(--font-mono);
   font-size: 0.88em;
-  background: rgba(99,102,241,0.12);
+  background: rgba(255,255,255,0.12);
   padding: 1px 5px;
   border-radius: 4px;
   color: var(--color-primary-light);
@@ -990,7 +990,7 @@ a { color: inherit; text-decoration: none; }
   background: var(--color-bg-tertiary);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
-  padding: 44px 36px;
+  padding: 32px 36px;
   position: relative;
   overflow: hidden;
 }
@@ -1044,7 +1044,7 @@ a { color: inherit; text-decoration: none; }
 .footer {
   background: var(--color-bg-secondary);
   border-top: 1px solid var(--color-border);
-  padding: 40px 20px 24px;
+  padding: 32px 20px 24px;
 }
 
 .footer-content {
@@ -1232,4 +1232,4 @@ a { color: inherit; text-decoration: none; }
 ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 4px; }
 ::-webkit-scrollbar-thumb:hover { background: var(--color-border-light); }
 
-::selection { background: rgba(99,102,241,0.3); color: var(--color-text); }
+::selection { background: rgba(255,255,255,0.3); color: var(--color-text); }