/* HostSoch — vps-hosting.php only (loaded after site.css).
   Dark theme, sections, stat strip, cards, feature cards, tables and FAQ come from site.css. */

.page-vps { --hero-mobile-ratio: 800 / 496; }

/* Banner */
.hero--vps .hero__media img { object-position: 70% center; }
.hero--vps::before {
  background:
    radial-gradient(circle at 15% 40%, rgba(250, 175, 50, .10) 0%, transparent 40%),
    linear-gradient(90deg, rgba(12, 16, 20, .9) 0%, rgba(12, 16, 20, .75) 32%, rgba(12, 16, 20, .35) 48%, rgba(12, 16, 20, 0) 62%);
}
.hero--vps .hero__copy { max-width: 520px; }
.hero--vps h1 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.08; letter-spacing: -.02em; }
.hero--vps .hero__lead { font-size: clamp(17px, 1.5vw, 19px); }
.hero--vps .hero__cta { margin-top: 30px; }
@media (max-width: 1100px) { .hero--vps .hero__copy { max-width: 460px; } }
@media (max-width: 760px) { .hero--vps .hero__media img { object-position: center; } }

/* Stat strip labels are a little longer here */
.page-vps .stats__label { font-size: 14px; }

/* "Which VPS" cards */
.choose .why__card { display: flex; flex-direction: column; }
.choose .why__badge { top: 34px; }
.choose__from { margin: -2px 0 10px; font-size: 14px; font-weight: 700; color: var(--d-muted); }
.choose__from .price { font-size: 24px; color: var(--orange); text-shadow: 0 0 18px rgba(250, 175, 50, .3); }
.choose__for { margin: 14px 0 18px; font-size: 14px; color: var(--d-muted); }
.choose__for strong { color: var(--d-text); }
.choose__btn { margin-top: auto; align-self: flex-start; }

/* Platform — 4 cards with a glowing top edge */
.platform { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.platform__item { background: var(--d-card); border: 1px solid var(--d-line); border-top: 3px solid var(--green); border-radius: var(--radius); padding: 26px 22px; box-shadow: 0 -8px 26px -14px rgba(150, 200, 49, .6); transition: background .2s, transform .2s; }
.platform__item:nth-child(even) { border-top-color: var(--orange); box-shadow: 0 -8px 26px -14px rgba(250, 175, 50, .6); }
.platform__item:hover { background: var(--d-card-hover); transform: translateY(-3px); }
.platform__item h3 { font-size: 18px; margin-bottom: 8px; }
.platform__item p { margin: 0; color: var(--d-muted); font-weight: 600; font-size: 15px; }
@media (max-width: 1000px) { .platform { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .platform { grid-template-columns: 1fr; } }