:root{
  --bg:#060606;
  --s1:#0c0c0c;
  --s2:#101010;
  --border:#1c1c1c;
  --border2:#282828;
  --red:#ff3a2d;
  --orange:#f5a520;
  --yellow:#eab308;
  --blue:#3b82f6;
  --text:#f0f0f0;
  --muted:#999;
  --muted2:#333
}
/* The hub scrolls now: the quad-hero still fills the first screen, and the
   About section below it gives the page real, indexable copy. */
body{font-family:'IBM Plex Mono','Consolas','Courier New',monospace;background:var(--bg);color:var(--text)}

.quad-hero{
  position:relative;
  width:100vw;
  height:100vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  overflow:hidden;
  flex-shrink:0
}
.quad-cell{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  transition:all .3s;
  overflow:hidden;
  border:none;
  background:transparent;
  --accent:#fff;
}
.quad-cell:hover .qlabel{transform:translateY(-3px);opacity:1}
.quad-cell:hover .qsub{opacity:.7}
.qlabel{
  position:relative;
  z-index:15;
  font-size:clamp(1.2rem,3vw,2rem);
  font-weight:800;
  letter-spacing:.04em;
  transition:all .3s;
  pointer-events:none
}
.qsub{
  position:relative;
  z-index:15;
  font-size:.72rem;
  color:var(--muted);
  margin-top:6px;
  transition:all .3s;
  pointer-events:none;
  opacity:.6
}
.quad-cell .qlabel{
  color:var(--accent);
}
.quad-cell .qlabel{
  color:var(--accent);
}
 .q-parser .qlabel   {color:var(--red-bright)}
 .q-modellers .qlabel{color:var(--orange-bright)}
 .q-mesh .qlabel     {color:var(--blue)}
 .q-store .qlabel    {color:var(--yellow)}
.quad-cell::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
}
.q-parser::after   {background:radial-gradient(ellipse at center,rgba(255,58,45,.04),transparent 70%)}
.q-modellers::after{background:radial-gradient(ellipse at center,rgba(245,165,32,.04),transparent 70%)}
.q-mesh::after     {background:radial-gradient(ellipse at center,rgba(59,130,246,.04),transparent 70%)}
.q-store::after    {background:radial-gradient(ellipse at center,rgba(234,179,8,.04),transparent 70%)}

.q-parser:hover::after   {background:radial-gradient(ellipse at center,rgba(255,58,45,.09),transparent 55%)}
.q-modellers:hover::after{background:radial-gradient(ellipse at center,rgba(245,165,32,.09),transparent 55%)}
.q-mesh:hover::after     {background:radial-gradient(ellipse at center,rgba(59,130,246,.09),transparent 55%)}
.q-store:hover::after    {background:radial-gradient(ellipse at center,rgba(234,179,8,.09),transparent 55%)}
.q-parser{--accent:var(--red);}
.q-modellers{--accent:var(--orange);}
.q-mesh{--accent:var(--blue);}
.q-store{--accent:var(--yellow);}
.scroll-spacer{height:0;position:relative;z-index:1;background:var(--bg)}
.site-footer{
  position:fixed;
  bottom:0;left:0;right:0;
  z-index:100;
  background:rgba(var(--bg-rgb),.95);
  border-top:1px solid var(--border);
  padding:22px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
  transform:translateY(100%);
  transition:transform var(--t-slow) ease;
  pointer-events:auto
}
.f-logo{font-weight:900;font-size:.92rem;letter-spacing:.05em;display:flex;align-items:center;gap:9px}
.f-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.f-links a{color:var(--muted);font-size:.72rem;text-decoration:none;transition:color var(--t-med)}
.f-links a:hover{color:var(--orange)}
.f-links span{color:var(--muted2);font-size:.72rem;user-select:none}
.f-logos{display:flex;gap:7px}
.f-logos img{width:18px;height:18px;object-fit:contain;image-rendering:pixelated;opacity:.55}
.f-logos a{display:flex;transition:opacity var(--t-med)}
.f-logos a:hover{opacity:1}
.f-logos img{transition:transform var(--t-med)}
.f-logos a:hover img{transform:scale(1.1)}
.site-footer p{color:var(--muted2);font-size:.72rem}
@media(max-width:768px){
  .quad-hero{grid-template-columns:1fr 1fr}
  .q-parser{order:4}
  .q-modellers{order:1}
  .q-mesh{order:3}
  .q-store{order:2}
}


/* ── Floating shared footer (revealed on scroll by footer-reveal.js) ── */
.shared-footer{
  position:relative;
  z-index:2;
  background:var(--bg);
  border-top:1px solid var(--border);
}