
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>
        Home - Charlie Monroe Software    </title>
    <meta name="description" content="Software for macOS and iOS.">
    <meta name="keywords" content="charlie monroe,software,os x,macos,mac,ios,iphone,ipad,downie,youtube,vimeo,youku,video downloader">

        <meta property="og:image"        content="https://software.charliemonroe.net/assets/img/og/og_default.jpg">
    <meta property="og:image:width"  content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:url"          content="https://software.charliemonroe.net/">
    <meta name="twitter:card"        content="summary_large_image">
    <meta name="twitter:image"       content="https://software.charliemonroe.net/assets/img/og/og_default.jpg">
    <link rel="previewimage"         href="https://software.charliemonroe.net/assets/img/og/og_default.jpg">

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap" rel="stylesheet">
    
    <!-- Favicons -->
    <link rel="shortcut icon" href="/assets/img/favicon.png" type="image/x-icon">

    <style>
    /* ─── Site-wide design tokens ─────────────────────────── */
    :root {
      --ink:       #0b0b12;
      --surface:   #111119;
      --card:      #17171f;
      --rim:       rgba(255,255,255,.07);
      --rim-hi:    rgba(255,255,255,.14);
      --text:      #ededf4;
      --muted:     #787892;
      --r-pill:    999px;
      --ff-head:   'Outfit', sans-serif;
      --ff-body:   'DM Sans', sans-serif;
    }
    body { background: var(--ink); color: var(--text); font-family: var(--ff-body); margin: 0; }
    *, *::before, *::after { box-sizing: border-box; }

    /* ─── Site header ─────────────────────────────────────── */
    .cm-header {
      position: sticky; top: 0; z-index: 1000;
      background: rgba(11,11,18,.85);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--rim);
    }
    .cm-header__in {
      max-width: 1120px; margin: 0 auto; padding: 0 48px;
      display: flex; align-items: center; gap: 32px; height: 60px;
    }
    @media(max-width:700px){ .cm-header__in { padding: 0 20px; } }

    .cm-header__logo {
      display: flex; align-items: center; flex-shrink: 0; opacity: .9;
      transition: opacity .2s;
    }
    .cm-header__logo:hover { opacity: 1; }

    .cm-nav {
      display: flex; align-items: center; gap: 4px;
      list-style: none; margin: 0; padding: 0; flex: 1;
    }
    .cm-nav a {
      display: block; padding: 6px 12px; border-radius: var(--r-pill);
      font-family: var(--ff-head); font-size: 13.5px; font-weight: 700;
      color: var(--muted); text-decoration: none;
      transition: color .18s, background .18s;
    }
    .cm-nav a:hover { color: var(--text); background: rgba(255,255,255,.06); }
    .cm-nav a.active { color: var(--text); background: rgba(255,255,255,.08); }
    .cm-nav__right { margin-left: auto; }

    /* Mobile */
    .cm-header__burger {
      display: none; flex-direction: column; gap: 5px;
      cursor: pointer; padding: 6px; margin-left: auto;
      background: none; border: none;
    }
    .cm-header__burger span {
      display: block; width: 22px; height: 2px;
      background: var(--muted); border-radius: 2px;
      transition: background .18s;
    }
    .cm-header__burger:hover span { background: var(--text); }

    @media(max-width:700px){
      .cm-nav { display: none; }
      .cm-nav.open {
        display: flex; flex-direction: column; align-items: stretch; gap: 2px;
        position: absolute; top: 60px; left: 0; right: 0;
        background: var(--surface); border-bottom: 1px solid var(--rim);
        padding: 12px 16px 16px;
      }
      .cm-header__burger { display: flex; }
    }
    </style>

    <script>
        (function(w) {
            w.fpr = w.fpr || function() {
                w.fpr.q = w.fpr.q || [];
                w.fpr.q[arguments[0] == 'set' ? 'unshift' : 'push'](arguments);
            };
        })(window);
        fpr("init", {
            cid: "7mgrxqw7"
        });
        fpr("click");
    </script>
    <script src="https://cdn.firstpromoter.com/fpr.js" async></script>
</head>

