/* ============================================================================
   Landing hub - picks a tool. Shares brand tokens from style.css.
   Cards are whole-card links with a hover lift; EKG accent per tool.
   ============================================================================ */

.hub-wrap{max-width:760px;margin:0 auto;padding:26px 16px 56px}
.hub-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.hub-head{text-align:center;margin:0 auto 28px;max-width:600px}
.hub-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.hub-eyebrow .beatdot{width:8px;height:8px;border-radius:50%;background:var(--good);animation:beat 1.4s ease-in-out infinite;display:inline-block}
.hub-head h1{font-family:var(--serif);font-size:34px;line-height:1.1;margin:0 0 10px;font-weight:700;letter-spacing:-.01em}
.hub-head p{color:var(--muted);font-size:15.5px;line-height:1.6;margin:0}

.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.tool-card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:0 0 22px;text-decoration:none;color:var(--ink);overflow:hidden;position:relative;
  box-shadow:0 1px 2px rgba(20,32,40,.05);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.tool-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px -20px rgba(20,32,40,.35);border-color:#CBD4DC}
.tool-card:active{transform:translateY(-1px)}

.tool-band{height:96px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tool-band.blue{background:linear-gradient(135deg,#0B1620,#123B5C)}
.tool-band.crimson{background:linear-gradient(135deg,#0B1620,#5C1020)}
.tool-band.green{background:linear-gradient(135deg,#0B1620,#125C40)}
.tool-band svg.ekg{position:absolute;inset:auto 0 12px 0;width:100%;height:34px;opacity:.9}
.tool-band .badge{
  position:relative;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);color:#fff;
}
.tool-body{padding:18px 20px 0;display:flex;flex-direction:column;flex:1}
.tool-body h2{font-family:var(--serif);font-size:20px;margin:0 0 7px;font-weight:700;line-height:1.2}
.tool-body p{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0 0 16px;flex:1}
.tool-cta{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:14px;font-weight:700;color:#fff;border-radius:11px;padding:12px 18px;
  transition:background .15s;
}
.tool-cta.blue{background:var(--blue)}
.tool-card:hover .tool-cta.blue{background:var(--blue-deep)}
.tool-cta.crimson{background:var(--crimson)}
.tool-card:hover .tool-cta.crimson{background:var(--crimson-deep)}
.tool-cta.green{background:var(--good)}
.tool-card:hover .tool-cta.green{background:#15724F}
.tool-cta .arr{transition:transform .18s ease}
.tool-card:hover .tool-cta .arr{transform:translateX(3px)}