/* ============================================================
   LemFi TA Hub — shared brand skin
   New LemFi brand: lime + royal purple + cream, "sticker" cards
   (2px black borders, hard offset shadows), Lab Grotesque.
   ============================================================ */

@font-face{
  font-family:'Lab Grotesque';
  src:url('/assets/fonts/LabGrotesque-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Lab Grotesque';
  src:url('/assets/fonts/LabGrotesque-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Lab Grotesque';
  src:url('/assets/fonts/LabGrotesque-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* brand */
  --lime:#C3F98A;      --lime-2:#A8EE63;   --lime-soft:#E7FBD3;
  --purple:#5A148C;    --purple-d:#41096B; --purple-soft:#7B2DB8;
  --lilac:#C8BEF0;     --lilac-soft:#EDE7FB;
  --cream:#FAF6EA;     --cream-2:#F1EAFB;  --paper:#FFFFFF;
  --ink:#111111;       --ink-2:#3B3B3B;    --ink-3:#6F6F6F;
  --green:#3FA524;     --terra:#C8413F;    --gold:#E6C200;
  /* structure */
  --line:#111111;      --line-soft:rgba(17,17,17,.13);
  --pop:4px 4px 0 #111111;
  --pop-lg:6px 6px 0 #111111;
  --shadow:0 3px 16px rgba(90,20,140,.07);
  --r:18px; --r-sm:11px; --r-lg:26px;
  --font:'Lab Grotesque',-apple-system,system-ui,Segoe UI,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
a{color:inherit}

/* ---- top bar ---- */
.hub-top{
  display:flex;align-items:center;gap:14px;
  padding:16px 26px;
  border-bottom:2px solid var(--ink);
  background:var(--paper);
  position:sticky;top:0;z-index:20;
}
.hub-top .home{display:inline-flex;align-items:center;border-radius:8px;transition:opacity .12s}
.hub-top .home:hover{opacity:.7}
.hub-top .wordmark{height:26px;width:auto;display:block}
.hub-top .top-tag{
  font-weight:700;font-size:13px;letter-spacing:.02em;
  padding:5px 11px;border:2px solid var(--ink);border-radius:999px;
  background:var(--lime);box-shadow:2px 2px 0 var(--ink);
}
.hub-top .spacer{flex:1}
.hub-top .back{
  display:inline-flex;align-items:center;gap:7px;
  font-weight:600;font-size:14px;text-decoration:none;
  padding:8px 14px;border:2px solid var(--ink);border-radius:999px;
  background:var(--paper);box-shadow:var(--pop);transition:transform .08s,box-shadow .08s;
}
.hub-top .back:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.hub-top .back:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

/* ---- layout ---- */
.hub-wrap{max-width:1120px;margin:0 auto;padding:44px 26px 80px}
.hub-narrow{max-width:820px}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font);font-weight:700;font-size:15px;
  padding:12px 20px;border:2px solid var(--ink);border-radius:999px;
  background:var(--lime);color:var(--ink);text-decoration:none;
  box-shadow:var(--pop);transition:transform .08s,box-shadow .08s;
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.ghost{background:var(--paper)}
.btn.purple{background:var(--purple);color:#fff}
.btn.lilac{background:var(--lilac-soft)}

/* ---- badges ---- */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:12px;letter-spacing:.02em;
  padding:4px 10px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);
}
.badge.live{background:var(--lime)}
.badge.live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 2px rgba(63,165,36,.25)}
.badge.soon{background:var(--lilac-soft)}
.badge.soon::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--purple-soft)}

/* ---- cards / panels ---- */
.panel{
  background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--pop);padding:24px 26px;
}
.panel.cream{background:var(--cream-2)}
.panel.lime{background:var(--lime-soft)}

/* ---- headings ---- */
h1,h2,h3{margin:0 0 .4em;font-weight:700;line-height:1.12}
.eyebrow{
  text-transform:uppercase;letter-spacing:.14em;font-weight:700;
  font-size:12px;color:var(--purple);margin-bottom:14px;
}
.lead{font-size:18px;color:var(--ink-2);max-width:60ch}

/* ---- footer ---- */
.hub-foot{
  border-top:2px solid var(--ink);background:var(--paper);
  padding:22px 26px;text-align:center;font-size:13px;color:var(--ink-3);
}
.hub-foot strong{color:var(--ink)}

/* ---- misc ---- */
.pill-row{display:flex;flex-wrap:wrap;gap:10px}
.muted{color:var(--ink-3)}
code,kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
kbd{background:var(--cream-2);border:1.5px solid var(--ink);border-radius:6px;padding:1px 6px;box-shadow:1px 1px 0 var(--ink)}