<body>
    <header class="cm-header">
        <div class="cm-header__in">
            <a class="cm-header__logo" href="/">
                <img src="/assets/img/logo.png" alt="Charlie Monroe Software" width="22" height="42">
            </a>
            <ul class="cm-nav" id="cmNav">
                <li><a  href="/downie">Downie</a></li>
                <li><a  href="/permute">Permute</a></li>
                <li><a  href="/invoicerex">Invoice Rex</a></li>
                <li><a  href="/cmplayer">CMPlayer</a></li>
                <li class="cm-nav__right"><a  href="http://blog.charliemonroe.net">Blog</a></li>
                <li><a  href="/contact">Contact</a></li>
            </ul>
            <button class="cm-header__burger" id="cmBurger" aria-label="Toggle navigation" aria-expanded="false">
                <span></span><span></span><span></span>
            </button>
        </div>
    </header>
    <script>
    (function(){
      var btn = document.getElementById('cmBurger');
      var nav = document.getElementById('cmNav');
      if (btn && nav) {
        btn.addEventListener('click', function(){
          var open = nav.classList.toggle('open');
          btn.setAttribute('aria-expanded', open);
        });
      }
    })();
    </script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap" rel="stylesheet">

<style>
/* ─── Tokens ───────────────────────────────────────────────── */
.hp{
  --ink:      #0b0b12;
  --surface:  #111119;
  --card:     #17171f;
  --card-hi:  #1e1e28;
  --rim:      rgba(255,255,255,.07);
  --rim-hi:   rgba(255,255,255,.14);
  --text:     #ededf4;
  --muted:    #787892;
  --faint:    #363650;

  /* Per-app accent colours */
  --c-downie:  #AA84EC;
  --c-permute: #FF5236;
  --c-ir:      #85BA64;

  --c-cmp:     #4FAAFF;

  /* Spectrum gradient (hero + dividers) */
  --grad: linear-gradient(90deg,#FF5236 0%,#AA84EC 35%,#4FAAFF 65%,#85BA64 100%);

  --r:        14px;
  --r-sm:     9px;
  --r-pill:   999px;
  --ff-head:  'Outfit', sans-serif;
  --ff-body:  'DM Sans', sans-serif;
  font-family: var(--ff-body);
  color: var(--text);
  background: var(--ink);
  line-height: 1.6;
}
.hp *,.hp *::before,.hp *::after{box-sizing:border-box}
.hp a{color:inherit;text-decoration:none}
.hp img{display:block;max-width:100%}
.hp h1,.hp h2,.hp h3,.hp h4{font-family:var(--ff-head);line-height:1.1;margin:0}

/* ─── Layout ─────────────────────────────────────────────── */
.hp-wrap{max-width:1120px;margin:0 auto;padding:0 48px}
.hp-sec{padding:96px 0;position:relative;overflow:hidden}
.hp-sec--surf{background:var(--surface)}
@media(max-width:700px){.hp-sec{padding:60px 0}.hp-wrap{padding:0 20px}}

.hp-eye{display:block;font-size:11px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.hp-h2{font-size:clamp(24px,3.5vw,38px);font-weight:800;color:var(--text);margin-bottom:14px}
.hp-h2 .g{background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hp-sub{font-size:16px;color:var(--muted);line-height:1.7;max-width:500px}
.hp-cx{text-align:center}.hp-cx .hp-sub{margin:0 auto}

.hp-rule{height:1px;background:var(--grad);opacity:.15;border:none;margin:0}

/* ════════════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════════════ */
.hp-hero{
  padding:120px 0 96px;background:var(--ink);
  position:relative;overflow:hidden;
}
.hp-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 50% 60% at 10% 50%,rgba(255,82,54,.08)  0%,transparent 60%),
    radial-gradient(ellipse 50% 60% at 90% 50%,rgba(170,132,236,.07) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 50% 100%,rgba(79,170,255,.06) 0%,transparent 60%);
}
.hp-hero__in{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  max-width:1100px;margin:0 auto;padding:0 48px;
}
@media(max-width:900px){
  .hp-hero__in{grid-template-columns:1fr;text-align:center;padding:0 28px}
  .hp-hero__icons{justify-content:center}
}
@media(max-width:480px){.hp-hero__in{padding:0 20px}}

.hp-hero__kicker{
  display:inline-block;font-size:11px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);margin-bottom:16px;
}
.hp-hero__title{
  font-family:var(--ff-head);font-size:clamp(40px,6vw,68px);
  font-weight:800;line-height:1.04;margin-bottom:20px;
}
.hp-hero__title span{
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hp-hero__sub{font-size:17px;color:var(--muted);line-height:1.75;max-width:440px;margin-bottom:32px}
@media(max-width:900px){.hp-hero__sub{margin:0 auto 32px}}

/* App icon cluster */
.hp-hero__icons{
  display:flex;flex-wrap:wrap;gap:14px;
  position:relative;z-index:1;
}
.hp-hero__app{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:18px 16px;border-radius:var(--r);border:1px solid var(--rim);
  background:rgba(255,255,255,.03);flex:0 0 calc(33.333% - 10px);
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
  cursor:pointer;
}
.hp-hero__app:hover{
  background:rgba(255,255,255,.07);border-color:var(--rim-hi);
  transform:translateY(-4px);
}
.hp-hero__app img{width:52px;height:52px;border-radius:13px}
.hp-hero__app span{font-family:var(--ff-head);font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-align:center}
@media(max-width:580px){.hp-hero__app{flex:0 0 calc(50% - 7px)}}

/* ════════════════════════════════════════════════════════
   FEATURED APPS (Downie + Permute — flagship pair)
════════════════════════════════════════════════════════ */
.hp-featured{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:0;
}
@media(max-width:800px){.hp-featured{grid-template-columns:1fr}}

.hp-card-lg{
  border-radius:20px;overflow:hidden;position:relative;
  background:var(--card);border:1px solid var(--rim);
  display:flex;flex-direction:column;
  transition:transform .3s,box-shadow .3s,border-color .3s;
  min-height:420px;
}
.hp-card-lg:hover{
  transform:translateY(-6px);
  border-color:var(--rim-hi);
  box-shadow:0 32px 64px rgba(0,0,0,.45);
}
.hp-card-lg__accent{
  height:3px;width:100%;flex-shrink:0;
}
.hp-card-lg__preview{
  flex:1;overflow:hidden;position:relative;
  margin:0 24px;border-radius:var(--r-sm) var(--r-sm) 0 0;
}
.hp-card-lg__preview img{
  width:100%;height:100%;object-fit:cover;object-position:top;
  transition:transform .4s;
}
.hp-card-lg:hover .hp-card-lg__preview img{transform:scale(1.03)}
.hp-card-lg__body{
  padding:22px 24px 26px;display:flex;align-items:flex-end;gap:16px;
}
.hp-card-lg__icon{
  width:56px;height:56px;flex-shrink:0;border-radius:13px;
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  margin-top:-40px;position:relative;z-index:1;
}
.hp-card-lg__copy{flex:1}
.hp-card-lg__name{
  font-family:var(--ff-head);font-size:22px;font-weight:800;
  color:var(--text);margin-bottom:4px;
}
.hp-card-lg__tag{font-size:13px;color:var(--muted);margin-bottom:14px}
.hp-card-lg__btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 18px;border-radius:var(--r-pill);
  font-family:var(--ff-head);font-size:13px;font-weight:700;color:#fff;
  transition:opacity .2s,transform .2s;
}
.hp-card-lg__btn:hover{opacity:.85;transform:translateY(-1px);color:#fff}
.hp-card-lg__btn svg{opacity:.8}

/* ════════════════════════════════════════════════════════
   ALL APPS GRID
════════════════════════════════════════════════════════ */
.hp-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
  margin-top:52px;
}
@media(max-width:900px){.hp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.hp-grid{grid-template-columns:1fr}}

