:root{
  --hub-bg: #0b0f16;
  --hub-panel:#101626;
  --hub-card:#0f1726;
  --hub-text:#e6edf7;
  --hub-muted:#9aa3b2;
  --hub-border: rgba(138,180,255,.18);
  --hub-teal:#63e6be;
  --hub-blue:#8ab4ff;
}

.hub{
  color:var(--hub-text);
  padding: 20px 24px 40px;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(138,180,255,.10), transparent 60%),
    radial-gradient(900px 400px at 90% -20%, rgba(99,230,190,.10), transparent 60%);
}

.hub-hero{
  padding: 16px 0 6px;
}
.hub-hero h1{
  margin:0;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing:.5px;
  background: linear-gradient(90deg, var(--hub-blue), var(--hub-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 24px rgba(138,180,255,.15);
}
.hub-tagline{
  margin:8px 0 0;
  color:var(--hub-muted);
}

.hub-section{
  margin-top: 22px;
}
.hub-section-title{
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing:.3px;
  color: var(--hub-blue);
  opacity: .95;
}

.hub-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(240px, 1fr));
  gap: 16px;
}
@media (max-width: 1100px){
  .hub-cards{ grid-template-columns: repeat(2, minmax(240px, 1fr)); }
}
@media (max-width: 640px){
  .hub-cards{ grid-template-columns: 1fr; }
}

.hub-card{
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 16px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(180deg, rgba(99,230,190,.06), rgba(138,180,255,.04));
  border: 1px solid var(--hub-border);
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 10px 24px rgba(0,0,0,.35);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hub-card::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:16px;
  pointer-events:none;
  background: radial-gradient(400px 100px at 20% -20%, rgba(138,180,255,.20), transparent 60%);
  mix-blend-mode:screen;
}
.hub-card:hover{
  transform: translateY(-2px);
  border-color: rgba(138,180,255,.36);
  box-shadow: 0 0 0 1px rgba(138,180,255,.18) inset, 0 16px 28px rgba(0,0,0,.4);
}

.hub-thumb{
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--hub-border);
  background:
    linear-gradient(135deg, rgba(138,180,255,.12), rgba(99,230,190,.10)),
    radial-gradient(120px 120px at 20% 20%, rgba(138,180,255,.20), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 6px),
    var(--hub-card);
  position: relative;
  overflow: hidden;
}
.hub-thumb::after{
  content: attr(data-label);
}
.hub-card .hub-thumb::after{
  content: attr(data-label, "Preview");
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  letter-spacing:.4px;
  font-size: clamp(16px, 2.2vw, 22px);
  color: rgba(230,237,247,.95);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
/* feed data-label from the outer card attribute */
.hub-card[data-label] .hub-thumb::after { content: attr(data-label); }

.hub-meta h3{
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
}
.hub-meta p{
  margin: 0;
  color: var(--hub-muted);
  font-size: 13px;
}

/* Coming soon */
.hub-soon{
  display: grid;
  grid-template-columns: 1fr;
}
.hub-soon-card{
  border-radius: 14px;
  padding: 16px;
  border: 1px dashed var(--hub-border);
  background: rgba(255,255,255,.02);
}
.hub-soon-pill{
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #0a1222;
  background: linear-gradient(90deg, var(--hub-blue), var(--hub-teal));
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

/* RB card background */
.hub-card[data-label="RB Projections"] .hub-thumb{
  background-image: url("/static/images/rb_projections.png");
  background-size: cover;
  background-position: center;
}

/* QB card background */
.hub-card[data-label="QB Projections"] .hub-thumb{
  background-image: url("/static/images/qb_projections.png");
  background-size: cover;
  background-position: center;
}