/* =====================================================================
   SOFTWARE HUB — brandonmysliwiec.com/software/

   Shares the home page's warm ember palette so the hub reads as part of
   the main site rather than as a sixth brand, but swaps the display face
   for the sans: this is a product directory, not an editorial page.

   Everything is driven by .sw-card, which is the one unit that repeats.
   Adding a program later means copying one card — see the SOFTWARE
   PRODUCT CARD markers in software/index.html.
   ===================================================================== */

body[data-page="software"]{
  --bg:#0e0b09; --bg2:#151009; --tile:#1b150f; --tile-2:#221a12;
  --ink:#f6efe7; --muted:#b6a99b; --line:rgba(255,255,255,.10);
  --orange:#ee6c2b; --orange-2:#ffb066; --glow:rgba(238,108,43,.32);
  --sans:'Archivo',system-ui,sans-serif;
  background:var(--bg); color:var(--ink); padding-top:var(--nav-h);
  line-height:1.65; overflow-x:hidden; font-family:var(--sans);
}
body[data-page="software"]::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(72vw 58vh at 82% -10%, var(--glow), transparent 62%),
    radial-gradient(48vw 44vh at -6% 10%, rgba(255,160,90,.09), transparent 56%);
}

.sw-wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,44px)}
body[data-page="software"] h1,
body[data-page="software"] h2,
body[data-page="software"] h3{line-height:1.12;letter-spacing:-.02em;font-weight:700}
.sw-kicker{text-transform:uppercase;letter-spacing:.26em;font-size:.72rem;font-weight:700;color:var(--orange)}

/* ---- Breadcrumbs ---------------------------------------------------- */
.sw-crumbs{font-size:.82rem;color:var(--muted);padding:1.4rem 0 0}
.sw-crumbs ol{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;list-style:none;margin:0;padding:0}
.sw-crumbs li+li::before{content:"/";margin-right:.4rem;color:rgba(255,255,255,.28)}
.sw-crumbs a{color:var(--muted);text-decoration:underline;text-decoration-color:rgba(255,255,255,.2);text-underline-offset:3px}
.sw-crumbs a:hover{color:var(--orange-2)}
.sw-crumbs [aria-current="page"]{color:var(--ink)}

/* ---- Hero ----------------------------------------------------------- */
.sw-hero{padding:clamp(34px,6vw,72px) 0 clamp(28px,4vw,48px)}
.sw-hero h1{font-size:clamp(2.3rem,5.6vw,4.1rem);margin:.8rem 0 0}
.sw-hero h1 em{font-style:normal;color:var(--orange-2)}
.sw-hero .lede{color:var(--muted);font-size:clamp(1.03rem,1.4vw,1.22rem);max-width:60ch;margin-top:1.2rem}
.sw-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.sw-badges span{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:.42em 1em;background:rgba(255,255,255,.02)}
.sw-hero-cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}

.btn-ember{display:inline-flex;align-items:center;gap:.5em;background:var(--orange);color:#160b04;font-weight:700;
  padding:.9em 1.5em;border-radius:14px;box-shadow:0 14px 40px -16px var(--glow);transition:transform .18s,box-shadow .18s}
.btn-ember:hover{transform:translateY(-2px);box-shadow:0 22px 50px -18px var(--glow)}
.btn-line{display:inline-flex;align-items:center;gap:.5em;padding:.9em 1.4em;border-radius:14px;
  border:1px solid var(--line);color:var(--ink);font-weight:600;transition:.18s}
.btn-line:hover{border-color:var(--orange);color:var(--orange-2)}

/* ---- Philosophy strip ----------------------------------------------- */
.sw-why{padding:clamp(26px,4vw,44px) 0}
.sw-why .sw-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(16px,2.4vw,28px)}
.sw-why article{background:linear-gradient(165deg,var(--tile),#140f0a);border:1px solid var(--line);
  border-radius:18px;padding:clamp(20px,2.4vw,26px)}
.sw-why h3{font-size:1.02rem;margin:0 0 .5rem}
.sw-why p{color:var(--muted);font-size:.93rem;margin:0}

/* ---- Section heads --------------------------------------------------- */
.sw-head{max-width:62ch;padding:clamp(40px,6vw,72px) 0 0}
.sw-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:.7rem 0 0}
.sw-head p{color:var(--muted);margin-top:.9rem}

