new app store links feature

src/app/hero/hero.component.html

@@ -30,6 +30,25 @@
         }
         <a routerLink="/schedule" class="btn btn-hero-secondary">View Schedule</a>
       </div>
+      @if (config().play_store_url || config().app_store_embed_html) {
+        <div class="hero-download">
+          <span class="download-label">Download our app</span>
+          <div class="download-buttons">
+            @if (config().play_store_url) {
+              <a [href]="config().play_store_url" target="_blank" rel="noopener noreferrer" class="store-link">
+                @if (config().play_store_icon_url) {
+                  <img [src]="resolveImageUrl(config().play_store_icon_url)" alt="Get it on Google Play" class="store-badge">
+                } @else {
+                  <span class="store-text">Google Play</span>
+                }
+              </a>
+            }
+            @if (config().app_store_embed_html) {
+              <div class="appstore-embed" [innerHTML]="config().app_store_embed_html"></div>
+            }
+          </div>
+        </div>
+      }
       <div class="hero-listeners">
         <span class="listeners-dot"></span>
         <span class="listeners-text">Live on-air now — Stream free worldwide</span>

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}) {