.hub-shell {
  position: relative;
  min-height: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(28px, 7vh, 80px) clamp(18px, 5vw, 40px) 60px;
  background:
    radial-gradient(90% 60% at 50% -8%, #1c1530 0%, transparent 60%);
}

.hub-head { text-align: center; margin-bottom: clamp(28px, 5vh, 52px); }
.hub-eyebrow {
  font: 12px/1 var(--mono);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--faint);
  margin: 0 0 14px;
}
.hub-head h1 {
  margin: 0;
  font-size: clamp(38px, 9vw, 76px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 0.96;
  background: linear-gradient(100deg, var(--rhythm), var(--color) 45%, var(--growth));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hub-head p {
  margin: 16px auto 0;
  max-width: 46ch;
  color: var(--dim);
  font-size: clamp(14px, 2.4vw, 17px);
  line-height: 1.5;
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 2.4vw, 22px);
}
@media (max-width: 640px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  position: relative;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #14111d, #0f0c17);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  aspect-ratio: 16 / 11;
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.hub-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--c) 60%, var(--line));
  box-shadow: 0 18px 50px -24px var(--c);
}
.hub-card canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hub-card .meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 18px;
  background: linear-gradient(0deg, rgba(8,6,14,0.92), transparent);
  z-index: 2;
}
.hub-card .kicker {
  font: 11px/1 var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--c);
  margin: 0 0 4px;
}
.hub-card h2 { margin: 0; font-size: clamp(20px, 3vw, 26px); font-weight: 600; letter-spacing: -0.01em; }
.hub-card .desc { margin: 4px 0 0; font-size: 13px; color: var(--dim); max-width: 34ch; }
.hub-card .go {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  font: 12px/1 var(--mono); color: var(--c); opacity: 0.7;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.hub-card:hover .go { transform: translateX(3px); opacity: 1; }

.hub-break {
  text-align: center;
  margin: clamp(40px, 7vh, 72px) auto clamp(20px, 3vh, 32px);
  max-width: 52ch;
}
.hub-break h2 {
  margin: 6px 0 0;
  font-size: clamp(24px, 4.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  background: linear-gradient(100deg, var(--fields), var(--flux) 50%, var(--fill));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hub-break p {
  margin: 14px auto 0;
  color: var(--dim);
  font-size: clamp(13px, 2.2vw, 16px);
  line-height: 1.5;
}

.hub-foot {
  margin-top: 40px;
  text-align: center;
  color: var(--faint);
  font: 12px/1.6 var(--mono);
}
.hub-foot b { color: var(--dim); font-weight: 500; }