/* Hub Mandrack — sistema visual compartilhado (clona o do Programa Perpétuo) */
:root{
  --bg:#0a0a0a; --bg2:#121212; --card:#161616; --line:#262626; --line2:#333;
  --red:#dc2626; --red-soft:#ef4444; --ink:#ededed; --muted:#9a9a9a; --dim:#6b6b6b;
  --green:#22c55e; --amber:#f59e0b; --gold:#e8c98a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{ background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,sans-serif; line-height:1.6; font-size:16px; -webkit-font-smoothing:antialiased }
.wrap{ max-width:1000px; margin:0 auto; padding:0 24px 96px }

/* header */
header{ border-bottom:1px solid var(--line); padding:52px 0 30px; position:relative }
header::before{ content:""; position:absolute; left:0; top:0; width:64px; height:4px; background:var(--red) }
.kicker{ font-family:'Bebas Neue',sans-serif; letter-spacing:3px; color:var(--red); font-size:15px; margin-bottom:10px }
h1{ font-family:'Bebas Neue',sans-serif; font-weight:400; font-size:clamp(38px,7vw,64px); line-height:0.98; letter-spacing:1px }
.sub{ color:var(--muted); margin-top:14px; font-size:15px; max-width:680px }
.crumb{ font-size:13px; color:var(--dim); margin-bottom:18px }
.crumb a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line2) }
.crumb a:hover{ color:var(--red-soft) }

/* section */
section{ padding-top:44px }
h2{ font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:1.4px; font-size:26px; margin-bottom:6px; display:flex; align-items:baseline; gap:10px }
h2 .ico{ font-size:20px }
.sec-sub{ color:var(--dim); font-size:13.5px; margin-bottom:18px }

/* grid + cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px }
.card{ display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; color:inherit; position:relative; transition:.16s ease }
.card:hover{ border-color:var(--red); transform:translateY(-2px); background:#1a1a1a }
.card .step{ font-family:'Bebas Neue',sans-serif; font-size:32px; line-height:1; color:var(--red); opacity:.55 }
.card h3{ font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.6px; font-size:22px; margin:10px 0 6px; color:#fff }
.card p{ color:var(--muted); font-size:13.5px; line-height:1.55 }
.card .go{ margin-top:14px; font-size:12px; font-weight:700; letter-spacing:1px; color:var(--red-soft); text-transform:uppercase }
.card .go::after{ content:" ❯" }
.card.soon{ opacity:.5; pointer-events:none } .card.soon:hover{ transform:none; border-color:var(--line) }

/* badges */
.badge{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:3px 9px; border-radius:20px; vertical-align:middle }
.badge.ativo{ background:rgba(34,197,94,.14); color:var(--green); border:1px solid rgba(34,197,94,.35) }
.badge.wip{ background:rgba(245,158,11,.14); color:var(--amber); border:1px solid rgba(245,158,11,.35) }
.badge.md{ background:#1e1e1e; color:var(--dim); border:1px solid var(--line2) }

/* números travados (barra de consulta rápida) */
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:12px; overflow:hidden; margin-top:22px }
.stat{ background:var(--card); padding:16px 18px }
.stat .k{ font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--dim); margin-bottom:4px }
.stat .v{ font-family:'Bebas Neue',sans-serif; font-size:28px; color:#fff; line-height:1 }
.stat .v small{ font-family:'Inter'; font-size:12px; color:var(--muted); font-weight:600 }
.stat.g .v{ color:var(--green) } .stat.a .v{ color:var(--amber) } .stat.r .v{ color:var(--red-soft) }

/* KPI mini-tabela */
.kpi{ width:100%; border-collapse:collapse; font-size:13px; margin-top:4px }
.kpi td{ padding:8px 10px; border-bottom:1px solid var(--line) }
.kpi tr:last-child td{ border-bottom:none }
.kpi .dot{ font-size:11px }
.kpi .val{ font-weight:700; color:#fff; text-align:right; white-space:nowrap }

.foot{ margin-top:52px; padding-top:18px; border-top:1px solid var(--line); color:var(--dim); font-size:13px }
.foot a{ color:var(--muted); text-decoration:none; border-bottom:1px solid var(--line2) }