Compact hero on phones; larger, tidier badges

- Phone breakpoint (<=600px): smaller octopus, single-line title, tighter
  spacing so the CTA and capability badges are visible without a long scroll
- Badges: larger text/icons and >=8px gaps (ui-ux-pro-max touch spacing),
  capped width so they stay a centered single line on desktop

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: SharonHart

src/pages/index.astro

@@ -700,6 +700,16 @@ const posts = (await getCollection("docs"))
         .hero-copy { text-align: center; }
         .cta { justify-content: center; }
       }
+      /* Phone: compact the hero so the CTA + badges are visible without a long scroll */
+      @media (max-width: 600px) {
+        .hero { padding-top: 0.3rem; padding-bottom: 1.2rem; }
+        .site-title { font-size: clamp(1.8rem, 8vw, 2.4rem); margin-bottom: 0.6rem; }
+        .hero-row { gap: 0.7rem; }
+        .hero-logo-wrap { width: min(210px, 48vw); }
+        .tagline { font-size: clamp(1.1rem, 5.2vw, 1.4rem); }
+        .cta { margin-top: 0.9rem; }
+        .badges { margin-top: 1rem; }
+      }
       .btn {
         display: inline-block;
         padding: 0.72rem 1.4rem;
@@ -721,32 +731,33 @@ const posts = (await getCollection("docs"))
       /* Capability badges (ui-pro-magic: built to the locked design system) */
       .badges {
         list-style: none;
-        margin: 2rem auto 0;
+        margin: 1.6rem auto 0;
         padding: 0;
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
-        gap: 0.45rem;
+        gap: 0.55rem;
+        max-width: 880px;
       }
       .badges li {
         display: inline-flex;
         align-items: center;
-        gap: 0.32rem;
-        padding: 0.28rem 0.62rem;
+        gap: 0.4rem;
+        padding: 0.42rem 0.85rem;
         border: 1px solid var(--card-border);
         border-radius: 999px;
         background: var(--card-bg);
         color: var(--text-muted);
         font-family: var(--dps-font-display);
         font-weight: 600;
-        font-size: 0.72rem;
+        font-size: 0.82rem;
         line-height: 1;
         transition:
           color 200ms var(--ease-out),
           border-color 200ms var(--ease-out),
           background 200ms var(--ease-out);
       }
-      .badges li svg { color: var(--accent); flex-shrink: 0; width: 14px; height: 14px; }
+      .badges li svg { color: var(--accent); flex-shrink: 0; width: 16px; height: 16px; }
       @media (hover: hover) and (pointer: fine) {
         .badges li:hover { color: var(--text); border-color: var(--accent); }
       }