/* vpsguru — курируемая подборка. Светлая тема, карточки, фиолетовый акцент. */

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

:root {
  --bg:    #f6f5fb;
  --card:  #ffffff;
  --ink:   #1e1b2e;
  --mut:   #655f7d;
  --line:  #e4e1f0;
  --line2: #cfcae4;
  --vio:   #7c4dd6;
  --vio2:  #5f34b3;
  --soft:  #efe9fd;
  --ok:    #2f9e6b;
  --warn:  #9a5b06;
  --max:   1400px;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
.vg-wrap { max-width: var(--max); margin: 0 auto; padding: 0 26px; }
.vg-h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }

/* ── Приватный режим ─────────────────────────────────────── */
.vg-private {
  background: var(--warn); color: #fff; text-align: center;
  font-size: 13px; font-weight: 700; padding: 7px 12px;
}

/* ── Шапка ───────────────────────────────────────────────── */
.vg-hd { background: #fff; border-bottom: 1px solid var(--line); }
.vg-hd__in { display: flex; align-items: center; gap: 30px; min-height: 66px; }

.vg-lg { display: flex; align-items: center; gap: 9px; flex: none; }
.vg-lg__m { width: 28px; height: 28px; border-radius: 9px; }
.vg-lg__t { font-weight: 800; font-size: 20px; letter-spacing: -.02em; }

.vg-nav { flex: 1; min-width: 0; }
.vg-nav ul { display: flex; gap: 22px; flex-wrap: wrap; }
.vg-nav a { font-size: 15px; font-weight: 600; color: var(--mut); white-space: nowrap; }
.vg-nav a:hover, .vg-nav .current-menu-item > a { color: var(--vio); }

.vg-hd__ds { margin-left: auto; flex: none; font-size: 13px; color: var(--mut); }

.vg-burger { display: none; background: 0; border: 0; padding: 10px 0 10px 12px; cursor: pointer; }
.vg-burger span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 4px 0; border-radius: 2px; }

/* ── Хлебные крошки ──────────────────────────────────────── */
.vg-bc { background: #fff; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.vg-bc .vg-wrap { padding-top: 11px; padding-bottom: 11px; }
.vg-bc a { color: var(--mut); }
.vg-bc a:hover { color: var(--vio); }
.vg-bc__sep { color: var(--line2); margin: 0 8px; }
.vg-bc__cur { color: var(--ink); font-weight: 600; }

/* ── Первый экран ────────────────────────────────────────── */
.vg-hero { padding: 46px 0 34px; }
.vg-hero--sub { padding: 34px 0 26px; }
.vg-hero h1 { font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -.022em; max-width: 21ch; margin-bottom: 12px; }
.vg-lead { color: var(--mut); max-width: 68ch; font-size: 17px; }

.vg-stats { display: flex; gap: 14px; margin-top: 24px; flex-wrap: wrap; }
.vg-stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 20px; }
.vg-stat b { display: block; font-size: 24px; font-weight: 800; line-height: 1.15; }
.vg-stat span { font-size: 12.5px; color: var(--mut); }

/* ── Разделы ─────────────────────────────────────────────── */
.vg-secs { padding: 8px 0 20px; }
.vg-secs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.vg-secs__c {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center;
}
.vg-secs__c:hover { border-color: var(--vio); background: var(--soft); }
.vg-secs__n { font-size: 16px; font-weight: 800; }
.vg-secs__m { grid-column: 1; font-size: 13px; color: var(--mut); }
.vg-secs__a { grid-row: 1 / span 2; grid-column: 2; color: var(--vio); font-size: 20px; font-weight: 800; }

/* ── Управление списком ──────────────────────────────────── */
.vg-list { padding-top: 14px; }
.vg-ctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.vg-ctl__found { font-size: 14px; color: var(--mut); }
.vg-ctl__found b { color: var(--ink); font-weight: 800; }
.vg-ctl__chips { display: flex; gap: 7px; flex-wrap: wrap; }
.vg-ctl__sort { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; }

