.hero-with-servers .hero-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    align-items: start;
    gap: clamp(32px, 6vw, 120px);
    width: min(1400px, 88%);
    margin: 0 auto;
    padding: 100px 0 65px;
}
.hero-with-servers .hero-content { min-width: 0; max-width: none; padding: 0; }
.home-servers {
    position: relative;
    min-width: 0;
    margin-top: 64px;
    padding: 25px 26px;
    border: 1px solid #b08d53a6;
    background: radial-gradient(ellipse at 100% 0, #b4945020, transparent 65%), linear-gradient(135deg, #142021f5, #091416fa);
    box-shadow: 0 20px 65px #0005, inset 0 1px #e5c99212;
}
.home-servers::before { content: ''; position: absolute; inset: 5px; border: 1px solid #b89a5b30; pointer-events: none; }
.home-server-list { list-style: none; margin: 0; padding: 0; }
.home-server + .home-server { margin-top: 21px; padding-top: 21px; border-top: 1px solid #bc9b5f30; }
.home-server-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.home-server-info { min-width: 0; }
.home-server-name { margin: 0 0 7px; color: #eee8d8; font: 23px/1.25 var(--serif); overflow-wrap: anywhere; }
.home-server-ruleset { margin: 0; color: #8da4ad; font-size: 10px; line-height: 1.6; letter-spacing: .035em; }
.home-server-count { flex-shrink: 0; min-width: 55px; text-align: right; }
.home-server-count > span { display: block; margin-bottom: 6px; color: #a7b9bb; font-size: 10px; line-height: 1.3; }
.home-server-count strong { display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; white-space: nowrap; color: #e4ca8f; font: 24px/1 var(--serif); font-variant-numeric: tabular-nums; }
.home-server-capacity { color: #ad9b77; font-size: 12px; }
.home-server-load { display: block; width: 100%; height: 4px; margin-top: 19px; appearance: none; border: 0; border-radius: 3px; overflow: hidden; background: #d4b47520; color: #d4b475; }
.home-server-load::-webkit-progress-bar { border-radius: 3px; background: #d4b47520; }
.home-server-load::-webkit-progress-value { border-radius: 3px; background: linear-gradient(90deg, #8c6d39, #dec18a); transition: width .35s ease; }
.home-server-load::-moz-progress-bar { border-radius: 3px; background: linear-gradient(90deg, #8c6d39, #dec18a); }
.home-server-load.is-unavailable { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .home-server-load::-webkit-progress-value { transition: none; } }
@media (min-width: 1600px) { .hero-with-servers .hero-stage { padding-top: 120px; } }
@media (max-width: 1100px) {
    .hero-with-servers .hero-stage { width: 90%; grid-template-columns: minmax(0, 1fr) minmax(285px, 340px); gap: 32px; padding-top: 105px; }
    .home-servers { margin-top: 48px; padding: 24px 21px; }
    .home-server-top { gap: 12px; }
    .home-server-name { font-size: 20px; }
    .home-server-count strong { font-size: 22px; }
}
@media (max-width: 800px) {
    .hero-with-servers { min-height: 0; }
    .hero-with-servers .hero-stage { width: 88%; grid-template-columns: minmax(0, 1fr); gap: 38px; padding: 75px 0 50px; }
    .home-servers { margin-top: 0; width: 100%; }
}
@media (max-width: 480px) {
    .hero-with-servers .hero-stage { padding-top: 66px; gap: 32px; }
    .hero-with-servers h1 { font-size: clamp(44px, 12vw, 54px); }
    .home-servers { padding: 24px 21px; }
    .home-server-top { gap: 12px; }
    .home-server-name { font-size: 20px; }
    .home-server-count strong { font-size: 22px; }
}
