.hero{height:auto;min-height:640px}
.hero-content{padding-bottom:110px}
.server-connect{display:inline-flex;align-items:center;gap:14px;max-width:100%;margin-top:18px;padding:12px 17px;background:linear-gradient(135deg,#073c60f5,#062840f5);border:2px solid #84e8ff;border-bottom:5px solid #168bb5;box-shadow:inset 0 2px #ffffff25,0 4px 0 #032b49,0 0 28px #57dcff30;color:#fff;text-align:left;transition:transform .15s,box-shadow .15s}
.server-connect:hover{transform:translateY(-2px);box-shadow:inset 0 2px #ffffff25,0 6px 0 #032b49,0 0 32px #57dcff50}
.server-connect:active{transform:translateY(2px)}
.server-connect>img{width:36px;height:36px;image-rendering:pixelated}
.server-connect-text{display:flex;flex-direction:column;gap:5px}
.server-connect-label{font-family:var(--pixel);font-size:7px;line-height:1.6;letter-spacing:.5px;color:#9eeaff}
.server-connect-text strong{font-family:Inventory,monospace;font-size:29px;font-weight:400;line-height:1;letter-spacing:.3px;white-space:nowrap}
.server-connect-action{display:flex;align-items:center;gap:7px;border-left:1px solid #69dcff55;padding-left:14px;font-size:11px;font-weight:700;color:#a6ecff;white-space:nowrap}
.server-connect-action svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.server-connect.copied{border-color:#a1ffd7}.server-connect.copied .server-connect-action{color:#a1ffd7}
@media(max-width:650px){.hero{height:auto;min-height:640px}.hero-content{padding-bottom:110px}.server-connect{gap:9px;padding:11px 12px;margin-top:16px}.server-connect>img{width:28px;height:28px}.server-connect-label{font-size:6px;letter-spacing:0}.server-connect-text strong{font-size:25px}.server-connect-action{padding-left:9px}.server-connect-action span{display:none}}
@media(prefers-reduced-motion:reduce){.server-connect{transition:none}}