/*!
 * Global Hosting: vps.php page styles (loaded only on vps.php via $page['head']).
 * Builds on gh-core.css + site.css tokens/components. All selectors are gh-vps-* or scoped to .gh-page-vps.
 */

.gh-page-vps { --gh-vps-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace; }

/* ==========================================================================
   Hero: extra bottom room for the overlapping trust card + terminal illustration
   ========================================================================== */
.gh-vps-hero { padding-bottom: 150px; }
.gh-vps-hero .gh-page-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.gh-vps-hero .gh-page-hero__bullets { gap: 12px 24px; }
@media (max-width: 1080px) {
  .gh-vps-hero .gh-page-hero__inner { grid-template-columns: 1fr; }
  .gh-vps-hero .gh-page-hero__aside { display: none; }
}
@media (max-width: 960px) { .gh-vps-hero { padding-bottom: 120px; } }
@media (max-width: 640px) {
  .gh-vps-hero { padding-bottom: 104px; }
  .gh-vps-hero .gh-page-hero__bullets { flex-direction: column; gap: 12px; }
}

.gh-vps-art { position: relative; width: 100%; max-width: 540px; margin-left: auto; aspect-ratio: 560 / 520; }
.gh-vps-art__bg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.gh-vps-term {
  position: absolute; z-index: 1; left: 7%; right: 5%; top: 19%;
  overflow: hidden; border-radius: 16px;
  background: linear-gradient(180deg, rgba(21, 28, 64, .96), rgba(10, 15, 42, .97));
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 30px 70px -24px rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.gh-vps-term__bar { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; border-bottom: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03); }
.gh-vps-term__dots { display: inline-flex; gap: 6px; }
.gh-vps-term__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.gh-vps-term__dots i:first-child { background: #F2575B; }
.gh-vps-term__title { position: absolute; left: 50%; transform: translateX(-50%); color: var(--gh-on-dark-subtle); font: 600 .75rem/1 var(--gh-vps-mono); }
.gh-vps-term__body { padding: 16px 18px 18px; color: #E4E7F5; font: 500 .8125rem/1.75 var(--gh-vps-mono); }
.gh-vps-term__body p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-vps-term__prompt { color: var(--gh-success-on-dark); }
.gh-vps-term__muted { color: var(--gh-on-dark-subtle); }
.gh-vps-term__out { color: var(--gh-on-dark-muted); }
.gh-vps-term__ok { color: #9AA8FF; }
.gh-vps-term__ok::before { content: "✓ "; }
.gh-vps-term__cursor { display: inline-block; width: 8px; height: 15px; vertical-align: -2px; background: #E4E7F5; }

.gh-vps-float { z-index: 2; }
.gh-vps-float--root { top: 7%; right: 3%; gap: 8px; padding: 9px 14px; border-radius: 999px; font-weight: 700; color: var(--gh-ink); }
.gh-vps-float--root .gh-icon { color: var(--gh-red); }
.gh-vps-float--loc { bottom: 2%; right: 1%; }
.gh-vps-float--loc .gh-float__icon { background: var(--gh-red-50); color: var(--gh-red); }
.gh-vps-float--spec { top: 1%; left: 0; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
.gh-vps-float__label { color: var(--gh-muted); font-weight: 600; }
.gh-vps-float__status { display: inline-flex; align-items: center; gap: 8px; color: var(--gh-ink); font-size: 1.125rem; font-weight: 800; letter-spacing: -.02em; }
.gh-vps-float__dot { width: 9px; height: 9px; border-radius: 50%; background: #22C58B; box-shadow: 0 0 0 4px rgba(34, 197, 139, .18); }
.gh-vps-float__meta { color: var(--gh-muted); font-size: .75rem; font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .gh-vps-term__cursor { animation: gh-vps-cursor 1.1s steps(1) infinite; }
  .gh-vps-float--spec { animation-delay: -3s; }
  .gh-vps-float--loc { animation-delay: -5s; }
}
@keyframes gh-vps-cursor { 50% { opacity: 0; } }

/* ==========================================================================
   Trust strip (white card overlapping the hero)
   ========================================================================== */
/* The band carries the #F6F7FB background of the plans section up to the hero, so there is no white seam under the card. */
.gh-vps-trust-band { background: var(--gh-bg-alt); }
.gh-vps-pricing { padding-top: clamp(56px, 7vw, 88px); }
.gh-vps-trust {
  position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: -84px 0 0; padding: 8px; list-style: none;
  background: #fff; border: 1px solid var(--gh-line); border-radius: 22px;
  box-shadow: 0 2px 6px rgba(14, 19, 48, .04), 0 40px 80px -34px rgba(14, 19, 48, .35);
}
.gh-vps-trust__item { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 20px 20px; }
.gh-vps-trust__item + .gh-vps-trust__item { border-left: 1px solid var(--gh-line); }
.gh-vps-trust__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: var(--gh-red-50); color: var(--gh-red); }
.gh-vps-trust__item strong { display: block; color: var(--gh-ink); font-size: .9375rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; }
.gh-vps-trust__item small { display: block; margin-top: 3px; color: var(--gh-muted); font-size: .8125rem; font-weight: 500; line-height: 1.4; }
.gh-vps-trust__item a { color: var(--gh-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--gh-line-strong); text-underline-offset: 3px; }
.gh-vps-trust__item a:hover { color: var(--gh-red); text-decoration-color: currentColor; }
@media (max-width: 1100px) {
  .gh-vps-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gh-vps-trust__item:nth-child(3) { border-left: 0; }
  .gh-vps-trust__item:nth-child(n+3) { border-top: 1px solid var(--gh-line); }
}
@media (max-width: 560px) {
  .gh-vps-trust { grid-template-columns: 1fr; margin-top: -64px; padding: 4px 6px; border-radius: 20px; }
  .gh-vps-trust__item { padding: 16px 14px; }
  .gh-vps-trust__item + .gh-vps-trust__item { border-left: 0; border-top: 1px solid var(--gh-line); }
  .gh-vps-trust__icon { width: 42px; height: 42px; }
}

/* ==========================================================================
   Plans (5 cards, monthly only). Base look = .gh-plan (gh-core).
   ========================================================================== */
.gh-vps-plans { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.gh-vps-plan { padding: 28px 22px 24px; }
.gh-vps-plan .gh-plan__head { margin-bottom: 18px; }
.gh-vps-plan .gh-plan__name { font-size: 1.25rem; }
.gh-vps-plan .gh-plan__tagline { min-height: 4.5em; }

.gh-vps-specs { display: grid; gap: 2px; margin: 0 0 22px; padding: 6px 12px; border-radius: 14px; background: var(--gh-bg-alt); border: 1px solid var(--gh-line); }
.gh-vps-specs__row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; }
.gh-vps-specs__row + .gh-vps-specs__row { border-top: 1px dashed var(--gh-line-strong); }
.gh-vps-specs dt { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: var(--gh-red); box-shadow: var(--gh-shadow-xs); }
.gh-vps-specs dt .gh-icon { width: 18px; height: 18px; }
.gh-vps-specs dd { margin: 0; min-width: 0; color: var(--gh-ink); font: 700 .875rem/1.3 var(--gh-font); }
/* dt label is .gh-sr-only: visually the icon carries it */

.gh-vps-plan__price { margin: auto 0 18px; padding: 0; border: 0; }
.gh-vps-plan .gh-price__amount { font-size: 2.125rem; }
.gh-vps-plan .gh-plan__sub { margin-top: 6px; }
.gh-vps-plan__cta { margin: 0; }

.gh-plan--featured .gh-vps-specs { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); }
.gh-plan--featured .gh-vps-specs__row + .gh-vps-specs__row { border-top-color: rgba(255, 255, 255, .14); }
.gh-plan--featured .gh-vps-specs dt { background: rgba(187, 52, 55, .22); color: var(--gh-red-soft); box-shadow: none; }
.gh-plan--featured .gh-vps-specs dd { color: #fff; }

@media (max-width: 1279px) {
  .gh-vps-plans { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; gap: 20px; }
  .gh-vps-plan { grid-column: span 2; }
  .gh-vps-plan:nth-child(4) { grid-column: 2 / span 2; }
  .gh-vps-plan .gh-plan__tagline { min-height: 3em; }
}
@media (max-width: 860px) {
  .gh-vps-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 660px; }
  .gh-vps-plan, .gh-vps-plan:nth-child(4) { grid-column: auto; }
  .gh-vps-plan:nth-child(5) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}
/* Phones: compact cards (name + price on one row, specs as three tiles) */
@media (max-width: 600px) {
  .gh-vps-plans { grid-template-columns: 1fr; max-width: 460px; gap: 16px; }
  .gh-vps-plan:nth-child(5) { width: auto; justify-self: stretch; }
  .gh-vps-plan {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
    grid-template-areas: "name price" "tagline tagline" "specs specs" "cta cta";
    padding: 24px 18px 18px; border-radius: 18px;
  }
  .gh-vps-plan .gh-plan__head { display: contents; }
  .gh-vps-plan .gh-plan__name { grid-area: name; align-self: center; margin: 0; }
  .gh-vps-plan .gh-plan__tagline { grid-area: tagline; min-height: 0; margin-top: 4px; }
  .gh-vps-plan__price { grid-area: price; align-self: center; margin: 0; text-align: right; }
  .gh-vps-plan .gh-price__amount { font-size: 1.75rem; }
  .gh-vps-plan .gh-price__currency { font-size: 1rem; }
  .gh-vps-plan .gh-plan__sub { display: none; }
  .gh-vps-specs { grid-area: specs; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 16px 0; padding: 4px 0; }
  .gh-vps-specs__row { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; }
  .gh-vps-specs__row + .gh-vps-specs__row { border-top: 0; border-left: 1px dashed var(--gh-line-strong); }
  .gh-plan--featured .gh-vps-specs__row + .gh-vps-specs__row { border-left-color: rgba(255, 255, 255, .14); }
  .gh-vps-specs dd { font-size: .8125rem; }
  .gh-vps-plan__cta { grid-area: cta; }
}

/* "U svakom paketu" strip + footnotes */
.gh-vps-included {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px;
  margin: 36px auto 0; padding: 18px 26px; max-width: 1240px;
  background: #fff; border: 1px solid var(--gh-line); border-radius: 18px; box-shadow: var(--gh-shadow-xs);
}
.gh-vps-included__title { margin: 0; color: var(--gh-ink); font-size: var(--gh-fs-xs); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.gh-vps-included__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.gh-vps-included__list li { display: inline-flex; align-items: center; gap: 8px; color: var(--gh-text); font-size: var(--gh-fs-sm); font-weight: 600; }
.gh-vps-included__list .gh-icon { color: var(--gh-success); }
.gh-vps-included sup, .gh-vps-notes sup { color: var(--gh-red); font-weight: 800; line-height: 0; }
.gh-vps-included sup { margin-left: 1px; }
@media (max-width: 640px) {
  .gh-vps-included { flex-direction: column; align-items: flex-start; padding: 18px 18px; }
  .gh-vps-included__list { display: grid; gap: 10px; justify-content: start; }
  .gh-vps-included__list li { align-items: flex-start; line-height: 1.4; }
}
.gh-vps-notes { max-width: 880px; margin: 20px auto 0; color: var(--gh-muted); font-size: var(--gh-fs-xs); line-height: 1.6; text-align: center; }
.gh-vps-notes p { margin: 0 0 4px; }
.gh-vps-notes a { color: var(--gh-ink); font-weight: 700; }
.gh-vps-notes a:hover { color: var(--gh-red); }
@media (max-width: 640px) { .gh-vps-notes { text-align: left; } }
.gh-vps-help { margin-top: 32px; }
/* Keep the strip, notes and help box as wide as the plan grid above them */
@media (max-width: 1279px) { .gh-vps-included { max-width: 1000px; } }
@media (max-width: 860px) { .gh-vps-included, .gh-vps-help { max-width: 660px; } }
@media (max-width: 600px) { .gh-vps-included, .gh-vps-help { max-width: 460px; } }
.gh-vps-help a:not(.gh-btn) { color: var(--gh-ink); font-weight: 800; text-decoration: none; white-space: nowrap; }
.gh-vps-help a:not(.gh-btn):hover { color: var(--gh-red); }

/* ==========================================================================
   Locations (dark band)
   ========================================================================== */
.gh-vps-where { overflow: hidden; }
.gh-vps-where .gh-section-head { margin-bottom: 32px; }
.gh-vps-bih {
  display: flex; align-items: flex-start; gap: 16px; padding: 22px 22px; border-radius: 18px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.gh-vps-bih__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 46px; height: 46px; border-radius: 13px; background: rgba(187, 52, 55, .2); color: var(--gh-red-soft); }
.gh-vps-bih__title { margin: 0; color: #fff; font-size: var(--gh-fs-md); font-weight: 800; letter-spacing: -.01em; }
.gh-vps-bih__text { margin: 6px 0 0; color: var(--gh-on-dark-muted); font-size: .9375rem; line-height: 1.6; }
.gh-vps-bih__links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; }
.gh-vps-bih__links a { display: inline-flex; align-items: center; gap: 6px; color: var(--gh-red-soft); font-size: var(--gh-fs-sm); font-weight: 700; text-decoration: none; }
.gh-vps-bih__links a:hover { color: #fff; }
.gh-vps-bih__links a:focus-visible { outline: 3px solid var(--gh-focus); outline-offset: 2px; border-radius: 4px; }

.gh-vps-map {
  position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 22px; padding: 28px;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.gh-vps-map::before {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(60% 45% at 100% 0%, rgba(124, 140, 255, .16), transparent 70%), radial-gradient(50% 40% at 0% 100%, rgba(187, 52, 55, .14), transparent 70%);
}
.gh-vps-region__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin: 0 0 12px; }
.gh-vps-region__label { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: var(--gh-fs-md); font-weight: 800; letter-spacing: -.01em; }
.gh-vps-region__label .gh-icon { color: var(--gh-indigo); }
.gh-vps-region__meta { padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .07); color: var(--gh-on-dark-muted); font-size: .75rem; font-weight: 700; }
.gh-vps-locs { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.gh-vps-loc { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.gh-vps-loc__code { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 42px; height: 42px; border-radius: 11px; background: rgba(124, 140, 255, .16); color: #D5DBFF; font-size: .8125rem; font-weight: 800; letter-spacing: .06em; }
.gh-vps-loc__text { min-width: 0; }
.gh-vps-loc__text strong { display: block; color: #fff; font-size: .9375rem; font-weight: 800; line-height: 1.3; }
.gh-vps-loc__text small { display: block; color: var(--gh-on-dark-muted); font-size: .8125rem; line-height: 1.4; }
.gh-vps-loc__tag { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-left: auto; padding: 5px 10px; border-radius: 999px; background: rgba(74, 222, 155, .12); color: var(--gh-success-on-dark); font-size: .75rem; font-weight: 700; white-space: nowrap; }
.gh-vps-map__foot { margin: 0; color: var(--gh-on-dark-subtle); font-size: var(--gh-fs-xs); }
@media (max-width: 640px) {
  .gh-vps-map { padding: 20px 16px; border-radius: 20px; }
  .gh-vps-loc { gap: 12px; padding: 10px 12px; }
  .gh-vps-loc__code { width: 38px; height: 38px; }
  .gh-vps-bih { padding: 18px; }
}

/* ==========================================================================
   Operating systems + order configuration mock
   ========================================================================== */
.gh-vps-os .gh-section-head { margin-bottom: 28px; }
.gh-vps-oslist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.gh-vps-oslist__item {
  display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px;
  background: #fff; border: 1px solid var(--gh-line); border-radius: 14px; box-shadow: var(--gh-shadow-xs);
  color: var(--gh-ink); font-size: .875rem; font-weight: 700; line-height: 1.25; white-space: nowrap;
}
.gh-vps-oslist__mono { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--gh-navy-900); color: #fff; font-size: .9375rem; font-weight: 800; }
.gh-vps-oslist__item:nth-child(3n+2) .gh-vps-oslist__mono { background: var(--gh-red); }
.gh-vps-oslist__item:nth-child(3n) .gh-vps-oslist__mono { background: var(--gh-navy-600); }
.gh-vps-os__key { display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 0; padding: 16px 18px; border-radius: 14px; background: var(--gh-bg-alt); border: 1px dashed var(--gh-line-strong); color: var(--gh-text); font-size: .9375rem; line-height: 1.55; }
.gh-vps-os__key > .gh-icon { flex: none; margin-top: 1px; color: var(--gh-red); }
.gh-vps-os__key strong { color: var(--gh-ink); }
.gh-vps-os__key a { color: var(--gh-red); font-weight: 700; white-space: nowrap; }
@media (max-width: 1100px) { .gh-vps-oslist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gh-vps-oslist__item { white-space: normal; } }
@media (max-width: 640px) { .gh-vps-config { display: none; } }

/* Features: compact icon-left rows on phones (8 tiles) */
@media (max-width: 640px) {
  .gh-vps-features .gh-feature { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 20px 18px; }
  .gh-vps-features .gh-feature__icon { grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0; border-radius: 12px; }
  .gh-vps-features .gh-feature__title { margin-bottom: 4px; font-size: 1.0625rem; }
  .gh-vps-features .gh-feature__text { font-size: .875rem; line-height: 1.55; }
  .gh-vps-features .gh-feature__link { margin-top: 8px; }
}

.gh-vps-config .gh-mock__body { padding: 20px 22px 22px; }
.gh-vps-config__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gh-vps-config__title { color: var(--gh-ink); font-size: 1rem; font-weight: 800; letter-spacing: -.01em; }
.gh-vps-config__field { display: grid; gap: 6px; padding: 8px 0; }
.gh-vps-config__label { display: flex; justify-content: space-between; gap: 8px; color: var(--gh-muted); font-size: .75rem; font-weight: 700; }
.gh-vps-config__label em { font-style: normal; font-weight: 600; color: var(--gh-muted); }
.gh-vps-config__control {
  display: flex; align-items: center; gap: 8px; min-width: 0; height: 42px; padding: 0 12px;
  border: 1px solid var(--gh-line-strong); border-radius: 10px; background: #fff;
  color: var(--gh-ink); font-size: .875rem; font-weight: 700;
}
.gh-vps-config__control > .gh-icon { color: var(--gh-muted); }
.gh-vps-config__chev { margin-left: auto; color: var(--gh-muted); }
.gh-vps-config__control--qty { justify-content: space-between; width: 140px; padding: 0 6px; }
.gh-vps-config__control--qty b { font-weight: 800; }
.gh-vps-config__step { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--gh-bg-soft); color: var(--gh-ink); font-weight: 800; }
.gh-vps-config__control--key { display: block; height: auto; padding: 10px 12px; overflow: hidden; color: var(--gh-muted); font: 500 .75rem/1.5 var(--gh-vps-mono); white-space: nowrap; text-overflow: ellipsis; background: var(--gh-bg-alt); }
.gh-vps-config__total { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--gh-line); }
.gh-vps-config__total span { color: var(--gh-ink); font-size: .875rem; font-weight: 800; }
.gh-vps-config__total small { display: block; color: var(--gh-muted); font-size: .75rem; font-weight: 600; }
.gh-vps-config__total strong { color: var(--gh-ink); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }

/* ==========================================================================
   VPS or web hosting (two choice cards)
   ========================================================================== */
.gh-vps-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1040px; margin: 0 auto; }
.gh-vps-choice {
  display: flex; flex-direction: column; min-width: 0; padding: clamp(26px, 3vw, 36px);
  background: #fff; border: 1px solid var(--gh-line); border-radius: 24px; box-shadow: var(--gh-shadow-sm);
}
.gh-vps-choice__top { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.gh-vps-choice__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 50px; height: 50px; border-radius: 14px; background: var(--gh-red-50); color: var(--gh-red); }
.gh-vps-choice__kicker { margin: 0; color: var(--gh-red); font-size: var(--gh-fs-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gh-vps-choice__title { margin: 0; color: var(--gh-ink); font-size: clamp(1.5rem, 1.3rem + .6vw, 1.875rem); font-weight: 800; letter-spacing: -.025em; }
.gh-vps-choice__text { margin: 10px 0 22px; color: var(--gh-muted); font-size: var(--gh-fs-md); line-height: 1.65; }
.gh-vps-choice .gh-checklist { margin-bottom: 28px; }
.gh-vps-choice__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-top: auto; padding-top: 22px; border-top: 1px solid var(--gh-line); }
.gh-vps-choice__price { margin: 0; color: var(--gh-muted); font-size: var(--gh-fs-sm); font-weight: 600; }
.gh-vps-choice__price strong { color: var(--gh-ink); font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; }

.gh-vps-choice--vps {
  background: radial-gradient(90% 60% at 100% 0%, rgba(124, 140, 255, .22), transparent 60%), radial-gradient(80% 50% at 0% 100%, rgba(187, 52, 55, .28), transparent 60%), var(--gh-navy-900);
  border-color: var(--gh-navy-900); box-shadow: var(--gh-shadow-lg);
}
.gh-vps-choice--vps .gh-vps-choice__icon { background: rgba(187, 52, 55, .22); color: var(--gh-red-soft); }
.gh-vps-choice--vps .gh-vps-choice__kicker { color: var(--gh-red-soft); }
.gh-vps-choice--vps .gh-vps-choice__title { color: #fff; }
.gh-vps-choice--vps .gh-vps-choice__text, .gh-vps-choice--vps .gh-vps-choice__price { color: var(--gh-on-dark-muted); }
.gh-vps-choice--vps .gh-vps-choice__price strong { color: #fff; }
.gh-vps-choice--vps .gh-vps-choice__foot { border-top-color: rgba(255, 255, 255, .12); }
@media (max-width: 860px) { .gh-vps-choose { grid-template-columns: 1fr; max-width: 560px; } }
@media (max-width: 640px) { .gh-vps-choice__foot .gh-btn { flex: 1 1 100%; } }

/* ==========================================================================
   FAQ extras
   ========================================================================== */
.gh-vps-faq-ticket { margin: 18px 0 0; }
.gh-page-vps .gh-faq__a code { padding: 2px 6px; border-radius: 6px; background: var(--gh-bg-soft); color: var(--gh-ink); font: 600 .875em/1.4 var(--gh-vps-mono); }