/* ---- Product grid ---------------------------------------------------- */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:clamp(18px,2.6vw,30px);padding:clamp(24px,3.6vw,40px) 0 0;align-items:start}

.sw-card{display:flex;flex-direction:column;background:linear-gradient(168deg,var(--tile-2),#140f0a);
  border:1px solid var(--line);border-radius:22px;overflow:hidden;
  transition:border-color .22s,transform .22s,box-shadow .22s}
.sw-card:hover{border-color:rgba(238,108,43,.42);transform:translateY(-4px);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.9)}
.sw-card-top{display:flex;align-items:flex-start;gap:1rem;padding:clamp(20px,2.4vw,26px) clamp(20px,2.4vw,26px) 0}
.sw-logo{flex:none;width:60px;height:60px;border-radius:16px;display:grid;place-items:center;
  background:#0d0a07;border:1px solid var(--line);overflow:hidden}
.sw-logo img{width:76%;height:auto;object-fit:contain}
.sw-card h3{font-size:1.28rem;margin:0}
.sw-tagline{color:var(--orange-2);font-size:.84rem;font-weight:600;margin-top:.2rem}
.sw-card-body{padding:1rem clamp(20px,2.4vw,26px) 0;flex:1}
.sw-card-body p{color:var(--muted);font-size:.95rem;margin:0}
.sw-meta{display:flex;flex-wrap:wrap;gap:.4rem;padding:1.1rem clamp(20px,2.4vw,26px) 0;list-style:none;margin:0}
.sw-meta li{font-size:.74rem;font-weight:600;letter-spacing:.03em;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;padding:.32em .7em;background:rgba(255,255,255,.025)}
.sw-meta li.is-free{color:#a9e39a;border-color:rgba(169,227,154,.35);background:rgba(169,227,154,.08)}
.sw-shot{margin:1.2rem clamp(20px,2.4vw,26px) 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0b0806}
.sw-shot img{width:100%;height:auto;display:block}
.sw-actions{display:flex;flex-wrap:wrap;gap:.6rem;padding:clamp(18px,2.2vw,24px)}
.sw-actions .btn-ember,.sw-actions .btn-line{font-size:.88rem;padding:.72em 1.15em;border-radius:12px}

/* ---- Support / donation --------------------------------------------- */
.sw-support{padding:clamp(48px,7vw,86px) 0 clamp(40px,6vw,72px)}
.sw-support-card{background:linear-gradient(150deg,#241a12,#130e09);border:1px solid rgba(238,108,43,.28);
  border-radius:26px;padding:clamp(26px,4vw,48px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,52px);align-items:center}
.sw-support-card h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:.7rem 0 0}
.sw-support-card p{color:var(--muted);margin-top:1rem;max-width:56ch}
.sw-support-card .sw-hero-cta{margin-top:1.6rem}
.sw-support-note{font-size:.83rem;color:rgba(255,255,255,.42);margin-top:1.2rem}
.sw-qr{flex:none;text-align:center;margin:0}
.sw-qr img{width:min(190px,42vw);height:auto;border-radius:14px;background:#fff;padding:10px;
  border:1px solid var(--line);box-shadow:0 20px 50px -22px rgba(0,0,0,.9)}
.sw-qr figcaption{font-size:.78rem;color:var(--muted);margin-top:.7rem}

/* ---- Elsewhere strip ------------------------------------------------- */
.sw-elsewhere{padding:0 0 clamp(48px,7vw,84px)}
.sw-elsewhere .sw-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.sw-elsewhere a{display:flex;flex-direction:column;gap:.3rem;padding:1.1rem 1.3rem;border-radius:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);transition:.2s}
.sw-elsewhere a:hover{border-color:var(--orange);background:rgba(238,108,43,.08)}
.sw-elsewhere strong{font-size:.98rem;font-weight:700}
.sw-elsewhere span{font-size:.84rem;color:var(--muted)}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width:860px){
  .sw-support-card{grid-template-columns:1fr;justify-items:start}
  .sw-qr{justify-self:center}
}
@media (max-width:430px){
  .sw-grid{grid-template-columns:1fr}
  .sw-card-top{gap:.8rem}
  .sw-logo{width:52px;height:52px;border-radius:14px}
  .sw-actions .btn-ember,.sw-actions .btn-line{flex:1 1 100%;justify-content:center}
}