Fix contrast, rhythm, and CTA links → /register

public/index.html

@@ -84,11 +84,11 @@
     }
     .hero-badge::before { content: '✦'; font-size: 0.6rem; }
     .hero h1 {
-      font-size: clamp(3rem, 5.5vw, 5.5rem);
+      font-size: clamp(2.6rem, 4.5vw, 4.4rem);
       font-weight: 900;
-      line-height: 0.95;
-      letter-spacing: -0.04em;
-      margin-bottom: 24px;
+      line-height: 1.08;
+      letter-spacing: -0.03em;
+      margin-bottom: 28px;
       color: var(--text);
     }
     .hero h1 em { font-style: normal; color: var(--accent); }
@@ -154,7 +154,7 @@
       font-weight: 600;
       letter-spacing: 0.12em;
       text-transform: uppercase;
-      color: rgba(255,255,255,0.25);
+      color: rgba(255,255,255,0.6);
       margin-bottom: 28px;
     }
     .marquee-row {
@@ -192,7 +192,7 @@
     }
     .wa-bubble .wa-time {
       font-size: 0.65rem;
-      opacity: 0.5;
+      opacity: 0.7;
       margin-top: 4px;
       text-align: right;
     }
@@ -203,18 +203,19 @@
     .marquee-fade-r { right: 0; background: linear-gradient(to left, var(--navy), transparent); }
 
     /* ── STATS BAR ── */
-    .stats-bar { background: var(--navy); padding: 56px 0; }
-    .stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; }
-    .stat-item { text-align: center; padding: 24px; }
+    .stats-bar { background: var(--navy); padding: 72px 0; border-top: 1px solid rgba(255,255,255,0.06); }
+    .stats-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
+    .stat-item { text-align: center; padding: 32px 24px; }
+    .stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,0.08); }
     .stat-num { font-size: clamp(3.5rem, 6vw, 6rem); font-weight: 900; color: #fff; line-height: 1; letter-spacing: -0.04em; }
-    .stat-lbl { font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-top: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; }
+    .stat-lbl { font-size: 0.78rem; color: rgba(255,255,255,0.65); margin-top: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.5; }
 
     /* ── SPLIT SECTIONS ── */
     .split { padding: 88px 0; }
     .split-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; }
     .split-img { border-radius: var(--r); overflow: hidden; }
     .split-img img { width: 100%; height: 460px; object-fit: cover; }
-    .split-body { max-width: 480px; }
+    .split-body { }
     .split-body .eyebrow { font-size: 0.75rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; }
     .split-body h2 { font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px; }
     .split-body p { color: var(--muted); line-height: 1.75; margin-bottom: 24px; }
@@ -225,8 +226,8 @@
 
     /* ── HOW IT WORKS — STEPS ── */
     .steps-section { padding: 96px 0; background: var(--bg-soft); }
-    .steps-header { text-align: center; margin-bottom: 64px; }
-    .steps-header h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 900; letter-spacing: -0.03em; margin-bottom: 10px; }
+    .steps-header { text-align: center; max-width: 600px; margin: 0 auto 64px; }
+    .steps-header h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
     .steps-header p { color: var(--muted); font-size: 1.05rem; }
     .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
     .step-item { position: relative; }
@@ -269,8 +270,8 @@
 
     /* ── SLIDER ── */
     .slider-section { padding: 72px 0; overflow: hidden; background: var(--bg-soft); }
-    .slider-header { text-align: center; margin-bottom: 40px; }
-    .slider-header h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
+    .slider-header { text-align: center; max-width: 600px; margin: 0 auto 40px; }
+    .slider-header h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
     .slider-header p { color: var(--muted); }
     .slider-track-wrap { position: relative; }
     .slider-track {
@@ -333,13 +334,13 @@
     }
     .free-block h2 { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 900; color: #fff; letter-spacing: -0.03em; margin-bottom: 10px; }
     .free-block h2 em { font-style: normal; color: var(--accent); }
-    .free-sub { color: rgba(255,255,255,0.55); margin-bottom: 40px; font-size: 1.05rem; line-height: 1.7; }
+    .free-sub { color: rgba(255,255,255,0.78); margin-bottom: 40px; font-size: 1.05rem; line-height: 1.7; }
     .checklist { list-style: none; text-align: left; max-width: 400px; margin: 0 auto 40px; display: grid; gap: 12px; }
-    .checklist li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 500; color: rgba(255,255,255,0.85); }
+    .checklist li { display: flex; align-items: center; gap: 12px; font-size: 0.95rem; font-weight: 500; color: #fff; }
     .checklist li::before { content: '✓'; color: var(--accent); font-weight: 800; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,184,173,0.15); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; flex-shrink: 0; }
 
     /* ── TESTIMONIALS SLIDER ── */
