
/* VSN Ecosystem V2 — dedicated, cache-busted presentation layer */

.vsn-network{
  width:min(1200px,calc(100% - 32px));
  margin:44px auto 34px!important;
  padding:28px 24px!important;
  border:1px solid #252c3b!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 12% 18%,rgba(104,217,255,.08),transparent 24%),
    radial-gradient(circle at 88% 78%,rgba(167,139,250,.12),transparent 28%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.018))!important;
  box-shadow:0 18px 44px rgba(0,0,0,.26)!important;
  color:#f8f9fc!important;
}
.vsn-network *{box-sizing:border-box}
.vsn-network__head{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:18px!important;
  margin-bottom:18px!important;
}
.vsn-network__head>div{min-width:0}
.vsn-network__kicker{
  display:block!important;
  color:#8b95a8!important;
  font-size:10px!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.14em!important;
  margin-bottom:5px!important;
}
.vsn-network__head h3{
  margin:0!important;
  color:#f8f9fc!important;
  font-family:'Roboto Condensed','Arial Narrow','Space Grotesk',sans-serif!important;
  font-size:27px!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
}
.vsn-network__head p{
  margin:0!important;
  max-width:470px!important;
  color:#8b95a8!important;
  font-size:13px!important;
  line-height:1.5!important;
}
.vsn-network__grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}
.vsn-network__card{
  min-width:0!important;
  min-height:168px!important;
  padding:17px!important;
  border:1px solid #252c3b!important;
  border-radius:17px!important;
  background:#111621!important;
  display:flex!important;
  flex-direction:column!important;
  transition:transform .2s ease,border-color .2s ease,background .2s ease!important;
}
.vsn-network__card:hover{
  transform:translateY(-4px)!important;
  border-color:#46516a!important;
  background:#151b28!important;
}
.vsn-network__card.current{
  border-color:rgba(167,139,250,.55)!important;
  background:linear-gradient(145deg,rgba(124,58,237,.18),rgba(167,139,250,.07))!important;
  box-shadow:inset 0 0 0 1px rgba(167,139,250,.05)!important;
}
.vsn-network__role{
  display:block!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  margin-bottom:7px!important;
}
.vsn-network__card.discover .vsn-network__role{color:#68d9ff!important}
.vsn-network__card.listen .vsn-network__role{color:#f5b84c!important}
.vsn-network__card.engage .vsn-network__role{color:#68e7a9!important}
.vsn-network__card.perform .vsn-network__role{color:#a78bfa!important}
.vsn-network__name{
  margin:0 0 8px!important;
  color:#f8f9fc!important;
  font-family:'Roboto Condensed','Arial Narrow','Space Grotesk',sans-serif!important;
  font-size:20px!important;
  font-weight:800!important;
  line-height:1.05!important;
  letter-spacing:-.015em!important;
}
.vsn-network__card p{
  margin:0 0 13px!important;
  color:#a2acbd!important;
  font-size:12px!important;
  line-height:1.5!important;
}
.vsn-network__card a{
  margin-top:auto!important;
  color:#c6b4ff!important;
  font-size:12px!important;
  font-weight:750!important;
  text-decoration:none!important;
}
.vsn-network__card a:hover{color:#fff!important}
.vsn-network__parent{
  margin-top:15px!important;
  padding-top:14px!important;
  border-top:1px solid #252c3b!important;
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:16px!important;
  color:#8b95a8!important;
  font-size:11px!important;
  line-height:1.45!important;
}
.vsn-network__parent strong{color:#f8f9fc!important}
.vsn-network__parent a{color:#f5b84c!important;font-weight:750!important;text-decoration:none!important}

@media(max-width:900px){
  .vsn-network__head{align-items:flex-start!important;flex-direction:column!important}
  .vsn-network__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:580px){
  .vsn-network{width:calc(100% - 24px)!important;margin:30px auto 24px!important;padding:20px 16px!important}
  .vsn-network__grid{grid-template-columns:1fr!important}
  .vsn-network__card{min-height:auto!important}
  .vsn-network__parent{align-items:flex-start!important;flex-direction:column!important}
}
