.portal-framework{
  width:100%;
  max-width:none;
  padding:
    clamp(1rem,1.8vw,1.6rem)
    clamp(12px,1.6vw,30px)
    3rem;
  box-sizing:border-box;
}

.portal-framework-hero{
  width:100%;
  padding:clamp(1.1rem,2.4vw,2rem);
  border:1px solid rgba(73,174,255,.22);
  border-radius:14px;
  background:
    radial-gradient(circle at 88% 10%,rgba(27,126,196,.18),transparent 32%),
    linear-gradient(135deg,rgba(6,21,32,.98),rgba(9,18,31,.94));
}

.portal-framework-copy{
  width:100%;
}

.portal-framework-copy h1{
  max-width:1000px;
  margin:.25rem 0 .55rem;
}

.portal-framework-copy > p:not(.eyebrow){
  max-width:900px;
  margin:0;
  color:#aebdca;
}

.portal-framework-nav{
  display:grid;
  grid-template-columns:repeat(var(--portal-nav-columns,6),minmax(0,1fr));
  gap:.4rem;
  width:100%;
  margin-top:1.35rem;
  padding-top:1.25rem;
  border-top:1px solid rgba(148,163,184,.18);
}

.portal-framework-nav a{
  display:flex;
  min-width:0;
  min-height:92px;
  padding:.65rem .3rem;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:.45rem;
  color:#eef6fb;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  text-align:center;
  text-decoration:none;
  font-weight:750;
  transition:color .16s ease,transform .16s ease;
}

.portal-framework-nav a:hover{
  color:var(--portal-accent,#35bdff);
  transform:translateY(-2px);
}

.portal-framework-nav a.active{
  color:var(--portal-accent,#35bdff);
}

.portal-framework-nav-icon{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
}

.portal-framework-nav-icon svg{
  display:block;
  width:38px;
  height:38px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.portal-framework-nav-label{
  line-height:1.2;
}

.portal-framework-nav small{
  color:#8fa1ae;
  font-size:.68rem;
}

.portal-framework-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:.7rem;
  margin-top:1rem;
}

.portal-framework-stats article{
  display:grid;
  gap:.25rem;
  padding:.85rem;
  border:1px solid rgba(148,163,184,.14);
  border-radius:10px;
  background:rgba(255,255,255,.025);
}

.portal-framework-stats span,
.portal-framework-stats small{
  color:#8fa1ae;
  font-size:.68rem;
}

.portal-framework-stats strong{
  font-size:1.35rem;
}

.portal-framework-section{
  margin-top:1.15rem;
}

.portal-framework-section-heading{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.8rem;
}

.portal-framework-section-heading h2,
.portal-framework-section-heading p{
  margin:0;
}

.portal-framework-section-heading > div > p:not(.eyebrow){
  margin-top:.3rem;
  color:#9fb0bd;
}

.portal-framework-section-heading > a{
  color:#cfe9f8;
  text-decoration:none;
  font-weight:750;
}

.portal-framework-empty{
  padding:1.35rem;
  border:1px dashed rgba(148,163,184,.22);
  border-radius:11px;
  text-align:center;
}

.portal-accent-blue{--portal-accent:#35bdff}
.portal-accent-green{--portal-accent:#38d39f}
.portal-accent-gold{--portal-accent:#e9b949}
.portal-accent-red{--portal-accent:#ff6b73}

.portal-framework-game{--portal-nav-columns:6}
.portal-framework-tife{--portal-nav-columns:5}
.portal-framework-exploration{--portal-nav-columns:7}
.portal-framework-news{--portal-nav-columns:3}

@media(max-width:980px){
  .portal-framework-nav{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media(max-width:620px){
  .portal-framework-nav{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .portal-framework-section-heading{
    align-items:flex-start;
    flex-direction:column;
  }
}