<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<!-- =========================================================
     Resource hints — open connections to third-party origins
     before they're needed, for faster LCP.
     ========================================================= -->
<link rel="preconnect" href="https://www.googletagmanager.com" crossorigin>
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin>
<link rel="preconnect" href="https://developer.apple.com" crossorigin>
<link rel="dns-prefetch" href="//apps.apple.com">

<!-- Google Analytics (GA4) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-JYFJCWXCFL"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-JYFJCWXCFL', { anonymize_ip: true });
</script>

<!-- =========================================================
     Primary meta — title, description, keywords, robots
     ========================================================= -->
<title>MyRCBox — Indie iOS Apps by Sylvain Lafrance | iPhone, iPad &amp; Mac</title>
<meta name="description" content="MyRCBox publishes 12 indie iOS apps designed to be useful, focused, and affordable — AI writing, network tools, journaling, calendar, games, creative utilities, and more. No subscriptions, no tracking.">
<meta name="keywords" content="indie iOS apps, iPhone apps, iPad apps, Mac apps, network tools, journaling apps, productivity apps, calendar app, turtle graphics, arcade games, Conway Game of Life, EVP recorder, paranormal app, multi-site search, no subscription apps, privacy first apps">
<meta name="author" content="Sylvain Lafrance">
<meta name="publisher" content="MyRCBox">
<meta name="copyright" content="© 2026 Sylvain Lafrance">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="googlebot" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="bingbot" content="index, follow">
<meta name="rating" content="general">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="format-detection" content="telephone=no">

<link rel="canonical" href="https://myrcbox.com/">

<!-- =========================================================
     Theme, PWA, and app-name hints
     ========================================================= -->
<meta name="theme-color" content="#FBFBFD">
<meta name="color-scheme" content="light">
<meta name="application-name" content="MyRCBox">
<meta name="apple-mobile-web-app-title" content="MyRCBox">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="mobile-web-app-capable" content="yes">
<meta name="msapplication-TileColor" content="#FBFBFD">
<meta name="msapplication-config" content="none">

<!-- =========================================================
     Open Graph (Facebook, LinkedIn, iMessage, etc.)
     ========================================================= -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://myrcbox.com/">
<meta property="og:site_name" content="MyRCBox">
<meta property="og:title" content="MyRCBox — Indie iOS Apps by Sylvain Lafrance">
<meta property="og:description" content="12 indie iOS apps designed to be useful, focused, and affordable. No subscriptions, no tracking, no nonsense.">
<meta property="og:image" content="https://myrcbox.com/media/website/MyRCBox_Logo.jpg">
<meta property="og:image:secure_url" content="https://myrcbox.com/media/website/MyRCBox_Logo.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1536">
<meta property="og:image:height" content="1024">
<meta property="og:image:alt" content="MyRCBox — iOS apps by Sylvain Lafrance">
<meta property="og:locale" content="en_US">
<meta property="og:locale:alternate" content="fr_CA">
<meta property="og:updated_time" content="2026-05-14T00:00:00Z">
<meta property="fb:app_id" content="">

<!-- =========================================================
     Twitter / X cards
     ========================================================= -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@sylvainlafranc">
<meta name="twitter:creator" content="@sylvainlafranc">
<meta name="twitter:title" content="MyRCBox — Indie iOS Apps">
<meta name="twitter:description" content="12 indie iOS apps. Useful, focused, affordable. By @sylvainlafranc.">
<meta name="twitter:image" content="https://myrcbox.com/media/website/MyRCBox_Logo.jpg">
<meta name="twitter:image:alt" content="MyRCBox — iOS apps by Sylvain Lafrance">

<!-- =========================================================
     Icons, manifest, and RSS feed
     ========================================================= -->
<link rel="icon" type="image/png" href="/media/website/MyRCBox_Logo.jpg">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/media/website/MyRCBox_Logo.jpg">
<link rel="apple-touch-icon" sizes="180x180" href="/media/website/MyRCBox_Logo.jpg">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="alternate" type="application/rss+xml" title="MyRCBox — Blog feed" href="/feed.xml">
<link rel="alternate" type="application/atom+xml" title="MyRCBox — Atom feed" href="/feed.atom">
<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml">

<!-- =========================================================
     Profile verification (IndieWeb rel="me" / microformats)
     Helps search engines and Mastodon verify ownership.
     ========================================================= -->
<link rel="me" href="https://x.com/sylvainlafranc">
<link rel="me" href="https://mastodon.social/@sylvainlafrance">
<link rel="me" href="https://bsky.app/profile/sylvainlafrance.bsky.social">
<link rel="me" href="https://www.reddit.com/user/SylvainLafrance/">
<link rel="me" href="mailto:support@myrcbox.com">
<link rel="author" href="https://myrcbox.com/authors/sylvain-lafrance/">