.hp-app{
  background:var(--card);border:1px solid var(--rim);border-radius:var(--r);
  overflow:hidden;position:relative;
  display:flex;flex-direction:column;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
.hp-app::before{
  content:'';display:block;height:2px;width:100%;flex-shrink:0;
  transition:opacity .3s;
}
.hp-app:hover{
  transform:translateY(-5px);border-color:var(--rim-hi);
  box-shadow:0 20px 48px rgba(0,0,0,.4);
}
.hp-app__body{padding:22px 20px 20px;flex:1;display:flex;flex-direction:column;gap:10px}
.hp-app__row{display:flex;align-items:center;gap:14px}
.hp-app__icon{
  width:48px;height:48px;flex-shrink:0;border-radius:11px;
  box-shadow:0 4px 12px rgba(0,0,0,.35);
}
.hp-app__name{font-family:var(--ff-head);font-size:18px;font-weight:800;color:var(--text)}
.hp-app__tag{font-size:13px;color:var(--muted);line-height:1.55;flex:1}
.hp-app__btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:8px 16px;border-radius:var(--r-pill);
  border:1px solid var(--rim-hi);background:rgba(255,255,255,.04);
  font-family:var(--ff-head);font-size:12.5px;font-weight:700;color:var(--text);
  transition:background .2s,transform .2s;align-self:flex-start;margin-top:auto;
}
.hp-app__btn:hover{background:rgba(255,255,255,.09);color:#fff;transform:translateY(-1px)}

/* Per-app colour tinting */
.hp-app--downie  ::before,.hp-card-lg--downie  .hp-card-lg__accent{background:var(--c-downie)}
.hp-app--permute ::before,.hp-card-lg--permute .hp-card-lg__accent{background:var(--c-permute)}
.hp-app--ir      ::before{background:var(--c-ir)}
.hp-app--cmp     ::before{background:var(--c-cmp)}

.hp-app--downie  .hp-app__btn:hover{background:rgba(170,132,236,.15);border-color:rgba(170,132,236,.4);color:var(--c-downie)}
.hp-app--permute .hp-app__btn:hover{background:rgba(255,82,54,.15); border-color:rgba(255,82,54,.4); color:var(--c-permute)}
.hp-app--ir      .hp-app__btn:hover{background:rgba(133,186,100,.15);border-color:rgba(133,186,100,.4);color:var(--c-ir)}
.hp-app--cmp     .hp-app__btn:hover{background:rgba(79,170,255,.15); border-color:rgba(79,170,255,.4); color:var(--c-cmp)}

/* "Coming Soon" label on CMPlayer */
.hp-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);
  font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(79,170,255,.12);border:1px solid rgba(79,170,255,.25);color:var(--c-cmp);
}
.hp-badge__dot{width:5px;height:5px;border-radius:50%;background:var(--c-cmp);animation:hppulse 2s ease-in-out infinite}
@keyframes hppulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ════════════════════════════════════════════════════════
   BLOG RESOURCES
