moving

apps/www/app/_components/Hero.module.css

@@ -0,0 +1,160 @@
+.section {
+  position: relative;
+  padding: 168px var(--gutter) 104px;
+  overflow: hidden;
+}
+
+.glow {
+  position: absolute;
+  top: -240px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 900px;
+  height: 560px;
+  background: radial-gradient(
+    ellipse at center,
+    rgba(233, 165, 44, 0.09) 0%,
+    rgba(233, 165, 44, 0.03) 45%,
+    transparent 70%
+  );
+  pointer-events: none;
+}
+
+.grid {
+  position: relative;
+  max-width: var(--container-wide);
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: minmax(0, 10fr) minmax(0, 9fr);
+  gap: 64px;
+  align-items: center;
+}
+
+.copy {
+  max-width: 560px;
+}
+
+.headline {
+  font-size: var(--text-display);
+  font-weight: 800;
+  line-height: 1.05;
+  color: var(--hive-50);
+  margin-bottom: 24px;
+}
+
+.headlineEmphasis {
+  color: var(--honey-400);
+}
+
+.subhead {
+  font-size: var(--text-lead);
+  line-height: 1.6;
+  color: var(--hive-300);
+  margin-bottom: 36px;
+  max-width: 34em;
+}
+
+.ctaRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 28px;
+}
+
+.microcopy {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 18px;
+  row-gap: 8px;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+  letter-spacing: 0.02em;
+}
+
+.microItem {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.microDot {
+  width: 4px;
+  height: 4px;
+  border-radius: 50%;
+  background: var(--honey-500);
+  display: inline-block;
+}
+
+.visual {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 0;
+}
+
+@media (max-width: 1023px) {
+  .section {
+    padding-top: 136px;
+    padding-bottom: 80px;
+  }
+
+  .grid {
+    grid-template-columns: 1fr;
+    gap: 56px;
+  }
+
+  .copy {
+    max-width: 640px;
+  }
+}
+
+/* Round-7: one benchmark strip in the hero's dead bottom quarter.
+   Wave R Lane E: the 86.49% number is lifted to a flagship stat chip
+   (larger mono, honey-wash lozenge) so the leaderboard claim carries weight
+   near the CTAs; the rest stays quiet supporting mono copy. */
+.proofStrip {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 28px;
+  max-width: 40em;
+  color: var(--honey-500);
+  text-decoration: none;
+}
+.proofStat {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: baseline;
+  padding: 6px 12px;
+  border-radius: 10px;
+  background: var(--honey-wash);
+  border: 1px solid var(--honey-line);
+  font-family: var(--mono);
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  color: var(--honey-400);
+  transition: border-color 0.15s ease, background 0.15s ease;
+}
+.proofLabel {
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  letter-spacing: 0.02em;
+  line-height: 1.5;
+  color: var(--text-muted);
+}
+.proofStrip:hover .proofStat {
+  border-color: var(--honey-500);
+  background: rgba(233, 165, 44, 0.16);
+}
+.proofStrip:hover .proofLabel {
+  color: var(--hive-300);
+}