-    .testi-section { padding: 88px 0; }
+    .testi-section { padding: 88px 0; background: var(--bg-soft); }
     .testi-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 24px 16px; -webkit-overflow-scrolling: touch; }
     .testi-track::-webkit-scrollbar { display: none; }
     .testi-card {
@@ -365,11 +366,11 @@
     .email-form input { flex: 1; padding: 14px 16px; border-radius: var(--r-sm); border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.07); color: #fff; font-family: var(--font); font-size: 0.95rem; }
     .email-form input::placeholder { color: rgba(255,255,255,0.3); }
     .email-form input:focus { outline: none; border-color: var(--accent); }
-    .footer-note { font-size: 0.8rem; color: rgba(255,255,255,0.3); }
+    .footer-note { font-size: 0.8rem; color: rgba(255,255,255,0.6); }
 
     /* FOOTER */
     footer { padding: 28px 0; background: #070f1e; text-align: center; }
-    footer p { font-size: 0.8rem; color: rgba(255,255,255,0.25); }
+    footer p { font-size: 0.8rem; color: rgba(255,255,255,0.5); }
 
     /* FADE-IN */
     .fade { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
@@ -384,7 +385,7 @@
     }
     @media (max-width: 600px) {
       .stats-row { grid-template-columns: 1fr; }
-      .stat-item + .stat-item { border-top: 1px solid rgba(255,255,255,0.06); }
+      .stat-item + .stat-item { border-left: none; border-top: 1px solid rgba(255,255,255,0.08); }
       .email-form { flex-direction: column; }
       .hero-ctas .btn { width: 100%; justify-content: center; }
       .free-block { padding: 40px 24px; }
@@ -399,7 +400,7 @@
 <nav>
   <div class="wrap">
     <div class="logo">Clinera<span>.</span></div>
-    <a href="#start" class="btn btn-primary">Start Free →</a>
+    <a href="/register" class="btn btn-primary">Start Free →</a>
   </div>
 </nav>
 
@@ -410,7 +411,7 @@
     <h1>You're already sending <em>WhatsApp</em> reminders.<br>Stop doing it by hand.</h1>
     <p class="hero-sub">Every morning your receptionist opens WhatsApp and starts copy-pasting. "Hi [name], reminder for tomorrow at 10am." Clinera does that — automatically, for every patient, every appointment. Free forever.</p>
     <div class="hero-ctas">
-      <a href="#start" class="btn btn-primary">Automate Your Reminders →</a>
+      <a href="/register" class="btn btn-primary">Automate Your Reminders →</a>
       <a href="#how" class="btn btn-ghost">See How It Works ↓</a>
     </div>
     <div class="trust-strip">
@@ -531,7 +532,7 @@
           <li>Post-visit rebooking nudge goes out automatically — patients come back</li>
           <li>Full patient history on one screen — no digging through phone chats</li>
         </ul>
-        <a href="#start" class="btn btn-primary">Start Free Today →</a>
+        <a href="/register" class="btn btn-primary">Start Free Today →</a>
       </div>
       <div class="split-img fade">
         <img src="img/doctor-consult.jpg" alt="Doctor giving full attention to patient">
@@ -684,7 +685,7 @@
           <li>Recall reminders at your intervals — 3 months, 6 months, your call</li>
           <li>Retention goes up. Your team did nothing extra. That's the point.</li>
         </ul>
-        <a href="#start" class="btn btn-primary">Start Free →</a>
+        <a href="/register" class="btn btn-primary">Start Free →</a>
       </div>
     </div>
   </div>
@@ -706,7 +707,7 @@
         <li>Multi-location support</li>
         <li>No credit card. Not now. Not ever.</li>
       </ul>
-      <a href="#start" class="btn btn-primary" style="font-size:1.05rem; padding:16px 36px;">Get Your Free Clinic Account →</a>
+      <a href="/register" class="btn btn-primary" style="font-size:1.05rem; padding:16px 36px;">Get Your Free Clinic Account →</a>
     </div>
   </div>
 </section>
@@ -776,10 +777,9 @@
     <div class="footer-cta-inner">
       <h2>Your receptionist sent 47 WhatsApp reminders this morning.<br><em>Clinera sends them in zero seconds.</em></h2>
       <p>Every day you don't automate is another two hours of copy-pasting, another lead that went cold, another no-show that cost you a slot. Takes 10 minutes to set up. Free forever.</p>
-      <form class="email-form" action="#" method="POST">
-        <input type="email" name="email" placeholder="Your work email" required aria-label="Email">
-        <button type="submit" class="btn btn-primary">Start Free Today →</button>
-      </form>
+      <div style="margin-bottom: 20px;">
+        <a href="/register" class="btn btn-primary" style="font-size:1.05rem; padding:16px 36px;">Start Free Today →</a>
+      </div>
       <p class="footer-note">Free forever. No credit card. Running in under 10 minutes.</p>
     </div>
   </div>