new app store links feature

src/app/hero/hero.component.scss

@@ -38,7 +38,7 @@
 
 .hero-content {
   position: relative;
-  z-index: 2;
+  z-index: 4;
   text-align: center;
   padding: $spacing-3xl $spacing-lg;
 
@@ -368,6 +368,90 @@
   letter-spacing: 0.03em;
 }
 
+// ── Download CTAs ───────────────────────────────────────────
+
+.hero-download {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: $spacing-sm;
+  margin: $spacing-lg 0 $spacing-md;
+}
+
+.download-label {
+  font-size: 0.9rem;
+  color: rgba(255, 255, 255, 0.65);
+  letter-spacing: 0.03em;
+}
+
+.download-buttons {
+  display: flex;
+  gap: $spacing-md;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+// Both store badges are constrained to the same size (160x52)
+.store-link {
+  display: inline-block;
+  text-decoration: none;
+}
+
+.store-badge {
+  width: 160px;
+  height: 52px;
+  object-fit: contain;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: $radius-sm;
+  padding: 4px;
+  transition: opacity $transition-fast;
+
+  &:hover {
+    opacity: 0.85;
+  }
+}
+
+.store-text {
+  color: var(--color-white);
+  text-decoration: underline;
+  font-size: 0.95rem;
+  padding: $spacing-xs $spacing-sm;
+  border-radius: $radius-sm;
+  background: rgba(255, 255, 255, 0.1);
+
+  &:hover {
+    background: rgba(255, 255, 255, 0.2);
+  }
+}
+
+// Apple's embed HTML contains its own <a>/<img> — constrain it
+.appstore-embed {
+  display: inline-flex;
+  align-items: center;
+
+  // Apple's embeds typically wrap an <a> around an <img>
+  > a,
+  a {
+    display: inline-block;
+    text-decoration: none;
+  }
+
+  img {
+    width: 160px;
+    height: 52px;
+    object-fit: contain;
+    display: block;
+  }
+
+  // If the embed is an iframe (Apple's new style), constrain that too
+  iframe {
+    width: 160px;
+    height: 52px;
+    border: none;
+    border-radius: $radius-sm;
+  }
+}
+
 // ── Responsive ──────────────────────────────────────────────
 
 @media (max-width: #{$bp-md - 1px}) {