.vg-fc, .vg-sc {
  border: 1px solid var(--line2); background: #fff; color: var(--mut);
  font: 600 13.5px 'Nunito', sans-serif; padding: 7px 14px; border-radius: 20px; cursor: pointer;
}
.vg-fc:hover, .vg-sc:hover { border-color: var(--vio); color: var(--vio); }
.vg-fc.is-on, .vg-sc.is-on { background: var(--vio); border-color: var(--vio); color: #fff; }
.vg-fc i { font-style: normal; opacity: .6; margin-left: 3px; font-size: 12px; }

/* ── Сетка карточек ──────────────────────────────────────── */
.vg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding-bottom: 12px; }
.vg-empty { padding: 26px 0; color: var(--mut); }

.vg-cd {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column;
}
.vg-cd--top { border-color: var(--vio); box-shadow: 0 0 0 3px var(--soft); }
.vg-cd[hidden] { display: none; }

.vg-cd__top { display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: center; margin-bottom: 11px; }
.vg-cd__rank {
  width: 34px; height: 34px; border-radius: 11px; background: var(--soft); color: var(--vio);
  display: grid; place-items: center; font-weight: 800; font-size: 15px;
}
.vg-cd--top .vg-cd__rank { background: var(--vio); color: #fff; }
.vg-cd__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vg-cd__logo {
  width: 34px; height: 34px; flex: none; border: 1px solid var(--line); border-radius: 9px;
  background: #fff; display: grid; place-items: center; font-weight: 800; color: var(--mut); font-size: 15px;
}
.vg-cd__logo--img { padding: 4px; }
.vg-cd__logo img { width: 100%; height: 100%; object-fit: contain; }
.vg-cd__name { font-weight: 800; font-size: 17.5px; display: block; }
.vg-cd__name:hover { color: var(--vio); }
.vg-cd__badge { font-size: 11.5px; font-weight: 700; color: var(--vio); background: var(--soft); padding: 1px 8px; border-radius: 8px; }
.vg-cd__score { font-weight: 800; font-size: 17px; color: var(--ok); }

.vg-cd__why { font-size: 14.5px; color: var(--mut); margin-bottom: 12px; }
.vg-cd__pros { display: grid; gap: 6px; margin-bottom: 12px; }
.vg-cd__pros li { font-size: 14.5px; padding-left: 22px; position: relative; }
.vg-cd__pros li::before { content: '✓'; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.vg-cd__tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.vg-cd__act { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }

.vg-chip { font-size: 12px; background: var(--bg); border: 1px solid var(--line); color: var(--mut); padding: 2px 9px; border-radius: 10px; }
.vg-chip--l:hover { border-color: var(--vio); color: var(--vio); }

.vg-btn {
  display: block; text-align: center; padding: 10px 12px; border-radius: 11px;
  background: var(--vio); color: #fff; font-weight: 700; font-size: 14.5px; border: 1px solid var(--vio);
}
.vg-btn:hover { background: var(--vio2); border-color: var(--vio2); }
.vg-btn--g { background: #fff; border-color: var(--line2); color: var(--mut); }
.vg-btn--g:hover { background: var(--soft); border-color: var(--vio); color: var(--vio); }
.vg-btn--wide { width: 100%; padding: 12px; font-size: 15px; }

/* ── Нижний блок: «коротко» + текст ──────────────────────── */
.vg-info { background: #fff; border-top: 1px solid var(--line); margin-top: 30px; }
.vg-info__in { padding-top: 40px; padding-bottom: 42px; }

.vg-info__text { max-width: none; }
.vg-prose > * { max-width: none; }
.vg-prose { }
.vg-prose h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.vg-prose h3 { font-size: 17.5px; font-weight: 800; margin: 26px 0 8px; }
.vg-prose p { margin: 0 0 13px; color: #35304a; }
.vg-prose ul, .vg-prose ol { margin: 0 0 14px; padding-left: 20px; }
.vg-prose li { margin-bottom: 6px; color: #35304a; list-style: disc; }
.vg-prose ol li { list-style: decimal; }
.vg-prose a { color: var(--vio); border-bottom: 1px solid rgba(124,77,214,.35); }

/* ── FAQ: сетка во всю ширину ────────────────────────────── */
.vg-faq { background: var(--bg); border-top: 1px solid var(--line); padding: 38px 0 42px; }
.vg-faq__top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.vg-faq__cnt { font-size: 13.5px; color: var(--mut); }
.vg-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.vg-faq__i {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  align-self: start;
}
.vg-faq__i summary { cursor: pointer; padding: 15px 44px 15px 18px; position: relative; list-style: none; }
.vg-faq__i summary::-webkit-details-marker { display: none; }
.vg-faq__q { font-size: 15px; font-weight: 700; }
.vg-faq__i summary::after {
  content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 8px; background: var(--soft); color: var(--vio);
  font-size: 17px; font-weight: 700; display: grid; place-items: center;
}
.vg-faq__i[open] summary::after { content: '−'; background: var(--vio); color: #fff; }
.vg-faq__i[open] { border-color: var(--vio); }
.vg-faq__a { padding: 0 18px 16px; font-size: 14.5px; color: var(--mut); line-height: 1.6; }

/* ── Индекс подборок: колонки по разделам ────────────────── */
.vg-tags { padding: 36px 0 54px; }
.vg-tags__top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.vg-tags__cnt { font-size: 13.5px; color: var(--mut); }
.vg-tags__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; }
.vg-tags__cols--one { grid-template-columns: 1fr; }
.vg-tags__col { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.vg-tags__gh { font-size: 14.5px; font-weight: 800; margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px; }
.vg-tags__gh i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--vio); background: var(--soft); padding: 1px 7px; border-radius: 8px; }
.vg-tags__list { display: grid; gap: 2px; }
.vg-tags__cols--one .vg-tags__list { grid-template-columns: repeat(4, 1fr); gap: 2px 14px; }
.vg-tags__list a { display: block; padding: 5px 0; font-size: 14px; color: var(--mut); border-bottom: 1px dashed transparent; }
.vg-tags__list a:hover { color: var(--vio); border-bottom-color: rgba(124,77,214,.4); }
.vg-tags__list a.is-cur { color: var(--vio); font-weight: 700; }
.vg-tags__more { margin-top: 8px; }
.vg-tags__more summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--vio); list-style: none; padding: 6px 0; }
.vg-tags__more summary::-webkit-details-marker { display: none; }
.vg-tags__more[open] summary { margin-bottom: 4px; }

/* ── Карточка провайдера ─────────────────────────────────── */
.vg-pv { padding: 26px 0 50px; }
.vg-pv__hd {
  display: grid; grid-template-columns: 64px minmax(0,1fr) 300px; gap: 20px;
  align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px;
}
.vg-pv__logo {
  width: 64px; height: 64px; border: 1px solid var(--line); border-radius: 14px; background: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 26px; color: var(--mut);
}
.vg-pv__logo--img { padding: 8px; }
.vg-pv__logo img { width: 100%; height: 100%; object-fit: contain; }
.vg-pv__t h1 { font-size: 27px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 8px; }
.vg-pv__why { color: var(--mut); font-size: 15.5px; margin-bottom: 10px; }
.vg-pv__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vg-pv__box { background: var(--soft); border-radius: 14px; padding: 18px; text-align: center; }
.vg-pv__score b { display: block; font-size: 34px; font-weight: 800; color: var(--vio); line-height: 1; }
.vg-pv__score span { font-size: 12.5px; color: var(--mut); }
.vg-pv__pos { font-size: 13px; color: var(--mut); margin: 8px 0 12px; }
.vg-pv__note { font-size: 11.5px; color: var(--mut); margin-top: 9px; line-height: 1.45; }

.vg-pv__pros { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; }
.vg-pv__pros li {
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 15px;
  font-size: 14.5px; padding-left: 34px; position: relative;
}
.vg-pv__pros li::before { content: '✓'; position: absolute; left: 14px; color: var(--ok); font-weight: 800; }

.vg-pv__body { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 24px; margin-top: 20px; align-items: start; }
.vg-pv__main { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 24px; }

.vg-spec { width: 100%; border-collapse: collapse; margin-bottom: 26px; }
.vg-spec th, .vg-spec td { border-bottom: 1px solid var(--line); padding: 10px 0; text-align: left; font-size: 14.5px; vertical-align: top; }
.vg-spec th { font-weight: 600; color: var(--mut); width: 44%; }
.vg-spec td { font-weight: 700; }
.vg-spec a { color: var(--vio); }
.vg-yes { color: var(--ok); font-weight: 800; }
.vg-no { color: var(--line2); font-weight: 600; }

.vg-pv__side { position: sticky; top: 16px; }
.vg-rel { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; }
.vg-rel h3 { font-size: 15px; font-weight: 800; margin-bottom: 12px; }
.vg-rel__i { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.vg-rel__i:last-child { border-bottom: 0; }
.vg-rel__logo { width: 30px; height: 30px; flex: none; border: 1px solid var(--line); border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: var(--mut); }
.vg-rel__logo--img { padding: 3px; }
.vg-rel__logo img { width: 100%; height: 100%; object-fit: contain; }
.vg-rel__i b { display: block; font-size: 14px; font-weight: 700; }
.vg-rel__i i { font-style: normal; font-size: 12px; color: var(--mut); }
.vg-rel__i:hover b { color: var(--vio); }

/* ── Обычная страница и 404 ──────────────────────────────── */
.vg-page { padding: 30px 0 56px; }
.vg-page__in { max-width: 900px; }
.vg-page h1 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 16px; }
.vg-404 { padding: 60px 0 80px; }
.vg-404 h1 { font-size: 30px; font-weight: 800; margin-bottom: 10px; }
.vg-404__links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.vg-404__links .vg-btn { padding: 10px 18px; }

/* ── Подвал ──────────────────────────────────────────────── */
.vg-ft { background: #fff; border-top: 1px solid var(--line); padding: 34px 0 0; margin-top: auto; }
.vg-ft__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 36px; padding-bottom: 28px; }
.vg-ft__col h4 { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin-bottom: 12px; }
.vg-ft__col ul li, .vg-ft .vg-fnav li { margin-bottom: 8px; }
.vg-ft__col a { color: var(--mut); font-size: 14.5px; }
.vg-ft__col a:hover { color: var(--vio); }
.vg-ft__note { font-size: 14px; line-height: 1.55; margin-top: 12px; max-width: 52ch; color: var(--mut); }
.vg-ft__bottom {
  border-top: 1px solid var(--line); padding-top: 16px; padding-bottom: 22px;
  display: flex; gap: 16px; justify-content: space-between; font-size: 13px; color: var(--mut); flex-wrap: wrap;
}

/* ── Адаптив ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .vg-grid { grid-template-columns: repeat(2, 1fr); }
  .vg-secs__grid { grid-template-columns: repeat(2, 1fr); }
  .vg-tags__cols { grid-template-columns: repeat(2, 1fr); }
  .vg-tags__cols--one .vg-tags__list { grid-template-columns: repeat(3, 1fr); }
  .vg-pv__hd { grid-template-columns: 56px minmax(0,1fr); }
  .vg-pv__box { grid-column: 1 / -1; text-align: left; display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center; }
  .vg-pv__note { grid-column: 1 / -1; margin: 0; }
  .vg-pv__body { grid-template-columns: 1fr; }
  .vg-pv__side { position: static; }
}

@media (max-width: 900px) {
  .vg-hd__ds { display: none; }
  .vg-burger { display: block; margin-left: auto; }
  .vg-nav { display: none; flex-basis: 100%; order: 3; }
  .vg-nav.is-open { display: block; padding-bottom: 14px; }
  .vg-nav ul { flex-direction: column; gap: 0; }
  .vg-nav li { border-top: 1px solid var(--line); }
  .vg-nav a { display: block; padding: 12px 0; font-size: 15.5px; }

  .vg-hero h1 { font-size: 28px; max-width: none; }
  .vg-hero { padding: 30px 0 24px; }
  .vg-ctl__sort { margin-left: 0; width: 100%; }
  .vg-faq__grid { grid-template-columns: 1fr; }
  .vg-tags__cols--one .vg-tags__list { grid-template-columns: repeat(2, 1fr); }
  .vg-ft__grid { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 640px) {
  .vg-wrap { padding: 0 14px; }
  .vg-grid { grid-template-columns: 1fr; }
  .vg-secs__grid { grid-template-columns: 1fr; }
  .vg-hero h1 { font-size: 24px; }
  .vg-stat { flex: 1 1 42%; padding: 10px 14px; }
  .vg-stat b { font-size: 20px; }
  .vg-pv__main { padding: 16px; }
  .vg-spec th { width: 50%; }
  .vg-pv__box { grid-template-columns: 1fr; text-align: center; }
  .vg-tags__cols { grid-template-columns: 1fr; }
  .vg-tags__cols--one .vg-tags__list { grid-template-columns: 1fr; }
  .vg-pv__pros li { width: 100%; }
}