════════════════════════════════════════════════════════ */
.hp-resources{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:52px}
@media(max-width:800px){.hp-resources{grid-template-columns:1fr}}

.hp-resource{
  background:var(--card);border:1px solid var(--rim);border-radius:var(--r);
  padding:24px 22px;display:flex;flex-direction:column;gap:10px;
  transition:background .25s,border-color .25s,transform .25s,box-shadow .25s;
}
.hp-resource:hover{
  background:var(--card-hi);border-color:var(--rim-hi);
  transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.hp-resource__ico{
  width:36px;height:36px;border-radius:9px;
  background:rgba(255,255,255,.06);border:1px solid var(--rim);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.hp-resource__ico svg{opacity:.7}
.hp-resource__title{font-family:var(--ff-head);font-size:15px;font-weight:700;color:var(--text);line-height:1.3}
.hp-resource__desc{font-size:13px;color:var(--muted);line-height:1.65;flex:1}
.hp-resource__link{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--ff-head);font-size:12px;font-weight:700;
  color:var(--muted);transition:color .2s;margin-top:auto;
}
.hp-resource:hover .hp-resource__link{color:var(--text)}
.hp-resource__link svg{opacity:.5;transition:transform .2s}
.hp-resource:hover .hp-resource__link svg{transform:translateX(3px);opacity:.8}


.hp-about{
  display:flex;align-items:center;gap:48px;
  padding:48px 52px;background:var(--card);
  border:1px solid var(--rim);border-radius:20px;
}
@media(max-width:800px){.hp-about{flex-direction:column;text-align:center;padding:36px 28px;gap:28px}}
.hp-about__logo{font-family:var(--ff-head);font-size:28px;font-weight:800;
  background:var(--grad);-webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;flex-shrink:0;white-space:nowrap;
}
.hp-about__divider{width:1px;background:var(--rim);align-self:stretch;flex-shrink:0}
@media(max-width:800px){.hp-about__divider{width:60px;height:1px}}
.hp-about__p{font-size:15px;color:var(--muted);line-height:1.75;margin:0}
.hp-about__links{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0}
@media(max-width:800px){.hp-about__links{justify-content:center}}
.hp-about__link{
  display:flex;align-items:center;gap:7px;
  padding:9px 16px;border-radius:var(--r-pill);
  border:1px solid var(--rim-hi);background:rgba(255,255,255,.04);
  font-family:var(--ff-head);font-size:12.5px;font-weight:700;color:var(--muted);
  transition:background .2s,color .2s;
}
.hp-about__link:hover{background:rgba(255,255,255,.08);color:var(--text)}
</style>

<div class="hp">

<!-- ═══════════════ HERO ═══════════════ -->
<section class="hp-hero">
  <div class="hp-hero__in">

    <div>
      <span class="hp-hero__kicker">Charlie Monroe Software</span>
      <h1 class="hp-hero__title">Mac apps,<br><span>thoughtfully crafted</span></h1>
      <p class="hp-hero__sub">A suite of powerful, native tools for macOS — built by one developer with a focus on simplicity, quality, and doing things right.</p>
      <a href="https://blog.charliemonroe.net/" target="_blank" style="display:inline-flex;align-items:center;gap:8px;padding:11px 22px;border-radius:var(--r-pill);border:1px solid var(--rim-hi);background:rgba(255,255,255,.04);font-family:var(--ff-head);font-size:13.5px;font-weight:700;color:var(--muted);transition:background .2s,color .2s" onmouseover="this.style.background='rgba(255,255,255,.09)';this.style.color='#fff'" onmouseout="this.style.background='rgba(255,255,255,.04)';this.style.color='var(--muted)'">
        <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
        Read the blog
      </a>
    </div>

    <!-- App icon cluster -->
    <div class="hp-hero__icons">
      <a href="/downie/"      class="hp-hero__app"><img src="/assets/img/downie/icon.webp"     alt="Downie">    <span>Downie</span></a>
      <a href="/permute/"     class="hp-hero__app"><img src="/assets/img/permute/v4/icon.webp"    alt="Permute">   <span>Permute</span></a>
      <a href="/invoicerex/"  class="hp-hero__app"><img src="/assets/images/custom/invoicerex/icon.webp" alt="Invoice Rex"><span>Invoice Rex</span></a>
      <a href="/cmplayer/"    class="hp-hero__app"><img src="/assets/images/custom/main/ic_cmplayer.png"   alt="CMPlayer">  <span>CMPlayer</span></a>
    </div>

  </div>
</section>

<hr class="hp-rule">

<!-- ═══════════════ FLAGSHIP APPS ═══════════════ -->
<section class="hp-sec hp-sec--surf">
  <div class="hp-wrap">
    <div class="hp-cx">
      <span class="hp-eye">Featured apps</span>
      <h2 class="hp-h2">The <span class="g">flagship tools</span></h2>
      <p class="hp-sub">Download and convert — the two most essential tasks for any Mac power user, handled beautifully.</p>
    </div>

    <div class="hp-featured" style="margin-top:48px">

      <!-- Downie -->
      <a href="/downie/" class="hp-card-lg hp-card-lg--downie">
        <div class="hp-card-lg__accent" style="background:var(--c-downie)"></div>
        <div class="hp-card-lg__preview" style="height:220px">
          <img src="/assets/images/custom/main/i_downie.png" alt="Downie screenshot">
        </div>
        <div class="hp-card-lg__body">
          <img src="/assets/img/downie/icon.webp" alt="Downie" class="hp-card-lg__icon">
          <div class="hp-card-lg__copy">
            <div class="hp-card-lg__name">Downie</div>
            <div class="hp-card-lg__tag">The ultimate video downloader for macOS</div>
            <span class="hp-card-lg__btn" style="background:var(--c-downie)">
              Learn more
              <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </span>
          </div>
        </div>
      </a>

      <!-- Permute -->
      <a href="/permute/" class="hp-card-lg hp-card-lg--permute">
        <div class="hp-card-lg__accent" style="background:var(--c-permute)"></div>
        <div class="hp-card-lg__preview" style="height:220px">
          <img src="/assets/images/custom/main/i_permute.png" alt="Permute screenshot">
        </div>
        <div class="hp-card-lg__body">
          <img src="/assets/img/permute/v4/icon.webp" alt="Permute" class="hp-card-lg__icon">
          <div class="hp-card-lg__copy">
            <div class="hp-card-lg__name">Permute</div>
            <div class="hp-card-lg__tag">The ultimate media converter for macOS</div>
            <span class="hp-card-lg__btn" style="background:var(--c-permute)">
              Learn more
              <svg width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
            </span>
          </div>
        </div>
      </a>

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

<hr class="hp-rule">

<!-- ═══════════════ ALL APPS ═══════════════ -->
<section class="hp-sec" id="apps">
  <div class="hp-wrap">
    <div class="hp-cx">
      <span class="hp-eye">The full lineup</span>
      <h2 class="hp-h2">All <span class="g">apps</span></h2>
      <p class="hp-sub">Four native Mac apps covering everything from invoicing to video downloading, converting to playback.</p>
    </div>

    <div class="hp-grid">

      <!-- Invoice Rex -->
      <a href="/invoicerex/" class="hp-app hp-app--ir">
        <div class="hp-app__body">
          <div class="hp-app__row">
            <img src="/assets/images/custom/invoicerex/icon.webp" alt="Invoice Rex" class="hp-app__icon">
            <div class="hp-app__name">Invoice Rex</div>
          </div>
          <p class="hp-app__tag">Invoicing for macOS, iPhone and iPad — synced seamlessly via iCloud.</p>
          <span class="hp-app__btn">
            Learn more
            <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </span>
        </div>
        <img src="/assets/images/custom/main/i_uctox.png" alt="Invoice Rex preview" style="width:100%;display:block;border-top:1px solid var(--rim)">
      </a>

      <!-- Downie (grid) -->
      <a href="/downie/" class="hp-app hp-app--downie">
        <div class="hp-app__body">
          <div class="hp-app__row">
            <img src="/assets/img/downie/icon.webp" alt="Downie" class="hp-app__icon">
            <div class="hp-app__name">Downie</div>
          </div>
          <p class="hp-app__tag">Download videos from YouTube, Vimeo, and 1,000+ other sites.</p>
          <span class="hp-app__btn">
            Learn more
            <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </span>
        </div>
        <img src="/assets/images/custom/main/i_downie.png" alt="Downie preview" style="width:100%;display:block;border-top:1px solid var(--rim)">
      </a>

      <!-- Permute (grid) -->
      <a href="/permute/" class="hp-app hp-app--permute">
        <div class="hp-app__body">
          <div class="hp-app__row">
            <img src="/assets/img/permute/v4/icon.webp" alt="Permute" class="hp-app__icon">
            <div class="hp-app__name">Permute</div>
          </div>
          <p class="hp-app__tag">Convert video, audio, images and more between any format.</p>
          <span class="hp-app__btn">
            Learn more
            <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </span>
        </div>
        <img src="/assets/images/custom/main/i_permute.png" alt="Permute preview" style="width:100%;display:block;border-top:1px solid var(--rim)">
      </a>

      <!-- CMPlayer -->
      <a href="/cmplayer/" class="hp-app hp-app--cmp">
        <div class="hp-app__body">
          <div class="hp-app__row">
            <img src="/assets/images/custom/main/ic_cmplayer.png" alt="CMPlayer" class="hp-app__icon">
            <div style="display:flex;flex-direction:column;gap:5px">
              <div class="hp-app__name">CMPlayer</div>
              <span class="hp-badge"><span class="hp-badge__dot"></span>In Development</span>
            </div>
          </div>
          <p class="hp-app__tag">A myriad-format video player for macOS — the perfect companion for Downie and Permute.</p>
          <span class="hp-app__btn">
            Learn more
            <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
          </span>
        </div>
        <img src="/assets/images/custom/main/i_cmplayer.png" alt="CMPlayer preview" style="width:100%;display:block;border-top:1px solid var(--rim)">
      </a>

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

<hr class="hp-rule">

<!-- ═══════════════ BLOG RESOURCES ═══════════════ -->
<section class="hp-sec hp-sec--surf">
  <div class="hp-wrap">
    <div class="hp-cx">
      <span class="hp-eye">Good to know</span>
      <h2 class="hp-h2">Before you <span class="g">buy or upgrade</span></h2>
      <p class="hp-sub">A few helpful reads to set expectations and avoid surprises.</p>
    </div>
    <div class="hp-resources">

      <a href="https://blog.charliemonroe.net/product-pricing/" target="_blank" class="hp-resource">
        <div class="hp-resource__ico">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
        </div>
        <div class="hp-resource__title">What exactly are you buying?</div>
        <p class="hp-resource__desc">For Downie and Permute, you're purchasing a license code for that specific major version — not a subscription. Understand what that means before you check out.</p>
        <span class="hp-resource__link">
          Read on the blog
          <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </span>
      </a>

      <a href="https://blog.charliemonroe.net/sunsetting-support-for-older-macos-versions/" target="_blank" class="hp-resource">
        <div class="hp-resource__ico">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
        </div>
        <div class="hp-resource__title">macOS version support &amp; end-of-life</div>
        <p class="hp-resource__desc">Why apps eventually drop support for older macOS versions, how that process works, and what it means for your existing license.</p>
        <span class="hp-resource__link">
          Read on the blog
          <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </span>
      </a>

      <a href="https://blog.charliemonroe.net/pre-release-macos-ios-ipados-compatibility/" target="_blank" class="hp-resource">
        <div class="hp-resource__ico">
          <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"/><path d="M12 8v4l3 3"/></svg>
        </div>
        <div class="hp-resource__title">Pre-release OS compatibility</div>
        <p class="hp-resource__desc">Running a macOS, iOS or iPadOS beta? Here's what to expect regarding compatibility with Charlie Monroe apps during Apple's pre-release period.</p>
        <span class="hp-resource__link">
          Read on the blog
          <svg width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
        </span>
      </a>

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

<hr class="hp-rule">

<!-- ═══════════════ ABOUT STRIP ═══════════════ -->
<section class="hp-sec hp-sec--surf" style="padding:64px 0">
  <div class="hp-wrap">
    <div class="hp-about">
      <div class="hp-about__logo">Charlie Monroe<br>Software</div>
      <div class="hp-about__divider"></div>
      <p class="hp-about__p">Independent Mac and iOS software, built with care by a single developer. Every app is designed to be simple, powerful, and native — no subscriptions where they don't belong, no unnecessary complexity, just tools that work.</p>
      <div class="hp-about__links">
        <a href="https://blog.charliemonroe.net/" target="_blank" class="hp-about__link">
          <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
          Blog
        </a>
        <a href="https://www.facebook.com/CharlieMonroeSoftware/" target="_blank" class="hp-about__link">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
          Facebook
        </a>
        <a href="https://twitter.com/charlieMonroe" target="_blank" class="hp-about__link">
          <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"/></svg>
          Twitter / X
        </a>
      </div>
    </div>
  </div>
</section>

</div><!-- /.hp -->

<style>
/* ─── Site footer ─────────────────────────────────────── */
.cm-footer {
  background: var(--surface, #111119);
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 48px 0 32px;
  font-family: var(--ff-body, 'DM Sans', sans-serif);
  color: var(--muted, #787892);
  font-size: 13px;
}
.cm-footer__in {
  max-width: 1120px; margin: 0 auto; padding: 0 48px;
}
@media(max-width:640px){ .cm-footer__in { padding: 0 20px; } }

.cm-footer__top {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px; margin-bottom: 28px;
}
.cm-footer__logo { opacity: .6; transition: opacity .2s; }
.cm-footer__logo:hover { opacity: .9; }

.cm-footer__social {
  display: flex; gap: 10px; list-style: none; margin: 0; padding: 0;
}
.cm-footer__social a {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
  color: var(--muted, #787892); text-decoration: none;
  transition: border-color .18s, color .18s, background .18s;
}
.cm-footer__social a:hover {
  border-color: rgba(255,255,255,.2); color: #ededf4;
  background: rgba(255,255,255,.06);
}
.cm-footer__social svg { width: 14px; height: 14px; fill: currentColor; }

.cm-footer__rule {
  height: 1px; background: rgba(255,255,255,.06); border: none; margin: 0 0 24px;
}

.cm-footer__links {
  display: flex; flex-wrap: wrap; gap: 6px 4px;
  list-style: none; margin: 0 0 24px; padding: 0;
}
.cm-footer__links a {
  display: inline-block; padding: 5px 11px; border-radius: 999px;
  color: var(--muted, #787892); text-decoration: none; font-size: 12.5px;
  transition: color .18s, background .18s;
}
.cm-footer__links a:hover { color: #ededf4; background: rgba(255,255,255,.06); }

.cm-footer__copy {
  font-size: 12px; color: rgba(255,255,255,.25); line-height: 1.7;
}
.cm-footer__copy a { color: rgba(255,255,255,.35); text-decoration: none; }
.cm-footer__copy a:hover { color: rgba(255,255,255,.6); }

/* ─── Cookie notice ───────────────────────────────────── */
.cm-cookie {
  display: none;
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 9998; width: calc(100% - 40px); max-width: 540px;
  background: var(--card, #17171f);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: 0 12px 48px rgba(0,0,0,.6);
  font-family: var(--ff-body, 'DM Sans', sans-serif);
}
.cm-cookie__title {
  font-family: var(--ff-head, 'Outfit', sans-serif);
  font-size: 15px; font-weight: 800; color: #ededf4; margin: 0 0 6px;
}
.cm-cookie__body {
  font-size: 12.5px; color: var(--muted, #787892); line-height: 1.65; margin: 0 0 16px;
}
.cm-cookie__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cm-cookie__btn {
  padding: 8px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  cursor: pointer; border: none; transition: background .18s, color .18s;
  font-family: var(--ff-head, 'Outfit', sans-serif);
}
.cm-cookie__btn--all {
  background: #ededf4; color: #0b0b12;
}
.cm-cookie__btn--all:hover { background: #fff; }
.cm-cookie__btn--nec {
  background: rgba(255,255,255,.08); color: #ededf4;
  border: 1px solid rgba(255,255,255,.12);
}
.cm-cookie__btn--nec:hover { background: rgba(255,255,255,.14); }
</style>

<footer class="cm-footer">
  <div class="cm-footer__in">

    <div class="cm-footer__top">
      <a class="cm-footer__logo" href="/">
        <img src="/assets/img/logo.png" alt="Charlie Monroe Software" width="18" height="34">
      </a>
      <ul class="cm-footer__social">
        <li>
          <a href="https://www.facebook.com/CharlieMonroeSoftware/" title="Facebook" target="_blank" rel="noopener">
            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.583.001 0 3.605 0 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625H4.72V8.05H6.75V6.275c0-2.017 1.195-3.132 3.022-3.132.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/></svg>
          </a>
        </li>
        <li>
          <a href="https://twitter.com/charlieMonroe" title="X / Twitter" target="_blank" rel="noopener">
            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"/></svg>
          </a>
        </li>
        <li>
          <a href="https://www.linkedin.com/in/charlie-monroe-a1089829" title="LinkedIn" target="_blank" rel="noopener">
            <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.633 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/></svg>
          </a>
        </li>
      </ul>
    </div>

    <hr class="cm-footer__rule">

    <ul class="cm-footer__links">
      <li><a href="/policy/eula/">EULA</a></li>
      <li><a href="/policy/privacy/">Privacy Policy</a></li>
      <li><a href="/policy/refund/">Refund Policy</a></li>
      <li><a href="/resellers/">Resellers</a></li>
      <li><a href="https://charliemonroe.firstpromoter.com/">Become Affiliate</a></li>
    </ul>

    <div class="cm-footer__copy">
            <p>© 2013–2026 <a href="/">Charlie Monroe Software, s.r.o.</a></p>
    </div>

  </div>
</footer>

<!-- Cookie notice -->
<div class="cm-cookie" id="cmCookie">
  <p class="cm-cookie__title">Your Privacy</p>
  <p class="cm-cookie__body">We use cookies to improve your experience. By continuing, you agree to our use of cookies in accordance with our Privacy Policy.</p>
  <div class="cm-cookie__btns">
    <button class="cm-cookie__btn cm-cookie__btn--all cookie-all">Accept all cookies</button>
    <button class="cm-cookie__btn cm-cookie__btn--nec cookie-necessary">Necessary only</button>
  </div>
</div>

<script src="/assets/js/jquery-3.3.1.min.js"></script>

<!-- script for setapp -->

<script>(function(w){w.fpr=w.fpr||function(){w.fpr.q = w.fpr.q||[];w.fpr.q[arguments[0]=='set'?'unshift':'push'](arguments);};})(window);
fpr("init", {cid:"7mgrxqw7"}); 
fpr("click");
</script>
<script src="https://cdn.firstpromoter.com/fpr.js" async></script>
<script>
    function getFPTid() {
      return window.FPROM && window.FPROM.data.tid;
    }
    function initializeFPRPaymentLinks() {
      console.log("initialized fpr on payment links");
      setTimeout(function () {
        var stripePaymentLinks = document.querySelectorAll(
          'a[href^="/checkout/"]'
        );
        stripePaymentLinks.forEach(function (link) {
          // Get current url
          var oldStripePaymentUrl = link.getAttribute("href"); 
          // Get the tid
          var tid = getFPTid();
          if (tid) {
            var url = new URL(oldStripePaymentUrl);
            url.searchParams.set('client_reference_id', tid);
            link.setAttribute("href", url.toString());
          }
        });
      }, 800);
    }
    if (window.attachEvent) {
      window.attachEvent("onload", initializeFPRPaymentLinks);
    } else {
      window.addEventListener("load", initializeFPRPaymentLinks, false);
    }
  </script>

<script type="text/javascript">
	const urlParams = new URLSearchParams(window.location.search);
	const coupon = urlParams.get('coupon');
	var productID = urlParams.get('productID');
	if (productID == '' || productID == undefined || productID == null) {
		// Unknown section I
	}
	
	if (
		coupon != undefined && coupon != '' 
		&& productID != undefined && productID != ''
		&& urlParams.get('suppressCheckout') != 'true'
	) {
        setTimeout(function() {
            var tid = getFPTid();
            var additionalQuery = "";
            if (tid) {
                additionalQuery = "&client_reference_id=" + tid;
            }
            location.href = "/checkout/?product_id=" + productID + "&coupon=" + coupon + additionalQuery;
        }, 2000);
	}
</script>

<!-- cookie setting -->
<script type="text/javascript">
    function setCookie(cname, cvalue, exdays) {
        const d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        document.cookie = cname + "=" + cvalue + ";expires=" + d.toUTCString() + ";path=/";
    }
    (function() {
        var el = document.getElementById('cmCookie');
        if (!el) return;
        if (document.cookie.indexOf('cm_cookie') > -1) {
            el.style.display = 'none';
        } else {
            el.style.display = 'block';
        }
        document.body.addEventListener('click', function(e) {
            if (e.target.classList.contains('cookie-all') || e.target.classList.contains('cookie-necessary')) {
                setCookie('cm_cookie', 'software_charlie_monroe', 365);
                el.style.display = 'none';
            }
        });
    })();
</script>
</body>

</html>