feat(ui): mobile scaling

static/css/styles.css

@@ -23,6 +23,7 @@
   );
   --shadow: 0 10px 30px rgba(30, 78, 156, 0.1);
   --shadow-hover: 0 20px 40px rgba(30, 78, 156, 0.15);
+  --navbar-height: 64px; /* consistent fixed navbar height */
 }
 
 html {
@@ -51,6 +52,7 @@ body {
   padding: 1rem 0;
   transition: all 0.3s ease;
   border-bottom: 1px solid rgba(2, 6, 23, 0.04);
+  min-height: var(--navbar-height);
 
   /* Lock navbar typography (prevents subtle shifts) */
   font-size: 1rem; /* 16px baseline */
@@ -165,6 +167,9 @@ body {
   align-items: center;
   position: relative;
   overflow: hidden;
+
+  /* Ensure content clears the fixed navbar on all screens */
+  padding-top: calc(var(--navbar-height) + 16px);
 }
 
 .hero::before {
@@ -404,8 +409,8 @@ body {
   background: var(--gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
-  background-clip: text;
+          background-clip: text;
-  color: transparent;
+          color: transparent;
 }
 
 .section-header p {
@@ -762,12 +767,25 @@ body {
 /* =======================
    Responsive
    ======================= */
+
+/* Tablet adjustments */
 @media (max-width: 1024px) {
   .hero-container {
     gap: 3rem;
   }
+  .hero-visual {
+    height: 460px;
+  }
+  .phone-mockup {
+    width: 280px;
+    height: 560px;
+  }
+  .app-logo {
+    font-size: 1.8rem;
+  }
 }
 
+/* Mobile layout and hamburger menu */
 @media (max-width: 768px) {
   .nav-container {
     padding: 0 1rem;
@@ -831,6 +849,11 @@ body {
     transform: translateY(-7px) rotate(-45deg);
   }
 
+  /* Hero and phone scaling + ensure hero clears navbar */
+  .hero {
+    padding-top: calc(var(--navbar-height) + 12px);
+  }
+
   .hero-container {
     grid-template-columns: 1fr;
     gap: 2rem;
@@ -839,33 +862,57 @@ body {
 
   .hero-visual {
     order: -1;
-    height: 300px;
+    height: 360px;
+    margin-top: 4px;
   }
 
   .phone-mockup {
-    width: 200px;
+    width: 230px;
-    height: 400px;
+    height: 460px;
+    padding: 16px;
+    border-radius: 36px;
+    transform: rotate(-5deg) translateY(0);
   }
 
-  .email-form {
+  .screen {
-    flex-direction: column;
+    border-radius: 22px;
   }
 
-  .countdown {
+  .app-brand {
-    grid-template-columns: repeat(2, 1fr);
+    gap: 0.4rem;
-    gap: 0.5rem;
+    margin-bottom: 0.35rem;
   }
 
-  .features-grid {
+  .app-brand-icon {
-    grid-template-columns: 1fr;
+    width: 26px;
-    gap: 1.5rem;
+    height: 26px;
+    border-radius: 5px;
   }
 
-  .feature-card {
+  .app-logo {
-    padding: 2rem;
+    font-size: 1.4rem;
+    margin-bottom: 0;
   }
 
-  /* Newsletter pages */
+  .stats-grid {
+    gap: 0.6rem;
+    margin-top: 1.2rem;
+  }
+
+  .stat-card {
+    padding: 0.6rem;
+    border-radius: 12px;
+  }
+
+  .stat-number {
+    font-size: 1.1rem;
+  }
+
+  .stat-label {
+    font-size: 0.65rem;
+  }
+
+  /* Newsletter pages spacing */
   .page-header {
     padding: 7rem 0 2rem;
   }
@@ -875,15 +922,105 @@ body {
   }
 }
 
-@media (max-width: 480px) {
+/* Small phones */
-  .cta-section {
+@media (max-width: 420px) {
-    padding: 1.5rem;
+  .hero {
-    margin: 0 1rem;
+    padding-top: calc(var(--navbar-height) + 6px);
   }
 
-  .features-container {
+  .hero-visual {
-    padding: 0 1rem;
+    height: 320px;
   }
+
+  .phone-mockup {
+    width: 200px;
+    height: 400px;
+    padding: 14px;
+    border-radius: 34px;
+    transform: rotate(-5deg) scale(0.96);
+    transform-origin: center top;
+  }
+
+  .screen {
+    border-radius: 20px;
+  }
+
+  .app-brand-icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  .app-logo {
+    font-size: 1.25rem;
+  }
+
+  .stats-grid {
+    gap: 0.5rem;
+    margin-top: 1rem;
+  }
+
+  .stat-card {
+    padding: 0.55rem;
+    border-radius: 10px;
+  }
+
+  .stat-number {
+    font-size: 1rem;
+  }
+
+  .stat-label {
+    font-size: 0.6rem;
+  }
+}
+
+/* Very narrow devices */
+@media (max-width: 360px) {
+  .hero-visual {
+    height: 290px;
+  }
+
+  .phone-mockup {
+    width: 184px;
+    height: 368px;
+    padding: 12px;
+    border-radius: 30px;
+    transform: rotate(-5deg) scale(0.94);
+  }
+
+  .app-brand-icon {
+    width: 22px;
+    height: 22px;
+  }
+
+  .app-logo {
+    font-size: 1.15rem;
+  }
+
+  .stats-grid {
+    gap: 0.45rem;
+    margin-top: 0.9rem;
+  }
+
+  .stat-card {
+    padding: 0.5rem;
+    border-radius: 9px;
+  }
+
+  .stat-number {
+    font-size: 0.95rem;
+  }
+
+  .stat-label {
+    font-size: 0.58rem;
+  }
+}
+
+/* Anchor scroll offset so anchors are not hidden under fixed navbar */
+main,
+.section,
+.page-header,
+#features {
+  scroll-margin-top: calc(var(--navbar-height) + 12px);
 }
 
 /* =======================