<style>
/* ====================================================================
   MyRCBox — Landing page styles
   Matches the WhenDay aesthetic: dark, Apple-product-page minimalism,
   refined typography, emoji-circle cards, generous spacing.
   ==================================================================== */

:root {
  --bg:            #FBFBFD;
  --bg-elev:       #F5F5F7;
  --bg-card:       #FFFFFF;
  --bg-card-hover: #FFFFFF;
  --border:        rgba(0, 0, 0, 0.08);
  --border-strong: rgba(0, 0, 0, 0.14);
  --text:          #1D1D1F;
  --text-dim:      #515154;
  --text-faint:    #86868B;
  --accent:        #0071E3;
  --accent-glow:   rgba(0, 113, 227, 0.22);
  --gradient-hero: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0,113,227,0.10), transparent 60%),
                   radial-gradient(ellipse 60% 40% at 80% 20%, rgba(155,90,255,0.06), transparent 60%),
                   radial-gradient(ellipse 50% 40% at 20% 30%, rgba(60,200,160,0.05), transparent 60%);
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.05);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08), 0 20px 48px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.06);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.container { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 251, 253, 0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 17px;
}
.brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #0071E3 0%, #6E40FF 50%, #E94B91 100%);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0,113,227,0.28);
}
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 8px;
  transition: background 0.2s var(--ease);
}
.nav a:hover { background: rgba(0, 0, 0, 0.06); }
.nav a.cta {
  background: var(--text);
  color: #fff;
  font-weight: 600;
}
.nav a.cta:hover { background: #000; }
.nav-toggle { display: none; }

@media (max-width: 760px) {
  .nav a:not(.cta) { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 80px 0 60px;
  text-align: center;
  background: var(--gradient-hero);
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.04) 1px, transparent 0);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 30%, #000 30%, transparent 70%);
  pointer-events: none;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 8px #4ADE80;
}
.hero h1 {
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.hero h1 .accent {
  background: linear-gradient(135deg, #0071E3 0%, #6E40FF 50%, #E94B91 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero .sub {
  font-size: clamp(17px, 2vw, 21px);
  color: var(--text-dim);
  max-width: 620px;
  margin: 0 auto 36px;
  line-height: 1.5;
  position: relative;
  z-index: 1;
}
.hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.btn-primary {
  background: var(--text);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.btn-primary:hover { transform: translateY(-1px); background: #000; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22); }
.btn-secondary {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background: rgba(0, 0, 0, 0.07); border-color: var(--border-strong); }
.btn .arrow { transition: transform 0.2s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  margin-top: 64px;
  position: relative;
  z-index: 1;
}
.stat .num {
  display: block;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(180deg, #1D1D1F, #6E6E73);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat .label { font-size: 13px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; }

@media (max-width: 600px) {
  .hero-stats { gap: 32px; }
  .stat .num { font-size: 28px; }
}

/* ---------- Section scaffolding ---------- */
section { padding: 96px 0; position: relative; }
.section-head { text-align: center; margin-bottom: 56px; }
.kicker {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 760px;
  margin: 0 auto 16px;
}
.section-head h2 .accent {
  background: linear-gradient(135deg, #0071E3 0%, #6E40FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.section-head .lede {
  font-size: 17px;
  color: var(--text-dim);
  max-width: 580px;
  margin: 0 auto;
}

/* ---------- Filter chips ---------- */
.filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
}
.chip {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
  transition: all 0.2s var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--border-strong); }
.chip.active {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.chip .count {
  margin-left: 6px;
  font-size: 12px;
  opacity: 0.6;
}

/* ---------- App grid ---------- */
.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}
.app-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
  overflow: hidden;
}
.app-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.app-card:hover {
  transform: translateY(-4px);
  background: var(--bg-card-hover);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}
.app-card:hover::before { opacity: 1; }
.app-card:hover .app-icon { transform: scale(1.05) rotate(-2deg); }

.app-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 0;
  margin-bottom: 20px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
  transition: transform 0.3s var(--ease);
}

.app-card h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.app-card .tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-dim);
}
.app-card p {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 20px;
  flex-grow: 1;
}
.learn-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  align-self: flex-start;
}
.learn-more::after {
  /* Stretched click target — covers the whole .app-card (its positioned ancestor) */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.learn-more:hover { color: #000; }
.learn-more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.learn-more .arrow { transition: transform 0.2s var(--ease); }
.app-card:hover .learn-more .arrow { transform: translateX(4px); }

/* App icon color variants — one per app, distinct hue */
.bg-arcadia        { background: url('/icons/arcadia.png') center/cover no-repeat, linear-gradient(135deg, #8B5CF6, #EC4899); }
.bg-bodied-clips        { background: url('/icons/bodied-clips.png') center/cover no-repeat, linear-gradient(135deg, #F97316, #EF4444); }
.bg-devnotes        { background: url('/icons/devnotes.png') center/cover no-repeat, linear-gradient(135deg, #3B82F6, #06B6D4); }
.bg-evp        { background: url('/icons/evp-ghost-signal.png') center/cover no-repeat, linear-gradient(135deg, #6366F1, #8B5CF6); }
.bg-life        { background: url('/icons/game-of-life.png') center/cover no-repeat, linear-gradient(135deg, #059669, #84CC16); }
.bg-logo        { background: url('/icons/logo.png') center/cover no-repeat, linear-gradient(135deg, #FACC15, #F97316); }
.bg-netprobe        { background: url('/icons/netprobe.png') center/cover no-repeat, linear-gradient(135deg, #06B6D4, #3B82F6); }
.bg-search        { background: url('/icons/search-it.png') center/cover no-repeat, linear-gradient(135deg, #14B8A6, #06B6D4); }
.bg-sharetonote        { background: url('/icons/share-to-note.png') center/cover no-repeat, linear-gradient(135deg, #6366F1, #38BDF8); }
.bg-what        { background: url('/icons/what.png') center/cover no-repeat, linear-gradient(135deg, #0EA5E9, #A855F7); }
.bg-whenday        { background: url('/icons/whenday.png') center/cover no-repeat, linear-gradient(135deg, #6366F1, #A855F7); }
.bg-wrldtuner        { background: url('/icons/wrldtuner.png') center/cover no-repeat, linear-gradient(135deg, #22D3EE, #4F46E5); }

/* ---------- Highlights ---------- */
.highlights {
  background: var(--bg-elev);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.highlight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
}
.highlight {
  text-align: center;
  padding: 32px 20px;
}
.highlight .icon {
  font-size: 36px;
  margin-bottom: 16px;
  display: inline-block;
}
.highlight h3 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.highlight p {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---------- Maker / About ---------- */
.maker {
  text-align: center;
}
.maker .avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  margin: 0 auto 24px;
  background: linear-gradient(135deg, #0071E3, #6E40FF, #E94B91);
  display: grid;
  place-items: center;
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  box-shadow: 0 14px 32px rgba(0,113,227,0.25);
}
.maker h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 16px; letter-spacing: -0.025em; }
.maker p {
  max-width: 620px;
  margin: 0 auto 32px;
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
}
.social-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 14px;
  color: var(--text-dim);
  transition: all 0.2s var(--ease);
}
.social-link:hover { color: var(--text); background: rgba(0, 0, 0, 0.06); border-color: var(--border-strong); }

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 0;
  font-size: 17px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-size: 24px;
  font-weight: 300;
  color: var(--text-faint);
  transition: transform 0.3s var(--ease);
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: var(--accent); }
.faq-item .answer {
  padding: 0 0 24px;
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 640px;
}

/* ---------- CTA strip ---------- */
.cta-strip {
  text-align: center;
  background: var(--gradient-hero);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-strip h2 {
  font-size: clamp(28px, 4vw, 40px);
  margin-bottom: 16px;
  letter-spacing: -0.025em;
}
.cta-strip p {
  color: var(--text-dim);
  margin-bottom: 28px;
  font-size: 17px;
}

/* ---------- Footer ---------- */
.site-footer {
  padding: 48px 0 32px;
  border-top: 1px solid var(--border);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-brand p {
  color: var(--text-faint);
  font-size: 14px;
  margin-top: 12px;
  max-width: 320px;
  line-height: 1.5;
}
.footer-col h4 {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--text-dim); font-size: 14px; transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  padding-top: 28px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: var(--text-faint);
}
.footer-legal { display: flex; gap: 18px; flex-wrap: wrap; }
.footer-legal a:hover { color: var(--text); }

@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ---------- Hidden state for filter ---------- */
.app-card.is-hidden {
  display: none;
}

/* ---------- Reveal animation ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero .eyebrow, .hero h1, .hero .sub, .hero-cta, .hero-stats {
  animation: fadeUp 0.8s var(--ease) backwards;
}
.hero .eyebrow { animation-delay: 0.05s; }
.hero h1      { animation-delay: 0.15s; }
.hero .sub    { animation-delay: 0.25s; }
.hero-cta     { animation-delay: 0.35s; }
.hero-stats   { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ---------- Skip link for keyboard users (a11y / SEO) ---------- */
.skip-link {
  position: absolute;
  top: -40px;
  left: 12px;
  background: var(--text);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
  z-index: 1000;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }
</style>

<!-- =========================================================
     Structured Data (JSON-LD) — schema.org
     One @graph with: WebSite (with sitelinks search box),
     Organization, Person (author), ItemList of all 12 apps as
     SoftwareApplication entries, and FAQPage.
     ========================================================= -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@graph": [
    {
      "@type": "WebSite",
      "@id": "https://myrcbox.com/#website",
      "url": "https://myrcbox.com/",
      "name": "MyRCBox",
      "alternateName": "Sylvain Lafrance — iOS Apps",
      "description": "Indie iOS apps designed to be useful, focused, and affordable.",
      "inLanguage": "en-US",
      "publisher": { "@id": "https://myrcbox.com/#organization" },
      "potentialAction": {
        "@type": "SearchAction",
        "target": {
          "@type": "EntryPoint",
          "urlTemplate": "https://myrcbox.com/search/?q={search_term_string}"
        },
        "query-input": "required name=search_term_string"
      }
    },
    {
      "@type": "Organization",
      "@id": "https://myrcbox.com/#organization",
      "name": "MyRCBox",
      "url": "https://myrcbox.com/",
      "logo": {
        "@type": "ImageObject",
        "url": "https://myrcbox.com/media/website/MyRCBox_Logo.jpg",
        "width": 1536,
        "height": 1024
      },
      "founder": { "@id": "https://myrcbox.com/#person" },
      "email": "support@myrcbox.com",
      "sameAs": [
        "https://x.com/sylvainlafranc",
        "https://mastodon.social/@sylvainlafrance",
        "https://bsky.app/profile/sylvainlafrance.bsky.social",
        "https://www.reddit.com/user/SylvainLafrance/",
        "https://apps.apple.com/us/developer/sylvain-lafrance/id1197090441"
      ]
    },
    {
      "@type": "Person",
      "@id": "https://myrcbox.com/#person",
      "name": "Sylvain Lafrance",
      "url": "https://myrcbox.com/authors/sylvain-lafrance/",
      "jobTitle": "Indie iOS Developer",
      "email": "support@myrcbox.com",
      "sameAs": [
        "https://x.com/sylvainlafranc",
        "https://mastodon.social/@sylvainlafrance",
        "https://bsky.app/profile/sylvainlafrance.bsky.social",
        "https://apps.apple.com/us/developer/sylvain-lafrance/id1197090441"
      ]
    },
    {
      "@type": "ItemList",
      "@id": "https://myrcbox.com/#apps",
      "name": "MyRCBox iOS Apps",
      "description": "12 indie iOS apps by Sylvain Lafrance.",
      "numberOfItems": 12,
      "itemListOrder": "https://schema.org/ItemListOrderAscending",
      "itemListElement": [
        {
          "@type": "ListItem", "position": 1,
          "item": {
            "@type": "SoftwareApplication",
            "name": "Arcadia",
            "description": "35 classic arcade and puzzle games in one iOS app. No internet required, no ads.",
            "url": "https://myrcbox.com/arcadia/",
            "applicationCategory": "GameApplication",
            "operatingSystem": "iOS",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 2,
          "item": {
            "@type": "SoftwareApplication",
            "name": "Bodied Clips",
            "description": "Drop animated reaction labels on any iPhone video. Customize font, color, animation, and timing.",
            "url": "https://myrcbox.com/bodied-clips/",
            "applicationCategory": "MultimediaApplication",
            "operatingSystem": "iOS 17+",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 3,
          "item": {
            "@type": "SoftwareApplication",
            "name": "Dev Notes++",
            "description": "Track bugs, features, and ideas for every app you ship.",
            "url": "https://myrcbox.com/devnotes/",
            "applicationCategory": "DeveloperApplication",
            "operatingSystem": "iOS",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 4,
          "item": {
            "@type": "SoftwareApplication",
            "name": "EVP Ghost Signal",
            "description": "Paranormal audio investigator. Record, analyze, and export EVP sessions with real-time anomaly detection.",
            "url": "https://myrcbox.com/evp-ghost-signal/",
            "applicationCategory": "MultimediaApplication",
            "operatingSystem": "iOS 18+",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 5,
          "item": {
            "@type": "SoftwareApplication",
            "name": "Game of Life",
            "description": "Conway's cellular automaton for iPhone. Draw cells, press play, and watch patterns evolve.",
            "url": "https://myrcbox.com/game-of-life/",
            "applicationCategory": "GameApplication",
            "operatingSystem": "iOS",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 6,
          "item": {
            "@type": "SoftwareApplication",
            "name": "Logo",
            "description": "Classic turtle graphics programming language for iPhone and iPad. Learn programming visually.",
            "url": "https://myrcbox.com/logo/",
            "applicationCategory": "EducationalApplication",
            "operatingSystem": "iOS",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 7,
          "item": {
            "@type": "SoftwareApplication",
            "name": "NetProbe",
            "description": "54 network tools for iPhone, iPad and Mac. Ping, Traceroute, Speed Test, SSL Inspector, and more.",
            "url": "https://myrcbox.com/netprobe/",
            "applicationCategory": "UtilitiesApplication",
            "operatingSystem": "iOS, iPadOS, macOS",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 8,
          "item": {
            "@type": "SoftwareApplication",
            "name": "Search-It",
            "description": "One keyword, many sites. Search news, blogs, marketplaces, and your favorite websites at once.",
            "url": "https://myrcbox.com/search-it/",
            "applicationCategory": "UtilitiesApplication",
            "operatingSystem": "iOS",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 9,
          "item": {
            "@type": "SoftwareApplication",
            "name": "What - Said",
            "description": "AI writing assistant for everywhere you type. Fix grammar, rephrase, translate, and rewrite in any tone.",
            "url": "https://myrcbox.com/what",
            "applicationCategory": "ProductivityApplication",
            "operatingSystem": "iOS, iPadOS, macOS",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 10,
          "item": {
            "@type": "SoftwareApplication",
            "name": "WhenDay",
            "description": "Your calendar, simplified. 5 views, event heatmap, smart widgets, statistics, and 7 languages.",
            "url": "https://myrcbox.com/whenday/",
            "applicationCategory": "ProductivityApplication",
            "operatingSystem": "iOS",
            "inLanguage": ["en","fr","es","pt","de","ja","zh-Hans"],
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 11,
          "item": {
            "@type": "SoftwareApplication",
            "name": "Wrld Tuner",
            "description": "30,000+ live radio stations from every country, with on-device captions and live translation into 19 languages. No accounts, no tracking.",
            "url": "https://myrcbox.com/wrldtuner/",
            "applicationCategory": "MultimediaApplication",
            "operatingSystem": "iOS, iPadOS",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        },
        {
          "@type": "ListItem", "position": 12,
          "item": {
            "@type": "SoftwareApplication",
            "name": "Share to Note",
            "description": "Save links, text, and photos from any iOS app into one private, iCloud-synced list. No account, no tracking.",
            "url": "https://myrcbox.com/sharetonote/",
            "applicationCategory": "ProductivityApplication",
            "operatingSystem": "iOS, iPadOS, macOS",
            "author": { "@id": "https://myrcbox.com/#person" },
            "publisher": { "@id": "https://myrcbox.com/#organization" }
          }
        }
      ]
    },
    {
      "@type": "FAQPage",
      "@id": "https://myrcbox.com/#faq",
      "mainEntity": [
        {
          "@type": "Question",
          "name": "Are all your apps free?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Most apps are free to download with optional one-time Pro upgrades that unlock advanced features. No subscriptions. A few specialty apps are paid up front — always a one-time purchase you keep forever."
          }
        },
        {
          "@type": "Question",
          "name": "Do your apps collect my data?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "No. Every app is built privacy-first. No tracking, no analytics, no third-party SDKs. Data stays on your device. The only thing that ever leaves is what you explicitly choose to export."
          }
        },
        {
          "@type": "Question",
          "name": "Which devices are supported?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Most apps run on iPhone and iPad. Several — including NetProbe — are universal across iPhone, iPad, and Mac via a single purchase. Check each app's page for exact requirements."
          }
        },
        {
          "@type": "Question",
          "name": "How do I get support?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Email support@myrcbox.com. Direct reply from the developer — no ticketing system, no chatbots. Feature requests and bug reports always welcome."
          }
        },
        {
          "@type": "Question",
          "name": "Can I suggest a new app?",
          "acceptedAnswer": {
            "@type": "Answer",
            "text": "Absolutely. Most of these apps started as something I personally needed. If you have an idea that's small, focused, and useful, send it over — I read every message."
          }
        }
      ]
    }
  ]
}
</script>
</head>
<body>

<a class="skip-link" href="#main">Skip to content</a>

<!-- ============== HEADER (loaded remotely) ============== -->
<div id="mrcb-remote-header"></div>

<main id="main">

<!-- ============== HERO ============== -->
<section class="hero" id="top">
  <div class="container">
    <span class="eyebrow"><span class="dot"></span> 12 apps shipping &amp; counting</span>
    <h1>Indie iOS apps,<br><span class="accent">crafted with care.</span></h1>
    <p class="sub">Useful, focused, and affordable apps for iPhone, iPad, and Mac — from network tools and journaling to games, creative utilities, and a paranormal recorder. Built by one developer who actually uses them.</p>
    <div class="hero-cta">
      <a href="#apps" class="btn btn-primary">Browse all apps <span class="arrow">→</span></a>
      <a href="https://apps.apple.com/us/developer/sylvain-lafrance/id1197090441" class="btn btn-secondary">View on App Store</a>
    </div>
    <div class="hero-stats" role="list">
      <div class="stat" role="listitem"><span class="num">12</span><span class="label">Apps</span></div>
      <div class="stat" role="listitem"><span class="num">0</span><span class="label">Trackers</span></div>
      <div class="stat" role="listitem"><span class="num">1</span><span class="label">Developer</span></div>
    </div>
  </div>
</section>

<!-- ============== APPS ============== -->
<section id="apps">
  <div class="container">
    <div class="section-head">
      <span class="kicker">The Apps</span>
      <h2>Useful, focused,<br><span class="accent">affordable.</span></h2>
      <p class="lede">Every app is independently designed, privacy-first, and free of subscriptions or tracking. Filter by category below.</p>
    </div>

    <div class="filters" role="tablist" aria-label="Filter apps by category">
      <button class="chip active" data-filter="all"        role="tab" aria-selected="true">All <span class="count">12</span></button>
      <button class="chip"        data-filter="productivity" role="tab">Productivity <span class="count">4</span></button>
      <button class="chip"        data-filter="creative"     role="tab">Creative <span class="count">2</span></button>
      <button class="chip"        data-filter="games"        role="tab">Games <span class="count">2</span></button>
      <button class="chip"        data-filter="tools"        role="tab">Tools <span class="count">4</span></button>
    </div>

    <div class="app-grid">

      <!-- 1. Arcadia -->
      <article class="app-card" data-category="games">
        <div class="app-icon bg-arcadia" role="img" aria-label="Arcadia app icon"></div>
        <h3>Arcadia <span class="tag">Games</span></h3>
        <p>35 classic arcade &amp; puzzle games in one iOS app. No internet required, no ads — just a clean collection of nostalgic favorites.</p>
        <a class="learn-more" href="/arcadia/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 2. Bodied Clips -->
      <article class="app-card" data-category="creative">
        <div class="app-icon bg-bodied-clips" role="img" aria-label="Bodied Clips app icon"></div>
        <h3>Bodied Clips <span class="tag">Creative</span></h3>
        <p>Drop animated reaction labels on any iPhone video. Customize font, color, animation, and timing — export with everything burned in.</p>
        <a class="learn-more" href="/bodied-clips/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 3. Dev Notes++ -->
      <article class="app-card" data-category="productivity">
        <div class="app-icon bg-devnotes" role="img" aria-label="Dev Notes++ app icon"></div>
        <h3>Dev Notes++ <span class="tag">Productivity</span></h3>
        <p>Track bugs, features, and ideas for every app you ship. From first commit to App Store release — stay organized in one place.</p>
        <a class="learn-more" href="/devnotes/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 4. EVP Ghost Signal -->
      <article class="app-card" data-category="tools">
        <div class="app-icon bg-evp" role="img" aria-label="EVP Ghost Signal app icon"></div>
        <h3>EVP Ghost Signal <span class="tag">Tools</span></h3>
        <p>Paranormal audio investigator. Record, analyze, and export EVP sessions with real-time anomaly detection, spectrogram, and EMF monitoring.</p>
        <a class="learn-more" href="/evp-ghost-signal/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 5. Game of Life -->
      <article class="app-card" data-category="games">
        <div class="app-icon bg-life" role="img" aria-label="Game of Life app icon"></div>
        <h3>Game of Life <span class="tag">Games</span></h3>
        <p>Conway's cellular automaton for iPhone. Draw cells, press play, and watch simple rules create complex, fascinating patterns.</p>
        <a class="learn-more" href="/game-of-life/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 6. Logo -->
      <article class="app-card" data-category="creative">
        <div class="app-icon bg-logo" role="img" aria-label="Logo app icon"></div>
        <h3>Logo <span class="tag">Creative</span></h3>
        <p>The classic turtle graphics programming language for iPhone &amp; iPad. Learn programming concepts while creating geometric art.</p>
        <a class="learn-more" href="/logo/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 7. NetProbe -->
      <article class="app-card" data-category="tools">
        <div class="app-icon bg-netprobe" role="img" aria-label="NetProbe app icon"></div>
        <h3>NetProbe <span class="tag">Tools</span></h3>
        <p>54 network tools for iPhone, iPad &amp; Mac. Ping, Traceroute, Speed Test, SSL Inspector, Security Score, and 49 more — one universal purchase.</p>
        <a class="learn-more" href="/netprobe/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 8. Search-It -->
      <article class="app-card" data-category="tools">
        <div class="app-icon bg-search" role="img" aria-label="Search-It app icon"></div>
        <h3>Search-It <span class="tag">Tools</span></h3>
        <p>One keyword, many sites. Search news, blogs, marketplaces, and your favorite websites all at once — no third-party search engine involved.</p>
        <a class="learn-more" href="/search-it/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 9. Share to Note -->
      <article class="app-card" data-category="productivity">
        <div class="app-icon bg-sharetonote" role="img" aria-label="Share to Note app icon"></div>
        <h3>Share to Note <span class="tag">Productivity</span></h3>
        <p>Tap Share, it's saved. Capture links, text, and photos from any iOS app into one clean, private list — iCloud-synced across iPhone, iPad &amp; Mac. No account, no tracking.</p>
        <a class="learn-more" href="/sharetonote/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 10. What - Said -->
      <article class="app-card" data-category="productivity">
        <div class="app-icon bg-what" role="img" aria-label="What - Said app icon"></div>
        <h3>What - Said <span class="tag">Productivity</span></h3>
        <p>AI writing that works everywhere you type. Fix grammar, rephrase, translate, and rewrite anything in any tone — on iPhone, iPad &amp; Mac.</p>
        <a class="learn-more" href="/what" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 11. WhenDay -->
      <article class="app-card" data-category="productivity">
        <div class="app-icon bg-whenday" role="img" aria-label="WhenDay app icon"></div>
        <h3>WhenDay <span class="tag">Productivity</span></h3>
        <p>Your calendar, simplified. 5 views (List, Day, Week, Month, Grid), event heatmap, smart widgets, statistics, and 7 languages.</p>
        <a class="learn-more" href="/whenday/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

      <!-- 12. Wrld Tuner -->
      <article class="app-card" data-category="tools">
        <div class="app-icon bg-wrldtuner" role="img" aria-label="Wrld Tuner app icon"></div>
        <h3>Wrld Tuner <span class="tag">Tools</span></h3>
        <p>Listen to the world, read along. 30,000+ live radio stations from every country, with on-device captions and live translation into 19 languages — no accounts, no tracking.</p>
        <a class="learn-more" href="/wrldtuner/" aria-label="Learn more about this app">Learn more <span class="arrow">→</span></a></article>

    </div>
  </div>
</section>

<!-- ============== HIGHLIGHTS ============== -->
<section class="highlights" id="why">
  <div class="container">
    <div class="section-head">
      <span class="kicker">Why MyRCBox</span>
      <h2>Built the way <span class="accent">apps used to be.</span></h2>
      <p class="lede">Indie. Direct. Honest. No surveillance, no upsells, no rented features.</p>
    </div>
    <div class="highlight-grid">
      <div class="highlight">
        <span class="icon">🛡️</span>
        <h3>Privacy First</h3>
        <p>No tracking, no analytics, no third-party SDKs. Your data stays on your device.</p>
      </div>
      <div class="highlight">
        <span class="icon">💎</span>
        <h3>No Subscriptions</h3>
        <p>One-time purchases where applicable. Buy it, own it — forever.</p>
      </div>
      <div class="highlight">
        <span class="icon">👤</span>
        <h3>Built by One</h3>
        <p>Every app designed, coded, and supported by Sylvain — direct feedback loop with the maker.</p>
      </div>
      <div class="highlight">
        <span class="icon">🚀</span>
        <h3>Actively Updated</h3>
        <p>Regular updates with new features, bug fixes, and refinements based on user feedback.</p>
      </div>
    </div>
  </div>
</section>

<!-- ============== MAKER ============== -->
<section class="maker" id="about">
  <div class="container">
    <span class="kicker">The Maker</span>
    <div class="avatar" aria-hidden="true">SL</div>
    <h2>Hi, I'm Sylvain.</h2>
    <p>I build small, sharp iOS apps that solve real problems — the kind I want to use myself. MyRCBox is where those apps live. No VC, no growth team, no roadmap dictated by metrics. Just a developer making tools that respect your time, your data, and your wallet.</p>
    <div class="social-row">
      <a class="social-link" href="https://x.com/sylvainlafranc">𝕏 / Twitter</a>
      <a class="social-link" href="https://mastodon.social/@sylvainlafrance">Mastodon</a>
      <a class="social-link" href="https://bsky.app/profile/sylvainlafrance.bsky.social">Bluesky</a>
      <a class="social-link" href="https://www.reddit.com/user/SylvainLafrance/">Reddit</a>
      <a class="social-link" href="mailto:support@myrcbox.com">support@myrcbox.com</a>
    </div>
  </div>
</section>

<!-- ============== FAQ ============== -->
<section id="faq">
  <div class="container">
    <div class="section-head">
      <span class="kicker">FAQ</span>
      <h2>Frequently asked <span class="accent">questions.</span></h2>
    </div>
    <div class="faq">
      <details class="faq-item">
        <summary>Are all your apps free?</summary>
        <div class="answer">Most apps are free to download with optional one-time Pro upgrades that unlock advanced features. No subscriptions. A few specialty apps are paid up front — always a one-time purchase you keep forever.</div>
      </details>
      <details class="faq-item">
        <summary>Do your apps collect my data?</summary>
        <div class="answer">No. Every app is built privacy-first. No tracking, no analytics, no third-party SDKs. Data stays on your device. The only thing that ever leaves is what you explicitly choose to export.</div>
      </details>
      <details class="faq-item">
        <summary>Which devices are supported?</summary>
        <div class="answer">Most apps run on iPhone and iPad. Several — including NetProbe — are universal across iPhone, iPad, and Mac via a single purchase. Check each app's page for exact requirements.</div>
      </details>
      <details class="faq-item">
        <summary>How do I get support?</summary>
        <div class="answer">Email <a href="mailto:support@myrcbox.com" style="color:var(--accent)">support@myrcbox.com</a>. Direct reply from the developer — no ticketing system, no chatbots. Feature requests and bug reports always welcome.</div>
      </details>
      <details class="faq-item">
        <summary>Can I suggest a new app?</summary>
        <div class="answer">Absolutely. Most of these apps started as something I personally needed. If you have an idea that's small, focused, and useful, send it over — I read every message.</div>
      </details>
    </div>
  </div>
</section>

<!-- ============== CTA STRIP ============== -->
<section class="cta-strip">
  <div class="container">
    <h2>12 apps. One developer. <span class="accent" style="background:linear-gradient(135deg,#0071E3,#E94B91);-webkit-background-clip:text;background-clip:text;color:transparent;">Zero nonsense.</span></h2>
    <p>Find one that fits your day.</p>
    <div class="hero-cta">
      <a href="https://apps.apple.com/us/developer/sylvain-lafrance/id1197090441" class="btn btn-primary">All apps on the App Store <span class="arrow">→</span></a>
      <a href="#apps" class="btn btn-secondary">Browse here</a>
    </div>
  </div>
</section>

</main>

<!-- ============== FOOTER (loaded remotely) ============== -->
<div id="mrcb-remote-footer"></div>

<script>
  // ---------- Category filter ----------
  const chips = document.querySelectorAll('.chip');
  const cards = document.querySelectorAll('.app-card');

  chips.forEach(chip => {
    chip.addEventListener('click', () => {
      const filter = chip.dataset.filter;
      chips.forEach(c => {
        c.classList.toggle('active', c === chip);
        c.setAttribute('aria-selected', c === chip ? 'true' : 'false');
      });
      cards.forEach(card => {
        const show = filter === 'all' || card.dataset.category === filter;
        card.classList.toggle('is-hidden', !show);
      });
    });
  });
</script>

<!-- ============== REMOTE HEADER / FOOTER LOADER ============== -->
<script>
  /* Fetches an HTML fragment and injects it into the target element.
     Re-executes any <script> tags inside the fragment, since innerHTML
     does not run them. Inline event handlers (onclick="...") work as-is. */
  (function () {
    function injectFragment(url, targetId) {
      var target = document.getElementById(targetId);
      if (!target) return;
      fetch(url, { credentials: 'omit' })
        .then(function (res) {
          if (!res.ok) throw new Error('HTTP ' + res.status + ' for ' + url);
          return res.text();
        })
        .then(function (html) {
          target.innerHTML = html;
          // Re-run any <script> tags that came in with the fragment
          target.querySelectorAll('script').forEach(function (oldScript) {
            var newScript = document.createElement('script');
            for (var i = 0; i < oldScript.attributes.length; i++) {
              var a = oldScript.attributes[i];
              newScript.setAttribute(a.name, a.value);
            }
            newScript.text = oldScript.textContent;
            oldScript.parentNode.replaceChild(newScript, oldScript);
          });
        })
        .catch(function (err) {
          console.error('[MyRCBox] Failed to load fragment:', url, err);
        });
    }

    injectFragment('https://myrcbox.com/extra/myrcbox-header.html', 'mrcb-remote-header');
    injectFragment('https://myrcbox.com/extra/myrcbox-footer.html', 'mrcb-remote-footer');
  })();
</script>

</body>
</html>
