simplify styling

src/styles.css

@@ -16,10 +16,80 @@ body {
   line-height: 1.6;
 }
 
+.page-shell {
+  margin: 0 auto;
+  padding: 1rem 1.25rem 4rem;
+}
+
+.section-base {
+  margin-bottom: 3rem;
+}
+
+.section-anchor {
+  scroll-margin-top: 5.5rem;
+}
+
+.hero-panel {
+  padding: 2.5rem;
+  border: 1px solid rgba(110, 118, 129, 0.28);
+  border-radius: 24px;
+}
+
+.eyebrow {
+  width: fit-content;
+  margin: 0 0 1rem;
+  padding: 0.35rem 0.7rem;
+  line-height: 1;
+  border: 1px solid rgba(88, 166, 255, 0.5);
+  border-radius: 999px;
+  color: #9ecbff;
+  font-size: 0.82rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.hero-title {
+  margin: 0;
+  font-size: clamp(2rem, 5vw, 3.2rem);
+  line-height: 1.1;
+}
+
+.hero-lede {
+  max-width: 65ch;
+  margin-top: 1rem;
+  color: #c9d1d9;
+}
+
+.section-title-shared {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: baseline;
+  margin-bottom: 1rem;
+}
+
+.card-grid-shared {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 1rem;
+}
+
 a {
   color: inherit;
 }
 
+@media (max-width: 760px) {
+  .page-shell {
+    padding-top: 0.5rem;
+  }
+
+  .hero-panel {
+    padding: 2rem 1.2rem;
+  }
+}
+
 @media (hover: hover) and (pointer: fine) {
   html,
   body,