/* Специфичные стили главной страницы (общая тема — в css/common.css) */
body.hub-page{overflow:auto;align-items:flex-start}
body.hub-page::-webkit-scrollbar{width:8px}
body.hub-page::-webkit-scrollbar-thumb{background:#22304e;border-radius:4px}

.orb{position:fixed;border-radius:50%;filter:blur(70px);opacity:.35;pointer-events:none;z-index:0}
.orb1{width:420px;height:420px;background:#1d4e3c;top:-140px;left:-100px;animation:drift 14s ease-in-out infinite alternate}
.orb2{width:360px;height:360px;background:#232a54;bottom:-120px;right:-80px;animation:drift 18s ease-in-out infinite alternate-reverse}
.orb3{width:260px;height:260px;background:#3a2a4e;top:30%;right:12%;animation:drift 22s ease-in-out infinite alternate}
@keyframes drift{to{transform:translate(60px,40px) scale(1.15)}}

.hub{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:28px;
  max-width:1020px;width:100%;margin:0 auto;padding:30px 0 20px;
}
.hero{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center}
.logo-big{
  font-size:clamp(34px,7vw,56px);letter-spacing:12px;font-weight:900;
  background:linear-gradient(90deg,var(--accent),#8ff5cf 45%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px rgba(52,245,165,.35));
}
.hero .sub{color:var(--muted);font-size:14px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;width:100%}

.cat{width:100%;display:flex;flex-direction:column;gap:12px}
.cat-title{
  font-size:14px;font-weight:900;letter-spacing:3px;text-transform:uppercase;
  color:var(--ac,var(--accent));
  display:flex;align-items:center;gap:12px;
}
.cat-title::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--ac,var(--accent)),transparent);
  opacity:.4;
}
.card{
  --ac:#34f5a5;--acg:rgba(52,245,165,.2);
  position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-start;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:18px;text-decoration:none;color:var(--text);
  transition:transform .18s,border-color .18s,box-shadow .18s;
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .18s;
  background:radial-gradient(260px 150px at 20% 0%,var(--acg),transparent 70%);
}
.card:hover{transform:translateY(-6px);border-color:var(--ac);box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 34px var(--acg)}
.card:hover::before{opacity:1}
.card .icon{
  font-size:32px;width:58px;height:58px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;
  transition:.18s;
}
.card:hover .icon{transform:scale(1.08) rotate(-4deg);border-color:var(--ac);box-shadow:0 0 20px var(--acg)}
.cname{font-size:18px;font-weight:800;margin-top:2px}
.cdesc{font-size:12.5px;color:var(--muted);line-height:1.45;min-height:36px}
.chip{
  font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--ac);border:1px solid var(--ac);
  padding:3px 9px;border-radius:999px;opacity:.85;
}
.cbest{font-size:12px;color:var(--gold);margin-top:auto}
.cplay{font-size:13px;font-weight:700;opacity:.7;transition:.18s}
.card:hover .cplay{opacity:1;color:var(--ac)}

@media (max-width:560px){
  .hub{padding-top:20px;gap:20px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .cdesc{min-height:0}
}
@media (max-width:400px){
  .grid{grid-template-columns:1fr}
}